| View previous topic :: View next topic |
| Author |
Message |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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.
Last edited by bsmith on Thu Jan 31, 2008 10:50 am; edited 1 time in total |
|
| Back to top |
|
 |
TigerBot Tiger Member

Joined: 19 Jun 2007
|
Posted: Fri Dec 07, 2007 11:56 am Post subject: Sponsored Advertisement |
|
|
_________________ TigerBot
|
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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.  _________________ If you have an an urgent question, please call me.
Spam will be removed. |
|
| Back to top |
|
 |
cimmeron Tiger Member


Joined: 05 Jul 2007 Posts: 78 Location: Spokane, WA
|
Posted: Fri Dec 07, 2007 12:29 pm Post subject: |
|
|
nice tutorial Brian, I need to try that one out.  _________________ a website design forum |
|
| Back to top |
|
 |
bsmith Graphics Guru


Joined: 19 Jun 2007 Posts: 681 Location: Arkansas, USA
|
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. |
|
| Back to top |
|
 |
|