Webmaster Forum

bsmith · Posted: Fri Dec 07, 2007 11:56 am Post subject: Web 2.0 Text in Photoshop

I'm going to show you one of the ways I like to make web 2.0 style text in Photoshop.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

TigerBot · Tiger Member Joined: 19 Jun 2007

_________________
TigerBot

bsmith · Posted: Fri Dec 07, 2007 11:57 am Post subject:

Step one...
Open a new image:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 11:58 am Post subject:

Step two.

Type some text:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 11:59 am Post subject:

Step 3.

Apply a layer effect. This one is for Graident Overlay:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 12:01 pm Post subject:

Step 4.

Select your text layer to produce "marching ants":

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 12:03 pm Post subject:

Step 5.

Go to: Select > Modify > Contract
Contract by 3px. (more or less depending the font used)

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 12:04 pm Post subject:

Step 6.

Open a new layer on top & fill in white:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 12:06 pm Post subject:

Step 7.

Set the white layer to 35% opacity.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 12:09 pm Post subject:

Step 8.

Make an oval selection and delete that area. This creates the white web 2.0 "shine".

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 12:11 pm Post subject:

Step 9.

Add some bevel emboss to the text layer.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 12:13 pm Post subject:

Step 10.

Add a stroke. I like to select the color of the fade and then pick a darker version of that color.
So in this example the text is pink, so the stroke is violet.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 12:15 pm Post subject:

Step 11.

Add some drop shadow.
Again I do this with a darker version of the text color.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Dec 07, 2007 12:23 pm Post subject:

Step 12.

You could be done at this point, but I'm going to show you how to add the color rays behind the letters.

I take the Polygonal Lasso Tool and make selections starting outside of the canvas to the center then out again, over, back to center... this continues until I am back to where I started.

At that point it looks like this.

Add a color:

Turn the opacity down a bit:

We are done.
The final version I have looks like this:

I added some bevel, swriled the the light rays with liquify, cropped the image... etc. None of this is part of making the "web 2.0" stuff, so I left it out of the tutorial... but this is just one example of a final result.

More to come. Smile

_________________
If you have an an urgent question, please call me.
Spam will be removed.

cimmeron · Posted: Fri Dec 07, 2007 12:29 pm Post subject:

nice tutorial Brian, I need to try that one out. Smile

_________________
a website design forum

bsmith · Posted: Fri Dec 07, 2007 1:49 pm Post subject:

Thanks!
_________________
If you have an an urgent question, please call me.
Spam will be removed.