This tutorial is based around the original which can be found at PSD Tuts. However, unlike the original I'm going to show you how to do this using Adobe Fireworks. I'm going to assume you have a basic knowledge of Fireworks, but if you don't then check out this post for a quick primer.
Can't wait?
If you're impatient and can't wait you can see the finished article here.
Step 1
Create a blank document (I used 500 x 500) and create a square shape which fills the entire canvas. Fill this square with a subtle gradient running top-left (#434343) to bottom-right (#1C1C1C). The gradient creates the illusion of light shinning onto the canvas from the top-left corner.
Step 2
Using the text tool write some text onto the canvas. It pays to use a typeface which is bold and blocky - I used "Avant Garde BT" with the bold option turned on.
Now with the text selected click on the text-fill pallette (directly right of the font size box in the "Properties" window) and set a linear gradient running top-left (#FFFFFF) to bottom-right (#C2C8D4). This further reinforces the illusion of light shinning onto the canvas from the top-left corner.
Step 3
Next duplicate your text layer, remove the gradient and set the fill to be solid white (#FFFFFF). Now hold Ctrl and press the DOWN arrow to move this text layer one layer down the stack, so that it sits behind your grad fill text layer.
Now with the text layer still selected hit the UP arrow once and then the LEFT arrow once to move it 1px up and out from behind the original layer. This should create the subtle highlight effect we're looking for where the text looks slightly raised.
Step 4
What we have looks quite good but we can see an obvious step gap of 1px where we've moved the solid white text out from behind the grad fill layer. We can solve this duplicating the solid white layer, moving it down 1px and reducing the opacity to 70%. This covers the vertical step. We then repeat this to cover the horiztonal step, this time reducing the opacity further to around 55% (you'll need to experiment to get the best effect).
Final Product
There we have it. A subtle highlighted text effect where we've used light and shadow. This effect is used a lot by the Envato network on all their tuts sites and it's really nice, although I fear it may become a cliche trend all too quickly!
Let me know if you have any thoughts on how we could improve this effect.
Dave
Write a comment.