Image Preview: Aqua Style Tabs.

Step one:
Start with a large black canvas, in your layers window make a new layer set. Name it Aqua style tabs.

Create a new layer then draw a 166 x 25 pixels, #005393 rounded rectangle using your your rounded rectangle tool. Use the fixed size setting under rectangle options to make the exact rectangle.

Add the following layer styles:

Step two:
In a new layer draw a 1000 x 5 pixels, #C6ACE2 thick line across your canvas. Use your rectangle tool to make the rectangle so you can use the fixed size setting under rectangle options to make the exact line.

Add the following layer styles:

Step three:
Just on the center of your tab, in a new layer draw a small 43 x 7 pixels, white rounded rectangle.

Add a gradient overlay layer style:

Step four:
Duplicate your small rounded rectangle layer twice and position them on the left and right of the original shape. Set the copies opacity level to 48%.

Final Image: Aqua Style Tabs.

Download Source File:

You can download the original source file.

Step 1: Create a new document of size 200X56 pix. Keep the background color as white (#FFFFFF). Select the rounded rectange and draw a new rectangle like this.

Step 2: Select the rounded rectangle layer and click on gradient overlay.

and use the following settings this is what I got, also ad 1 pix black color stroke (outside).

Now out basic button base is ready, it is now time to add a text. Let us add something like Homepage. You can use anything for that matter. I will use Homepage use any font of your choice. Create a new layer and now ctrl+click on the rounded rectangle layer. This will make the selection now fill it with black color so this will cover the complete button with black color. Now select only the starting part because we will animated with varying colours there. I guess you would have seen lots of similiars buttons at myspace.

Now press ctrl+shift+ (inverse selection) and press the delete button. This is what I got after doing the above step.

Now work with photoshop is over. Now we will animate it using Adobe Image ready. Make sure you have saved the file. Now press File>Edit in Image Ready. This will open the button in Image Ready. Where we can perform layer animation.

Now select duplicate current frame

now select the top layer and select color over lay and use this color #3B2424, again duplicate this layer and select a more ligher color like #4F4242. Now try animating the effect you can already see some nice effects don’t you . To make the animation more smooth make more layers and lighten the color slightly in every frame. Once done then reverse the process. i.e. after completely light make it dark all over again. All depends how many frames you use, the more frames you use more smoother animatiion also big file size. This is how my frames looks like.

This is what I got as my button when I play the animation this is what i get. Now go to File>Export>Macromedia Flash (SWF). Now this is what i got.

View the flash animated button

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.