Beautiful Web Design Chapter 5 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