Web 2.0 is nowadays used by almost all websites, either for the logos or the full template. It is now the main attraction of the website, after all, who would be interested in dull websites? So I will teach you how to create a basic, simple but stunning Web 2.0 logos. In another chapter to be posted just in a few hours, I will discuss how to choose the right color for a web 2.0 logo.

Note : For all tutorials, I am using Adobe Photoshop CS3 so functions may vary from version to version. Also, my operating system is Microsoft Vista so mac users should refer Ctrl as Command.

Final Image after the end of the tutorial should look like this :

1-> Open Adobe Photoshop and then create a new file (Ctrl + N). For this tutorial, I am using 700px as Width and 500px as Length. You may select your own depending on your preferences and space on website.

2-> Now fill the background layer with Black (Press G on the Keyboard for the Paint Bucket Tool and make sure your background color is set to black. Then click on the screen).

3-> Now for the logo, select a font depending on the theme. My favourite ones are Baar Zeitgeist and Cocon. Select Font Colors that look attractive and bright. As a better effect, I am writing ‘TechYou’ on a different layer and ‘i’ on a different layer with different fonts and colors so that I can use both my favourite fonts.

4-> After typing the text you need, go to Layer >> Layer Style >> Blending Options and use the settings given in the screenshots below. Since I am using 2 fonts on seperate layers, I have given different settings (like light pink outer glow for the pink text and light blue for the blue). The screenshot only shows blending options for the pink layer. For the blue layer, all settings are same except the color for inner and outer glow. (Light Blue – #2175ff)

5-> Now merge the text layers (in case you have made 2 different text layers) and then duplicate it (Ctrl+J). In case you have all the text on 1 layer, just duplicate it and remove the Layer Styles (Right Click the layer in the layer menu and select Clear Layer Styles for the duplicated layer only).

6->Now select the duplicated layer and invert it. (Edit >> Transform >> Flip Vertical). Now Press Ctrl + Down Arrow and shift it such that it looks like a reflection. Apply a layer mask to the layer. Now select the gradient tool and then the follow the screenshot.

7-> In the layer menu, select the duplicated layer but not the layer mask. (The box on the left side). Now go to Filter >> Blur >> Gaussian Blur and give a blur of 1px. This will make it look like a real reflection.

8-> Now comes the Web 2.0 part. Press Ctrl and at the same time click on the layer where you have the main text. You can see that it gets selected in the main canvas. Now select the Elliptical Marquee Tool and use the settings in the screenshot. Then select a circle such that the top part of the text is selected.

9-> Now press Ctrl + Shift + N and create a new layer. Make sure that some part of the text is selected. Now change your background color to white and press Ctrl + Backspace. This will make the top part of the text white. Press Ctrl + D to deselect and change the opacity of the layer to 10-12%.

11-> Here is how the final image should look. I have just added a cute little RSS Feed icon on the top. Do comment in case you liked it or have any problems. Even a small ‘Thanks’ will motivate us more for such tutorials.