Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Design a Delicious, Shining Circle Play (Web) Button in Photoshop


In this tutorial, I will show you the steps I took to create this interesting Shining Orb Circle Play (Web) Button in Photoshop . This is an beginner level tutorial and steps are quite easy to follow, have a try :)

Along the way, we will practice some basic drawing skills and adding light effect onto the elements, as well as the use of Pen Tool, layer blending mode and selection techniques.

Club flyer printing is a great way to market and spread the word about upcoming events.

 

Step 1

Create a new document (size doesn't really matter) with black background, add a new layer and paint a dark blue back light with a big soft brush:

img

Create a new layer and draw a yellow circle in the centre of the canvas:

img

Now let's add some light and shadow for this circle - firstly select this circle layer, use a soft white brush to paint on the position shown below:

img

Create another layer and use a soft black brush to the paint some shadow to the bottom right as shown below:

img

Create a new layer below the circle layer, use a soft black brush to paint some shadow under the orb:  (Use free transform tool to compress it down)

img

and here is the effect so far:

img

Step 2

Now let's add the play symbol to the image - Create a new layer and grab the Polygon Tool from the toolbox:

img

Apply the following settings for this tool, and set the colour fill to be dark brown:

img

Draw a triangle shape as shown below: (might be helpful to turn on the grid display with Ctrl + ' keyboard shortcut and use it as guide)

img

Apply the following layer blending options to this play symbol layer:

Inner Shadow

img

Gradient overlay

img

and here is the effect for the play button so far:

img

Now let's add some glow for the play symbol - Create a new layer under the triangle layer,, and use a soft white brush roughly the same size as the triangle, do a single-click as shown below:

img

Duplicate this layer once, and compress it down with free transform tool. Rotate and attach it to one of the triangle lines - this create some extra glowing effect:

img

Duplicate this layer twice, rotate and move them to the rest of the triangle lines:

img

and here is the effect so far:

img

Step 3

This step is optional. I decided to add some string effect to the button just to make it look a bit unique and interesting.

I used the Pen Tool to draw a path and stroked the path with a 5px hard yellow brush (with simulate pressure setting on):

img

Then I added a knot to the button by drawing a rectangular shape and attach it to the string - perspective the shape a bit:

img

and here is the effect after the perspective settings:

img

We can add some texture to this knot to make it looks a bit realistic: - apply the following layer blending options to this layer:

Inner Glow

img

Bevel and Emboss

img

Gradient Overlay

img

Pattern Overlay

img

and here is the effect so far:

img

Step 4

Now we can add some wave lighting effect around the orb. To do this, load the selection of the original orb layer again and create a new layer, use a soft white brush to paint inside the selection as shown below:

img

Deselect the selection, move this layer slightly to the right, you will have the following effect:

img

Duplicate this layer once, flip it horizontally and move it to the left side of the button:

img

and you will have the following effect so far:

img

We can now add some little shining dots around the button to add some special effect. To do this, grab a soft brush from the brush panel and apply the following brush options:

Shape Dynamics

img

Scattering

img

Other Dynamics

img

Make sure to tick the "Smoothing" option.

You can now use this brush to paint some little dots around the orb to give the overall image a soft touch:

img

Step 5

We're almost done! For some final adjustments, I decided to add some glowing light around the orb by creating a new layer under the original orb layer, and use a yellow soft brush to paint around the orb:

img

To play with the colours, I also added a colour balance adjustment layer on top of all layers for some red colour lighting effect:

img

img



Author's URL: psdvault
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: