Photoshop cs5 tutorials for Web Templates Part 5(A)

Part 5

WEB LAYOUT AND OPTIMIZATION

CREATING INSET LINES Part (A)

STEP 1

Select File > New to open the New document dialog box. Under Preset choose Web, set the width to 960, the height to 30, and click OK. Next, click the Add New Fill or Adjustment Layer button at the bottom of the Layers panel, choose Solid Color, and fi ll the entire document with a forest green color, such as #2b543f.

STEP 2

Select the Type tool, set the font to Georgia, 14 pt, white, and type the following words in a single line with 10 spaces (and no commas)  between each word: Home, History, Services, Projects, Contact. Position the line of text about 20 px in from the left edge of the document window, as shown in Figure 5-1.

Figure 5-1

STEP : 3

Create a vertical divider by selecting the Rectangle tool (U) and drawing a black, 1 px wide, vertical rectangle between the words Home and History that slightly extends vertically past the bounds of the document, as illustrated in Figure 5-2. Extending past the document’s edges like this helps ensure that the inset line eff ect looks crisp from top to bottom, rather than appearing as if one of its edges is cut off .

Figure 5-2

STEP : 4

With your new shape layer selected, choose Layer > Layer Style > Drop Shadow. In the Layer Style dialog box that opens, change the drop shadow color to white, the blending mode to Soft Light, the distance to 1 px, and the size to 1 px. Th en click OK. HINT: For a more dramatic inset line, try using a diff erent blending mode for the drop shadow, such as Normal or Color Dodge, or adjust the drop shadow color to a hue that’s complementary to the document background.

Posts You May Also Like to Read:

• Photoshop cs5 tutorials for Web Templates Part 4(B)
• Photoshop cs5 tutorials for Web Templates Part 4(A)
• Photoshop cs5 tutorials for Web Templates Part 3(B)
• Photoshop cs5 tutorials for Web Templates Part 3(A)
• Photoshop cs5 tutorials for Web Templates Part 2(B)