Q & A
Jason Hoppe
Lesson Info
14. Q & A
Lessons
Class Introduction
01:43 2History of File Formats
14:12 3History of Web Formats
10:36 4Options to Save Files for Web
05:00 5Save Files as JPEG
13:19 6Save Files as GIF or PNG
18:06 7Options for Scalable Vector Graphics
09:35 8Save Files for Print
11:35Lesson Info
Q & A
Kind of related, this question came from, Photo DJ said when I place a psd file in InDesign they look terrible. Is there a trick or setting I can use? I would like to keep the Photoshop layers editable and not have to save out a jpeg as a separate file. Absolutely, and the answer to your question is, when you place a file inside InDesign, the default is going to be a low resolution preview. And I'm going to place both a Photoshop file, raster based and also a vector based file too. And by default when you go into InDesign the default preview of anything that you place in there is always going to be what you call typical display, and that is a low resolution display, regardless of the quality of the image. It makes no difference. It is made much more obvious when you have a vector based file. It looks terrible. And you're like OK I know this is a vector based file, why is it displaying as a raster image? And it's like OK if I've learned anything, I thought it was starting to make sens...
e, and now I got completely screwed up. Well, it doesn't matter what file you have because you look at this Photoshop file and you see that this isn't displaying very nicely at all either. It's like OK, this looks terrible as well. And yes I've got the blending here and it just looks awful. This is all to save memory and speed in InDesign, so it doesn't have to render all the files every single time you move the page around, suck up memory, slow everything down. So, the true test is going in and setting your InDesign file to be high quality display. And once you do, if the image is actually a high quality image it will render as a high quality image and any vector will actually render exactly as vector. Now, you typically don't want to do this on a very large file because then as you scroll through your pages you're going to get a very delayed scroll and it's going to suck up a lot of memory. So, my recommendation is, don't set your entire document to high quality display. But go in, and if you're questioning a specific file, click on that file with your selection tool, right click on that file. You'll get your contextual menu, which also has the display performance. And this display performance comes at the fly out menu here. You can go in and you can specifically set this selected graphic instead of the whole file. I can go in and select this specific graphic to be high quality display and just that will render that way. So if you have a question about it, not a problem. You look at it and it's great. There you go. This one doesn't look so good when I zoom in. If I question it, right click on it, and set this one for high quality display. And this, and only this one, will render that way. So, they do that to save speed and memory. That's exactly what it does. OK, Lorianne Davy had asked, can you export html from Illustrator. You can not. html does not get exported from illustrator. When we choose export here all we have is the ability to export files and that's it. So, nothing. The only thing that can truly export html is going to be from InDesign. And then we can export htmls we can have a website or an epub format. And we just don't have it. We used to have, you could export a little bit of html, and they got rid of that a couple versions ago. That's not what it's made for. OK this question, Kelly girl asks, what is the best format for a logo used as an email signature? So, there's a couple different things. It depends on your email client that you're using. I'm pretty sure svgs do not work in any kind of email client. OK. So, normally people use jpegs. One, because they're really small and especially if you send a lot of emails and you have you know 20,000 emails. Every single signature takes up a file. Pngs are pretty much the standard one because you can have a transparent. And, so, svgs are almost completely out, but basically a png or a jpeg, either one. Being an email signature there, if you've got a lot of graphics and fills on there, obviously, png is going to do it. A jpeg is going to have a lot more colors, so some email clients will only allow a jpeg. But jpeg or png, pretty much it. In that case every single k counts. Because you could imagine if you have a two k signature times 40,000 emails per person in the whole office, all the sudden you've got a lot of file size, just in signature files alone. This one is, how do you save a cmyk photo with a transparent background? Simple. You go into photoshop and you go under image, mode and you convert it to cmyk. And I'm going to go ahead so I can do a transparent background here. If I take the background out of this, keeping in mind that I'm going to do this very quickly here, I'm just going to use the magic wand tool. I'm going to do this really quickly. But there's my file. It is in cmyk mode. I have my transparent layers here. And I just go under file, save. And I save it as a Photoshop file. A layered file, it doesn't care what mode you're in. If you're in rgb or cmyk or gray scale, a layered Photoshop file is still a layered Photoshop file. A couple more png questions, if that's alright. First of all, when you were exporting as the png option export as, can you again say why you do png eight or png 24. Absolutely. So, if I have something like this that is just going to be a normal logo. And I go in an I do the export as or do the save for web, a png eight is going to be completely sufficient for what I need because it's just going to render the file, and it's going to keep the number of colors down, and it's going to render the file as pixels, but it's going to give me a fairly clean rendering of it. If I were to go in and I were to add a drop shadow on here. A png eight is not going to render this drop shadow correctly because what's going to happen is I will get the drop shadow on there, but what's going to happen here where the png eight is you can see you will get, let me show all the colors, you will get this kind of fringing or haloing effect with a png eight because if the pixel is not white by default any pixel with any bit of color is not transparent. But convert that to a png 24, I get a substantially larger file. But, now I get the universality of having this actually be translucent. So, if I wanted to put this on any colored background I don't have to bake the background into the image and then put it in. I can have a png 24. You get full transparency but you also sacrifice file size. It gets bigger. And that answers Jeff Line's question where he was asking, why can't you scale down the png 24 in quality like you can the others to make the file smaller? You certainly can, and we do that going in and we cut down the number of colors. However, because it's a png 24 we don't have the ability to cut down the index colors. Because index colors only come up in a png eight, an eight bit color. That's what the eight stands for. 24 bit color is the full color range, so I can't have a table big enough to display all of these colors. It would literally millions of colors to display, so that's the reason why you can't cut it down. But you get the benefit of having a nicely rendered graphic without the transparency, or with the transparency but without the jpeg compression, but you sacrifice, you can't go in an control the size. So. There's that trade off as well. Alright. So, question from (indistinct) There are still questions coming in. Is there a way to edit a pdf file if you don't have the fonts? So that's the tricky thing. If you don't have the fonts it will display normally, it will print normally but if you go in and try to edit it it will warn you, saying you don't have the fonts. So, that's one of the tricky things that you have. You'd have to go in and change the fonts and it's not easy to do. If you open it up in Acrobat you can, but that's one of the limited editing capabilities there, so it's great but it's not totally awesome. Melly asks, if I'm sending a file to an embroiderer or a screen printer, how should I save the file if I'm working in illustrator. Save it as a native illustrator file or a illustrator pdf so you retain the vector files. Because when you're doing with a screen printer you want to go in, and you don't want all those little raster edges on the screen print, or if you're going in and using it to cut vinyl you don't want all of those little pixels cut out of the vinyl. People are like, oh I can just send a jpeg. And it's like, yeah but if you look at a jpeg up close and you try to trace it, you know, that's what you're going to get as your final file. Because you can always take an illustrator file or a pdf file and rasterize it in Photoshop but you can't take anything in Photoshop and un-rasterize it into vector. So, start with the most flexible and fluid one, and you can always destroy it later. So, illustrator or an illustrator pdf. That's the way to go. Now, one interesting thing, I opened it up because I knew where you were going. Just one last thing that I wanted to share with you, and we had talked about this earlier, and it completely slipped my mind, but here's an interesting thing. If you've ever opened up an image lik a png or a gif file in Photoshop and you want to do something to it, you'll notice that there's a lot of things that you can't do with a png or a gif in Photoshop, and the reason why is because it's not a full color range image. And you'll notice in my layers panel, it says index color and in my mode here it also says index color. It's like, well how do I get to index color? Well, index color is when you save a gif or a png from Photoshop or from illustrator it literally indexes the color. It takes the color range in that photo or that graphic and it breaks it down into 256 or less colors. Literally indexing the number of colors in the file. So, I open up this bonus material that we have right here. How perfect it that? It's a png file and it shows up as an index color. And there's a lot of things I can't do with it. I mean there's so many things I can't do with this file. All this things are grayed out. Simple because it's an index color. If you want to go in and edit this, you'll need to go in and you'll need to change the mode back from index color to rgb. And you'll notice when I change it from rgb. Did you see that change there? Because it's index colors you can kind of see the change on screen here. It doesn't look totally clean because it's rendering with a very specific set of colors. If I go into rgb, do you see how it turns a little bit softer, a little bit smoother? Because now we're dealing with what used to be or eight bit, hence the png eight. Now, we're dealing with a full visible spectrum of rgb. Essentially 24 bit color. So, there we have it, but now when I zoom in really close it looks nice it looks really good but it's still is all raster based. So, here's a little trick. You go ahead and take this nice little gift. Go in there convert it to rgb. You can see it beautifully. Print it out. Put it on your wall and there you have it.
Class Materials
Ratings and Reviews
Rebecca Chapman
I love Jason's style and approachability! I love how he explains things and starts right from the beginning. Highly recommend.
E Ahn
His makes it very easy to understand with clear, articulate, systematic approach. Great voice and effective delivery. I tried to understand this subject many times and it has never been clear until I heard this lecture.
Khadijah Abdul Nabi
Amazing amount of industry relevant and practical information! Great delivery.
Student Work
Related Classes
Fundamentals