Creating cool push button in Photoshop

Creating cool push button in Photoshop

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!


Push button basic layer structure

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.

Push button basic layer tutorial instruction

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 :D.

Similar Posts:
Powered by Shutterstock

Comments

  • meg

    thanks for sharing

  • http://www.xiaoyenzi.com Apple

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

  • http://www.jay-han.com 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

  • http://www.xiaoyenzi.com Apple

    Thank you.

  • http://www.jay-han.com jayhan

    You are welcome! 😀

  • http://www.datamouse.biz Web Design Stoke

    Thanks for sharing – looks great!

  • http://www.jay-han.com jayhan

    No problem! 😀

  • wutang

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

  • http://www.jay-han.com jayhan

    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.

  • wutang

    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!

  • http://www.jay-han.com jayhan

    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.

  • 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

  • http://www.jay-han.com jayhan

    Thanks :D.

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

  • sad

    thanx:)

  • http://www.jay-han.com jayhan

    no problem 🙂

  • http://www.homequran.com homequran

    Excellent thanx

  • http://www.animhut.com 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) 😆

  • http://aerialss88.webcindario.com aerialss88

    Yeah.Really nice button. Good job.

  • Davide

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

  • http://ww.learningquranonline.com learningquranonline

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

  • 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.

  • http://kraplar.ru/260/ Тимур Макаров

    Вполне возможно. Иногда так действительно случается.

  • http://www.hmmawards.com jim decicco

    wow! great button graphic – thanks!

  • Presidio_Dog

    So how would I go about making a script or something, so that I can make a button like this and have it “press in” when it is clocked on?

  • Mathias

    Great. Thanks for sharing!

    • jayhan

      @Mathias: You are very welcome!

  • ahmed

    Great. Thanks for sharing!
    http://www.tadeebulquran.com

  • Carlos

    You are amazing, Jayhan, thanks from Mexico 😀