Chris Morrell

One of my major forms of procrastination is looking at Photoshop tutorials, and I often find myself saying “if I were doing this, I’d…” The most frustrating of these times is when people use bitmap techniques when vectors (Photoshop “shapes”) would be more appropriate, or when they create 4-5 layers when a few layer styles would do. These problems particularly apply when the tutorial is focused on Web design or UI effects such as glossy interfaces or navigation items.

Well, this weekend I was browsing through some “top X tutorials” pages and came across a tutorial that had a great result, but went around it in, what I think is a really odd way. The tutorial in question is the Cheetos text tutorial on Mick Moolhuijsen’s blog. I’ve been meaning to do a tutorial on Photoshop’s layer styles, and this seemed like a good place to start. So without further ado…

Cheetos Text Redux

Here’s a preview of the final image:

First, create a new image and add a Gradient fill layer to it:

Gradient fills are a fantastic way to add a gradient background that will always fit your canvas no matter how you resize it.

In the end you should have a blank image with a gradient background:

Next, add some text:

In this case, I used Marker Felt and adjusted the tracking so that the characters were a little closer together, and changed the font color to yellow:

Next, let’s warp the text to get the arched effect that the Cheetos logo has. With the Cheetos layer and the text tool selected, click the “create warped text” button in your toolbar:

And then apply an arched warp, using settings that look right to you:

Finally, rotate the text counter-clockwise a little (Cmd-T) and you should have the start of a decent Cheetos logo:

OK, let’s start applying some layer styles. Double-click in the area to the right of the Cheetos layer’s label to bring up that layer’s Layer Style window. We’re going to apply 4 styles to the single layer to replace the 3 separate layers used in Mick’s tutorial. This will have major advantages in the future if you ever need to change the font, the colors, or the text of your logo. It also means that you can quickly apply the same style to another logo or text in the future.

We’ll start with the black stroke. Choose “Stroke” from the options on the left, and add a 5px black stroke to the outside of the Cheetos layer:

Next, choose Outer Glow from the left. This is where it get’s interesting. Sometimes you need two strokes on a single layer. In Mick’s tutorial, he created a second layer and added a larger stroke. That works, but if you ever change the font or the text, you’ll have to re-do that step. One nice thing about outer glows is that you can adjust the glow’s “Spread.” At 100%, this means that the glow acts almost exactly like a stroke.

In this tutorial we’ll set the blend mode to normal, change the opacity to 100%, change the color to white, change the spread to 100%, and set the size to 10 (the stroke is “above” the glow, so the first 5px are invisible—this has the effect of adding a second 5px white stroke).

OK, let’s take a look at what our text looks like so far:

Looks pretty good! Now all we have to do is add the highlighs and shadows to the text. In Mick’s tutorial, he added the shadows by duplicating the layer and changing its color to orange. As I mentioned above, this means that you can no longer edit the text without adjusting all the other layers as well. We can easily create the same effect with an inner shadow.

Double-click on the “fx” icon to the right of the Cheetos layer to open the Layer Style window again. This time, select “Inner Shadow” from the left. Shadows have a similar property to a glow’s “Spread” — it’s called “Choke.” So first let’s change the blend mode to normal and choose an orange color for the shadow. Next, change its opacity to 100% and the angle to -60 degrees. Finally, change the distance and size to 2px, and the choke to 100%:

We’re almost there!

The last thing to do is to add the highlights. This we can do with an inner glow. Because the inner shadow is “above” the inner glow, this will only add the glow to the area where there is no shadow.

So open the Cheetos layer’s Layer Style window again and choose Inner Glow. Change the blend mode to normal, opacity to 100% and color to white. Then set the choke to 100% and the size to 3px:

And voila! You have the whole Cheetos logo with only 1 text layer.

The really cool thing is, you can change the font, the colors, the warping and anything else without having to redo any of your work.

A few things to try:

• You could probably get the same 3D effect by using the “Bevel and Emboss” layer style. I would try using an inner bevel and the “Chisel Hard” technique and playing with the highligh/shadow modes and colors and the shading angle. But in the end, I think it’s probably easier to fake it with the shadow and the glow.
• Need 3 strokes on the same layer? First do the innermost stroke with the actual stroke layer style. Do the second stroke as we did above with an outer glow, and then do the final stroke with a drop shadow by setting the distance to 0px, the spread to 100%, and the size to the stroke size that works for your situation.
• The one downside of choosing a specific orange for the inner shadow is that if you change the text color you will have to change the shadow color as well. A solution would be to use a black shadow at 30% opacity with a blend mode of “Multiply.” This will work but it won’t produce an equally vibrant effect.

Play with the layer styles for different effects:

You can leave a response, or trackback from your own site. Follow any responses to this entry through the RSS 2.0 feed.