Website Image Design
Web Graphics Using Adobe
Fireworks

They say a picture is worth a thousand words. An image can communicate powerful ideas and emotions that simple text 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.

Student Megan Johnson created a soothing, luxurious feel in this Web graphics course project.

This course covers the essentials of making superior Web graphics using Adobe Fireworks. We'll explore the technical fundamentals you need to know, including the Fireworks toolset and features, and discuss tips and techniques for the wide range of graphics encountered in a typical Web design project: stock photos to illustrations, banners, text graphics, and more.

In six hands-on lessons and exercises, you'll use Fireworks to create home pages, photographic and illustrated images, animated banner ads, interactive navigation schemes, and more, while learning how to optimize images for quick loading. You'll also explore professional case studies and learn how to use design principles to shape your personal style.

Instructor:
Claire Boger is an interactive designer and founder of ImaginationAlley.com ... get bio

Course Developers:
Marni Sandler is the co-founder of a boutique Web design firm ... get bio.
Anne-Marie Yerks is the author of several design and technology books and a fine artist.

Develop an understanding of the main applications for Web graphics and for Fireworks.

Create and modify canvases in Fireworks and use basic Fireworks tools to draw objects and create text.

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

Apply correction and filtering techniques to digital photographs and create digital illustrations using the Pen tool.

Employ different strategies for minimizing an image's load time including reducing colors, reducing quality, and slicing.

Use specialized Fireworks commands to create transparent images, dithered images, and linked image hotspots.

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

Develop an understanding of how to design a Web site interface in Fireworks, including overall layout and navigation system.

Create animated GIF images, specialized animation features, and image rollovers.

Design a pop-up navigation scheme for a Web interface, applying interactive behaviors to a set of buttons.

Create an eye-catching animated banner ad campaign with a consistent look and feel.

Develop an understanding of how Fireworks fits in a typical Web design workflow.

Create and employ batch processing commands to manipulate many graphics at once.

Develop an understanding of Web graphic design principles and how professional designers create a personal style.

Outline:

LESSON 1 Intro to Web Graphics Lesson One begins with the "big picture" of Web graphics: how different factors such as usage, image type, and target file size influence the process of creating Web graphics. You'll explore the Fireworks toolkit and learn the technical fundamentals every designer must know including basic drawing, type, and exporting tools. In your first exercise, you'll analyze the graphics used on a Web site of your choice, and create your own interactive tourism map, drawn completely in Fireworks.

LESSON 2 Imaging Strategies 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. You'll then delve into the main types of images: photos, illustrations, and text-as-graphic. You'll learn to work with each of these using specialized Fireworks features including filters, color correction commands, the Pen tool, and typography properties. The exercise will have you working with source files and image-editing techniques to create a home page for a cozy bed and breakfast Web site.

LESSON 3 Optimization Strategies Web graphics need to be optimized to load quickly—users don't like to be kept waiting. 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 more. You'll learn the hows and whys of each technique as you go, along with important exporting concerns. Your exercise will bring you into the fashion world, creating a fashion designer's home page, and optimizing its graphics effectively.

LESSON 4 Interface Design If you're a Web designer, interface design (the placement, shape, and depth of navigation bars, buttons, and icons, and so on) should be one of your top priorities. Lesson Four explores the advantages of using Fireworks for this purpose. As you'll discover, it's easy to lay out your designs and create attractive, effective navigation. The lesson explores these parameters by guiding you step-by-step through the creation of a home page which you can export as HTML. You'll be creating your own in no time, like in the exercise!

LESSON 5 Animation and Interactivity A lot of low-bandwidth animation and interactivity on the Web is produced in Fireworks, not Flash. Lesson Five looks at techniques for producing various kinds of GIF animations: banner ads, highlights, and more. It also covers the fine art of producing JavaScript effects including button rollovers and pop-up navigation menus. In the exercise, you'll create a complete animated banner ad campaign, and will add interactive navigation to one of the home pages you've designed.

LESSON 6 Workflow and Design Style Lesson Six wraps up your course with a look ahead at where you can take your Fireworks skills. You'll learn how Fireworks integrates with the Adobe Creative Suite applications, and how to structure your sites efficiently. You'll try out batch processing techniques to manipulate lots of images at once, and you'll explore design principles that help professionals find their personal styles. This leads to an open-ended final project in which you'll integrate everything you've learned into a multi-page luxury Web site.