Photoshop to make a simple Web navigation tutorial

Final effect Diagram

Figure 00

1, create a 1000x750 pixel size file, double-click the background layer to change it to editable layer, and open the Layer style > Color overlay, overlay with #47382e.

Figure 01

2. Open the ruler (View > Ruler) and add some guides as shown below.

Figure 02

3. Create a rectangle with the rectangle tool and name the layer header.

Figure 03

4. Set the foreground color to black, and select the Ellipse tool to create a shaded area larger than the white rectangle. Name the oval layer as shadow and place it under the header layer. Then turn on the filter > convert smart filter, then filter > Fuzzy > Gaussian blur, radius of 10 pixels, and set the opacity to 60%, to get the following image effect:

Figure 04

Figure 05

5, select the header layer, double-click the open layer style, select the gradient overlay, according to the following figure parameter settings.

Figure 06

6, use the line tool to draw a bright red line, and then use Black to draw another line (1 pixels), then the red and black lines are grouped, group named Vdivider. Open Layer > Layer Mask > Reality all. Using the radial gradient tool, from black to white, pull down from top to bottom to add a gradient effect to the group.

7, use the Type tool to create the navigation bar (font white). Then group all the labels, named White Links. Copy the group, place it under the white Links group, set the font color to black, and then move it up and to the left 1 pixel size. This is to make a 3D effect.

Figure 08

8, in accordance with the sixth step of the method to make the column line.

Figure 09

9. Select all the column line layers to group them, name Hdividers, and then open the Layer > Layer Mask > Show all. Use a linear gradient (black-white) to make a gradient effect on the mask.

Figure 10

10, save the following texture picture, then open with PS, choose Edit > Definition pattern, name it webpattern. Copy the header layer, named pattern. Then double-click to open the layer style, remove the gradient overlay, open the pattern overlay, select the Webpattern pattern overlay that we created before, and then add a layer mask on the patterns layer to create a radial gradient effect on the layer mask.

Figure 11

Figure 12

Figure 13

Note : More wonderful tutorials Please pay attention to the triple Photoshop tutorial section, triple PS group: 182958314 welcome you to join

Category:

• PS Getting Started Tutorial