As to what I mean when I say "Web 2.0 logo", take a look at this for an idea and a little humor.
Wonderful and terrific! So now that we've seen it, how do we make our own? Let's have a look-see! Before we start, I would like to state up front that this is done in photoshop and I will be speaking from that vantage point. Let's continue.
First, go to file and click "New...", you should see this:
From there, you want to make an image file tall and wide enough to hold the text you want to have. As you can see, I'm using 450 by 150 for pixel size.
Next, let's take our first layer and fill it in with black. You can do this by simply pushing alt + backspace or using the paintbucket tool on our toolbar. The toolbar is this thing:
You should now have:
Now for the text. I am going to type "Nystic 2.0" using Agency FB font. It's actually a professional font which means that, unless you are very fortunate, you will have to pay for it. I worked making real estate ads, so I got the font for my job . Enough bragging. Here's what you should have so far:
This, of course, should have two layers. Let's continue. I am going to space the letters out a little bit because they are too close together for my liking. To do this, I am going to adjust the letter spacing. There are two ways to do this. I am going to use the palette well:
Then, I am going to use the character tab, and adjust the letter spacing like this:
Now you should notice a difference in the spacing:
Let's color the text using those two colored squares at the bottom of your toolbar. Double click them, and you should see this screen:
Look at the amount of colors you can pick! You can use the text tool to highlight the text you want to color. I chose two retarded-but-common-to-web-2-point-oh colors: 08a5ef and ff157e.
Next, we are going to make a reflection. To do this, I am going to duplicate (make a copy of) the text we have, then invert it (flip it upside down). To do this, right-click on the layer you want to copy and pick duplicate layer. After that, go to edit -> transform -> flip vertical.
Finally, move the duplicated layer around until you are comfortable with its position. If it hangs off of screen, then don't worry about it; we'll erase some of that inverted text anyway. Here's what I have right now:
Now, go to your layers. The inverted layer should be on the top. To check, you can click the little eyeball to the left of the top layer. This turns the layer off. If you have followed my instructions so far, you should no longer see the inverted layer. Click the eyeball again to turn the layer back on. Now, go to opacity (it's toward the top and on the right). It should say 100%. Let's adjust that. You can pick any number you want, but I believe that the number that would make for the best effect is about 25-30%. Let's use 25%. At this point, you're probably smiling. You should be. This reflection looks pretty cool, but we have a little more work to do.
Now that we have our reflection going, there are a few things we can do to make it more real (actually, a lot, but that's outside of the scope of this tutorial). There are two things we will do today. Number one, we are going to blur our reflection ever so slightly. To do this, go to filter -> blur... -> gaussian blur. When you do this, you should see this warning:
Don't panic. Text is vectorized in photoshop. That means it doesn't lose quality when resized. In order to use your filters and such on the text, however, it needs to be converted into a pixelized format (the kind that loses quality when you resize). Now then, you should see a window like this:
I'm setting the blur to 1.0 since I only want a light blur. After this, go to your eraser tool and erase approximately half of the reflection image. Start at the point furthest away from the original (non-blurred) text and works toward it. It should look something like this:
Whew! Almost done! If you have kept up with this so far, get a drink and a bit to eat. This is intense!
Finally, a finishing touch; no web 2.0 logo is complete without gloss, so let's add some more!
You are going to hold the ctrl button on your keyboard and click on the original (right-side up) text. This will select the outline of the text. Remember that you need to hold the ctrl button. After that, make a new layer and select the gradient tool. You want to head toward the option bar at the top. It should look like this:
At this point, hold the shift button. This will allow you to make a perfect vertical or horizontal line. Start from the top of your text and drop the line to about 3/4 of the way down and let go. You should see this:
Ugh! Too much white here. We want a smoother gradient. To achieve the proper effect, lower that opacity to about 50%. No higher than 65% for sure. After that, it's a wrap.
There's another way to end this one that's the slightest bit more complex. I'll post the result here:
To make the above effects, select the layer the text is on while holding ctrl and then click the [T] icon. It will highlight the letters. Then go to the elliptical marquee tool and hold shift. This will subtract the shape of your oval from the selected text. Play around with it a bit and see what we get
And that does it for now.
This post has been edited by skyhawk133: 03 July 2008 - 02:21 PM