Home Sharing Tips & Tricks Gradient Text
Gradient Text
PDF Print E-mail
Written by Administrator   
Saturday, 14 February 2009 17:16
Author: Depiction.net

Start out with a new 400x200 image with a white background. Add the text that you are going to add the effect to using a font that is easily readable on the web, such as Arial, Verdana, or Trebuchet MS.


1. Start out with a new 400x200 image with a white background. Add the text that you are going to add the effect to using a font that is easily readable on the web, such as Arial, Verdana, or Trebuchet MS.

image 1

2. Now we are going to start adding some effects. First copy the current text layer by going to Layer > Duplicate Layer and name it Gradient Text Overlay. Now right click on the original text layer and select Blending Options. Use the following settings for a Drop Shadow and a Stroke.

image 2

image 3

3. Next we need to prepare for the gradient effect to be added. Select the Gradient Text Overlay layer then using the text tool change the font color to white. Then in order to see the layer behind, change the layer's mode to Overlay. Now in order to add effects to this layer, you will need to Rasterize this layer by right-clicking on the layer and selecting Rasterize Layer.

4. Finally we can actually begin making some visual changes. Select the Marquee Tool then in the tool properties bar change the feather to 8-10 pixels. Make a selection on the bottom half of the text as shown below then hit the delete key. Repeat this step on the top quarter of the text.

image 4

Final:

Gradient Text Tutorial: Final Result

 

Learn the tricks

projectAt first, I thought it's gonna be a tedious process and a bit complicated. but once I get my hand on it, it's just a breeze away. As for that, let see how it is done, using Photoshop tools. Check it out!

Give it a thought

thumbOne of the most common requests I get from web design clients is "can I have a Flash intro with that?" These are words that good professional web designers dread to hear. Have a look.