2
A Look at Web Graphics Production
Few would contest the fact that the demand for eye-catching Web graphics is continuing to grow. To create
these Web graphics, most designers turn to products such as Photoshop and Illustrator. These tools present
one challenge, however: They are more focused on the creative process than on the production tasks in-
volved in refining and preparing graphics for the Web. These production tasks range from balancing image
size against quality for faster download times to ensuring that graphics display well in different browsers. To
accomplish these tasks, most designers cobble together a process using a variety of different software pro-
grams. Many of these programs don’t work well together, and most designers would tell you how painful it
is to move graphics files back and forth from one program to another to optimise them for the Web.
Let’s look at an example of this problematic workflow. To create an animated GIF file today, you might
create elements in Adobe Illustrator. You could then switch to Photoshop to convert the elements to pixels,
build frames using layers, and save each frame as a file. You might then use a different program to optimize
the frames (color reduce them to indexed mode for Web display); switch to another program to build the
animated GIF; and then finally view the results in a Web browser or move the file to another platform to
check for any problems there. If you see any problems, you would typically back up many steps and work
your way through several different programs again. You’d repeat this multistep process until you’d taken
care of all the issues that pop up. Clearly, streamlining the number of programs involved would be a major
timesaver for many Web designers.
We’re designing Adobe ImageReady 1.0 to eliminate this problem and provide designers with one inte-
grated environment in which to prepare and refine Web graphics. This tool complements and supports
Photoshop and Illustrator, which provide the creative power designers need for Web design work.
Adobe Illustrator
Adobe Photoshop
Adobe ImageReady HTML Editor
Web Browser
An Adobe ImageReady-based workflow
Creative tasks
—
Acquire graphics (scanners, digital cameras, and
so on).
—Create typographically rich graphics.
—Enhance graphics (crop, resize, perform image
adjustments, apply filters, create masks, and so on).
—Add special effects and other creative touches.
—Produce Web-specific graphics for navigation,
banner ads, and more.
Creative tasks Web production tasks
Web production tasks
—Assess and balance tradeoffs between image
quality and size.
—Create specialised Web graphics, such as anima-
tions, image maps, and transparent graphics.
—Ensure that graphics look their best in different
browsers and on different computer systems.
—Mass produce graphics to meet the content
demands of many Web sites.
Adobe Photoshop
Adobe Illustrator
Image Map Maker
HTML Editor
Web Browser
Animator
File Optimizer
Edit to correct problems
An overview of the current Web graphics production process