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

Create a Sleek Button in Photoshop

2-11-08Category 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?

6 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 […]

  6. ??????? ???????? ????????? ?????? » ????? Photoshop CS2 :: ????? ???????? :: ????? adobe photoshop :: ?????????? ?????????? ???? ?????? Says:
    March 25th, 2008 at 1:47 am

    […] http://originmaker.com/2008/sleek-button-photoshop/2/Popularity: unranked ????????! ??????????? ? […]

Add a Comment