Page 1 of 1

Making a Web 2.0 Logo [How-To] Rate Topic: -----

#1 omochan  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 148
  • Joined: 19-October 06

Posted 03 July 2008 - 01:58 PM

Here's a blog with the fonts of web 2.0 that you want to work with.

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:

Posted Image

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:

Posted Image

You should now have:

Posted Image

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:

Posted Image

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:

Posted Image

Then, I am going to use the character tab, and adjust the letter spacing like this:

Posted Image

Now you should notice a difference in the spacing:

Posted Image

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:

Posted Image

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.

Posted Image

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.

Posted Image

Posted Image

Posted Image

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:

Posted Image

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:

Posted Image

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:

Posted Image

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:

Posted Image

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:

Posted Image

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:

Posted Image

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. ;)

Posted Image

There's another way to end this one that's the slightest bit more complex. I'll post the result here:

Posted Image

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.

signing off,
omoi

This post has been edited by skyhawk133: 03 July 2008 - 02:21 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Making a Web 2.0 Logo [How-To]

#2 gabehabe  Icon User is offline

  • GabehabeSwamp
  • member icon




Reputation: 1376
  • View blog
  • Posts: 10,951
  • Joined: 06-February 08

Posted 04 July 2008 - 05:43 AM

Found a use for it already :^:

Just one note, about the reflection...
Rather than getting the eraser, you could add a layer mask.
Then, add a white-black gradient on the layer mask, until you're happy with how much has been faded out.

This will give a nice, all round neat effect :)

Keep up the good work :^:
Was This Post Helpful? 0
  • +
  • -

#3 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 207
  • View blog
  • Posts: 988
  • Joined: 28-February 09

Posted 01 March 2009 - 06:06 PM

great work on this tutorial, the image looks very clean and you explained it perfectly
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1