Exporting logos and icons from Illustrator 2017 for UI
Overview
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Hi, in this tutorial we're going to look at exporting logos and icons from Illustrator for web or app use.
When we're dealing with SVGs - We talked about that in our earlier video - it's super easy. Open up your 'Asset' panel, your 'Asset Export' panel, and you grab the things you want to be SVGs, like some of these social icons here, click him, drag him, double click him, give him a name, so this is going to be called 'Social-Facebook'. Make sure it says SVG down the bottom here, because I want it to be a nice, crisp SVG graphic. This one here, and you go through and keep adding all the names. So that's it for exporting those, you click 'Export', and you'll have a bunch of SVGs.
Let's say though that you're exporting these, and you're using PNGs, because you need the transparency, so you don't want the JPG, you want transparency so that this icon here-- You can see kind of around the edges of the circle there. So, PNG is the way you're going. Now, there’s something called Pixel Perfect; now it doesn't work on every single object, but what it does is, because a PNG is not vector, so it's not this kind of crispy edge, it's actually made up of these little pixels, just like this image here. If I zoom in close enough we can see these images actually are made up of all these little cubes. And that's how a PNG is rendered. So what we need to do is make sure, when it is getting rendered, it's getting rendered as best as it can in those little pixels.
I got this little kind of example graphics over here, so what they are is, first of all you need to go to 'View', and in Illustrator you can fake pixels. It's not really changing the way your document works, it’s just kind of showing you a preview version of pixels. If I zoom in now, you'll start to see, when I'm in normal view it's nice, and crisp, and vectory, but if it's going to be a PNG it's going to look something like this. What happens is if I've got any of these, like, say this line, it's only one pixel wide, but I’ve positioned it kind of so it straddles two pixels, can you see? Goes to either side of it, so it doesn't know which way to put it on, so gets this kind of like murky blurriness. Same with this L here, same with this guy here.
So what happens is, when I export it, it's going to be just a little bit of fuzzy, and that happens quite a bit from Illustrator, so what we're going to do is we're going to select them, and go 'right click' and say 'Make Pixel Perfect', and what it does, it actually moves the line, so be careful. It's made it heaps crisper. It's actually physically moved them, it moved them a little bit to the right, half a pixel to the right. You can kind of tell with this; I can easily tell if it's going to be Pixel Perfect. See at the top here, the width is 92.5 pixels. You can't have a .5, they have to be whole numbers, so you can manually do Pixel Perfect by doing that. You can see, now the sides are nice, and if I do the top, 26, I've actually shrunk it down a little bit, but now it's not trying to straddle our pixel, it's definitely down the line now, you can see. Here you go.
And this L here is the same. Fonts are a little bit weird, this one's not going to be too bad. Watch this, if I right click him, 'Make Pixel Perfect', it actually looks better, but it's actually trimmed the bottom of that up a little bit. It used to be a bit fatter down the bottom. So, be careful when using Pixel Perfect.
Now Pixel Perfect works great for kind of horizontal and vertical lines - I always get mixed up anyway. - but when you get to things like these type of shapes, there's no point messing around with Pixel Perfect, with these guys. Watch this, if I go to 'Pixel Perfect', it kind of-- cannot do it. Just too many curves, can't work it out. Some of these ones have some straight lines. If I click on him and I go 'Make Pixel Perfect', hasn’t made it better, I think it's made it worse, it’s kind of pushed them all over. Just too many shapes going on. So, Pixel Perfect, great for really cube kind of straight lines and fonts. So make sure they’re Pixel Perfect before you drag them into your Asset panel for export as a PNG.
What we're going to do is, just to finish off is, we'll add all of these guys, so grab all three of these, here we go. Actually it's grouped them all together, that's not what I want. You’re in there, you’re in there, you’re in there, I'll go and name them in a sec. What else needs to go? That's going to be typed in. These both need to go. You. You. And, what else needs to go? The arrow needs to go. Make sure when you're finished with pixel preview to turn it off, don't need it on afterwards. It's always hard to grab these guys, you got to zoom in. In you go. In you go. What else? This guy here. There's another way of doing this, instead of trying to drag them in, just select that once, and there's one in here that says, this one here, it says, 'Add the selected', so it just comes across. Awesome!
So we've got them all in there. Now I want to select them all, so I'm holding 'Shift' and clicking them all, because what I'm going to do is, I'm going to make sure I'm okay for both options, so I'm going to have a SVG plus a PNG. We're ignoring scaling at the moment, we're just going to go to times 1, '1x', PNG, so we're going to have both of these. Now, what I should do is go through and name these before I export them. I'm going to do that now, and Tayla is going to speed this up with his magic editing. All right, go on Tayla.
All right, done. Now I'm going to hit 'Export', and hopefully they'll all be in ‘Export’. Let's check it out. Cool. So I've got an arrow, two versions, I've got a SVG and a PNG. You can see the file sizes, the SVG's actually only just a tiny bit bigger, but the PNG here is just a little bit smaller, but this one here is that size, tiny, you can kind of just see it in there, the SVG though is scalable. Massive!
Same with the logo here. The logo is a lot bigger, as a JPG. Actually those are wrong ones, what I want is logo, SVG, 2KB, so it's no real big difference except that this one here is massive.
Great! All right, that's how you go through and export your PNGs and your SVGs if you're exporting icons and logos.