Anyway, that’s another post.  Randy’s a fantastic developer, and he’s hoping to become a fantastic designer as well.  In his blog entry, he says:

If anybody has any suggestions about how I can go about achieving my new goal, please feel free to speak up! I have a feeling this is going to be quite a bit more difficult than web development since design is so subjective.

That got me thinking—can you learn design?  I’m not sure.  In fact, I have two completely conflicting views: one practical (a) and one philosophical (b):

A) COPY, COPY, COPY

I’d guess that my first HTML project was maybe 95% other people’s code, 5% mine.  Similarly, my next project was probably 90%, the third 80%, the fourth 70% and so on.  Now it’s rare that I copy other people’s code, but that pattern holds true for every new language I learn, and I’m guessing that’s true for most Web developers.  So why not for design?  In design we call it inspiration, but is it really that different?  The first two pages of my delicious bookmarks include an overwhelming number of design galleries, trends and tutorials.  Often when I start a design project, I’ll find myself browsing through some of my favorite galleries and design magazines looking for inspiration.  When I was first learning Photoshop, my designs were probably 95% tutorial, 5% my design.  Now it’s rare that I actually follow the tutorial instructions, but I still look at them for inspiration.

So, my practical advise would be: do the same thing you did learning HTML, learning CSS, learning Javascript, learning Ruby, learning PHP, etc, etc.  Copy.  Over time you may find that you need to copy less and less.

B) You Gotta Have It

But there’s more to it than that.  I don’t know what it is, but I know it exists.  There’s something that makes Jonathan Ive special; something a Web designer like Joshua Davis or a graphic designer like Fabio Sasso has that not everyone has.  We’ve all got a little bit of it, but while some folks have a tablespoon or maybe even a cup, others have a bucket.

That’s not to say that you shouldn’t try.  It doesn’t necessarily just bubble out of you like you might imagine it did for DaVinci.  Sometimes you don’t have the technical knowledge.  Sometimes you just haven’t given it a chance.  But I don’t think anyone can just pick up a Wacom tablet and design a site like Dave Shea or Dan Cederholm any more than they can pick up a paint brush and paint like Thomas Eakins.

So what do I actually think? I don’t know.  I think there are a lot of things you can learn, from color theory, to proper use of white space, to typography, to concepts like the Golden Ratio.  And I certainly know that I was a better graphic designer after taking some design classes in college than I was before.  But I think a lot of that comes from doing it, and either getting it or not.  Randy’s a pretty talented guy, so I wouldn’t be surprised if he gets it, but I’m not sure if he’ll learn it or just finally discover it was already there to begin with.

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: