Sunday, April 6, 2008

2.0 Logos - Reflected Text with Gradient

The fun thing about blogs is that it's okay to share the trials and tribulations of development. What is a site or blog without an eye-catching header logo?

Over the next few days, I will present a series of Photoshop tutorials that show how to create a variety of logos. For each tutorial, I will create a logo for this blog and include my results below each video.

Here's the first Photoshop tutorial that shows how to create a simple text-based logo that incorporates gradients and reflection. The video lacks audio, so this might be a little tricky.


Photoshop Tutorial: How to Create a Web 2.0-Style Logo — YouTube

The Results:
This tutorial was relatively simple, but I still had to backtrack a couple times.
  1. Beware of descenders - Descenders are letters that drop below the line of the text. Such offenders include g, j, p, q, and y. I neglected to make my text ALL CAPS, so when it came to work with the reflected text the last "p" in "Photoshop" didn't munched into the one above it, making the letter indistinguishable.
  2. Add an extra nongradient text layer - I found that this shade of blue was just a touch too light, so I duplicated the text layer without a gradient, made sure it was located behind the text with gradient, and nudged it up one pixel to create an edge. It also added a delightful level of depth to the logo.
  3. No need for the Beta button - Unless, of course, you are creating this logo for a site that is officially in its beta phase. For those who don't know, "beta" indicates that the site owners are still testing out the site. Beta is actually the second stage of testing. Whereas the alpha phase is only for internal testing, beta is when the site is opened up to the public (or select representatives) to play around with it.
What do you think of the results?

No comments: