cool power button with photoshop

Step 1:

Open Photoshop, create a new document of size 500px and switch on the grids by pressing (CTRL + ‘). It is important to use the advantage of grids while creating icons, buttons and designs alike because we don’t want to mess up the geometry. So, let us enable the grids and set the number of grids by going to Edit>Preferences>Grids.

Step 2:

We started with a 500px size document. You can pretty much start with any size. Now, its time to sit and do the math. Make sure the divisions are equally spaced. So, for a 500px document, having gridlines after every 100px makes it look neat and easily followable. Make sure you don’t overdo it, ending up with quite a messy bunch of grid lines.

Step 3:

This is how the document looks like at this point of time. Notice how the grids are equally spaced.

Step 4:

Now, using the Ellipse Tool, create a circle by holding SHIFT + ALT key. Set the option as SHAPES in the Toolbar(Just below the Menu Bar). Use the below image for reference.
SHIFT key : Creates a perfect circle (constant radius)
ALT key : Keeps the center intact.

Step 5:

Now, we need to create the lighting effect. So, we will create a small arc just on the top part of the circle. To do that we will create two circles and delete everything except the intersection.
So, using the same center, and setting the foregorund color as white (Press D and X in your keyboard) Create a smaller circle as shown below.

Step 6:

From the Toolbar, select the last option (Exclude overlapping shape areas) This is to create the arc by erasing the overlapping areas of the two ellipses.

Step 7:

Using another center for the new ellipse, create a circle as show below. This center is one grid block below the original center used for the other two circles.

Step 8 :

Now, once you have managed to get two circles (with the intersection) as shown above, Rasterize the image and using a Marquee Tool, delete the bottom arc.

Step 9:

Now, let us make this lighting a bit more realistic. Go to Filter > Blur > Gaussian Blur and apply a blur of around 12 px.

Step 10:

Now, reduce the opacity of the arc layer to around 30%. You can use any values to get the desired lighting effect.

Step 11:

Now, to get a better realism, i decided to add a darker shade at the bottom which obviously cannot be seen in the Black button. So, just click on the original circle layer in the Layer’s palette to change color to anything you want :) I used a blue color as you can see below.

Step 12:

Now, let us create a small reflection effect. Using the Pen Tool, we will draw a path as shown below. Make sure the option is set to ‘PATHS’ rather than ‘SHAPES‘. Using the ‘Rubber band’ option from the toolbar (this is just to make your job easier) create a path as shown below. If you are weak in using the Pen Tool, I advise you to go through some tutorials from Tutorial9.

Step 13:

Make sure the Pen Tool is still active. Now, right click on the path and select ‘Make Selection‘ and Use 0px for feather radius. This will give it a perfectly crisp border.

Step 14:

Create a new layer above the arc layer and using a Gradient Tool, (gradient running from WHITE to TRANSPARENT) Apply a gradient to the selected area to get a similar result as shown below.

Step 15:

Now, we need to delete the part of the gradient which lies outside the button. To do this, make sure the selection of the gradient layer is active, if not, just Press CTRL + CLICK to get the selection. Now press CTRL + SHIFT + I to invert the selection and now press delete the remove the unwanted part which lies outside the button.

Step 16:

Reduce the opacity of the gradient layer to around 40% to make it look like a reflection.

Step 17:

Let us apply a drop shadow to give it a depth and make it look more realistic. Double click on the BUTTON layer which brings out the layer styles options and set the Drop shadow effect with the settings as shown below. Make sure the ‘USE GLOBAL LIGHT‘ is unchecked as this will affect any other layer styles if used.

Step 19:

Now, I changed the color to black again as I wanted to get the slick look. I got the POWER icon from google images and pasted it onto the document. You can even use the Pen Tool to draw the icon but I want to skip that step as we are not focusing on that.

Step 20:

To make it look like a futuristic button, we need to add something glowing to it. Let us add a outer and an inner glow. Just double click on the POWER layer and set the two layer styles with settings as shown below. you can use any color you want but BLUE always gives a sophisticated feel.

Step 21:

Apply the INNER GLOW. Also Since we have a white background for the POWER layer, the blend mode, which is by default set to SCREEN must be changed to NORMAL.

Step 22:

Thats all folks. We learned how to create a easy and slick button in Photoshop. That wasn’t too difficult was it? Hope you guys had fun and enjoyed it. As i said, it is mainly focused on beginners so that a few tricks can be learnt here.

Here is what I did with the button. I added a metal background which i found here and using some blood splatter brushes which I found here, and created a realistic looking button :)

Posted in Photoshop