Chapter 8

Images…

Objectives (1 of 2)• Gain appreciation for the impact image choice can have on your designs.

• Increase awareness of the main static types of images: illustrations, photographs, and clip art.

Objectives (2 of 2)• Discuss clip art and quality issues.

• Discover type may be used as images.

• Learn simple rules of image use in your pages.

Images Add Impact• Images add impact to pages by making them more visually appealing.

• They influence the mood and visual style of a page.

• Images can communicate complex concepts or situations.

Types of Images

• There are many different types of images designers can use in their pages.

- photographs - illustrations (cartoons, drawings,

charts, diagrams)- clip art- and in motion designs, video and/ oranimation

Photographs• Can inform, convince, evoke an emotion, sell a product, or attest to facts.

• Seem more credible than illustrations or clip art because of their long use in newspapers and magazines.

• Are widely available for purchase through commercial stock photography houses such as Getty Images and Comstock Photos.

Criteria for Choosing Photographs (1 of 2)

• Not all photos are suitable for use in page designs.

- Does the photo have a strong composition?

- Does it depict the mood or message that you need it to?

- Is it available for use at a reasonable price?

Criteria for Choosing Photographs (2 of 2)

- Does it have a wide range white, black, and gray tones?- Can it be cropped? Cropping is the removal of some of the horizontal or vertical edges of a picture.

Cropping an Image (1 of 2)• Some photos, with skillful cropping, yield more than one image.

• This figure shows the original photo (left) and two additional cropped images.

Cropping an Image (2 of 2)

• A poorly cropped photo loses meaning.

Photo Manipulation (1 of 3)

• Other visual techniques for photos include:

- Flopping: making it a mirror image

Photo Manipulation (2 of 3)

- Silhouetting: portions of a photo are selectively removed.

Photo Manipulation (3 of 3)- Another technique is to digitally manipulate the image with a photo-manipulation program.

• The above image is the result of the Find Edges filter in Photoshop.

Illustrations (1 of 3)• A good illustration provides another channel of information to the reader.

• They are useful for showing concepts too difficult or impossible to photograph, i.e. the splitting of an atom, or the royal procession of an ancient Pharaoh.

Illustrations (2 of 3)• The visual styling of illustrations is as varied as the artists producing them.

• Illustrations can be diagrams, maps, charts, cartoons, or drawings. The diagram above is a flowchart visually depicting the relationship of web pages to each other.

Illustrations (3 of 3)• Illustrations may be decorative, factual, serious, or as shown, a humorous tone.

• Match the tone of an illustration to the message.

• Are widely available for purchase from individual illustrators or through commercial stock art houses such as Getty Images and stockart.com.

A Word About Clip Art• Clip art is predrawn artwork available for purchase in book, disk, CD, or online.

• They can be a tremendous time-saver, and can be customized.

• Not all clip art is good. Avoid clip art that is poorly drawn, or has bitmapped, jagged, or irregular lines.

Type as Image• An often-underappreciated source of imagery is typography.

• Typography may be modified to make it illustrative.

• Type can be modified in graphics programs such as Adobe Illustrator.

Examples of Type as Image (1 of 2)

• Many specialty fonts exist that have a illustrative design.

Examples of Type as Image (2 of 2)

• This word was distorted in Illustrator to emphasize its meaning.

Dingbats (1 of 2)

• Dingbats are fonts that replace letters, numbers, and punctuation with pictures.

Dingbats (2 of 2)

• Their visual style is as varied as the designers who create them.

• They are widely available from type sources such as www.fonts.com. or www.fonthead.com (shown here is Good Dog Bones, by Font Head Design).

Visual Rules of Image Use• Some general rules of image use:

- Don’t jam illustrations together.- Add variety and contrast by varying the

size of images.- Pick illustrations that look like they belong together.

- Use imagery appropriate for the message

to avoid confusing the reader.

Chapter Summary (1 of 2)• Images add visual impact to a page.

• Photographs, illustrations, clip art, and dingbat fonts are available from professional photographers, illustrators, typographers, and vendors.

• Many graphics software offers photo-manipulation filters to add a creative flair to an image.

Chapter Summary (2 of 2)• Images must be carefully chosen to fit the tone of the page’s message.

• If manipulated, images should not be confusing or so artistic that they detract from the page’s message.

Assignment

Find a picture of yourself (or a picture you like), and using an image-manipulation program such as Photoshop or Publisher, modify the image by:

• Distorting all or part of the image• Colorizing parts of the image• Applying a special filter to the image from the

software program• Inverting a positive picture to a negative• Select portions of the image and scale them

larger or smaller to emphasize a concept