12 Easy Steps to Creating a Web 2.0 Title

Have you been wanting to spiff up your blog header to the latest look and feel? If so, here are my 12 steps that I use to create a Web 2.o style text title using PhotoShop Elements 6.0. The characteristics that give it the Web 2.o look and feel are the appearance of having a slight surface curvature, a reflective shine, and a partial reflection.

Here we go…

Step 1: Create the text title layer

Step 2: Create a copy of the text title layer, rename the layer “reflection”, and shift it down below the text title.

Step 3: Invert the reflection layer – click-activate the layer then (Image Menu, Rotate, Flip Layer Vertical)

Step 4: Simplify the reflection layer text  - click on reflection layer then (Layer Menu, Simply Layer)

Step 5: Command click (Mac) or control click (PC) the reflection layer icon in the layer panel to outline the simplified reflection text. You will see the text become outlined with a dashed line.

Step 6: Set gradient color for reflection layer. Choose your foreground color as the same color as your title text layer and your background color.

Step 7: Choose gradient type – foreground to  background gradient selection.

Step 8: Apply gradient – clicking on the top edge of reflection layer, draw a gradient direction line about half way down the width of the text (vertically)

Step 9: Set transparency of the reflection layer – click on reflection layer and slide the transparency to 50%

Step 10: Create curved, glossy surface effect – using the ellipse tool, draw a white ellipse that is about half the height of the title text and slightly longer than the title text. Name this layer ” text gloss”.

Step 11: Create transparency for the curved, glossy surface effect – click on the text gloss layer and slide the transparency to about 50%.

Step 12: Export a .png image of your new Web 2.o title for use in your blog or webpage. THE END!

If you have any questions about any of the steps, drop me a comment to this blog and I will respond as quickly as possible.  There is also a technique for this effect in Adobe Illustrator. However, more folks seem to be able to afford Adobe Photoshop Elements so I thought I would publish the technique for this package first.

My hope is that you will be able to knock out a Web 2.o style title for yourself in under 30 minutes.  In the event you would like a title like this but do not have the software, give me a shout at mike.askew@mindablaze.com and I can whip one out for you for a reasonable price (less than the cost of a fast food dinner for two). Have fun!

Tags: Adobe Photoshop, Blog Header, How-to, Tips, Web 2.0, Webpage Header