Photoshop  Home Photoshop Drawing Techniques Fast Forward Button
rss

Fast Forward Button

Author: Pulse GFX More by this author


Step 1: Creating the Workspace:

Start with a 100 x 100 Document and fill in the background with a nice white (#FFFFFF)

Make a new layer and grab your elliptical Marquee tool make the style fixed size and make 75 px x 75px circle like so:

image 1

Step 2: Add some colour:

Fill it in with any colour, as we will be adding in some gradient colours shortly.

Step 3: Apply some filters:

Right click on the circle layer in the layers panel and select Blending Options. Apply the following layer styles:

Drop Shadow:

image 2

Inner Shadow:

image 3

Gradient Overlay:

image 4

Apply all of those settings and our base layer should look like this:

image 5

Step 4: Duplicate the layer

Next we need to duplicate the base layer we just creating and modified the layer styles on. To duplicate the layer, simply right click on the base layer and select Duplicate layer. You will now have two base layers.

On the duplicated layer apply following layer styles (Layer styles on the base layer will have been copied onto the duplicated version. There is no need to change or remove any of the transferred layer styles, simply change/add the following layer styles below):

Inner Shadow:

image 6

Inner Glow:

image 7

Stroke:

image 8

Apply those and then our duplicated base layer will look different but add a new effect to the orb button:

image 9

Step 5: Making the selection:

Now with the duplicated base layer selected in the layers panel hold Ctrl on the keyboard and click on the layers thumbnail so it selects the shape:

image 10

Now grab your elliptical marquee tool this time make sure the style is set to normal and not fixed size, then choose the third option Subtract from selection, then make a selection over the current selection like this:

image 11

After making this selection you should be left with a curved selection like this:

image 12

Make a new layer and then fill it in with a neutral white (#FFFFFF) to give you this:

image 13

Lower the opacity of the newly made layer to about 48% and then change the Blend mode to Soft Light to give you this effect:

image 14

Duplicate the curve selection and then go to Edit > Transform > Rotate 180 so you have two curved selections on your canvas:

image 15

Position this new curve at the bottom of our circe base like so:

image 16

The Final result:

Fast Forward Button Tutorial: Final Result

You could use the button in a number of different ways, here's a few of my ideas:

image 18image 19image 20image 21

I'm sure could this of more but there's a few to start you off!

Download the PSD file here.



Author's URL: pulsegfx.net

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Fast Forward Button"