February 11th, 2008

One day, my friend, theRemix, wanted me to make him some type treatments for a site he was working on.  I was not sure what to make so in about 3 minutes, I made this Web 2.0 style font style.  I am not sure where I learned this from but it just clicked in my head!  He liked it so much he wanted me to write a tutorial for it so he could do it too.  So here it is my 3 minute Web 2.0 type treatment tutorial!  Keep in mind I am using Adobe Photoshop CS2.

first.jpg

1.  Create a new canvas.  640×480 is good enough for this tutorial.  Pick a font that is pretty heavy and bold such as Impact.  For a color example, lets use the color #be0405.
1.jpg

2.  Click on Layer > Layer Style > Stroke and use these settings:
2.jpg
 

Press “OK” and if your canvas background is white, you will not see the stroke.

 

3.  Right click on the type layer and select “Group into New Smart Object.”
3.jpg

 

4.  Click on Layer > Layer Style > Stroke and use these settings:
4.jpg

Press “OK” and if your canvas background is white, you will now see the white stroke on the in between the type and the new stroke.

5.jpg

Again, right click on that type layer and select “Group into New Smart Object.”

 

5.  Click on Layer > Layer Style > Bevel and Emboss and use these settings:
6.jpg

 

6.  On the same layer style panel, enable Drop Shadow and use these settings and press OK:
7.jpg

Once you press OK, you will have some nice Web 2.0 style text!  I know there are about a million ways to do this but like I said, this just clicked in my head and without even thinking about it, and it came out pretty good!  You can experiment with the shadows, colors, layer styles and fonts to make it to your liking, be creative!

first.jpg

Another example:
example11.jpg

Categories: Tutorials
Tags: , ,

Leave a Reply