exporting-from-illustrator.md

layout	title	desc	hide_show_for_marks	markbot_submit	extra_tutorials	steps
lesson	Exporting from Illustrator	A quick look at properly setting up an Illustrator file for exporting to SVG.	true	true	title url Preparing images slide deck /courses/web-dev-3/preparing-images/ title url Website file organization organization title url highlight Images for the web image-formats true	title before folders after notes Download & set up files To get started on this project we need to download an Illustrator file that we can manipulate & export. ### [Download these files.](https://assets.learntheweb.courses/web-dev-3/exporting-from-illustrator-download.zip) Now create the following folder structure on your computer: label type exporting-from-illustrator folder label type indent prod folder 1 label indent notes dinosaurs.ai 2 This is the file you downloaded label type indent www folder 1 label type indent images folder 2 The folders are used for the following purposes: - `prod` — (short for `production`) to keep perfect assets ready for exporting, in case they need to be changed - `www` — this is your GitHub repository, where all your HTML & CSS files are (we’re not using GitHub right now) - `www/images` — this is where the exported, smushed files go **Illustrator documents SHOULD NEVER be committed into your GitHub repository.** label text Naming conventions Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). title before notes Fix the artboards The artboard in Illustrator is extremely important, for two reasons: 1. The name of the artboard is what you’re SVG will will be called 2. The dimensions of the artboard dictate the basic dimensions of the SVG artwork  *Rename the two artboards: “herbivore” & “carnivore”.*  *Change the dimensions of the artboard to exactly “256 × 256”.* I like to use `256` as a good starting size for SVG artboards. We want to make sure the artboard perfectly matches the artwork—**if there extra spaces around the artboard, those will cause the SVG to look funny.** You can use the `Object > Artboard > Fit to Artwork Bounds` menu option to make it faster—but sometimes I don’t like the artwork touching the sides of the artboard. label text Naming conventions Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions) when naming your artboards. title before notes Name the layers Naming the layers in Illustrator can be super helpful, especially when we animate and make the SVGs interactive.  *The names of the layers will export into the SVG as `id` attributes that we can target with CSS & JavaScript.* It’s also a really good idea to group things together—those groups will be represented in the SVG as different tags. label text Naming conventions Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions) when naming your layers. title before image_steps Export for screens Now that our Illustrator file is set up properly we’re ready to export the SVGs. url text export.jpg To to the menu: `File > Export > Export for Screens…` url text location.jpg Choose the location to export the SVGs—into the `images` folder in your `www` folder. url text svg.jpg Set the output format to `SVG` url text svg-settings.jpg Adjust the SVG settings—you should only have to do this once, Illustrator should remember. url text svg-settings-screen.jpg Configure the following settings: - “Styling” — “Presentation Attributes” - “Font” — “Convert to Outlines” - “Images” — “Link” - “Object IDs” — “Layer Names” - “Decimal” — 1 - “Minify” — checked - Make sure “Responsive” is <strong>not</strong> checked (for better browser support) url text export-artboards.jpg Finally, export the artboards—which will generate optimized SVG graphics title before See the two exported files Illustrator should have exported the files for us and we can see them in our `images` folder:  **Never edit the SVG after it has been exported—that’s why we save the AI file. AI files are for editing, SVG files are for using on the website.** title before Smush the files We want to make the SVGs we use on the web as small as possible—Illustrator only does part of the job. Next up we need to drop the images into [**Spritebot**](https://github.com/thomasjbradley/spritebot) to really reduce their file size—it won’t reduce the quality in any way.  You don’t have to save the files or anything, Spritebot will just overwrite your graphics with ones that are smaller size. **Now we have super small, super optimized graphics for our website that will help it load quickly.** You can go ahead and use these graphics in your HTML & CSS how you’re used to.