amplifier button

How to create your own awesome amplifier button in photoshop CS3

This tutorial is for beginners and it’s made in PHOTOSHOP CS3. A couple of days ago I saw some tutorials about ‘How to create user interface controller‘ and they were great so I thought that I should make one myself and then show it to you guys.
So in this tutorial I will explaine you step by step how to creat your own awesome amplifier button. Duration is approximately 15-20 minutes.

DOWNLOAD PHOTOSHOP CS3 FILE

Step 1
Open Photoshop and create a new document. I am using 900×600 pixels. After that using Ellipse Tool(U) create a circle. Hold SHIFT key in order to make a uniform selection. Place it in the middle. Rename new layer to Round Shape.



 
 
Step 2
Open Layer Style by double click on selected layer. Check Gradient Overlay, double click on the Gradient color and change the colors so you have something like the image below.



 
 
Step 3
Check Bevel and Emboss, Inner Glow and Drop Shadow and apply the same settings like images below.



 
 
Step 4
Create a new layer and rename it Round Shape Top. Using Elliptical Marquee Tool(M) make a round selection. Hold SHIFT key to make a uniform selection and also hold SPACE BAR in order to drag it.



 
 
Step 5
Go to Filter > Pixalate > Mozzotint > Type : Fine Dots
Go to Filter > Blur > Radial Blur > Amount : 100 ; Blur Method : Spin ; Quality : Best



 
 
Step 6
Using Free Transform(CTRL+T) make the circle smaller just like the initial inner circle. You can do this by holding SHIFT + ALT. Change Opacity Layer to 24%



 
 
Step 7
Using Ellipse Tool(U) create a small circle and call the new layer Dot. Open Layer Style by double click on selected layer, check Gradient Overlay, Outer Glow, Inner Shadow and apply the same settings like images below.



 
 
Step 8
Press CTRL+R to see Rulers or go to View > Rulers. Also make sure you have Snap turn on. Drag two guide lines : one from the top and one from the left. Using Line Tool(U) – weight 4px – drag a dash. To make a copy of the first dash hold SHIFT+ALT go with your mouse over the dash and drag it away. Use this technique to make the rest of the dashes.



 
 
Step 9
Go to Layer > New Adjustment Layer > Levels… Click on and set the settings like image below.



 
 
Step 10
Go to Layer > New Adjustment Layer > Curves… Click on and set the settings like image below.

DOWNLOAD PHOTOSHOP CS3 FILE

valeron

Hey, my name is Valeron. I am a graphic designer/web developer since 2009. I have created Tutorialstorage on 15th of October 2010 in order to help designers and developers to find the good inspiration before creating their works. You can follow Tutorialstorage on Facebook , Twitter, Google + or RSS Feeds.

One thought to “How to create your own awesome amplifier button in photoshop CS3”

Comments are closed.