Alright, this is our Cheat Sheet. We're going to go through some of the bits we've covered in real quick bullet points, and add some super extra fancy tips and tricks. Let's go do it.

So you tried exporting your web graphics, some pngs from Illustrator, but they're coming out a little low-key, a little crusty around the edges. This cheat sheet tip will show you how to fix that. Let's go to 'View', and let's go to this one which says 'Pixel Preview'. This is going to preview what it's going to look like as a png in pixels, and you can see, fuzzy, so let's select all of these guys, and let's fix it by right clicking any of them, and going into one of them that says 'Make Pixel Perfect'. My goodness! Look how crisp those are. That's how to fix them before you export them as pngs, it aligns them to the pixel grid, and you get perfectly crisp exports.

So before you start working on any web project, or UI design project, you're going to have to change your preferences to pixels because we can't use anything else online, so with nothing selected, I can go up to here which says 'Preferences', or I can go down to 'Edit', 'Preferences' on a PC, or in case of my Mac here, it's under 'Illustrator', 'Preferences', 'Units'. What we want to do is make sure that 'General' is set to 'Pixels', and the 'Stroke' is set to 'Pixels', and 'Type' is set to 'Pixels'. 

Against all the other life-long training, it's all about pixels. Click 'OK'. Happy days!

So you need 12 columns for your responsive web design grid. To do it in Illustrator, grab the rectangle tool, drag a box that spans the whole width, and then go to 'Object', get on to 'Path', and lets go to 'Split Into Grid'. It's changed the number of columns to 12. The gutter's here, I'm going to use 30 to match Bootstrap, I'm going to click 'Add Guides', click 'OK', and we're kind of there, you can stop there if it works for you. Now if you right click any of them, and go to 'Ungroup', and select just these top ones here, they're just lines, not actual guides. So I'm going to cut those, delete all the junk that's left over. There is a bit of junk there, and let's go to 'Edit', 'Paste in Place', or 'Paste in Front' to put it back to where we got it, then go to 'View', then go down to 'Guides', and go to 'Make Guides'. Now I've got proper guides.

So you're only using two fonts for your entire site, but you have to scroll through this entire list to try and find the font you were using over and over again. There it is. I'm using 'Playfair'. I'm going to hit this little star button here, and that means, now, when I come in here, and I say, "What fonts am I using?" click this little star here, and it's just going to show you my favorites. There's my 'Playfair'. Makes it super easy to use. And then over here, click this, just 'Playfair'. Ah, happy days!

So I’m ready to export my graphics to build the website. Now I'm going to go up to 'File', go to 'Export', and then I'm going to-- Don't do it. 'Save for Web', don't use it anymore, we're going to use this guy in here, 'Window', and it's going to be the 'Asset Export' panel, and all we need to do is select graphic where you want to export, click, hold, and just drag in the middle here, give it a name, and decide the format.

Do you need 'Export’ right now? Easy; Click 'Add Scale', and I've got an option, twice the size. I've got these little icons in the bottom. I'm going to drag these in, and I'm going to use, instead of png and jpeg, I'm going to pick the lovely famous 'SVG' for Scalable Vector Graphic. Click 'Export', and you're away.

So you supply graphics to a developer, and you spend a lot of time in Illustrator, planning and designing, you give it to them, and they come back and nothing looks the same. What you can do to make sure this process is more streamlined is give them some 'CSS'. To do it in Illustrator, you select on the object that you want to get some CSS code from, go to 'Window', and then go down to 'CSS Properties'. Out there, you can copy this, and paste it into an email, and say, "Dear Developer, make sure it's Playfair, and it's Bold, and the size is right, and the color is exactly the way I've picked it." Nothing else. Or else, it says something else, like this orange box here, and you could see no CSS code is generated, so to get around that, this first little option down the bottom here, 'Export Options' which says 'Generate CSS for Unnamed Objects'. And the other thing I'd like to turn on is 'Include Dimensions'. And voila, it's going to give me my size, and height, and color for my lovely little [?? 00:04:34] action button. There should be no excuses now that everything doesn't line up, look great, exactly how you've designed it in Illustrator.

You need to share this project with somebody else in your team or another designer, or just archive it. The problem is that you've used images that come from your library, and off a network drive, there's fonts the other person doesn't have, don't worry, you can fix it all by going to 'File', go down to 'Package', make sure it's saved, still a little place to go, and I'm going to hit 'Package', click 'OK', kick back, relax, and on your desktop, in a second, 'Show Package', I've got a useless bit of text, I've got my Illustrator file, I've got all the fonts that have been used, and the images that have been linked. Now I can zip this lot up, and send it along to the next designer. Happy days! Thank you, Illustrator!