|LAB ACTIVITY 8 | |Topics |: Website Layout Design | | |Creating website header /banner | | |Designing website layout | | |Slicing layout in Photoshop | | | | |Learning Outcome |: At the end of the course, students are able to create and design website header or banner and the | | |layout using Adobe Photoshop CS. | |Software |: Adobe Photoshop CS | |Duration |: 2 hours | |References |: 1) Entheos | | |http://www.entheosweb.com/photoshop/layout.asp | |Sources |: Please download the image files from http://fatekma.uthm.edu.my/suriawati/ | | |in the Intro to Multimedia/ Material for Lab activity | | |header.jpg | | |pic1.jpg | | |pic2.jpg | | |pic3.jpg |
• This tutorial will teach you how to design the web site layout seen below in Photoshop. [pic]
Figure 8.1 Website layout
While designing the web layout, you need to define spaces for the following: • Header - This could be a graphic banner
• Buttons - Links for home, about us, contact us etc. • Pictures
• Content area
• Copyright Information
8.2.1 Creating the website header / banner
We are going to make a header like the banner below:
Figure 8.2 Website header
1. Save the candle image. Right click on the image to save the picture in yourpreferred folder as header.jpg 2. Open Photoshop and click on File/Open and select the header image from your folder. 3. Name the layer as header in the layers panel. Right click on the layer and select Duplicate Layer. Name the second layer as candle.
Figure 8.3 header.jpg
4. Click on layer header and press Shift+ctrl+u to desaturate the picture. You won't be able to see the desaturation as the layer is behind the candle layer. You can close the eye of the candle layer in the layers panel if you would like to view the effect of the desaturation.
Figure 8.4 candle layer
5. Now work on the candle layer. Select Elliptical marquee tool. Drag it to the candle. Select feather radius as 15.
6. Now click on Select>Inverse from the top menu and then delete.
7. Now press ctrl+D to deselect the candle. Make a new layer called candleborder on top of the candle layer....
Please join StudyMode to read the full document