Photoshop Design Web page Head navigation Bar tutorial

Effect

1, the new file in PS, Width defined as 1000px, in fact, we want to use the width of the general between 950px-980px. In order to facilitate a better display of the overall effect of the site. So the width of the file should be greater than the actual width of the page. Highly customizable, but preferably larger than the height of the entire page, when there is no way to determine the height range of the page, we can set the height to greater than the height of the page. This way, the entire page has been made. We can use cutting tools. Cut out the excess parts.

2, this example, to the actual site width of 800 pixels as an example to operate. In order to speed up the production process, save the time cost of production. My usual practice is to: A, select the rectangular marquee tool; b, define fixed width 800px, height does not matter; C, create a new layer; D, create a selection, fill any color; E, select Move Tool [v], f,ctrl+r horizontally, open ruler; G, define guides. In this way, we will complete the actual width of the page definition. All the production and design parts are carried out in such an area. Then, remove the newly-built layer. Because the purpose of this layer is to determine the reference line.

3, start making the navigation section. Use the Marquee tool below. Set the height to 60px and create a rectangular selection by creating a new layer in the file. Fills any one color. Ctrl+d Cancel the selection. Select a gradient overlay style for this rectangle. As shown in the figure

4, at the bottom of the head navigation, establish two lines. Height is 1px. A black line, a white line. Merging two conditions, using "overlay" in the layer style, produces an effect as shown in the figure

5, the following make the mouse through the changes in the text of the navigation section. The simple way to do this is to copy the layer directly from the rectangle of the newly built square. Then ctrl+t the free transform. Narrow it down and make some minor changes to the gradient layer style. As shown in the diagram effect

6, on both sides of the small rectangle. Two vertical lines are built respectively. The line is gray. A navigation click has been made. The following starts the effect of copying this navigation click state. In order to avoid too much integration between navigation and the background. I set up a layer below the navigation and use a color to contrast the gradient effect of the strong column. As shown in the figure

7, simple to make a logo. Enter the text "shop" and add a layer style to it, as shown in the diagram settings

8, create a separate file, the file size is 3pxx3px, the background is transparent. In this 3pxx3px file, draw a three-1pxx1px black rectangle, as shown in the figure, and then CTRL + A, select all, and choose the definition pattern in the Edit menu. Before you go back to the file, press the CTRL key, click the "Shop" text layer, bring up the text selection, and then select the fill pattern in the Edit menu. (To select the pattern you just defined.) )

9, in order to make the whole page more texture. We select the background layer, use filters > Noise > Add staining as shown, complete the design of the head

Category:

• PS Getting Started Tutorial