So let’s get started wasting any further time. As usual fire up your Adobe Photoshop. Create a new canvas of size 308X261, keep the background color as White.

Step 1: Select the Round Rectange Tool.

Now as you hold down shift draw a Rrectangular over the canvas. You will notice that your rectangular is actually drawing like a square. Now you should get a rounded edge square. This is what I got after performing this step.

Now we are going to add some blend to the rounded square to make it look more glossy and neat. Select the square ( ctrl+click on the layer). In the layer window you will find blending options, just drop down it.

Select Gradient Overlay.. from the dropdown box and use these settings.

In the blending options give a stroke of one pixel. This is what I got after filling out round edged Square with Gradient and 1 pix Stroke.

Now lets rotate the shape. Press cntrl and click on the layer and it will get selected. Now press Ctrl+t, this helps us to oerform free transform on the the Shape. You can also do this by Edit>Transform. Now hold shift and rotate as shown in the below screenshot. Just practice it a bit and you will be comfortable soon. Very handy function in Photoshop.

Rotate in 3 steps. This is what I got after rotating the shape.

Step 2: Now we will duplicate this layer so that we don’t have to do it all over again. But we will only play with the gradient and rotation. To duplicate layer, go to layer window , right click on the layer and press Duplicate this Layer option. This will duplicate the current layer.

We will get a new layer which you can see are present in the layer window above. I have duplicated the layer twice. So I have two layers above the current layer. Now select the top layer and select the Gradient Blending option and use the following settings.

This is what I got after applying the Gradient and Rotating it a bit.

These are the Gradient Overlay settings for the 3rd Layer that we duplicated form the first layer.

This is what I got after applying the Gradient and Rotating it a bit.

Step 3:

Now you can see we are done with the coloring , now they look me crisp and neat. Let us now add a talking bubble. This shape you can find in Custom Shapes. It comes by default in Photoshop.

I selected the tool and drew it over the right top corner where there was white space. This is what I got after doing that.

Now we will add gradient to this bubble too. You are free to use any, but I chose to use these.

This is what I got after adding this gradient to the bubble.

We are almost done. Now it’s time we add the text i.e. our blog Name etc. Keep the name short as web2.0 has smaller names. I have just added my name with some fancy font.

For the Blog 2.0 I have used Trebuchet MS font. This is the Gradient Overlay setting I have used.

That’s it. We are done. My logo is ready. You can add a picture, of your name anything in this. I have added my name little shy to add my pic lol.. Anyways this is what I got.

Today we will learn how to make a sleek looking button.

Step 1:

Start a new document of size 220×260. Fill it with a background colour as Black #000000.

Step 2:

Create a new layer and select the Rounded rectangle shape and draw a rectangle, like this

Select the layer and choose gradient overlay.

and select the following Gradient Colours.

This is what I got my result as

Step 3:

Now let us try to give some effect and text to the button to make it look more attractive. Select the Eleptical Marquee tool and draw a ellipse like this.

Create a new layer and fill it with white colour and reduce the opacity of the layer to 27% you should see something like this.

Now draw another ellipse using Eleptical Marquee tool like this and move the selection to the left this will cut the top white layer.

Now press the delete button and you are left with only the part in the right. Now ctrl+click on the button layer and press ctrl+shift+i to make the reverse selection and press the delete button. This is what you should get after doing it.

Now you can see our button is taking some shape. let us add some text and shine to make it look more sleek. You can choose a pixel font to make it look more futuristic. This is what I have got.

Now let us add some shine. Create a new layer above the text layer that we just created and draw a eleptical selection and use the single transparent gradient and deleted the extra part by inverse selection. You see this for the detailed instruction here . This is what I got

Now just duplicate the layer set and change the text to add more similar buttons. You can also experiment with different colour to give it different looks.