Content for Module 12

Saving for Web

Converting your artwork into a bitmap and saving it in a web compatible format:

Saving Illustrator-artwork for web is is a very important skill in the online age. To save your complete artwork this way you will go to File>Save for web; you will get to a dialog window that works exactly like the one in Photoshop.

Please make sure you understand the 3 main bitmap formats for web:JPEG, GIF and PNG.
Information on how to use the Save for web dialog window:
Save for web and Devices:, JPEG format: HERE
Save for web and Devices: GIF format: HERE

Moving an artboardTo save an image for the web in Illustrator is important to know the dimensions of the artboard that contains your work before you export it.
You can easily change the dimensions of your artboard by clicking on the artboard tool and then clicking on the artboard to scale.

The artwork will not scale in this operation: you will have to do it independently.


Slicing your artwork into smaller pieces .

When your artwork is actually a Lay-out of a web-page or Interface, you can cut it down into smaller pieces (slicing) and export them as a compressed bitmaps (JPEG, GIF or PNG) to be reconstructed later with html as a web page.
slice_toolYou can use this technique also to crop the area you want to export within an artboard.

There are 2 slice tools: once to create slices, the other to select them. I am showing you on the left the easiest possible scenario but this technique is also used to cut all the pieces of a layout, in that case, you will need the selection-slice tool.
After you release the slice tool, Illustrator will show your slice and some other extra-slices, necessary to reconstruct the whole artboard. You can export them all, or export only your main slice.

After you produce your slices you can go to FILE<Save for Web to define the type of compressed bitmap file or files you will want to create, also the settings that file will have: mostly, the level of compression, but also the option of Transparency on a GIF or the quality of that transparency on a PNG. Below the interface of the Save for web Dialog box:
Save for Web Dialog_Box
If you only want to export you main slice remember to select it before you go to "Save for web" and then choose "Export: Selected slices".

Links to videos

*Pixel dimension vs Resolution, Lynda.com HERE Pixel dimension of a screen, of a document

The Save for Web Legacy window, HERE

Working with the "Asset Export Panel", to export repeteadly several artboards, HERE

Export an Illustrator image as a file (to work with in Photoshop). Export command, HERE

Export an Illustrator file as a PDF document. Save as command, HERE

WEB_documentIf you are planning to export the artwork in a file for web, remember to use those settings in the document:
RGB Color, 72DPI for the resolution of Raster Effects, and objects aligned to Pixel Grid, so the artwork looks crisp when you export it as a bitmap, that is pixel-based (not vector-based like the artwork in illustrator).

You can also "Align objects to the Pixel grid" latter, through the Transform Panel.Transform_Align to grid

 

Until recently Photoshop was the preferred program for designing web lay-outs but new sophisticated tools are making Illustrator an excellent program for Web Designers.

You can create your Web LAY_OUT in Illustrator, slice and save the images for web (like in Photoshop),slicing

CSS_propertiesBut added to that, you can copy the font choices from the new CSS_properties_Panel, and paste them directly into your CSS style sheet.

Just select the type and look at the code in the CSS Panel. If you save a combination of fonts, color and even shapes as a Graphic_Style you will see the code here and export it as a CSS document by Right-clicking on the very right of the CSS panel and choosing "Export All".

What is an SVG format

SVG stands for Scalable Vector Graphic. This is a new format that allows to use Resolution-Independent, vector-based artwork on the web.

You can COPY any vector based artwork in Illustrator and PASTE it in the CODE are a of an html page in Dreamweaver (or a simple text editor) and you will get the code that will reconstruct the artwork when you look at the html page on the Web.

Tutorials

Save for web exercise at illustratoratoms.com: HERE

YouuTube:How to create Graphic styles (needed to export type choices to CSS): HERE

slicing tools in Illustrator Technically you need to slice the content of your artboard into pieces with the slice tool to separate each part of the artwork that will be used as an independent graphic file in your web page.

The slicing tool in Illustrator works like the equivalent tool in Photoshop. Here are the steps:

_Use guides to plan how you will be cutting your graphics (including the text is you are using a special front to treatment).
_Make rectangles around the graphics in the page that will be exported as independent images with the slice tool.
_Take the whole artboard to the "Save for Web devices" window, where you will choose each slice, or several at the same time, to set the compression settings for the graphics (will they be compressed as a jpeg or a gif and with how much compression or colors).
_Then you will be ready to EXPORT the whole page, graphics and html included through the "Save for Web devices" window by choosing SAVE and then choosing "html and images" under the FORMAT option.
See a tutorial on how to slice and export for web in Photoshop, HERE