All right, this is our cheat sheet. Okay? We're gonna go through some of the bits we've covered  and real quick little bullet points  and add some super extra fancy tips and tricks. Let's go do it. Okay. So you're trying to export your web graphics, okay?

Some p and Gs from Illustrator,  but they're coming out a little milky. Okay? 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 that says pixel preview. This is gonna preview what it's gonna look like as a p and g  and pixels, and you can see fuzzy.

Okay? So let's select all of these guys  and fix it by right clicking any of them. Okay? And go into one that says, make pixel perfect. Oh my goodness. Look how crisp those are.

Okay? 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 gonna have  to change your preferences to pixels. 'cause we can't use anything else online. So with nothing selected, okay, I can go up to here  where it says preferences, or I can go down  to edit preferences on a pc,  or in the case of my Macia,  it's under Illustrator preferences units.

Okay? And what we wanna do is make sure that general,  it's set to pixels, okay? And the stroker sector pixels  and type A set to pixels, okay? Against all your other lifelong training. It's all about pixels. Click.

Okay? Happy days. So you need 12 columns for your responsive web design grid. Okay? To do it in illustrate it, grab the rectangle tool,  draw out a box that spans the whole width, okay? And then go to object.

Go down to Path, and let's go to split into grid. Let's change the number of columns to 12. Okay? The gutters here. I'm gonna use our 30 to match bootstrap. I'm gonna click add guides.

Click okay. And we're kind of there. Okay? You can stop there if that works for you. Now if you right click any of them and go to Ungroup, okay? And select just these top ones here.

They're just lines, not actual guides. Okay? So I'm gonna cut those, delete all the junk  that's left over, okay? There's a bit of junk there. And let's go to edit,  paste in place or paste in front,  put it back where we got it. Then go to view, okay?

Then go down to guides. And go to make guides. Now, the 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 are using over and over again. But where is it? There it is. I'm using Playfair.

Okay, I'm gonna hit this little star button here. And it means, now when I come in here  and I say, what fonts am I using? Click this little star here,  and it's just gonna show me my favorites. Okay? There's my playfair. Makes it super easy to use.

I'm gonna go over here, click this just  ah, happy days. So I'm ready to export my graphics cave to build a website. Now I'm gonna go up to file. I'm gonna go to export, and then I'm gonna go  to, don't do it. Okay? Safer Web, don't use anymore.

We're gonna use this guy in here window, okay? And it's gonna be the asset export panel. And all we need to do is select  the graphic where you wanna export. Click hold and just drag it in the middle here. Give it a name  and decide the format. Do you need a sport retina?

Easy, click add Scale. Now I've got an option twice the size. I've got these little icons on the bottom. I'm gonna drag these in and I'm gonna use, instead of p  and g and jp, 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, and 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. Okay? Go to window and then go down to CSS properties. Right there, you can copy this and paste it into an email  and say, dear developer, make sure it's play fair.

And it's bold and the size is right,  and the color is exactly the way I picked it. Nothing else or else, let's say it's something else. Like there's orange box here, okay? And you can see no CSS coders generated. So to get round that,  this first little option down the bottom here,  export options is say, generate CSS for unnamed objects. And the other thing I like to turn on is include dimensions.

And voila, it's gonna give you my size and height  and color for my lovely little call to action button. There should be no excuses. Now that everything doesn't line up, look great, exactly  how you've designed it in Illustrator, okay? You need to share this project  with somebody else in your team, or another designer,  or just archive it. The problem is, is that you've used images  that come from your library and offer network drive. There's fonts that 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. Tell little place to go. And I'm gonna hit package, click okay, 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 are being used, and any images that are being linked.

Now I can zip this lot up  and send it on to the next designer. Happy days. Thank you, illustrator.