Web Graphics Using 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 interface 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 and interface designs 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, such as photographs, illustrations, animations, rollover buttons, interactive menus, and advertisements.
In six hands-on lessons and exercises, you'll use Fireworks to create fully functional Web pages and prototypes, timesaving batch processes, attractive and well-optimized photos and illustrations, and animations and interactive navigation features. You'll also explore professional case studies and learn how to use design principles to shape your personal style.
Tuition: $900 US
Course Instructor(s):
Requirements:
- Computer with Internet connection (56 Kbps modem or faster).
- Adobe Fireworks CS3, CS4, or CS5.
Course Objectives:
- 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.
- Export complete interface designs including images, HTML, and CSS.
- Develop an understanding of how to design a Web site interface in Fireworks, including overall layout and navigation system.
- Create animated GIF and SWF 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.
Course Outline
LESSON 1 Fireworks Basics
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 and fact page, 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 and 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 prototype that 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 and SWF 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 promotional package including a series of animated banner ads and a destination page with interactive navigation.
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.
Student Megan Johnson created a soothing, luxurious feel in this Web graphics course project.
Contact us | 800-258-4115 