Draw buttons for a website in Photoshop

In this lesson you will learn how to draw a web button for a site. To begin with, we will create a background, then we will work with several layers, and also we will use layer masks and other useful techniques.

Final image:

Step 1

Create a new document. (Ctrl + N) by size 1280 x 1024 pixels.

Step 2

Fill the background with color #CCBCC and brush (Brush Tool) (B) large white color click once in the center of the background to create a light spot. Now the background looks like a radial gradient.

Step 3

Tool Rounded Rectangle ( Rounded Rectangle Tool) (U) Draw a shape with a rounding radius of 180 pixels:

Step 4

Apply a layer style to the shape. Gradient overlay (Gradient Overlay). Use the parameters shown in the screenshot:

Step 5

Tool Oval selection area (Elliptical Marquee tool) (M) Draw a round selection and fill it with black. Place it on the previous figure:

Step 6

Copy the styles from the layer from the rectangular shape (right click in the Layers palette on the layer styles and select Copy layer styles. Now go to the layer with black circle, click on it in the Layers palette and right-click and select Paste layer styles).

Step 7

Also apply a style to the circle layer. Shadow (Drop shadow):

Step 8

Tool Oval selection area (Elliptical Marquee tool) (M) Draw a round selection and fill it with white.

Step 9

Choose a tool Arbitrary shape (CustomShapeTool) and draw an envelope shape in layer-shape mode.

Step 10

Paste the layer styles that you previously copied onto the layer with the envelope:

Step 11

With the tool Text (Text Type Tool) (T) write the text on the button:

Final image:

Like this post? Please share to your friends: