Create a Sleek Button in Photoshop

2-11-08 Filed under Interface & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 300×300 pixels canvas set at 72dpi, and I filled my background with a white color. Then on your tools palette set the foreground color to #009CFF color shade.

Now make a new layer set(Layer > New > Layer Set). In a new layer draw a small rectangle with #009CFF color shade and 9 x 26 px dimensions. Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option.

Step 2:
Grab your Zoom Tool and zoom in the middle of your blue rectangle. Create a new layer and using the Pencil Tool draw a line with 42B6FF color shade.

Step 3:
Create a new layer, next to your small blue rectangle draw a gray, color code #F3F3F3 rectangle with 80 x 26 px dimensions.

Step 4:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your gray rectangle layer.

Step 5:
Now highlight the layer set on your layers palette and go to Layer > Merge Layer Set. The layer set should turn into a layer with all the shapes you created.

Under Layer Style(Layer > Layer Style) add an Inner Glow, Gradient Overlay and Stroke blending options.

Step 6:
Select your Horizontal Type Tool and above your screen under the options palette, set the font family to Arial, bold, 12 pt, smooth and # color shade. In a new text layer add the title you want on the button.

Step 7:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay and Stroke blending options to your text layer.

Conclusion:
Use it as a navigation interface or random buttons for your website.

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

---

5 Responses to “Create a Sleek Button in Photoshop”

1. theschoolground.com Says:
   February 13th, 2008 at 9:25 am

   Looks nice and simple

2. Portal-On.Design | ?????????? ??????? Says:
   February 24th, 2008 at 6:39 am

   [...] http://originmaker.com ???????: [...]

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

   [...] Sleek buttons from OriginMaker [...]

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

   [...] Sleek buttons from OriginMaker [...]

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

   [...] Botões Lustrosos - Créditos: OriginMaker [...]

Add a Comment

Name (required)

Mail (required)

Website