In this beginner level Photoshop tutorial, which will hardly take 15 minutes, I will teach you’ll to create  an embedded style logo in Photoshop. It’s a easy method in photoshop, dealing with a few layer effects only.

Final Effect

Create a New Document :

Open up your photoshop and create a new document (Ctrl + N). We need a small canvas here, and 550px by 250 px will do the trick for us.

Creating A Background :

We will add Gradient Overlay to the background. But since you know that the background layer is locked by default (Layer 0), we will double click on the layer and rename it to Background. This will unlock the layer for us.

Now go to the Layer Menu and click on Layer Menu -> Layer Styles -> Gradient Overlay. I will use a blue background and a vertical gradient which goes from Dark to Light Blue. After so many attempts, I finalized Dark Blue (#003471) and the Light Blue (#448CCB). You can go off the track and try your own color scheme.

We must have the dark blue to be the dominant color as compared to the light blue. So we move the color midpoint of dark blue to 60%.

Now, to add another effect, select a brush with a large size (I used 500 px). Set the color to white (#FFFFFF). Change the opacity to 60% and the flow to 70%. Create a new layer now and then use the brush on the top-right of the canvas.

Use the typing tool and type your text in the center of the screen now. Make sure it is in the center because it looks kinda odd if not properly aligned.

Now comes the main part : adding text effects to make it look like embedded text. We are going to add Gradient Overlay, Inner Shadow and Drop Shadow. Open Layers -> Layer Styles and go to the Gradient Overlay tab.

Now, we need a blue darker than that of the background. So I am using Dark Blue (#022854). The second color will also be darker than the background but lighter than the color we just selected moments back. So the Light Blue will be (#0F498C). In this, we need to have the light blue more than the darker shade. Set midpoint to 30%.

Next, we go for Inner Shadow effect. Check the box of Inner Shadow and set the angle to 120 degrees. Set the opacity to 50%, Distance at 2px, and size at 3px.

To make the text look consistent, we will add the Drop Shadow. It will be hardly visible but will enhance the looks of the final output. First, change the blend mode to Normal. Since I want it to be small, I will use Distance as 1px and size of 2px. I sampled a few blues and was happy with the output produced by the Light Blue (#A8C9E6). Make sure that the angle here is also 120 degrees.

Yeah, we are done now and the final image should look something like this. You can go in for your own variations, try a few more effects, and Whoa! You will create something that is very unique

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.