Website Image Design
Web Graphics Using
Photoshop / ImageReady

It's often said that a picture is worth a thousand words. An image can communicate powerful ideas and emotions that simple words can't always explain.

Nowhere is this more true than on the Web, where graphics enhance a site's experience, support its content, and create a visual hierarchy. Logical and intuitive designs help us to figure out (often subconsciously) how content is organized and what information is important.

This course covers the essentials of making superior Web graphics using Photoshop/ImageReady. We'll explore the technical fundamentals you need to know, and discuss tips and techniques for the wide range of graphics encountered in a typical Web design project: everything from photos to line art, logos, banners, text-as-graphic, imported images, stock photos, and more.

To paraphrase Jakob Nielsen, you'll optimize the graphic, and increase the traffic!

Instructor:
Margaret Penney is a teacher, designer, writer and media artist...
get bio

Develop an understanding of the main categories of and applications for bitmap created for the Web.

Create Web site graphics using standard design techniques.

Differentiate between common source file formats and choose the optimal file formats for compression and optimization.

Utilize dithering, alpha channels, and color palettes to manipulate digital images for use on the Web.

Employ different strategies for minimizing an image’s load time.

Create a professional-looking Web site logo and navigation bar for a fashion designer.

Import and edit type for use in Web images.

Source digital images from cameras, scanners, and stock photography agencies for use in Web images.

Develop an understanding of how to create an eye-catching banner ad campaign with a consistent look and feel.

Create four banner ads for their favorite musical group utilizing GIF animations.

Design a home page and one internal page design for a luxury goods company.

Analyze sites designed by Web design masters and develop an extended Web graphics project.

Outline:

LESSON 1 Imaging for the Web Lesson One begins with the "big picture" of Web graphics: how different factors such as file format, image type, target file size, and image placement influence the process of creating and optimizing graphics. You'll explor e the Photoshop/ImageReady toolkit and learn the technical fundamentals every designer must know. Finally, you'll analyze classic Web graphic scenarios, learning the thought processes behind their production.

LESSON 2 File Formats and Color Palettes In Web design, every project brings a new challenge, and oftentimes, a host of different file formats too. Lesson Two surveys the range of source file formats you're likely to encounter in your design projects, and how to choose the right Web output format. Considering both line art and photos, you'll delve into the technical implications of modifying image colors for the Web: how to take advantage of bit depth, avoid dithering (or else dither with purpose) use color and alpha channels, and exploit color palettes. The overall goal: maximum impact, at minimum file size.

LESSON 3 Optimization Strategies Web graphics need to be optimized to load quickly. But you needn't resign yourself to dull, squashed-looking graphics. Lesson Three looks at optimization strategies you can use to get the biggest bang for your buck or creatively reduce your file size. You'll explore anti-aliasing, matting and transparency, image slicing, interlacing, and batch processing, learning the hows and whys of each technique as you go.

LESSON 4 Creative Sourcing With Web graphics, your creativity begins with finding good source images. Lesson Four opens with an exploration of the copyright and intellectual property issues involved. Then you'll learn how to source stock photography and use it creatively, import images from digital cameras or scanners, and use fonts to create text-as-graphic for logos and decorative effects.

LESSON 5 Animation and Interactivity A lot of low-bandwidth animation and interactivity on the Web is produced in Photoshop/ImageReady, not Flash. Lesson Five looks at techniques for producing various kinds of GIF animations: banner ads, characters, highlights, slideshows, and more. It also covers the fine art of producing button mouseover effects in Photoshop/ImageReady, adding JavaScript too. You'll create buttons that users will want to click.

LESSON 6 Cutting-Edge Aesthetics Lesson Six wraps up your course with a peek at the cutting-edge. You'll look at the application of classic graphic design principles to the Web, and analyze the techniques used by masters of the medium, uncovering the conceptual approaches and imaging techniques used. This leads to an open-ended Final Project in which you'll integrate everything you've learned in the course.