Photoshop CS5 Tutorials BUILDING A SIMPLE WEB LAYOUT Part 15(C)

Part 15

Photoshop cs5

WEB LAYOUT AND OPTIMIZATION

BUILDING A SIMPLE WEB LAYOUT Part (C)

Below these three paragraphs, add two new headers, one for Featured Work and another for Newsletter Signup. Beneath the Featured Work header, use the Rectangle Shape tool to add four rectangular shapes inside which featured work will appear. Below the Newsletter header, add a few simple form elements, such as Name and Email fields and a Submit button. If desired, repeat any graphic elements you have used earlier in the layout to create a sense of visual consistency. In Figure 15-2, the arrow from the main navigation bar is repeated effectively in four places.

Figure 15-2

STEP 6:

For the footer of the page, simply duplicate the header background layer and drag it to about 10 px below the main content area. Add some navigation links, a copyright notice,and some other content to fill the space, such as a list of recent blog posts.For a final touch of dimensionality, add a drop shadow below both the banner and main content areas. Feel free to add other styles and elements to your layout to satisfy your personal design aesthetic. That’s all there is to it! Figure 15-3 shows the final layout.

Figure 15-3

Posts You May Also Like to Read:

• Photoshop CS5 Tutorials BUILDING A SIMPLE WEB LAYOUT Part 15(B)
• Photoshop CS5 Tutorials BUILDING A SIMPLE WEB LAYOUT Part 15(A)
• Photoshop cs5 tutorials DESIGNING BLOG HEADER Part 13(C)
• Photoshop cs5 tutorials DESIGNING BLOG HEADER Part 13(B)
• Photoshop cs5 tutorials DESIGNING BLOG HEADER Part 13(A)