Computer Graphics

Illustrator is a GREAT tool for web design! In addition to SVG, a file format which is really hot right now, there are many automated features of Illustrator that make it ideal to use for anyone interested in designing web pages.

Image Maps - they couldn't BE easier in Illustrator: Image map

Flash Files - you don't even need to OWN Flash software!

A simple heartbeat | A simple blend

What is SVG? Scroll down for a complete definition.
For SVG examples: SVG Demos

What else is Illustrator good for when it comes to web design?

• Seamless integration with Photoshop and Image Ready (for animation and more)
• Slicing Images and saving as CSS layers

1. What is the difference between Bitmap (or raster) images and Vector graphics?
Computer graphics fall into two main categories—bitmap and vector. You can work with both types of graphics in Photoshop and ImageReady; moreover, a Photoshop file can contain both bitmap and vector data. Understanding the difference between the two categories helps as you create, edit, and import artwork.

(Dots Per Inch) The measurement of the resolution of display and printing systems. A typical CRT screen provides 96 dpi, which provides 9,216 dots per square inch (96x96). Flat panel displays from 110 to 200 dpi have also been developed.

As the dpi rate doubles, the number of dots within a square inch is quadrupled, because dpi deals with two dimensions. Thus, while 100 dpi produces 10,000 actual dots per square inch, 200 dpi produces 40,000 (see below). We have a long way to go to make the resolution on a screen as dense as a printer. A 1200 dpi printer produces 157 times as many dots of resolution as a typical 96 dpi screen.

Dots Per DPI Square Inch
    96 dpi = 9,216 actual dots per square inch
  100 dpi = 10,000 actual dots per square inch
  200 dpi = 40,000 actual dots per square inch
  300 dpi = 90,000 actual dots per square inch
  600 dpi = 360,000 actual dots per square inch
1200 dpi = 1,440,000 actual dots per square inch

Scanner resolution is measured in terms of dpi (dots per inch). The higher the image resolution, the easier it is to edit the image (i.e., more detail is available) and the better the printed reproduction. The amount of detail required for editing purposes will determine the resolution of the scan.

Scanners, like digital cameras, use software to enhance image quality. Most scanners will identify a dpi number for both "optical resolution" (true resolution) and for "interpolated resolution" (software enhanced resolution). Although the interpolated resolution may be larger than the optical resolution, the optical resolution is the most important number to consider.

Often, you won't know if an image being used as part of a website will need to become part of a printed piece at some point in the future. Always scan an image at a higher resolution than the resolution of the printer device. This should cover the image for the web as well as for potential printed materials. (Laser printer resolution is typically from 300 to 1200 dpi; most photo printers today offer a maximum resolution capability of 1440 dpi or 2800 dpi.)

Generally speaking, here are suggested resolutions for scanning common types of images:

You can determine the resolution for your scan using the original and final image dimensions and the resolution of your output device. Scan resolution translates into image resolution when you open the scanned image in Photoshop. To estimate scan resolution:

Do one of the following:

* For laser printers and imagesetters, multiply the printer's screen frequency by 2. To determine your printer's screen frequency, check your printer documentation or consult your service provider.

* For ink jet printers, check your printer documentation for the optimal resolution. Many dye sublimation printers and devices that print directly onto photographic paper have an optimal resolution of 300 to 400 dpi.

Determine the ratio of the final image dimensions to the original image dimensions. For example, the ratio of a 6-by-9-inch final image to a 2-by-3-inch original image is 3.

Multiply the result of step 1 by the result of step 2.

For example, suppose you are printing to an imagesetter with a screen frequency of 85 lpi and the ratio of the final image to the original is 3. First multiply 85 (the screen frequency) by 2 to get 170. Then multiply 170 by 3 to get a scan resolution of 510 ppi. If you are printing to an ink jet printer with
an optimal resolution of 300 dpi, multiply 300 by 3 to get a scan resolution of 900.

Note: Different color separation procedures might require different ratios of image resolution to screen frequency. It's a good idea to check with your service provider or print shop before you scan the image.

You can create a dummy file to predict the file size needed for the final output of your scan.
To calculate the file size before scanning an image:

In Photoshop choose File > New.

Enter the width, height, and resolution for your final printed image. The resolution should be 1.5 to 2 times the screen frequency you will use to print. Make sure that the mode you plan to scan in is selected. For more information, see About color modes and models (Photoshop). The New dialog box displays the file size.

For example, suppose you want the final image to be 4 inches wide and 5 inches high. You plan to print it with a 150-line screen using a 2:1 ratio, so you set the resolution to 300. The resulting file size is 5.15 MB.

To produce the scan, enter the resulting file size in your scanner settings. Don't worry about resolution or image dimensions. After you have scanned the image and imported it into Photoshop, use the Image Size command (with the Resample Image option deselected) to enter the correct width and height for the image.

The main difference is that one uses computers and the other uses printing presses. Service bureaus basically take your file and print it out to a high-resolution printer -- called an imagesetter -- that prints to either photographic paper or negative film. If you are going to be printing to an offset press (for a magazine, newspaper, or book, for example) you would then retrieve the negative or print and take it to the print shop, which then creates negatives (if the service bureau didn't), plates and, finally, the final print on paper. These days, the line between the two kinds of businesses is disappearing and oftentimes either business does every step in the process.

Bitmap image formats for the web—GIF, JPEG, WBMP, and PNG—describe images using a grid of pixels. The resulting files tend to be bulky, limited to a single (often low) resolution, and consume large amounts of bandwidth on the web. SVG, on the other hand, is a vector format that describes images as shapes, paths, text, and filter effects. The resulting files are compact and provide high-quality graphics on the web, in print, and even on resource-constrained, handheld devices.

Users can magnify their view of an SVG image on-screen without sacrificing sharpness, detail, or clarity. In addition, SVG provides superior support for text and colors, which ensures that users will see images as they appear on your Illustrator artboard.

The SVG format is entirely XML-based and offers many advantages to developers and users alike. With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

You can save artwork in SVG format using the Save, Save As, Save A Copy, or Save For Web command. To access the complete set of SVG export options, use the Save, Save As, or Save A Copy command. The Save For Web command provides a subset of SVG export options which are applicable to web-oriented work.

How you set up your artwork in Illustrator will affect the resulting SVG file. Keep in mind the following guidelines:

Use layers to add structure to an SVG file. When you save artwork in SVG format, each layer is converted to a group (<g>) element. (For example, a layer named Button1 becomes <g id="Button1"> in the SVG file.) Nested layers become SVG nested groups, and hidden layers are preserved with the SVG styling property “display:none”.

If you want objects on different layers to appear transparent, adjust the opacity of each object instead of each layer. If you alter opacity at the layer level, the resulting SVG file will not display transparency as it appears in Illustrator.

Raster data is not scalable in the SVG Viewer and cannot be edited like other SVG elements. If possible, avoid creating artwork that will be rasterized in the SVG file. Gradient meshes and objects that use the Rasterize, Artistic, Blur, Brush Strokes, Distort, Pixelate, Sharpen, Sketch, Stylize, Texture, and Video effects are rasterized when saved in SVG format. Similarly, graphic styles that include these effects also produce rasterization. Use SVG effects to add graphic effects without causing rasterization.

Use symbols and simplify the paths in your artwork to improve SVG performance. Also avoid using brushes that produce a lot of path data, such as the Charcoal, Fire Ash, and Scroll Pen, if performance is a high priority.

Use slices, image maps, and scripts to add web links to an SVG file.

A scripting language, such as JavaScript, opens unlimited functionality to an SVG file. Pointer and keyboard movements can invoke scripting functions such as rollover effects. Scripts can also use the Document Object Model (DOM) to access and modify the SVG file—inserting or deleting SVG elements, for example.