Format Infographics for Print and Web
Lesson 6 from: Data Visualization Using the Charts & Graphs Tools in IllustratorJason Hoppe
Format Infographics for Print and Web
Lesson 6 from: Data Visualization Using the Charts & Graphs Tools in IllustratorJason Hoppe
Lesson Info
6. Format Infographics for Print and Web
Lessons
Lesson Info
Format Infographics for Print and Web
so you can save these as just a standard illustrator file for whatever it is that you want to use for print. That's fine. Going to the file menu Save as and I've got my basic files. Illustrator or illustrator? Pdf A Pdf file will work in just about every single application out there. So if you have no idea what the end use of these is gonna be, for, you can easily go in and export thes simply as a PdF. And then they can be used in all the Microsoft products, all the adobe products everywhere that you want to. Here's one interesting thing. No, when I have everything on one art board like this, this is all one art board, and I saved this. Every single thing goes in on that art port. I get this entire file so you can easily go in and create different art boards just to drop your items in. And then you can just access eat each one separately via the art boards. If I want to draw a different art board right above the hand tool is my art board tool, and I can create as many art boards as I w...
ould like and then go back to my move tool my selection tool. I can grab all of my content and simply bring these each item to its own individual art board like So when I save this file, if I say it is a pdf, it will basically be multiple pages of a pdf. Each art board becomes its own page. That's nice. But the problem is, is a lot of people when they get a multi page PdF and they place it, they don't know how to get past page one. So keep in mind that that could be a little tricky. So you have the other option of exporting thes when you go in and I can actually go in and save as here, I could save everything right here. But what I'd like to dio is clicked out of that too soon. I could go ahead and I can save that. And I can say that is a pdf. But I could go in and I can say, you know what? Don't save. This is one big PdF with multiple pages. I want you to go in and save this as separate art boards. So that each item will be its own art board. So each I don't have to separate those in the separate files. But I can so that they can actually set this up so that I am not stuck with one file with everything. I can have multiple files, so that's a nice way to do it as well. The other thing is, if you're ever doing any type of presentation, if you're doing any type of print presentation, a native illustrator file or PDF works fine. But if I want to export thes for the Web, I want to be able to have the best quality for the Web's. They look really good so people can see them on their phone tablets and such. So what I'm gonna do is I'm going to go through it and make my life really, really easy. I'm not gonna go on to the file menu and then go ahead and then choose, you know, save as or if I do save as I find out that there's, you know, limited amount of things to Dio. I wanna make this really easy on myself, going to the window menu and shoes asset export this makes it ridiculously simple to dio Take your file, select it, drag it into the asset export panel just like that. Bring it in. Done. There's your file with all of its content, right in there, everyone that you draggin becomes its own separate file. Now, I'd like to go ahead, and I'd like to export this for the Web. And I was told by the Web person, or if where I use I have to save everything is J pegs Okay, don't images on Lee for J pegs, this is artwork. This is text. This is graphics. This is fine lines and everything. The last thing you want to do is say, this is a J peg. Don't J. Pegs are fine for photographs for the Web. Don't save type or lines fills or graphics as a J peg. So I have other modes of saving my formats. PNG being one that is going to be universally accepted. It's going to give you a nice small file size, and it's going to give you a transparent background on all of these graphics so we could use these for print and Web. I could do that even though it says Jay Pagan here. Don't touch it. I can export this as a PNG. And if I'm exporting this just for basic web use, I can go in and I can export this as many different sizes. I can just keep clicking, add scale. I could choose what size I'd like to do it. Or I could specify a specific whipped or a specific height in pixels because it's gonna be used with Web or a specific resolution. So if somebody says I need a graphic with in 5100 and 200 their meaning pixels, so I could go in and say, OK, give me a with 100 pixels, give me a width of 200 pixels and give me a width of 500 pixels. Right. PNG is gonna be awesome for this. Great. I can save these all different ways. And when I'm done, I have just click on my asset that I want to export. These are the sizes that I'd like to export them as they're all PNG files. I click export. I save them to wherever I want them to go that fast. It's done right there. This is awesome. If I'm asked to go ahead and say for certain cell phones or tablets, whatever I can go ahead and use the IOS naming convention here or the Android naming convention as well all different sizes that I wanna have for all of this. This is great. Super easy. Basically, all you need to know for the Web is how many pictures do you need it? That's great. And they'll tell you this number of pixels, this number of pixels, that's the size done doing all the work and illustrator PNG's. We're going to capture the entire range of color very nicely, and you're going to get very nice displaying graphics on the Web. You want to see how they work? This is how you test it. You call up your Web browser, you go under file open. You go to where it is on the desktop. Right there. You grab your asset that you exported right there. You bring it in. That's what it looks like. Just like that, J pegs, we're going to give you a lot of artifact ing and jibali crunchies all around the type in the edges. That's why you don't want to use a J peg. OK, don't don't do it, but this is a really quick and easy way to go ahead and export all of your assets very quickly, either for Web or for print. The asset panel is awesome. If you want to take the longer way around, you can always go into export and choose export for screens. And this is going to go in and I can do all of my art boards. Which is another reason why breaking about art boards could be of use If you want to go ahead and do the slightly longer way around, I couldn't do the entire art board here or each and every individual art bored with that on there. I can see my assets. I can select all of these items and then I could choose what it is that I want to dio. There's more advanced settings in here, which allowed me to do a couple extra features here. In most cases, it's not that big of a deal. If you are very cutting edge and you would like to go ahead and you want to use all these vector shapes on the Web, we do have SPG, which is scalable vector graphics. Not all Web browser support them. Not all people who use HTML completely understand them. But if you really want to be cutting edge and you want this to remain vector and be completely scalable on the Web, we can go in and we can save these directly from here as an S v g Scalable vector graphic. It does not rast arise it. It's no PNG or give for J. Peg, and it means that you can bring it into any device or any display. And you can scale it toe what ever size you want with no degradation and quality. That's why the scale disappears here. There is no scale. Yep, like any other vector graphic that you see is infinitely scalable without any degradation of quality. Pretty cool, so you can save it from the asset export to, and you can also go under the menu and choose save as, and you can save it directly from here. Also, as an SPG, you'll notice we don't have savings. PNG here J peg or whatever else directly from here. They're trying to guide you Thio going through and using the asset export panel. It doesn't get any easier than this. You can see exactly what you're exporting. You click on it. You know what you're exporting and where you're exporting it to.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Tomas Verver
Inspiring teacher, interesting topic to learn about how to data visualize. How to make beautyful charts and graphics the easy way.
user-871475
Student Work
Related Classes
Adobe Illustrator