Home » Tutorials » Web 2.0 Logo

Web 2.0 Logo

How to implement popular and effective Web 2.0 concepts into text through creating a snazzy logo.

Step 1
Open up a new document sized up for your text. I used 505 px by 165 px at 72 dpi with a white background for web use.
Step 2
Take your text tool and type your text. I used Arial Rounded MT Bold at a size of 72 pt. Web 2.0 texts take the turn of smooth and plump. To fulfill this, Arial Rounded works very well.

Step 3
Now for color selection. This is also an important part of Web 2.0. Colors should be brighter and off of a predominant color (red, green, blue) by a little. For this tutorial, I'll go with a pink: #ff00d2.

Step 4
Web 2.0 also depends on the use of gradients. We don't want anything out of this world like a rainbow gradient, however. We want something very subtle and smooth. On your text layer, go to "Blending Options" and use the following settings for a Gradient Overlay:

Step 5
We also want the edges to be smooth yet defined. For this we'll add a Stroke:

Step 6
This stroke really does us no good on a white background. So to fix this and add smoothness we will work in a Drop Shadow:


Step 7
You now have some snappy looking Web 2.0 text that looks very close to a logo of sorts. But it needs something special still. For this we'll play on the letters. I'm going to pick on the two i's in designing. Select your rectangular shape tool and make a rectangle that stretches a little above, below, beyond the sides of both dots:

Step 8
Give the rectangle the pink color we used for the text earlier: #ff00d2. Now to blend it with the style we've created, right click on our original text layer and click "Copy Layer Style." Now simply right click on our shape layer and click "Paste Layer Style." But to decrease the gradient, change the opacity of the Gradient Overlay to 40 instead of 54.

Step 9
But we still have the problem of it being too large and the fact that it's a rectangle when the rest of our text is rounded. To solve this we will use a layer mask. While holding Ctrl (Cmd on Mac) click the icon in the layers palette next to our original text layer. This will make a selection of the text.

Step 10
Make sure that the shape layer is selected in the layers palette and then click the Add Layer Mask button in the layers palette. Our new shape will completely disappear. But not to worry, we'll work some magic and bring it back.

Step 11
Select your paintbrush tool and choose a hard round brush that is the size of the dots on our i's. Use white as your color. While our shape layer is still selected hover your paintbrush tool over the left dot, hold Shift, and drag all the way across to our right dot. Holding Shift binds the paint brush to move in a straight line whether you do so with your mouse or not. Now we have completed our new object and we have a simple Web 2.0 logo! Of course Web 2.0 is a nebulous term, but you can capture some of the key elements using what we've learned here. Our final product: