All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
create-a-unique-blue-button-in-photoshop

Create a Unique Blue Button in Photoshop

12-31-07Category Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 200×200 pixels canvas set at 72dpi, and I filled my background with a black color. Then on your tools palette set the foreground color to #0088E8. Now select your Rounded Rectangle Tool and set the radius to 12 px and check anti-aliased. Create a new layer and draw a blue rounded rectangle, size 100×27 px.

Step 2:
Cut out the rounded area on the right end of your blue rounded rectangle.

Step 3:
Now select your Horizontal Type Tool, set the font family to Webdings, 44 pt, crisp and #0088E8 for color code. In a new text layer type ‘4′ on your keyboard to get the arrow icon. Place the arrow with the rounded rectangle.

Step 4:
Merge your rounded rectangle layer with your arrow icon text layer. Do this by linking both layers in your layers palette then go to Layer > Merge Linked.

Step 5:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Gradient Overlay and Stroke blending options to your blue button design layer.

Step 6:
With all the blending options added you should end up with the same effect as shown below.

Step 7:
You can also resize this buttons for your search forms or use them for your forums.

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

7 Responses to “Create a Unique Blue Button in Photoshop”

  1. gfxpalette.com Says:
    January 1st, 2008 at 7:42 am

    Nice ! thanks ,.

  2. gfsdga Says:
    January 1st, 2008 at 1:32 pm

    I dont like it that much. It’s totally regular and the shape is not proffessioanl at all.

  3. Rajan Says:
    January 3rd, 2008 at 1:42 am

    Good! Atleast you have tried somethin..keep tryin!

  4. 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design Says:
    March 3rd, 2008 at 11:14 pm

    […] Unique blue button from OriginMaker […]

  5. moneyblog » 45 Photoshop Tutorials for Better Navigation Says:
    March 4th, 2008 at 2:12 am

    […] Unique blue button from OriginMaker […]

  6. komik Says:
    March 4th, 2008 at 3:31 pm

    where are you download .psd ?

  7. 45 Tutoriais Photoshop para Itens de Navegação | RuanWeb Says:
    March 6th, 2008 at 11:09 pm

    […] Botão Unico Azul - Créditos: OriginMaker […]

Add a Comment