We draw the button for a site in Photoshop

Step 1. Create a new document 102 * 50 pixels. Background fill with color # 838383. Choose a tool Rounded tool (Rectangle with rounded edges). Set the following settings:

Change the background color to # 111111 . Draw a rectangle so that it fits into the size of the canvas.

Step 2. Double-click the rectangle layer and apply the following layer styles:

Drop shadow:

Inner glow (internal glow)

Bevel and Emboss (embossed / bevel)

Gradient overlay (gradient overlay)

Stroke (Stroke)


Step 3. Choose a tool Pencil (pencil) with a size of 2 pixels. Change the base color to # eee1cd. Make a horizontal line across your rectangle.

Apply the following layer styles:

Inner shadow (inner shadow)

Outer glow (external glow)


Step 4. Make sure the line layer is still active. Run the command Layer> Layer Mask> Reveal All (Layers> Mask Layer> Show All). Choose a tool Gradient (Gradient) and set the following settings:

Apply a gradient as shown:

Your result:

Step 5. Choose a tool Pen (Pen) and create a shape, as shown in the figure.

Run the command Filter> Blur>Gauassian blur (Filters> Blur> Gaussian Blur) with a radius of 0.6 pixels.

Step 6. Activate the rectangle layer.

Select the contents of this layer. Why hold CTRL and click on the mask symbol.

Invert the selection (SHIFT + CTRL + I). Go back to the layer with the shape you drew with the pen. Remove selection. Remove selection (CTRL + D).
Your result:

Step 7. Duplicate the layer and arrange it symmetrically.

Step 8. Make active the layer with the rectangle and select its contents. Create a new layer above the rectangle layer and execute the command Edit> Stroke (Edit> Run Stroke). The settings are shown in the figure.

Remove selection. Run the command “Layer> Layer Mask> Reveal All” (Layers> Layer Mask> Show All). Select the “Gradient” tool. Create a gradient as shown.

Your result (after opacity reduction to 75%):

Step 9. Now create the text. Decide what you want to write. Text color – # e7e7e7. The word site in the picture is filled with white.

Apply the following styles to the layer:

Gradient overlay (gradient overlay)

Stroke (Stroke)


Author: tutorials expert

Like this post? Please share to your friends: