Part 13
Photoshop cs5
WEB LAYOUT AND OPTIMIZATION
DESIGNING BLOG HEADER MAKER Part (C)
STEP : 6
To make a separate area for the navigation, create a new layer (Shift +Ctrl+N/ Shift +Ô+N) called NavBar. Using the Rectangular Marquee, drag out a 50 px tall selection that sits below the Header BG layer, fill the selection with #7a5e21, and press Ctrl+D/Ô+D to deselect. Then press D to reset the foreground color to black. As you did in Step 4, click the Add a Layer Style button at the bottom of the Layers panel and choose Pattern Overlay. Th is time, when the Layer Style dialog box opens, click the Pattern menu to open the Pattern Picker and select one of the Texture Fill patterns, such as Burlap.
Adjust the blending mode to Color Burn (which subtly darkens and blends the pattern into the underlying background color) and modify the scale if needed. Select the Gradient Overlay category and click the Gradient menu to select a black to transparent gradient (second gradient from the top left ). Then adjust the opacity down to around 50%. Select the stroke category and apply a 3 px outside stroke with the hex value of #b39540. Click OK to close the dialog box.
STEP : 7
For symmetry, duplicate the NavBar layer by pressing Ctrl+J/Ô+J, rename it Top Bar in the Layers panel, and drag the new layer to the top part of your layout above the Header BG layer. Nice!
STEP : 8
Next, to further define the header from the rest of your layout, you will add a shadow below the NavBar layer. To ensure that the layer is positioned in the correct order in the Layers panel, select the Header BG layer, press Shift +Ctrl+N/Shift +Ô+N, rename the new layer to Shadow, and then press the G key to select the Gradient tool. Before you drag out a shadow, select the foreground to transparent gradient (this should be second in the list showing as black to transparent) and the reflected gradient type from the Gradient Tool Options bar at the top of the workspace. Now, drag a short gradient about 30–40 px tall that spans downward past the bottom edge of the NavBar area. For additional symmetry, duplicate the Shadow layer and move it in the layout so that it sits directly below the Top Bar layer. If needed, adjust the opacity of both shadow layers to soft en the shadow effect.
STEP : 9
Your header is nearly complete! Th e last step is to drop in the Logo/Logotype and navigation text. Save the file for later use in Technique #18, “Generating CSS Layers with Optimized Graphics.” Figure 13-3 shows an example of the completed blog header.
Figure 13-3
loading...
loading...
About shakil .
