 |
Webmaster Forum Tiger Team Solutions Tech Support
|
| Author |
Message |
|
Brian
|
Post subject: Web 2.0 Text in Photoshop Posted: Fri Dec 07, 2007 11:56 am |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
I'm going to show you one of the ways I like to make web 2.0 style text in Photoshop.

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
Last edited by Brian on Thu Jan 31, 2008 10:50 am, edited 1 time in total.
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 11:57 am |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step one...
Open a new image:

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 11:58 am |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step two.
Type some text:

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 11:59 am |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step 3.
Apply a layer effect. This one is for Graident Overlay:

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 12:01 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step 4.
Select your text layer to produce "marching ants":

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 12:03 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step 5.
Go to: Select > Modify > Contract
Contract by 3px. (more or less depending the font used)

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 12:04 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step 6.
Open a new layer on top & fill in white:

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 12:06 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step 7.
Set the white layer to 35% opacity.

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 12:09 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step 8.
Make an oval selection and delete that area. This creates the white web 2.0 "shine".

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 12:11 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step 9.
Add some bevel emboss to the text layer.

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 12:13 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
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.

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 12:15 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
Step 11.
Add some drop shadow.
Again I do this with a darker version of the text color.

_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 12:23 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
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. 
_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
|
cimmeron
|
Post subject: Posted: Fri Dec 07, 2007 12:29 pm |
|
Joined: Thu Jul 05, 2007 3:23 pm Posts: 78 Location: Spokane, WA
|
|
| Top |
|
 |
|
Brian
|
Post subject: Posted: Fri Dec 07, 2007 1:49 pm |
|
Joined: Tue Jun 19, 2007 12:48 pm Posts: 681 Location: Arkansas, USA
|
|
Thanks!
_________________ [color=darkblue:8e5ce06a17][size=9:8e5ce06a17]If you have an an urgent question, please call me.[/size:8e5ce06a17][/color:8e5ce06a17]
[color=darkred:8e5ce06a17][size=9:8e5ce06a17]Spam will be removed.[/size:8e5ce06a17][/color:8e5ce06a17]
|
|
| Top |
|
 |
Who is online |
Users browsing this forum: No registered users and 0 guests |
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot post attachments in this forum
|
|