Creating cool push button in Photoshop

17.12.07

Recently I created a push button and I think it is quite cool and decided to create a tutorial here in my blog. There is quite a variety of styles of push button in the real world and the one I did here is more to gaming arcade push button styles. The final button design is shown above. What do you think?

Like my last tutorial, this tutorial also uses a lot of layer styling. To make the tutorial more understandable and effective, I include a starting working PSD, a final outcome PSD as well as the ASL working layer styles file. You can download it here: Push Button Tutorial Files. Just download and extract it, launch Adobe Photoshop and starts the tutorial!

Before proceed, let me show you the structures of the push button we going to create. There are 6 shape layers to construct the push button:

Gray Border
Gray Body
Button Shadow
Button Orange Body
Button 3D Highlight
Button 3D Shadow

Then, open the pushbutton-start.psd file, inside, you will find the all the 6 basic shape layers but without the styling. You can see that basically, all of them are done by using Ellipse Tool. Then, load the Push-Button-Styles.asl file into your Styles palette. By following the instructions written in the picture below, apply the styles respectively to all the six shape layers.

After applying all the layer styles, you had successfully create a push button! I hope you all like the final result of the push button. Eventually you can check the final result at the pushbutton-final.psd file. Since it was a push button, I think it is better to include a pushed-in version, you can find it in the final PSD too.

Hope you like this tutorial, if there is comment or you have a better outcome, feel free to share it out here .

meg

thanks for sharing

December 18th, 2007 at 1:30 pm

Apple

Simple and great tutorial. Thanks for sharing. By the way, what font are you using, I mean the “Creating Push Button Photoshop Tutorial”.

December 18th, 2007 at 4:05 pm

jayhan

thanks meg and Apple.

Apple, im using a font called “Republika”, you can view and download it here:

http://www.dafont.com/republika.font

December 18th, 2007 at 5:46 pm

Thank you.

December 19th, 2007 at 3:11 pm

You are welcome!

December 19th, 2007 at 10:22 pm

Botón pulsador en PSD « Xyberneticos

[...] parte es broma) pero si para utilizar en algún proyecto, supongo que este articulo escrito por jay-han será útil. Es ni más ni menos que un botón accionador con diseño muy bonito y que se encuentra [...]

December 21st, 2007 at 1:20 pm

Tutorial para crear un botón pulsador en PSD

[...] el blog XYBERNETICOS encuentro un artículo escrito por jay-han que será útil por si quieres añadir un botón pulsador en uno de tus proyectos. Tiene un diseño [...]

December 27th, 2007 at 4:01 pm

Web Design Stoke

Thanks for sharing – looks great!

January 15th, 2008 at 1:58 am

No problem!

January 15th, 2008 at 2:00 pm

Colurz Blog » Photoshop Push Button Tutorial

[...] »Push-Button« in Photoshop erstellen kann, der hat nun die Möglichkeit, sich vom »Creating cool push button in Photoshop« Tutorial inspirieren zu lassen. Das Ergebnis eignet sich zwar nicht unbedingt für jedes [...]

January 31st, 2008 at 4:31 pm

wutang

Hey, nice tut. How do you create the 3d shadow shape layers though?

February 25th, 2008 at 9:14 am

Hi wutang,

I’m using Ellipse Tool to do that. First I draw a circle, then by using “Substract from selection” option, I draw another circle slightly above left of the first circle, cut out the unwanted area to produce the shape.

Thanks.

February 25th, 2008 at 10:09 am

Hey Jay,
thanks for the quick reply.
Ah, you “freestyle” it then.

Also, When you make new ellipses, is there a way to make sure they align perfectly with the previously drawn ellipse? Now, I copy the layer with the circle and uniform scale the copy, is there another way?

Finally, it is a bit hard to see, but what changes have you made when doing the pressed in version?

thanks again!

February 25th, 2008 at 11:33 pm

hi wutang,

u can use the path selection tool, select the both ellipse and on the toolbar there, there are align options for you to either align left, center, etc.

for the pressed in version, i add inner shadow to the button orange body, and scaled the button 3D shadow and highlight smaller. Well you can open the pushbutton-final.psd to check that out.

February 26th, 2008 at 10:14 am

Moore

You’ve truly got an eye for style!
I definitely like i.
I love to see you design a page layout into which that button would fit! Revamp your blog, perhaps?

Anyway, awesome button.
~Moore

March 4th, 2008 at 12:00 pm

Yeah, i wish to have my own skin too. Well, i think i will modify the current skin first

March 4th, 2008 at 10:23 pm

sad

thanx:)

March 28th, 2008 at 1:05 am

no problem

March 29th, 2008 at 10:21 pm

Botón pulsador en PSD at Blog Borchani Studios

January 7th, 2009 at 2:49 am

homequran

Excellent thanx

June 23rd, 2009 at 7:57 pm

admin

| this is my first time visiting this blog,and i like it. me too started a new blog on designing and multimeida, check it. and | thanks for very quick tuts|. i love it.. can i contribute here by giving freebies and tuts or clouds photography(stock images)

July 22nd, 2009 at 11:14 am

aerialss88

Yeah.Really nice button. Good job.

July 31st, 2009 at 7:43 am

Davide

I will try to Profit of
Your Very Nice Graphic Design!
Thanx & Best Wishesses

November 6th, 2009 at 4:41 am

learningquranonline

well that is a cool stuff to tell but a video would explain more in detail for beginner

December 26th, 2009 at 5:00 am

phil

THKS for the tut!

I must say that I don’t agree with learningquranonline usggesting a video tut.
These are very annoying most of the time and sooo slow and not very detailed.
There are already tons video tutorials that teach you where things are.

February 11th, 2010 at 6:23 am