Photoshop Layer Styles — Cheetos Text Tutorial Redux

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:

Finished

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

Step 1

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

Step 1, Part 2

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

Stage 1

Next, add some text:

Stage 2

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:

Step 2

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:

Warp Button

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

Warp Text

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

Stage 3

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:

Stroke

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).

Outer Glow

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

Stage 4

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%:

Shadow

We’re almost there!

Stage 5

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:

Inner Glow

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

Finished

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.

Changed Colors

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:

Advanced

Related posts:

  1. Galahad Payment Layer 0.1 During the past two years I’ve constantly been frustrated with...
This entry was posted in Graphic Design and tagged , , . Bookmark the permalink.
  • http://imakewebjunk.com Dave

    Thanks for posting this tutorial. I’ve held onto bad habits from earlier versions of Photoshop. The app has gone through many versions changes through the years, but I haven’t updated all of my techniques along the way. And most of the tutorials out there seem to reinforce bad habits. This kind of side by side walk through is very helpful.

    • http://cmorrell.com Chris Morrell

      It’s really easy to hold on to those bad habits, but learning the new functionality really opens up all kinds of new doors. I’ve particularly found that from a Web design perspective there are all sorts of ways to do things non-destructively that make changes later 1000% easier and well worth the initial effort.

  • Tom

    thanks a lot, great tutotial

  • http://pebblekeeper.wordpress.com/ Pebblekeeper

    THANK YOU!!!! I used this tutorial with Elements 2.0.  One step to mention is that in the older version, the text layer needs to be simplified before the tools for Fill and Stroke will be available in the Edit drop down list.  I am creating a logo for our Lego Robotics Team – the Spicy Cheetos. The kids are going to love it!

  • http://www.register-domainname.in Register domain India

    I am not that much familiar with Photoshop but I know the basics. Now I have got more information from your post. Thanks for sharing.

  • http://www.webhostings.in/ web hosting in india

    Great information posted here.Most of the points are explained very clear mind.

  • http://www.webhostings.in/ Website Hosting

    Really useful tutorial and useful for me.

  • http://www.webhostings.in/ Web Hosting Provider

    Really The post is written in very a good manner and it details many useful information  I wonder if strategic marketing works Thanks to sharing

  • http://www.findacellphoneuser.com/ reverse phone lookup

    Excellent article from which I gained a much better understanding of this matter, which can be confusing to me.  Big thanks!