Apr 27 2009
Adobe Photoshop Tip– The Ubiquitous Aqua Text Tutorial
By: Rick Yaeger
We here at MacMerc have taken a lot of flack for certain articles that contain detailed explainations of activities we do not condone. The graphics tip before you may very well be added to their number. What I am about to explain, in great detail, is exactly how you can produce text similar to the large X on the box MacOS X comes in. I’m going to explain it, I’m even going to offer you the Photoshop Layer Style used to achieve it, but make no mistake, I do not condone the use of this tutorial. Aqua is everywhere and it’s being mimicked with varying degrees of success using third-party plug-ins and countless Layer Style Settings. It’s wrong and it has to stop.
So why detail a graphic technique I don’t condone? For a few simple reasons:
- I intend to dispel the myth that a single Layer Style can produce this effect properly.
- As long as everyone is going to be using aqua type effects, they might as well do them well. And…
- I’ve been negligent in writing my graphics tips of late and this seemed like an easy way to get one in. I admit it, I’ve been bad.
One more warning before I continue, this tutorial is for Aqua type not Aqua buttons. If you want to make your own Aqua buttons there are plenty of great tutorials out there, but this is not one of them.
This tutorial is quite adaptable and might even produce fairly acceptable Aquafied logo effects. But, as you will see, the secret of the Aqua effect is in the highlighting and the highlighting used on Aqua type will not work as well for buttons as other techniques.
Anyway, enough warnings ó here we go.
Step 1: Type your type
I don’t think there is a Mac forum in existence that has not had this question posed: “What font does Apple use?” The answer is Apple Garamond, it is evidently a font that Apple wants to keep to itself but if you know where to look, it’s not that hard to find. If using the authentic Apple font violates conditions of your parole, almost any flavor of Garamond Light Condensed will do. Load the font and launch Photoshop 7.
Start a new Photoshop document. I’m using a 7″ by 2″ 300ppi RGB file and all my instructions from here on out will assume you are working on a similar format.
I’ve typed “MacMerc.com” at 93pt in ITC Garamond Light Condensed. The color of the text doesn’t matter ó the Layer Style is going to override it anyway.
Step 2: Download and Apply the MacMerc Style
You are going to need to download and decompress this Layer Style to continue. Once you have it, open Photoshop’s Style palette and, using the menu in its top right hand corner, select “Load Styles…” and direct Photoshop to the style we’ve given you. It should now be added to you Style palette. With you text layer selected apply the “MacMerc Aqua!” style. If you think it looks pretty unimpressive so far, I agree.
| UPDATE: If you are not using Adobe Photoshop 7, you will not be able to use the provided Layer Style. For users of older Photoshop versions, I have created this Photoshop file. All you need to do is download the file, open it in Photoshop, open your Styles palette and choose “Create New Style” by clicking on the middle icon at the bottom of the palette or by clicking in an empty area of the palette when the cursor turns into a paint bucket.
Photoshop 5.5 users can also use this file by opening it and chosing Effects>Copy Effects from under the Layer menu and choosing Effect>Paste Effects from the same menu to apply the effect to the desired layer. Thanks to Iain Farrell for his help in making this tutorial more accessible. |
Step 3: The Highlight of the effect
Create a new layer above the text layer and name it “Highlight”. Open the Layers palette if it isn’t already and confirm that the Highlight layer is selected while you Command-click the text layer. This makes a selection on the Highlight layer the exact shape and possition of the text on the layer below it. In the menu bar, go Select>Modify>Contract… and enter a value of 3. Fill this selection with white.
Next, with your selection still active and the Selection tool active (any one, the rectange, the circle ó it doesn’t matter), view your document at 100% and press the Down Arrow key on your keyboard 20 times. Go back to the menu bar and choose Select>Modify>Expand… and enter 10. Now go Select>Feather… and enter a value of 5 and then delete the contents of this selection on the Highlight layer.
You should now have a pretty passable Aqua text effect, but still not an impressive one. Please continue.
Step 4: It’s all in the details
Creat a new layer between the text layer and the Highlight layer. Name it “Edge Glow – Bottom”. With this new layer selected, Command-click the type layer again and contract the selection by 3 pixles and fill it with white as you did to the Hightlight layer in Step 3.
Again, as in Step 3, we are going to nudge the selection. But this time we are going to nudge it up and we will only be going up 1 pixel (view your document at 100% and hit the Up arrow once with a Selection tool active). Now delete the contents of the selection.
Set the Blending Mode for Edge Glow – Bottom to “Overlay,” deselect and go Filter>Blur>Blur (I know, Gaussian Blur is the professionals “Blur of Choice” but plain old blur works just fine here).
Your Aqua type should be looking pretty sexy now, but we’re not down yet. We’re going to go that extra pixel to do this type up right.
Step 5: Details upon details
Creat one final layer above Edge Glow – Bottom and name it “Edge Glow – Top”. With this new layer selected, Command-click the type layer again and contract the selection by 3 pixles and fill it with white as you did to the Hightlight layer in Step 3. (Ever have deja vu?)
Again, as in Step 3 and 4, we are going to nudge the selection. This time nudge it down 1 pixel (view your document at 100% and hit the Down arrow once with a Selection tool active). Now delete the contents of the selection.
Set the Blending Mode for Edge Glow – Top to “Overlay” and that is it!
It’s interesting to note that if you select the text layer and apply almost any of Photoshop’s preset Styles, this technique still maintains its Aqua look. The Layer Style is only a small part of what makes it work.
Step 6: “Wait I thought I was finished”
The final step is to close the document without saving, trash that Layer Style you downloaded and never, ever use this tutorial. Go have a long shower and cleanse yourself of any grime of unoriginality that might have tempted you to actually use this effect for anything other than a joke. Shame on you! Shame!!!!
Read other Graphics Tips of the Week