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.

Sunday, July 8, 2007

I hear the train a comin'...

Over this past weekend, the family and I traveled to St. Louis, as we do about once every other month to visit Christina's family.  Normally we'll drive the 7 hours from Little Rock to St. Louis, we've flown a couple of times, but this time we decided to try something different.  The idea was actually inspired by my 4-year-old step-son who, as most toddlers do, has an infatuation with trains.  Yes, we did; we took a train to St. Louis and back.  I decided to describe the details of our adventure in transportation and provide some suggestions in between.
When we first considered the idea, it sounded novel.  After a short trip across cyber-space we discovered that the cost was actually little more than we would otherwise spend on gas alone.  The phrase, "It's something different", was spoken more times than I can remember as an explanation to our friends and family after we had purchased the tickets online.  As I'm riding home now, I realize just exactly what "different" means.
Having never been on a train before I was expecting a train and station similar to those you see in the movies... I can guarantee you that the Little Rock Train Station will not be seen in Mission Impossible IV.
We arrived at the station in Little Rock at about 11 pm, as all passenger trains travel through the capitol city late at night.  The high-backed wooden benches, tile floor and vaguely present air-conditioning of the station was reminiscent of an old southern church on a summer Sunday night (I expected a sweaty preacher to appear with a "hellfire and brimstone" sermon at any minute).  Most of our fellow passengers seemed to have collaborated on matching luggage: Wal-Mart sacks and trash bags mostly.  I think it really added something to the motif of the station.  So much for first impressions.
I would make some kind comment about security, if there was any.  Ok, all right, I'll take that back... I was asked for my ID... twice.  Seriously though, it was as if we had entered a world where we were no longer at war.  There wasn't a single semblance of any real security: no security guards, no TSA agents, there wasn't even a freaking metal detector for Pete's sake!  Oh, that's ok Mr. Chertoff, I'm sure the enemies of the United States are only interested in hitting airborne targets, you can go back to sleep now.
As we boarded the train in Little Rock, we crept up into the second level of the car where we found our seats.  Most of the people onboard were sleeping in all kinds of positions in their seats.  Once we were settled in, we attempted to do the same.  This became a futile effort.  
Suggestion #1: Get a bed.
While the crew made a valiant effort to provide a comfortable atmosphere for those who wanted to sleep in their seats, you just can't get a good night's rest with an armrest between your cheeks (if you know what I mean).  Upgrading your travel to include a bed is a little more costly, but it will be worth it in the end.
The next morning the conductor stopped by to make sure that we knew that the Dining Car was open for breakfast.  Originally this wasn't part of our plan, but since the train was running about 90 minutes late (and we weren't quite ready to give up our adventurous spirit) we figured we'd give it a shot.
Suggestion #2: Get a bite.
The service and the food in the Dining Car were excellent.  Breakfast being my favorite meal of the day, there's nothing better to start your day than a western omelet, toast, fresh fruit and hot cup of joe, all while enjoying some of America's scenic beauty.
Suggestion #3: Set a loose schedule
We arrived at the station in St. Louis almost two hours late.  Luckily we were able to call ahead and let the rest of the family know not to drive 40 minutes out of their way just yet. Hindsight shows this to be a recurring theme in rail-travel with Amtrak, as our homeward-bound train picked us up over two hours past it's scheduled time and we arrived back in Little Rock a full three hours late.
After trying to decide whether this was a good experience or bad, I think it's best said: this was a learning experience.  Will we do it again?  Maybe so... but we'll definitely get a Sleeper Car with beds... and a hot cup of joe in the morning.