Save & Export Icons for Print or Web
Lesson 9 from: Designing Kitchen Icons in Adobe IllustratorJason Hoppe
Save & Export Icons for Print or Web
Lesson 9 from: Designing Kitchen Icons in Adobe IllustratorJason Hoppe
Lesson Info
9. Save & Export Icons for Print or Web
Lessons
Basic Drawing, Line Weights & Corner Styles
19:57 2Alignment & Spacing Tips
05:16 3Icons with Multiple Shapes & Tools
12:19 4Simple Drop & Slip Shadows & Highlights
10:11 5Scale Stroke Options for Consistency
10:27 6Join Objects to Create Multiple Icons
13:28 7Add Depth and Texture to Icons
07:05 8Add Consistency to Icons
03:34Lesson Info
Save & Export Icons for Print or Web
what you want to save these as well. We're going to save these for print. We can save going to the final menu, and we can do a save as if we're going to use these for print in any of the adobe applications we can keep. These isn't an illustrator file. If you're old school people still use GPS files. You don't need to use them anymore. We don't usually use them. There's not really a need for them. But you can if somebody is going to use thes but doesn't have illustrator, and they'd like to put these in any other products that are not adobe products. A Pdf works absolutely great, but you may want to use thes for the Web. So if we go and we save these, I can go in and I can take any of my icons here, and I can save these for the Web now if we go into the file menu and choose save as we have a couple of different formats here. But you notice how you don't see like PNG or anything like that or GIF file because doing it from here isn't the best way to do it. By the way, when you ever you're ...
saving icons Leinart type fine details. Never save them is J. Peg. That's what you save pictures as not artwork. So if I want to save these under the file menu, I'm gonna go under export. We got a couple different exports that I can use here Makes it really easy. I want to export this for screens so my end result is going to be on a screen. It's gonna be on a tablet, a phone video computer website on the export for screens. So I've selected my spatula. I choose export for screens and actually can export the entire art board here if I want. And then it allows me to go in and export my files. But what I'd like to export them as don't export them is a J peg one. You will not have a transparent background. It will also compress them. And it will give you all crunchy edges. Don't use a J peg. Don't use a J peg. Don't use a J peg. PNG works great PNG because these air on a transparent background will give you beautifully rendered image and it will go ahead and leave you with a transparent background in there. Same with a gift file. But you'll notice that GIF files are no longer in here. So P and G's we're gonna work. Great. Not a problem. What sizes do you need? Well, you can go in and you can set multiple different sizes because, as thes render they're gonna render is a fixed size. You can go in and you can add scales here, one the actual size twice the size three times the size. You can go in and do half the size, and you'll notice that it will come up. Name the file, and it'll actually tell you which files are going to be larger. Small. It would actually name them right here so you can see normal size twice the size three times the size, half the skies as you go. And then I can go in and export all of these assets here. Or I could do it one by one. I don't want to export this one whole thing is this large chunk, which is what it's doing here. But I can export it anyway that I want Teoh. If you want to get even more detailed. You can go in and you can control whether this is going to be for Android or for IOS because the four mats are gonna be different. The naming convention of the formats are gonna be different. It really isn't going to be different. But here with Android, they have different resolutions here. So they call the files differently. They're all still a PNG. If you'd like to be more specific in what you export here, this is great exports all of your content right here. But I'd like to be a little bit more specific here so I could export just the selection. Or I could go in and I could choose export as and just do it right from here. But it gives me no options whatsoever. So I don't recommend just going in and choosing the export here because you have no choice. It simply just takes it and dumps it. And you've got no control. People like, Yeah, that's how we normally do it a little bit better. One more thing. I'm gonna go under the window menu and we're gonna call up the asset export panel. This is going to be the coolest thing ever. What I want to do is I want to create my assets and I want to export them when I want to. Independently. And all you do here is you select your asset and you drag it into your asset export. So you grab each and every item exactly how it is. Drag it in there. There you go. There you go. And you've got them all. Awesome. Check this out. Now I want to go when I want to export this or multiple assets one at a time. All of them. I select the asset and at the bottom my asset window is my ability to go in and do everything that I had when I chose the export for screens. But it doesn't right here in the export window. Plus, I just drag my assets and I can click on any one of these and export them right from here. Super simple, Super easy. Any size that you want, I choose that I click export. Where do you want to put them? I choose it. It's already done. It has exported all of these right onto my desktop. And with those There's all my assets named at the different sizes right there. You want to see how they look open a browser window, dragged him right in. You're going to see the different sizes. Works absolutely great. Now there's one more thing that we have here that we want to go ahead and show you. And this is the SPG file format. If you don't know what SPG is, that is. A newer formats is called scalable Vector graphics. Everything we've exported right here and now has been pixel based, which is what almost everything is on any display. Phones, tablets, computer video, scalable vector graphics. Keep it a vector graphic even when it goes to any of the other devices. If I would like to save this as an SPG file, I can go and I can select my object. And I can save this as an SPG. And it's a simple as going in her file Save As and Aiken save all of this as a scalable vector. Graphic S P G's air not completely supported in all environments, but it's a great way to be able to go in and be able to zoom in on objects without having to render multiple different sizes. Like I said, not all coding and not all devices will accept an SPG. But if you truly want to keep vector and a display environment scalable vector graphics or what you can dio, they're infinitely scalable. There you have it all different ways. So, in a nutshell, don't ever export any of these as a J Peg. PNG's gifts refined, but we don't have the gift export in here anymore. The ex asset export panel slick is can be dragged them in. Click on the one that you want set your size is what you're exporting for and you're done.
Class Materials
Bonus Materials
Ratings and Reviews
Tomas Verver
I like Jason's teachingstyle. Nice to see that just using symple shapes and a few trucs can help you make icons.
Eileen
I learned some nifty techniques! For example, how to easily change sharp corners to round ones, and how to subtract simple shapes from each other and use them as building blocks to create icons.