Web 2.0 – It’s the look you’ve been looking for.

Sleek, shiny, straightforward. Soft, rounded edges, crisp-clear text, and a reflection so cool you get chills.

We’ve seen it popping up all over the place; it’s a trend we at Sol Design welcome so whole-heartedly that we’re going to share it with you, honoring the DIY spirit in all of us.

Here’s a really simple tutorial on making a web 2.0 style logo in Photoshop. I used a Mac, with CS2.

1. First off, open up a canvas about the size that you’d like your logo. If in doubt, make it larger, since you can always crop it later. I went with a letter-sized blank canvas, and set the background to a really dark blue (#213047), so the logo will really pop out.

2. In a new layer, type out your text for the logo. Do it in any color you’d like, I used #00adef. For a really clean, smooth, web 2.0 look, use a font like Helvetica or Trebuchet.

3. Next up, apply a gradient to the text, by Ctrl-Clicking (right click for windows) on the text layer. Select Blending Options.

In Gradient Overlay, apply these changes.

4. Using the same Blending Options dialog box, apply these settings to the drop shadow section.

5. Now create a new layer. Name it “Ellipse.” Using the Elliptical Marquee tool, make an ellipse around the upper part of your font.

6. Go to the “Edit” Menu at the top of the screen and select “Fill.

Now select “White” in the dialog box.

Here’s what your image should look like now.

7. Select your text layer. Now go to the “Select” Menu at the top of the screen, and hit “Load Selection.” Use the default settings in the dialog box, and hit OK.

Go to the “Select” Menu again, and hit “Inverse Selection.”

8. Here’s the magic: Select the Ellipse Layer, and just hit delete on your keyboard. Amazing, right? De-select everything (Ctrl-D), and yours ought to look like this:

9. Lower the opacity of the Ellipse Layer down to about 58%, so it’ll look like a shiny, plastic-y highlight.

For the Reflection:

10. Merge your Text Layer and your Ellipse Layer, so that they’ll work together. To do this, select both layers and go to the “Layers” menu at the top of the screen. Hit “Merge Layers.”

11. Ctrl-Click the merged layer and hit “Duplicate Layer.” Using the move tool, move the second image directly below the first.

Go to “Edit,” then “Transform,” then “Flip Vertical.”

12. Lower the opacity of the reflected layer down to about 29%.

13. Now you just have to make a shiny sticker, letting the world know anything special about your brand. We’ve seen tons of these stickers, and they mostly say “new!” or “beta.”

14. Change your Foreground color; I used #b2319e to start. Select the Polygon Tool, and adjust your settings to these.

Draw your first shape.

15. Go to Blending Options for your shape layer, and apply these settings.

16. In a new layer, change your Foreground color again (#f644db), to something brighter, and create the same shape, only smaller and directly over your last shape. Go to Blending Options and apply these settings.

It should look something like this.

17. Next up, type your text onto the sticker. I used a white font, so it would stand out. Merge your two shape layers and your “new!” or “beta!” text layer now, so your sticker will work as one piece.

18. To make the sticker shiny, too, we’re going to do the same thing we did before with the text. Make an ellipse, fill it with white, etc. Follow steps 5-9.

19. For the final touch, merge your new Ellipse layer with your shape, and rotate it to a rakish angle. Oh, that web 2.0 style is just as jaunty as they come.

20. You’re done!

This entry was posted on Monday, April 30th, 2007 at 2:13 pm and is filed under how to, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.