Design insights & tutorials.

A Pseudo-Sugar Skull: From Start to Finish.

Turquoise Flag-Tip

sugarskull_finalimage_web.jpg

Hey people! It’s Dave again giving you all yet another excuse to get your knowledge on. This isn’t as direct as my previous Gigposter Tutorial (by the way – thanks to everyone who found that helpful!) because I’m actually covering a piece of my own artwork, and as we all know, there are just some things that are hard to explain during the process. Hence why I’m condensing it down to the nitty gritty. Kinda like a walk through my process if you will.

Oh, I almost forgot! I STRONGLY suggest you guys read our previous tutorials that deal with “start to finish” subject matter, especially anything involving Illustrator. If I re-wrote how to do everything we’ve already covered in previous tutorials in this one, I’d be up way past my non-existent bedtime. Now let’s start!

First I drew a half of a skull. Why half do you ask? Because we’ll be inking the outlines in Illustrator. Why do more work for yourself when you can just flip half of what you’ve already traced, connect them, and then run with it? Then I scanned it in.

First Sketch
scanned

I opened Illustrator and placed the image in a new file (once the new file’s been created – go to file, then place and browse for your image). I enlarged it to my liking, turned the opacity down, and locked into place.

placed1.jpg
opacity1.jpg
locked1.jpg

Alright, now I began to trace out the half of the skull. I kept the skull outline and eyes in black and made the teeth and nose in separate colors. This way I can edit them in case they don’t merge properly (which happens alot when I do skulls). If you’re lost as to how inking is done in Illustrator – we have a tutorial all about it here. Once everything lined up good and looked nice, I added them together then unlocked and ditched the placed file/ I was left with a clean outline.

inkedhalf.jpg
inkedwhole.jpg
inkedclean.jpg

Now I wanted to add some decorations to the skull. I was feeling like adding some tattoo-esque flourishes around the contour of the skull. So I grabbed some I had made from the upcoming Set 10 VectorPack release and carefully placed them in neat spots all around our skull’s face until I was satisfied.

decalsplaced.jpg

So I go into Photoshop, and start a new file. The size I used was 4×6 @ 300 dpi. I made the background a muted pinkish/red so the coloring I’ll be doing won’t be obstructed by loud-ass background colors. I pasted the outline of the skull into the piece as a vector smart object (copy and paste from Illustrator) and used the magic wand tool to make the selections of the portions that I wanted to color. Mind you, I kept the coloring done on layers I made below the inked outline. You never know when you can fumble up, so always keep your layers separate. In this case, I used a layer for the color of the skull and it’s teeth. HINT: If you encounter weird lines bordering your inked layers and your colored layers – try expanding the selection you made with the magic wand about 2-3 pixels. This way the color will bleed beyond the lines and look alot cleaner when sitting below the inked layer.

placedandcolored.jpg

Now with these layers separated, I ctrl+clicked the thumbnail in the layers box to make the entire contents of the layer a selection (keeps myself from coloring outside the lines), grabbed my wacom tablet (a mouse will suffice, we’re only airbrushing minimally), selected the airbrush tool, used a blurred edged brush at anywhere from 70 pixels to 170 pixels and went to town! I added shadows and I added highlights. Getting these exact results is hard because everyone colors differently, BUT YOU MUST KEEP THE FLOW DOWN ON YOUR BRUSH OPTIONS AND MAKE SURE YOU’RE NOT GOING PAST 30-40% OPACITY. This is crucial because it lets you gradually see the darkness as you apply brush strokes and make it feel real.

placedandcolored.jpg
colored-complete.jpg

I wanted to add texture at this point, so I opened a concrete image that i liked from our Texture Packs and dragged it over to the piece we’re working on (keep it below the inked layer so you can see what you’re doing. I moved it and sized it to where there wouldn’t be too many blemishes in the skull’s face from the concrete. I used the magic wand to select everything outside of the skull on the inked smart object’s layer, expanded the selection about 3 pixels, and deleted the excess off of the concrete photo’s layer.

concrete.jpg
concreteisolated.jpg

As you see in the last image I posted, I toned the opacity down a bit. But with this next image, I played with the layer mode and the one that suited my fancy was Linear Burn at 36% opacity. It burned the skull enough to give it a weathered feel but not over done.

colored-complete-2.jpg

I made a new layer, added some white for highlights in certain portions of the skull, and changed the layer mode to soft light @ 100%.

colored-complete-3.jpg

Now it was time to add the tattoo flourishes. I pasted them in, sized them according to the AI file’s placement, cut the excess off the same way I did with the concrete, and changed the layer mode to Multiply @ 70%.

decalled.jpg
decalled2.jpg

So now, I added some eyes to it from our Anatomy pack, colored them in, added a tint of red around the edges to make it look realistic and we have this result: The Finished Skull!

decalled3.jpg

So now to the background. I chose one of the watercolor textures from The Arsenal, a paper texture from Stock Exchange, we doctored up the solid background layer with some funky greens and we got to playing with the layer modes. The watercolor texture’s coloring was changed to a more blue-friendly scheme with the hue/saturation tool. I layered it in Multiply mode @ 100%. I slapped the paper texture over that because it wasn’t quite doing the trick alone and layered it also in Multiply mode @ 100%.

background.jpg
background1.jpg
background1half.jpg
background2.jpg

Combined result with the aforementioned layer modes (sans paper)

background3.jpg

And with a few more doodads in the background and skull, the paper added to the background, and the airbrushed layer brightened…

backgroundalmost4.jpg

we have…….

sugarskull_finalimage_web.jpg

About the Author, Dave

Dave is Go Media's hell raising wild child. Illustration and petrified whale bone are the two things this guy lives for... next to barbacoa tacos and fried plantains. When he's not gently tapping and stroking the surface of his wacom with his stylus... he's relaxing to some contemporary jazz. More than likely illustrating some vomiting skulls in fitted caps, half-naked zombie women with dookie rope chains, or demon toddlers chugging tequila on their big wheels.
Discover More by Dave

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • http://gautch.com Gautch

    Oooooh. Pretty!

  • http://gautch.com Gautch

    Oooooh. Pretty!

  • http://adrianpatino.com Adrian

    Great tutorial. I really like the feel that the textures gives to the illustration. I have also created a sugar skull illustration, but I did it completely on paper and then traced with illustrator.
    This tutorial really got me thinking about adding textures more often when creating illustrations.
    Thanks

  • http://adrianpatino.com Adrian

    Great tutorial. I really like the feel that the textures gives to the illustration. I have also created a sugar skull illustration, but I did it completely on paper and then traced with illustrator.
    This tutorial really got me thinking about adding textures more often when creating illustrations.
    Thanks

  • http://www.blogthememachine.com Mike Smith

    This is an awesome tutorial. I am definitely going to try this out with a few different things.

  • http://www.blogthememachine.com Mike Smith

    This is an awesome tutorial. I am definitely going to try this out with a few different things.

  • Chris B

    Wow is all i can say…. i am going to try this out as soon as i get off of work hehe.
    Great job!

  • Chris B

    Wow is all i can say…. i am going to try this out as soon as i get off of work hehe.
    Great job!

  • Tobe

    Great tutorial, and fantastic illustration! Very inspiring.

  • Tobe

    Great tutorial, and fantastic illustration! Very inspiring.

  • http://www.freerangeduck.com Stuart

    Excellent work!

    one point…

    “This is crucial because it lets you gradually see the darkness ‘ass’ you apply brush strokes”

    really? :)

  • http://www.freerangeduck.com Stuart

    Excellent work!

    one point…

    “This is crucial because it lets you gradually see the darkness ‘ass’ you apply brush strokes”

    really? :)

  • http://www.avangelistdesign.com Avangelist

    I still haven’t grasped Illustrator, but it seems more and more apparent that the only good thing it is for is tracing scans and building wireframing?

  • http://www.avangelistdesign.com Avangelist

    Are there any good books on Illustrator’s CS series?

  • http://www.avangelistdesign.com Avangelist

    I still haven’t grasped Illustrator, but it seems more and more apparent that the only good thing it is for is tracing scans and building wireframing?

  • http://www.avangelistdesign.com Avangelist

    Are there any good books on Illustrator’s CS series?

  • http://www.gomedia.us Dave

    Yeah, I gotta edit some of this stuff. I wrote this on turbo-mode yesterday and as the day dwindles to a stop, I just kept going and noticed some fumble ups.

    I’ll get to this ‘Ass” soon as possible. Haha.

  • http://www.gomedia.us Dave

    Yeah, I gotta edit some of this stuff. I wrote this on turbo-mode yesterday and as the day dwindles to a stop, I just kept going and noticed some fumble ups.

    I’ll get to this ‘Ass” soon as possible. Haha.

  • Leonie

    Yes! That’s great, very inspiring. I am always keen to read about Illustrator/Photoshop crossovers. Thanks :)

  • craig

    wow! great tut,I have been struggling to get consistant line weight , making it look smooth. I took your advice and went back to read the tut on outlining your sketch. The one huge minor detail i missed was the “clicking on the point you just created to get rid of the breziar handil. that was killing me for so long. I would compromise my design because i couldn’t get consistent line weight and shape. THANK YOU SO MUCH FOR THAT. I really admire go medias work and really enjoy eveything you guys offer to the design community. In the old days of design nobody wanted to share there techniques and processes. You guys have given me skills that the 4 year design school i went to didn’t. Thanks again, and keep up the great work!

  • craig

    wow! great tut,I have been struggling to get consistant line weight , making it look smooth. I took your advice and went back to read the tut on outlining your sketch. The one huge minor detail i missed was the “clicking on the point you just created to get rid of the breziar handil. that was killing me for so long. I would compromise my design because i couldn’t get consistent line weight and shape. THANK YOU SO MUCH FOR THAT. I really admire go medias work and really enjoy eveything you guys offer to the design community. In the old days of design nobody wanted to share there techniques and processes. You guys have given me skills that the 4 year design school i went to didn’t. Thanks again, and keep up the great work!

  • Leslie

    Really cool, but I thinks it looked better without the eyes.

  • Leslie

    Really cool, but I thinks it looked better without the eyes.

  • http://www.gomedia.us Kim

    Don’t worry Dave, I just looked through your post really quickly and did some small edits. Should be good to go now!

  • http://www.gomedia.us Kim

    Don’t worry Dave, I just looked through your post really quickly and did some small edits. Should be good to go now!

  • Leonie

    Yes! That’s great, very inspiring. I am always keen to read about Illustrator/Photoshop crossovers. Thanks :)

  • Clara

    Wow – so cool! Thanks for taking the time to show us how you did this!

  • Clara

    Wow – so cool! Thanks for taking the time to show us how you did this!

  • Jorge

    excelente este tutorial maestro, me encaanto cada dia aprendo mas y estoy con muchas ganas de ponerlo en practica.

  • Jorge

    excelente este tutorial maestro, me encaanto cada dia aprendo mas y estoy con muchas ganas de ponerlo en practica.

  • aris

    great job…
    awesome tutorial

  • aris

    great job…
    awesome tutorial

  • http://sabasdesign.com msabas

    Great Tutorial, I say just as great as the gig poster.

  • http://sabasdesign.com msabas

    Great Tutorial, I say just as great as the gig poster.

  • http://www.layeredtech.com Matt

    What type of stroke are you using for your outline of the skull, eyes, eyebrows etc. ? Doesn’t look like a solid stroke?

  • http://www.layeredtech.com Matt

    What type of stroke are you using for your outline of the skull, eyes, eyebrows etc. ? Doesn’t look like a solid stroke?

  • fungusmungus

    That’s awesome!!! Another great tutorial, you guys are rocking!!!

  • fungusmungus

    That’s awesome!!! Another great tutorial, you guys are rocking!!!

  • http://think2torials.com/ Photoshop Free Tutorials

    Amazing tutorial guys ! :)

  • http://think2torials.com/ Photoshop Free Tutorials

    Amazing tutorial guys ! :)

  • Gluckyboy

    Great!!!

  • Gluckyboy

    Great!!!

  • marrie1129

    so good,also i knew the methoes of these turious,but still very thank you

  • marrie1129

    so good,also i knew the methoes of these turious,but still very thank you

  • Nacho

    Very good !!!
    Thank you

  • Nacho

    Very good !!!
    Thank you

  • Pingback: Top 10 Sites for Illustrator Tutorials | Vandelay Website Design

  • http://www.affiliate-marketing101.com/ Kevin from Affiliate Marketing

    Thank you for the tutorial. It may come in handy when designing certain aspects of my site

  • http://www.affiliate-marketing101.com/ Kevin from Affiliate Marketing Help 101

    Thank you for the tutorial. It may come in handy when designing certain aspects of my site

  • Pingback: 25 Amazing Photoshop Drawing Tutorials - psdfan.com -

  • Pingback: Webclave.com » Blog Archive » Los mejores tutoriales de Illustrator por smashingmagazine.com

  • http://pica-ae.deviantart.com pica

    lol… to use a dirty wall as texture for the skull is just brilliant!
    it looks and fits perfect!

  • http://pica-ae.deviantart.com pica

    lol… to use a dirty wall as texture for the skull is just brilliant!
    it looks and fits perfect!

  • Pingback: Adobe Ilustrator Tutorial | Tech User, Blogger and Designers References

  • Pingback: 20 Exceptional Websites for Learning Adobe Illustrator - Six Revisions

  • ankit

    it was awesome…… thak u

  • ankit

    it was awesome…… thak u

  • Pingback: 40 Challenging and Incredible Vector Illustration Tutorials - VECTORTUTS

  • A.Rose

    Why do people put eyeballs on skulls?? I think they look so cheezy & stupid, otherwise love what you have done………..

  • A.Rose

    Why do people put eyeballs on skulls?? I think they look so cheezy & stupid, otherwise love what you have done………..

  • brittney

    i love your illustration and i hope you dont mind me using it for a spanish project were i have to create an altar for Dia de los Muertos…..thankyou very much

  • brittney

    i love your illustration and i hope you dont mind me using it for a spanish project were i have to create an altar for Dia de los Muertos…..thankyou very much

  • Pingback: 40+ Illustration Vektor Dersleri | Batuhan Bulak

  • Pingback: Pushing Photoshop to the Limit: 13 Most Advanced tutorials | Noupe

  • Pingback: Pushing Photoshop to the Limit: 13 Most Advanced tutorials | virology.tv

  • Pingback: COFFEE CUP||咖啡杯 » 13个将Photoshop应用到极限的高级教程

  • Pingback: Pushing Photoshop to the Limit: 13 Most Advanced tutorials | SulVision

  • Pingback: Pushing Photoshop to the Limit: 13 Most Advanced tutorials | Link Archive

  • Pingback: Skull: from scatch to drawing | Gloomus.com

  • Pingback: Calavera de azúcar dibujar « Ces

  • Pingback: Websites for Learning Adobe Illustrator - Geek’s Pond

  • Pingback: Totenkopf

  • Pingback: Bookmarks for Enero 4th from 01:30 to 03:04 | FACIL TUTORIALES

  • Pingback: Pushing Photoshop to the limits 13 most advanced tutorials | Creative After Effects Tutorials and Showcase

  • Pingback: AMB Album » 80 Best-Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources

  • Pingback: 80 Best-Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources | Web2.0

  • Pingback: 80 Best-Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources | Web Hosting and Domains

  • Pingback: Bookmarks for Enero 30th from 17:13 to 18:59 | FACIL TUTORIALES

  • globallogo

    thanks for the tutorial. I’m excited to try it myself. I’ve learned a lot from you. looks this is really not that easy, how long did u make this anyway? U had nice other works too. good luck!

  • globallogo

    thanks for the tutorial. I’m excited to try it myself. I’ve learned a lot from you. looks this is really not that easy, how long did u make this anyway? U had nice other works too. good luck!

  • Pingback: 40 Free Tutorials on Advanced Drawing Techniques - VECTORTUTS

  • http://bucktowndigital.com sergibosch

    mi nombre es pepe.

  • http://bucktowndigital.com sergibosch

    mi nombre es pepe.

  • http://bucktowndigital.com sergibosch

    i read your little intro about doing illustrator start_finish tut before this one. i still persisted and got pretty much to #1 and realized “yeah, i gotta look at the illustrator tut’s first. so i’ll check out yours and these: http://vector.tutsplus.com/articles/inspiration/40-free-tutorials-on-advanced-drawing-techniques/. and i know the 3 of you are interweaved with http://tutsplus.com/. peace.

  • http://bucktowndigital.com sergibosch

    i read your little intro about doing illustrator start_finish tut before this one. i still persisted and got pretty much to #1 and realized “yeah, i gotta look at the illustrator tut’s first. so i’ll check out yours and these: http://vector.tutsplus.com/articles/inspiration/40-free-tutorials-on-advanced-drawing-techniques/. and i know the 3 of you are interweaved with http://tutsplus.com/. peace.

  • Pingback: How to Draw Your Own Vector Wings | GoMediaZine

  • Pingback: 40 Free Tutorials on Advanced Drawing Techniques « Open USA & Worldwide usability design blog

  • مدونة فواز

    Thanks

  • مدونة فواز

    Thanks

  • http://www.sivascity.com sivas resimleri

    very good, thanks

  • test

    <SCRIPT>alert(“This web site suffers a serious vulnerability: it allows Java script to be
    injected into user input!”)</SCRIPT>

  • http://sweethomeimprove.com Sweet_Home_Improvement

    This is quite impressive, I am pleased to read this post, keep posts like this coming, you totally rock!
    Cheers,
    sweethomeimprove.com

  • Pingback: 50 Clever Tutorials and Techniques on Traditional Drawing | Tutorials | Smashing Magazine

  • philly387

    Wow that is absolutely stunning. I can't believe you posted step-by-step! That must have taken longer to do than making the actual skull. I think this might help me when I start to create some images on my own. Thanks for this!
    Kansas City Band Booking
    Work Out Plans

  • Pingback: Adobe Illustrator Tutorials – Best Of: Part 2 « Smashing Magazine

  • GDlux

    Can't even tell you how much I learned from this.

  • Nirish Kruger

    OMG…..dude…you are sooo cool. Thanks for the tutorial. It helped me a great deal!

  • Matt

    Thanks for this nice work!
    dizi izle

  • http://katerlake.blogspot.com katerlake

    Great tutorial. Thanks for sharing.

  • http://www.clippingimages.com/ Clippingimages

    wow…nice share…nice painting anyway …great share…

  • Dimas0274

    cool dude….

  • Lenny_121

    where can i get a good vector brush for this ?

  • http://www.cizgiperde.net Perde

    Your site is very useful in terms of cultural

  • Konteyner

    Admin thanks

  • Beatlejuicebeatlejuice

    great post… cool ideas

    • xXwewizXx

      thats cool?

  • dizi izle

    This must be so hard.

  • http://www.parcadunyasi.net parça kontör

    great post.

  • http://jokerblog.net jokerblog.net

    what a painting ! excellent tutorials, thank you…

  • http://www.domain2host.in Domain Registration

    These information helps me consider some useful things, keep up the good work.

  • http://profile.yahoo.com/3ERIHDG2L5GLADXOQ6GEM2EFQE Spoiled

    Where i can find the vectors and all the necessary plugins???
    I am so new to the designing stuff.

  • http://www.facebook.com/tha.kweschan Tôi Là Hiếu

    it looks like a friend of mine! :D