Editable Web 2.0 Text Shadow w/Gradient

This is a useful, simple and time-saving Photoshop trick if you need to create a editable text shadow for any of your layouts. The advantage to this is you don't have to convert your text into an image like this technique from http://www.photoshoplab.com/web20-design-kit.html demonstrates. Although that approach works great but what if you have a design and your content isn't finalized by the client? This would take a lot of time re-creating the same gradient for each text and the gradient might not match the original.

In a fast-paced organization scenario I'll demonstrate the time-saving approach. The benefits to this approach are: text can be resized with the gradient, you can edit the gradient text anytime and you can apply a transparency to the gradient. Overall you maintain a consistent design effect.


1. Create your text and duplicate it.




2. Preparing text for transformation


Select the bottom text layer and press "Ctrl" + "T" to do a free transform. Right click within the transform area and select "Flip Vertical" and press enter.


3. Masking


You will need to add a mask to the new layer that was transformed.


4. Apply the gradient


Select the Gradient tool and apply the gradient to the mask layer that was created. As an added benefit you can hold down the SHIFT key apply the gradient in a straight form.


5. The final product


Now you have the text with a gradient that can be edited by selecting the gradient layer with the TEXT tool.

-Ponchai Reainthong