When designing user interfaces Illustrator can provide many advantages. Firstly, using Illustrator here makes the job a lot faster with the resizing points. It's also great for creating reusable components using the symbols panel. This not only speeds up your workflow but will also make your design more consistent. Also, as we're moving into a more responsive and agile web, we'll be seeing the need for resizable graphics more (SVG & icon fonts). So, if we're making considerations for our websites to be consistent across many different sizes, our websites’ graphics should surely follow suit.
In this tutorial I will explain, as short as possible, how to export images in different formats optimized for web use. First you have to know the basic use of Adobe Illustrator: select, move, cut and crop.
Selections can be made with the "Selection" tool or "Direct Selection" tool, those are two pointers located at the top of your left panel, the black one is used for selecting objects and groups, the white one selects sub-objects, like anchor points or objects inside any group. You can also use the default hotkeys:
v - selection and
a - direct selection.
For a more exhaustive explanation visit this selection guide.
You can select elements by clicking on it or dragging over an area with the tool selected. To overrides the selection just click anywhere but the selected items.
If the items are grouped, you can select one of them with the Direct Selection tool. Sometimes, if the group is too complex, it's better to isolate a selected group.
After selecting, just click and drag to move things around. Also, to group elements just make a selection and
cmd + g, and to ungroup things
cmd + shift + g, (or right click group/ungroup). To copy, cut and paste, we use the classic commands
cmd + c,
cmd + x and
cmd + v.
Exporting a SVG file
1. Create a new file
This new file must have the desired dimensions for the image. You can create it with the hotkey command
cmd + n.
In the "New Document" screen you have to check you're working with a web profile. You can select a preset in the profile tab or just create your own. The things you need to check are: Units, Color Mode and Raster Effects. For web use we usually set Pixels as Units, RGB as Color Mode, and Screen as default Raster Effects.
2. Copy & Paste the elements
Once created the new file, go to the first file and copy the items you want to export. Paste those items in the new file and align them with the alignment options or just dragging it.
3. Save as SVG
cmd + shift + s to save the new file. In the "Save As" window be sure to select SVG as format (And give the file a name, like "my-new-super-svg-icon" or something shorter). Then a new popup window will prompt displaying all the SVG options. At this point you just have to check if the profile is set to SVG 1.1, the type SVG, and if you have pixel items in the file, such as photos and placed images, in the "options" section, where it says "Image location" select Embed instead of Link.
The SVG is ready for use. Now you can export a PNG or JPG file of the same image in case you need a fallback for some browsers. To do that, go to
file/Save for web.. or
cmd + shift + alt + s. A new popup window with a lot of options will appear.
Here we have some "presets", and we'll use PNG-24 most of the time. The PNG lets us export images without a background if the "Transparency" option is checked. At this point if you didn't pay much attention to the image size you can quickly change it (although it is not recommended). Also you can choose between some optimization options.
In another scenario we can have very complex images without transparent background than in PNG would weigh too much for web use. We should export that images using the JPEG preset.
After selecting this preset you should check the ICC option is checked. "ICC profile" is a set of data that characterizes a color, we use it to prevent varies between devices.
Before saving the file, check the image quality. We should never use a quality lower than 60%, and you can go up to 100% if the image weight isn't to high. To check the weight just look at the bottom left corner.