Candy Coated Photoshop Tutorial
In this tutorial I’ll teach you how to make a web 2.0 logo so damn sugary sweet it’ll give your website a cavity. Then I’ll give you the PSD, the font, and all the patterns used in the image so that you can play with it yourself. If you want to skip the tutorial altogether, you can download the PSD here. The beauty of the correct way to design logos in Photoshop or Illustrator comes when we keep everything as editable text layers from start to finish. That way if we need to make changes or reuse the idea, we can just pop open a Photoshop file and quickly output a new version of an old idea. This will also make it easy for you to duplicate my steps.
1. Open up Photoshop and Create a new layer.
2. Use the Text Tool 
to write something in black using the “Creampuff” font.
3. Choose “Color Overlay” from the Layer Style options.
4. Select a pinkish color. Because it makes most people think of candy or something edible(….like babies). For your reference, I’m using these settings….. Color Overlay >> #9e5859. Let’s name this layer ‘Base’.
5. Duplicate this current layer twice by dragging it to the layer button two times.
6. Name one of the duplicates ‘Hard’ and the other ‘Sugar’. This is just for the sake of the tutorial, really you could name them whatever you want. Make sure you order the three layers so that ‘Base’ is underneath ‘Hard’ and ‘Sugar’ is topmost.
7. Hide the layer named ‘Sugar’ for now. Select ‘Hard’ so we can make it look like hard candy (now you see why I named it that?). Use the following settings in your layer style.
Drop Shadow Settings
Opacity = 50%, Angle = 90%, Distance = 2px, Spread = 3px, Noise = 0%, Layer Knocks Out Drop Shadow = Yes
Bevel and Emboss Settings
Style = Inner Bevel, Technique = Smooth, Depth = 471%, Direction = Up, Size = 8px, Soften = 0px, Use Global Light = Yes, Gloss Contour = Gaussian, Anti-Aliased = No, Highlight Mode = Screen at 42% with a White (#ffffff) Color Setting, Shadow Mode = Multiply at 17% with a Black (#000000) Color Setting.
These settings serve to make your candy text look three dimensional.
8. Next we want to select a Pattern Overlay. This step isn’t necessary but a little decoration will make your candy look more appetizing. Before you attempt this, make sure you’ve loaded ‘candy_stripes.pat’ into your version of Photoshop.
Make the following setting changes.
Pattern Overlay Settings
Blend Mode = Exclusion, Pattern = Pattern 1 (my choice, you can choose differently), Scale = 61%, Link With Layer = Yes
We’re all done making the candy look hard. Now it’s time to lick it….no seriously.
9. In this step we’re going to make our candy look like someone has salivated all over it…either that or maybe someone dipped it in a sugary sweet candy coating! (note: This is the hardest part of tutorial to explain but you’ll figure it out.”)
Activate the layer named ‘Sugar’. Hold down the ‘command’ (’control’ on a PC) and click on the layer to select all the letters in your word. Add a layer mask to it.
Hit ‘L’ to select the Lasso Tool and select the ‘Intersect with Selection’ option. Make sure you CLICK ON THE LAYER MASK FIRST before you go to Step 10.
10. Now that you’ve selected the layer mask and not your actual text, draw around your selection loosely and fluidly. The idea is to make this look like liquid. It doesn’t matter if you go out side of the lines or get too crazy, you can fix it later by editing the mask. Once you’ve made a selection through the whole word, go back to your starting point and let go of the mouse. This will subtract everything from the selection except for what you’ve just drawn! (note: click the image below for a close-up view!)
11. Now Make the following settings to the Layer Style of the topmost layer ‘Sugar’.
Bevel and Emboss Settings (note: this makes it look like a candy coating)
Style = Inner Bevel, Technique = Smooth, Depth = 100%, Direction = Up, Size = 5px, Soften = 0″
Color Overlay Settings (note: this gives the liquid a bit sugary glow and a bit of pop)
Blend Mode = Overlay, Opacity = 23%
Gradient Overlay Settings
Blendmode = Screen, Opacity = 35%, Style = Linear, Align with Layer = Yes, Angle = 90%, Scale = 100%
Gradient Color = #6f1d1d as the darker hue with #FFFFFF as the lighter hue.
12. Lo and behold you’re done! You’ve got hard candy dipped in sugary sweetness!
13. We COULD stop there but I always like to ’sweaten’ (no pun intended) my designs with color backgrounds. Create blank layer. Add a Color Overlay in the Layer Styles and set the color to #0f0702.
14. Add a new layer. Add a Layer Mask. Select the Gradient Tool (Hit the ‘G’ Key) with the normal black/white colors. Set it to Radial and Reversed. Drag from the center of your image to the outside of the screen. Bam. Instant spotlight. Now add the Color Overlay of your choice.
Simple right? Don’t you just want to lick the screen? Of course we could get far more detailed with this but this tutorial is long enough! Make sure you download the files below to make sure you’ve done things correctly! Email me your derivative works or your improvements and I’ll profile them on this blog. jongos [at] gmail [dot] com
Download this Tutorial with all relevant PSD, Font and Pattern Files here! Download just the font here!
Cool effect. Thanks.
No problem, feel free to send any of the designs you made with it to me. I’ll display them here on the blog. You can find my e-mail in the nav bar.
this tutorial didnt work for me. for some reason the pattern doesnt show up. any idea why?
Me a bit more specific an I might be able to help you out. Did you download the PSD? that should help you out a bit.
Good Tutorial…But the gloss part for making ’saliva’ doesn’t seem to show…Could it be because im using cs3?
The pattern portion didnt work for me. The gloss part also didnt work.
Anyone know where I can find a color guide?
I think this is because you may have the colour overlay on. If you uncheck this the pattern will show
thanks for all the hard work putting this tute together but I am sorry it didn't work for me and I have tried it from different directions
the pattern didn't show… no strip on the text…did i miss something when i was doing the pattern overlay setting?
and i couldn't follow the rest of the steps.
is it me because when i downloaded the font i had problems opening it. what should i do???
This is a good tutorial but there are several steps missing. By downloading the PSD, however, I was able to figure out the missing steps:
Both the Hard & Sugar layers need to have their fill set to 0%. Also when you duplicate them, by default they do have the Color Overlay on which must be hidden (an easy solution for the PS newb would be to have them duplicate the layers before adding the Base color).
Also, when the instructions for the Sugar layer's Bevel and Emboss effect were outlined, there were a few key things that were not mentioned and may only be observed by looking closely in the picture. I personally don't look at the pictures and had to go back and squint until I figured out the Gloss Contour is the one with 2 hills, that the Highlight Mode was changed to Overlay at 100%, and that the Shadow Mode was set to 0%.
And as silly as it sounds you should probably recommend a file/font size for the user. The main reason being if they start with a font size of say 46 instead of 185 as you do then the effects they apply (particularly the bevel & emboss) aren't going to look as good and may even look pretty awful.
After making these changes it worked much better, but it still took an hour or so to figure this out by comparing the PSD to mine.
You might consider editing the tutorial to include those steps =) Then it would easily be one of the most useful tutorials around with an amazing style. Crazy indepth and the pictures are awesome!
I even used it for a logo: http://visualtrauma.com/upload/yummyinmytummycopy...
i was unable to get this part can provide me the psd
Tutorial doesn't work…vital steps appear to be missing
Thanks for this sweet tutorial.
It will be helpful for our next "Strassenfest"-Announcement.
Absolutely a creative piece for photoshopper to learn, thanks for the sharing!
Yes, I'm a total noob and I was working on this for 3 hours lmao. Not knowing how to open new layers and what kind of file you are supposed to save as was mind boggling. And I never did figure that out. Anyway I'm sure I can look that up later. I could not get the gloss to show up though? I saw stripes but no gloss. Which lasso are you supposed to use, there are 3. I think that's where I might've messed up either that or it's like Alex said about the gloss contour with 2 hills? Maybe I need to go back and fix something there. I couldn't get the spotlight to work also. Any help here?
Anyone want to make a video tutorial ??
worst discribed tutorial ever -.-
The patern is invalid…
Ruegoles traducirlo al español, por favor. Un saludo
really nice work. thanks
HI I WANTED TO GET THE CRISS CROSS COLORS HOW DO I DO IT
really cool font design, thanks for sharing
Were do I save the "creampuff" font ??
I have adope photoshop 2008; I can`t get color overlay, what am I doing wrong??
I really need some help here..
wao..thats really fantastic! i will try for sure!
I need help downloading the pattern!
:[
Now im stuck on making the stripes two colors
Sweet! I have to try this with other patterns.
I have some god PS skills and even i could not figure out the missing steps until i compared the PSD files. Even then i could not get the Glossy "SUGAR" layer to work. VERY MANY STEPS MISSING and confusing even to a daily PS'r like myself. Someone who has figured it out should ADD to the originlal TUT and repost a link. PLEASE!
Whats the Pattern that u use? I can't find it…
i have a hell of a time figuring this tutorial out because you leave so many things out and tell us originally to put the font in black HOWEVER in order for it to actually blend you have to use a gray font, which was totally screwing me up. also how do you do the like licked part outside of the font like in your images?
can any one tell me were to get the candy pattern please!!
Thanks! This tutorial helped alot!