Imagery

Beautiful Web Design

Chapter 5

Lesson Overview Understand that images are a necessary

component to well-designed sites Learn how to find the right visual

elements to add impact to our pages Understand how to locate sources of

legitimate imagery Learn to master the basics of cropping,

masking, borders and file types

What to For? A picture (can be) worth a

thousand words… Ask yourself these questions when

choosing imagery… Is it relevant to the content? Is it interesting and memorable? Is it appealing to your target

user?

Legitimate Image Sources There are three sources of image

content to use in the design of your site: Do it yourself Purchase stock images Hire a professional graphic designer

The approach you take depends on your budget, time frame, and client preference

Take It or Make It

If you own a camera, you can take photos of locations or products the client wants on the site

This can reduce costs and also show the customer you want to be involved in all steps of the project

If you have the skills to create illustrated graphical elements, you can also provide these for the client

Model Release Agreement If you have people that appear in photos

you intend to use on the Web, you must obtain written permission from each subject

This permission usually takes place with a model release form

You must state all intended uses of the imagery

Keep these agreements on file for your protection

Sample Form:

http://gardening.about.com/od/yourgardenphotos/a/Model-Release-Form.htm

Stock Photography

You can usually find imagery you need in a stock photo archive

If working with a client, you may want to place stock images in a page layout to show intended use

Then if the client approves, then obtain the stock image for your production Web site

Good stock images with people are usually more expensive

Classifications of Stock Images There are three tiers of stock images:

Free Images Royalty-Free Rights-Managed

Always view the image usage guidelines and copyright statements

Every stock source has its own guidelines

Free Images

Why do photographers offer their work for free: They love what they do

and it gets their work noticed Most images in free archives are restriction-

free Some large collections of free images are:

stock.xchng : Almost 400,000 images MorgueFile.com : Asked to credit the photographer

if possible

Royalty-Free Images A royalty-free image is not free The term refers to the licensing agreement

Once you pay for the image, you can use it over and over again for different purposes

A royalty is a per-use fee So… royalty-free means you are not charged per-use

Some sources for royalty-free images: Getty Images: http://www.gettyimages.com/ Corbis: http://pro.corbis.com/ iStockPhoto: http://www.istockphoto.com/index.php

Rights-Managed Images Rights-managed images have their

payment fee charged per image is based on: The size of your business How many people will be exposed to image The amount of time the image will be used

Photos in a rights-managed collection are very high quality

Unlikely your competitor will be using the same rights-managed images you choose

Resist these Bad Behaviors Google Ganking: searching for specific

images and then using them out of convenience Assume found images are copyrighted You may have the owner sue you for

infringement Hotlinking: linking to images on the

owner’s server Often done without permission Uses up bandwidth on other web server

Clipart

Many Websites offer free or cheap clipart graphics

Using clipart can make a site look amateurish Try to find other sources of graphical content Some sites may be the exception:

A scrapbooking business A home sewing business K-12 Web sites

If your client insists, you should try to make other suggestions but … they know best!

Presentation Graphical content will

usually have a specific purpose on a page

You may be restricted to a given size determined by the location in the layout

The key is to make the most of the imagery you have created or purchased

Creatively modifying your graphics can raise the quality of your site from plain to exceptional

Creative Cropping

Examine your image for ways to bring an editorial eye to the content

Cropping can eliminate uninteresting elements Cropping can bring a new perspective Cropping can focus attention on a key element If enlarging an image to a detail, make sure

the image resolution is high enough to avoid a pixelated result

Masking and Knockout Text Make use of different image techniques to

frame content in artistic or unusual ways Image masks can be used to add symmetry,

repetition, or highlighted elements Layer techniques can

be used to knockout text and fill it with another image

The knockout technique can be used with images as well as text

Image Adjustments Modify color levels to

add interest Increasing or decreasing brightness

or contrast can bring a mediocre image to life

Add vintage look by adjusting to a sepia tone or black and white

Filters and effects can also be used to add interest

Borders and Edge Effects Adding a border to the image itself can allow

for more unique presentation on your site Images can be made to look like a

photograph by adding a white frame Masking techniques can add special effects

and transparency to edges allowing your image to blend onto a page

Consistency can be reinforced by adding same border around images that will be on the same page

Lesson Summary

Images are a key element in creating unique Web sites

While there are many ways to create or purchase graphical content, be sure to do it legitimately

Creative cropping, and adjusting can add interest and focus to images

Borders and frame effects can be added directly to images to provide consistency