shining-orb-flatten

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.

Here is a preview of the final effect I have for this tutorial: (click to enlarge)

shining orb flatten 500x291 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

PSD File Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 70+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorials there. Signup now and get exclusive :) Find out more about the VIP Members Areas

vip sign up 250 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

OK Let’s get started!

No stock image is required for this tutorial.

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:

1 paint 500x289 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

1 color 500x274 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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:

1 paint white 500x259 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

1 paint shadow 500x209 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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)

1 shadow 500x189 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

and here is the effect so far:

1 effect1 500x376 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Step 2

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

2 ploy 500x315 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

2 poly setting 500x23 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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)

2 draw 500x243 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

Inner Shadow

2 inner sha 500x350 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Gradient overlay

2 grad 500x350 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

2 effect1 500x336 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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:

2 paint light1 500x272 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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:

2 compress 500x337 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

2 dup 500x347 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

and here is the effect so far:

2 effect 21 500x329 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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):

3 pen tool 500x213 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

3 persp 500x264 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

and here is the effect after the perspective settings:

3 attach 500x313 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

3 inner glow 500x350 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Bevel and Emboss

3 bevel 500x350 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Gradient Overlay

3 grad 500x350 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Pattern Overlay

3 pattern 500x350 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

and here is the effect so far:

3 effect stitch 500x275 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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:

4 paint1 500x229 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

4 move 500x220 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

4 paint 2 500x230 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

and you will have the following effect so far:

4 effect1 500x249 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

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

Scattering

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

Other Dynamics

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

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:

4 effect 2 500x338 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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:

5 light 500x242 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

5 col bal mid Design a Delicious, Shining Circle Play (Web) Button in Photoshop

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

and here is the final image I have for this tutorial: (click to enlarge)

shining orb flatten 500x291 Design a Delicious, Shining Circle Play (Web) Button in Photoshop

That’s it for this tutorial! Hope you enjoy it and find it useful :) Till next time, have a great day!