Create a Unique Blue Button in Photoshop

12-31-07 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?

---

9 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 [...]

8. Manga4vn.net Says:
   December 30th, 2008 at 11:01 pm

   Nice button ^^
   Thank you ^^

9. MS Niner Says:
   June 14th, 2009 at 11:23 pm

   gfsdga: I like those buttons. My website is dark in color and I think the design suits it very well

Add a Comment

Name (required)

Mail (required)

Website