Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Aquatic Button
rss

Aquatic Button

Author: EmpireDezign More by this author


We'll begin this tutorial, by creating a new canvas at a size of 294 x 169 with 8e611b as the canvas color. Next, select the "Rounded Rectangle Tool" and draw a rectangle as illustrated below with a radius of 10 pixels and color 0098d7. Name this layer "Button Frame" in the Layers Palette.

image 1

Now right click on the "Button Frame" layer and select, "Blending Options...". Now click on "Drop Shadow".

image 2

Do not click "OK" yet. Still more to do.

Now click on "Inner Shadow".

image 3

Do not click "OK" yet. Still more to do.

Now click on "Outer Glow".

image 4

Do not click "OK" yet. Still more to do.

Now click on "Inner Glow".

image 5

Do not click "OK" yet. Still more to do.

Now click on "Bevel and Emboss".

image 6

You may now click OK.

You should now have the below image.

image 7

Next, select the "Rounded Rectangle Tool" once again and draw a rectangle as illustrated below with a radius of 5 pixels and color 0098d7. Name this layer "Button Window" in the Layers Palette.

image 8

Now right click on the "Button Window" layer and select, "Blending Options...". Now click on "Drop Shadow".

image 9

Do not click "OK" yet. Still more to do.

Now click on "Inner Shadow".

image 10

Do not click "OK" yet. Still more to do.

Now click on "Outer Glow".

image 11

Do not click "OK" yet. Still more to do.

Now click on "Inner Glow".

image 12

Do not click "OK" yet. Still more to do.

Now click on "Bevel and Emboss".

image 13

You may now click OK.

You should now have the below image.

image 14

Next, select the "Pen Tool" and draw a wave shape using White as the color as the image below illustrates. Then rasterize the layer. Name this layer "Waves".

image 15

Now "Ctrl" click "Button Window" layer to create a selection. Next, be certain that the "Waves" layer is selected in the Layers Palette, then go to "Select" then "Inverse" then "Edit" and finally "Cut".

image 16

Now right click on the "Waves" layer and select, "Blending Options...".

image 17

Do not click "OK" yet. Still more to do.

Now click on "Color Overlay".

image 18

You may now click OK.

You should now have the below image.

image 19

Select the "Text Tool" and use the below settings:

image 20

Now type your preferred text.

image 21

Then select the "Ellipse Tool" and draw a circle as illustrated using White as the circle color.

image 22

Now right click on the circle layer and select, "Blending Options...". Now click on "Drop Shadow".

image 23

Do not click "OK" yet. Still more to do.

Now click on "Inner Shadow".

image 24

Do not click "OK" yet. Still more to do.

Now click on "Outer Glow".

image 25

Do not click "OK" yet. Still more to do.

Now click on "Bevel and Emboss".

image 26

Do not click "OK" yet. Still more to do.

Now click on "Stroke".

image 27

You may now click OK.

You should have the below image after the circle has been duplicated 3 times.

image 28

Then select the "Ellipse Tool" and draw two ovals as illustrated using e6c360 as the circle color. Use steps 2 through 6 for their styles.

image 29

The Results!!!

I've added some aquatic shapes to go a long with the theme. I hope you enjoyed this tutorial.

Aquatic Button Tutorial: Final Result



Author's URL: www.empiredezign.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Aquatic Button"