Portable Network Graphics and Horizontal Type Tool

Only available on StudyMode
  • Topic: Portable Network Graphics, Adobe Photoshop, Adobe Systems
  • Pages : 7 (1593 words )
  • Download(s) : 92
  • Published : April 25, 2013
Open Document
Text Preview
|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 |

87.1Getting Started
• 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
• Logo
• Buttons - Links for home, about us, contact us etc. • Pictures
• Content area
• Copyright Information

8.2 ACTIVITY

8.2.1 Creating the website header / banner

We are going to make a header like the banner below:

[pic]

Figure 8.2 Website header
Steps:
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.

[pic]
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.

[pic]
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.

[pic]

[pic]
6. Now click on Select>Inverse from the top menu and then delete.

[pic]
7. Now press ctrl+D to deselect the candle. Make a new layer called candleborder on top of the candle layer....
tracking img