All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
create-glowing-buttons-in-photoshop

Create Glowing Buttons in Photoshop

1-6-08Category Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 500×200 pixels canvas set at 72dpi, and I filled my background with a black color.

Now choose the Rounded Rectangle Tool, on the options palette set the radius setting to 20 px and check anti-aliased. Make a new Layer Set(Layer > New > Layer Set). In a new layer draw a dark green(color code #004653) rounded rectangle, size 126×26 px.

Step 2:
Under Layer Style(Layer > Layer Style) add a Drop Shadow and Stroke blending options to your dark green rounded rectangle layer.

Step 3:
Go to Select > Load Selection, leave all the settings to default. Make a new layer then apply a stroke around the marquee selection by going to Edit > Stroke, set the width to 4px, #004653 color code and the location inside.

Step 4:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Gradient Overlay and Stroke blending options to your stroke layer from step three.

Step 5:
Your design should now look like this.

Step 6:
Now choose the Polygon Tool, set the side setting to 3 and under polygon option check smooth corners. In a new layer draw a white polygon positioned like the picture below.

Pages: 1 2 3
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

19 Responses to “Create Glowing Buttons in Photoshop”

  1. photoshop tutorials Says:
    January 7th, 2008 at 11:52 am

    I would change the text effects a bit but anyway- great tutorial!

  2. gfxpalette.com Says:
    January 7th, 2008 at 5:53 pm

    great ! i like it

  3. Adam Says:
    January 7th, 2008 at 11:03 pm

    I like it too. Snazzy!

  4. Create Glowing Buttons in Photoshop - Webmaster Forum Says:
    January 8th, 2008 at 3:39 am

    […] Create Glowing Buttons in Photoshop - 1 Minute Ago This tutorial will show you how to make a unique glowing button for navigation designs. Link : HERE […]

  5. Sarah Says:
    January 8th, 2008 at 10:13 am

    this looks stupid

  6. Niels Says:
    January 15th, 2008 at 2:02 pm

    Hello,

    I’m having a little problem with step 9.

    When I’m adding the Gradient Overlay to my Layer, it doesn’t show up. The created Rounded Rectangle shape remains white after I hit “OK”.

    Do you have any sollution for this? I was really looking forward to use those awesome glowing button designs in my banner.

    Please send me an e-mail or just post it here. :)

    Thanks,

    Niels

  7. admin Says:
    January 15th, 2008 at 3:15 pm

    Hey Niels,

    Thats an easy fix, just set the layers blending mode of that white rounded rectangle to Darken and it should show the result.

    ‘Blending Mode’ option is found on your Layers Palette.

  8. Dybcio Says:
    January 18th, 2008 at 2:49 pm

    Great Tutorial!

    I realy like the “baby steps” form of this tute :)

    Good job!

    Tank You!

  9. Storme Says:
    January 20th, 2008 at 9:14 am

    Thanks it’s easy to do with you’r step’s
    Thnx again

  10. admin Says:
    January 30th, 2008 at 8:53 am

    Glad you guys like it.

  11. OriginMaker » Design a Creative Splash Page in Photoshop Says:
    February 19th, 2008 at 10:29 am

    […] 15: Now “Create a Glowing Button” or download the PSD and insert it into your canvas. Write the word ‘enter’ on the […]

  12. paxq idcutvj Says:
    February 26th, 2008 at 12:21 pm

    hmydxzokv jvmbzyg uyjfvdhg bxmfva aqypewnc ajbld odjabrs

  13. Sukh Says:
    March 1st, 2008 at 11:15 am

    hi can anyone help. im on step 3 and it says “Go to Select > Load Selection” but when i have the rectangle selected the “load selection” option isn’t available

  14. admin Says:
    March 1st, 2008 at 7:18 pm

    Hello Sukh,

    When you choose your rounded rectangle tool, you have to choose ‘fill pixels’ on the options palette located on top of your screen.

  15. Shoes Repair Sole Says:
    March 4th, 2008 at 8:47 pm

    Salutations I was just coming the same conclusions (regarding nnial 2007 - salvatore iaconesi - del.icio.us poetry) Tuesday, and thought that shoes repair sole in relation to it was also a good topic to think about.

  16. 45 Tutoriais Photoshop para Itens de Navegação | RuanWeb Says:
    March 5th, 2008 at 12:53 am

    […] SuperBrilhante Botões - Créditos: OriginMaker […]

  17. Mudi Says:
    March 19th, 2008 at 6:01 am

    Im stucked on step 3.
    I make load selection, folow steps,and while selected i do the blending options but dont get that result.

  18. Mohamed Alshareef Says:
    March 19th, 2008 at 8:27 am

    thanks

  19. admin Says:
    March 21st, 2008 at 10:22 am

    PSD coming up for the rest of the tutorials including this one. Mudi read my other comment, same method to fix your problem.

Add a Comment