Create a slick glowing button in Photoshop
Every designer, whether he is a beginner or a professional will someday, in his career create icons for his client or his portfolio. Creating icons can be extremely fun, provided you do it the right way. Most importantly, you should learn the basic principles of icon design first, the importance and functions of icons on web sites and in user interfaces. This might take a long time but trust me, its the right way. You should also learn how to use your imagination and creativity to reflect the characteristics of the icon effectively.
Neatly designed icons can make a website more attractive and easier to use and aesthetically more pleasing. There are hundred of tutorials on how to create icons on the web today so this one might seem not that exciting but, I wanted to try something different and approach this in a unique manner.
This tutorial is aimed for complete beginners who have started out to learn the basics of Photoshop and I cannot assure you that this tutorial will teach you everything you need to know, but will help you in grabbing some tips which will make you life easier in the future :)
So, in this tutorial, we will learn how to create a slick futuristic button using Photoshop. We will be using Photoshop since it is more flexible and easy to learn and use. I would recommend you to use Illustrator for creating vector icons and buttons but as I said, I am more adept in using Photoshop. It is not a big problem as you can scale down to any size you want. So, lets move on.
Tools Used: Adobe Photoshop
Estimated Completion time: 15 minutes
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.
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.
This is how the document looks like at this point of time. Notice how the grids are equally spaced.
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.
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.
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.
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.
Now, let us make this lighting a bit more realistic. Go to Filter > Blur > Gaussian Blur and apply a blur of around 12 px.
Now, reduce the opacity of the arc layer to around 30%. You can use any values to get the desired lighting effect.
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.
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.
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.
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.
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.
Reduce the opacity of the gradient layer to around 40% to make it look like a reflection.
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.
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.
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.
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.
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.
You can download the PSD file for free and meddle with however you want. Add some styles, a neat background. If it turns out good, feel free to share the result with us. We are more than happy to compliment your curiosity. You can even go ahead and create your own icons :)