Wednesday, July 18, 2007

How to: Create "Web 2.0" graphics

Unless you've been under a rock for the past few months, you know that the "Web 2.0" look is becoming a very popular design on web sites.  Web 2.0 isn't really the second version of the World Wide Web; this is a term that has been used to describe everything from AJAX-enabled web sites to the glossy, glass-like design that we'll be looking at in this article.  This type of design can generally be recognized by it's glossy and beveled look.  Most of the time, the subject ends up looking like a rounded piece of glass.  In this article, I'll be showing you how to create your own Web 2.0 graphic with text.  Here's an example of our final product:
For this tutorial I'll be using PhotoShop CS3, but you should be able to follow along with PhotoShop 6 or newer.  So without any further ado, let's get crack-a-lackin!
To start off, you'll need to create a new document in PhotoShop.  I'm going to start mine with a transparent background, width of 400 pixels and a height of 150 pixels (Screenshot).
In order to see what I'll be doing in the next few steps, I'm going to add a background now so that I have something to contract against.  For that Web 2.0 feel I need to use a warm gradient for the background, so I'm going to use a gradient that transitions from black to dark green with the green on top (Screenshot).
Fig. 1

Next, you'll need to add the text that you want displayed.  I've selected a 36pt, Strong, Arial Black font, then I've set the tracking (horizontal letter spacing) to -100 (Screenshot).  This will bring the letters closer together, and will help the reflection and shadow to look more like part of the image later.
Fig. 2

Now we need to create the reflection of the text.  First, create a copy of the layer that contains the text we added, by draging it down to the New Layer button in the Layers panel (Screenshot).  Move the copied layer down a bit (so I can see it) then, with the copied layer still selected, flip it over by clicking on Edit »Transform » Flip Vertical.
Fig. 3

Before we can go any further with the reflection, you'll need to rasterize it: Right-click on the reflection layer and select Rasterize Type (Screenshot).  Once the reflection has been rasterized, you can change the perspective by skewing it a little.  Click on Edit » Transform » Skew, then drag the handles on the bottom left and right corners out, away from the text (Screenshot).  Make sure that you try to drag them an equal distance from their original points.  
Once you have finished skewing the text, select all of the pixels in that layer by holding down CTRL and clicking on the layer thumbnail in the layer window (Screenshot).  Once the selection is loaded, hide the original reflection layer and create a new (blank) layer.  Select the gradient tool and load a gradient that transitions from white to transparent (Screenshot).
With everything set up for it, now you can create the gradient that will be the reflection.  Inside the (still) selected area, start the gradiant at the top of the selected area and have it end about 7/8 of the way down the tallest letter.  The idea here is that the bottom edge of the tallest letters shouldn't be visible (Fig 4).  
Fig. 4
To finish off the reflection, set back the opacity of the reflection layer to around 30% and move the reflection layer so that it meets the bottom of the original text (Fig 5).
Fig. 5

Now that we've finished the reflection all we have left is too create the shadow.  For this, we'll need to use a technique that's a little more detailed than the standard drop shadow effect....
To get started, make another duplicate of our text layer by draging it down to the New Layer button in the Layers panel again.  Rename this new layer as "Shadow".
Before we can go any further, you need to rasterize the Shadow layer.  Change the Lightness of the layer by selecting Image » Adjustments » Hue / Saturation.  Drop the Lightness down to -100 (Screenshot).
Fig. 6

Next, use the Distort tool (Edit » Transform » Distort) to bring the "shadow" layer to a little more than half of its original size, then stretch the top out just a little (not as much as we did on the reflection) (Screenshot).  We're almost done...
Fig. 7

Reorder the layers so that the "shadow" layer is below the original text layer, but above the background.  All that is left to do is to apply a Gaussian Blur (Filters »Blur » Guassian Blur) with a two or three pixel radius (Screenshot).
Fig. 8

That's all there is to it.  I hope this comes in handy for you.  And if it does, please let me know!  I'd love to hear about it.

No comments:

Post a Comment