Chapter 32: Creating Professional Web Graphics

Discussion Notes
CIS 252 WEB PAGE DESIGN AND SUPPORT
EVENING CLASS (5:30- 8:20 PM)

Discussion Notes
Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 13
Chapter 14
Chapter 15
Chapter 16
Chapter 17
Chapter 18
Chapter 19
Chapter 20
Chapter 22
Chapter 28
Chapter 30
Chapter 31
Chapter 32
Chapter 33
Chapter 34
Chapter 35
Chapter 36
Chapter 38
Chapter 39
Chapter 40

Home
Contact

Ivy Tech State College
One West 26th Street
Indianapolis, IN 46208

CHAPTER 32: CREATING PROFESSIONAL WEB GRAPHICS

IMAGES FOR YOUR PAGES:
Graphics are used for:

	Designing.
	Identifying something.
	Navigational purposes.

Some of the most common type of images used on web pages are:

	Background images: They are also called wallpaper sometimes.
	Headers: Identify a page.
	Navigation Buttons: Allow you to go to other pages on clicking.
	Bars and rules: Separate text elements of your page.
	Spot art: used to enhance the meaning of textual contents on the page.

You can use the tool of your choice to create your own images. Some of the tools are:

	Adobe Photo Shop
	Paint Shop Pro.
	Corel Draw.
	Microsoft PhotoDraw
	Image Composer.

There are several web sites too that allow you design your own graphics.

HOW DO YOU GET YOUR GRAPHICS:
There are three ways in which you can get your graphics:

	Scan your pictures.
	Work with Clip Art.
	Design your graphics from scratch.

Scanning In Front Page:
You do not need high-resolution scans for web. A flatbed scanner is good for the job. Place the picture you want to scan on the scanner. Read instructions for the scanner carefully. Then go to Front Page 2000. In Front Page:

	Choose Insert, Picture.
	In the Picture dialog box, click the Scan button.
	On the Next Window, click Acquire.
	You picture will be scanned in.

Of course, your hardware has to be installed correctly for this feature to work. After scanning your picture in, you must

Crop your image using Front Page Pictures Toolbar to get rid of the white spaces.

	Click Cropping tool once.
	Draw Crop marks around the image.
	Click Cropping tool again. \| Up \|

Using Clip Art Library Images:
Front Page comes with a Clip Art gallery. There are several types of clips in the library arranged by categories.

	Choose Insert Menu, Picture, Clip Art.
	Clip Art Window opens.
	You can select an image from here or import one from the web or your own collection.
	You can define your own categories:

Click Import Clips button in the Clip Art Gallery.

Find the clip you want to import. Click Import.

In the Clip Properties dialog box, type a description of your category.

Click Okay.
| Up |

Building Web Graphics:
All background graphics are tiles. You can draw background tile using any of the image tool that you may have. When designing a tile for a background:

	Keep individual tiles no bigger than 50 x 50.
	Keep the background light in color.

Start Microsoft Image Composer.

	From File Menu, Click New.
	Right Click the Default Selection.
	From the Shortcut menu select Composition Set Up.
	Adjust the Width and Height.
	Pick a Color by clicking the Color button.
	Click Okay and Apply.
	Click Shapes button.
	Draw a shape on the Selection.
	Click Paint Button.
	Change the color of the Color Swatch.
	Pick Paint Brush, Air Brush, Pencil.
	Click on the shape you have drawn.
	Save it as a Gif file.

You can also create your header graphics in the same way. The size will be larger. And you will need to put text on the header.

Image Composer has a Text Button. After creating your header graphic

	Click the Text Button.
	Text Window appears.
	Pick color, font and size here.
	Left mouse click and draw your text box.
	Type your text in this box and adjust it.
	Drag it on to the graphic. \| Up \|

If you have Microsoft Image Composer or Microsoft PhotoDraw, experiment with designing graphics. It takes time to do it right. Use Help menu a lot.

Buttons in Front Page
Creating a Beveled Button:
In Image Composer

	Select File, New.
	Right click selection.
	Change the height and Width to 125 x 30.
	Change the color to the color you want.
	Save it as button01.gif. \| Up \|

Now go to Front Page.

	Select Insert, Picture, From File.
	Pick button01.gif from the folder you kept it in.
	After inserting it, highlight it.
	From the Front Page Picture tool bar select Bevel.
	You now have a simple Beveled button.
	Using Text Button from Front Page Picture Tool Bar, you can put the text you want on the button.

You have a simple button.

Using Hover Buttons:
You can create custom graphics and use them as hover buttons. To create that, Start Image Composer first and then perform the following:

	Create a new gif file of 150 x 50 dimension.
	Fill the background with the color of your choice.
	Create another gif file of same dimension but a different color.

Go to Front Page.

	On a page in Page View, Select Insert, Component, Hover Button.
	In the Hover Button Properties Box, select Custom.
	Browse and find your two buttons, one for the foreground and one for Hover effect.
	Click Okay.
	Specify button text, effect and the hyperlink.
	Click Okay.
	Save the document.
	Click File, Preview in Browser. \| Up \|

Bars and Rules:
Used to separate textual matter on the pages. You can make your own horizontal lines using Image Composer. In Image composer, create a new gif file of 200 x 3 pixels. Save it as line .gif. Then insert it in Front Page as a normal Picture file.

You can specify the height, width and color of your Horizontal line in Front Page:

	Insert, Horizontal Rule.
	Highlight the Horizontal line.
	Right click and select Horizontal Rule Properties.
	Specify color, height and width and select okay. \| Up \|

04/20/2001 23:20

Education is not the filling of a pail, but the lighting of a fire.
- William Butler Yeats -