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
Save Files for Print
So those are the basic file types that we can save from Photoshop. Now there's one last one that we really didn't talk about, actually two. We didn't talk about saving directly for print as a native Photoshop file and as a TIFF and so this is the easy part when it comes to saving for print, because we've got a couple different file types here. And, I'm going to take this as a perfect example. I have a layered Photoshop file, and I put some type on my bottle in here and I would like to use this in other applications. So, one of the easiest ways to do this, to have the editing capability of this Photoshop file now and later, is just to go in and save this file as a PSD file, which is a Photoshop document. So we go in, save it as a Photoshop document right there and it's going to retain all of it's layers. And I can bring this in to Illustrator, I can bring this into InDesign, place it, and I'm going to have this layered Photoshop file. We don't have to save it as anything else. If I want...
ed to have a transparent background in here, the transparency would also come across as well. You can save it as a TIFF but we're going to get to that because TIFF's have kind of gone along the wayside, EPS's have kind of almost disappeared. But a layered Photoshop file is pretty much all you need. So, I'm going to save this layered Photoshop file, I'm going to jump over to InDesign and I'm going to create a new document and go under file place, navigate to my water bottle and there's my water bottle right there. And I can just go to print, not a problem. If I ever want to open up this file I can always go back to the original Photoshop file, still has its layers. If I have transparency or translucency in the file, it'll also support it. And I can see that by going in, and if I decide that I'm going to put a gradient mask on here then I can put a gradient mask and I can mask that out like so, save that file go right back into InDesign. There's my file and if I were to put color behind this file, and look at that you can see that that gradient is going to where that color, is going to honor the transparency, translucency, whatever in Photoshop. So, didn't need to save it as anything special, okay? A TIFF file won't let you do this, it'll just give you a white background no matter what kind of transparency you have. So, that's the benefit of saving it from just as a layered Photoshop file. Exact same thing is true in Illustrator. It's going to function just like you see this. Native Photoshop file, pretty much universal. If I jump over to Photoshop again, and I'd like to go, and I would like to have this file, but you'll notice that I have type in the file here. And, I want this type to actually render as very nice type. Just like type looks in any other application, vector. Now, type in Photoshop is vector even though when we look at this, we look at that and it's like okay, you know that all rasterized, don't be fooled. Active type really is vector because I can scale it up or down. If I wanted to retain this vector, there's couple ways that I could do it. One of them, if I retain the vector file, I could print directly from Photoshop, and when I print directly from Photoshop here I'll be able to go in and I'll be able to print and it's going to keep that vector quality of that type right there. But, if I import this file into anything else it will not keep it as vector. Okay, so, if I bring this file into InDesign it's going to rasterize that type. It doesn't recognize it as active type. If I wanted to keep this active type, I can do it a couple other ways. One, I'm actually going to turn this type into actual shapes. So this is going to be turned into a vector shape. So basically, I'm turning the type into an outline. When I turn the type into an outline, it is an actual editable vector path. If I were to save this file and bring it into InDesign it's still going to render as raster. So there's a couple little tricks that I have to do in order to retain this vector quality. And one of them is saving the file as a Photoshop PDF. This is kind of interesting, and a Photoshop PDF is kind of a hybrid file between a PDF, because PDF's tend to be very small because it renders everything just at the size it's needed. But, a Photoshop PDF is for people who don't have Photoshop, but need to go ahead and print it and still get the quality out of the file. But it also allows you to put vector in the file as well and still have it editable as Photoshop file. So kind of the best of both worlds. So, I'm going to specifically save this directly as a Photoshop PDF. You'll notice it doesn't just say PDF, it's actually specifically a Photoshop PDF. So, it's going to retain the Photoshop qualities, one of them being the layers, second being the vector. So, I'm going to click save and I'm going to jump over to the... let me save this here. Preserve the Photoshop editing capabilities, yes. Save as PDF, yep. Okay, now I'm going to jump over to InDesign again and I'm going to place that PDF file that I just created and I'm going to look at this and I'm going to turn on my preview here, my display performance and I'm going to see if this actually looks like it's vector. Oh my gosh, it actually is. Now, you see pixel based qualities in here because that is the highlights, the shadow, the bevel, and the emboss. But, when I zoom in really close, that's a perfectly smooth vector line. So, this is the one way that I can actually retain the vector quality from my Photoshop file and actually have it be vector in other applications. If it's active type, it's not going to go ahead and retain that vector. But, if I convert it to an outline, or a path or a shape layer, or create any shapes, any shape layers, specifically using vector in Photoshop, this is one of the only ways I can get this into another application and still retain this. If I just save it as a normal Photoshop file, with all the vector and I bring it into another application it does not honor the vector. But, if I save it as a Photoshop PDF, then it actually honors the vector outside of Photoshop. But, if I open this PDF file up, since it's a Photoshop PDF and I have Photoshop, I'll open it up, I'll have my layers and I'll have my edited vector. If I were to print directly from this Photoshop PDF, I would also get this vector. But, I can bring this into Illustrator, and I can bring this into InDesign, and it still honors the vector. I know, mind blown isn't it? And we're just getting started folks. I mean this is just the very beginning of how this stuff actually works. So, pretty cool. And then of course, if I export this to a PDF, we'd actually be able to zoom in on this and see this, and it'll render all of the raster of the image and it'll render all the vector here. So, very different world between print and web, and all the different intricacies of finding out what works and what doesn't and retaining the qualities between all these items. Just for Javier Alquarez, he asks, "SVG is very editable format. " You said we can edit color, " and of course the size of the file right on HTML code. " What are some of the other " characteristics that might be editable in HTML?" Well if you were really, really, really good at math, you could then edit the very specific points. Each and every point to actually change the vector graphic shape itself. But that just, that blows my mind. Okay, so yes you can, yeah. Again, back to the exporting for the web and the different sizes, what is the size that gets so big, that it starts to effect load time on a web page? Is there a size to try to keep files under for web? I know that's complicated because it depends on how many but what would your general recommendation be for say a photo where you're showing sort of just one. Well, the reality of it is, I mean, when you're dealing with the largest monitor possible like a 27-inch monitor, you could technically build a image for a website to be displayed at that size. You have no control over where that image is actually going to end up. Whether it's on a phone or a tablet or a computer. So the reality of it is you're going to build it so that it looks good at an average size. You know, 1024 by 768, 1200 by 800, and even at that size you're not talking a huge file size. If your files start getting up into the megabyte range, way too big for display on the web, way too big. But for images are we trying to get them to that 15K? We're trying to get the... Every image is different. So, you try to get them to the best size, where it's going to look good, you're not compromising the quality, but you're also getting a good download speed. If you have an image with a much broader color range and a lot more detail, clearly that's going to take up more room. But, if you have an image like this water bottle, that you have just basically just pretty much the blue spectrum, you have a lot less information in there, so it's going to end up being a smaller file size simply because the number of colors means less size. So, fewer colors, smaller size. Thank you for that. Yes. Another quick one from Elizabeth, "is DPI the same as PPI?" Yes, so that is a great question Elizabeth because people always use that interchangeably. Technically, it's absolutely wrong, but everybody uses it wrong, so it's now become the right. So, pixels per inch is literally the number of pixels-per-square inch in the file. These are the pixels and you take one square inch, okay? DPI is dots-per-inch. Dots-per-inch is taking the pixels, breaking them down into dots of ink. While PPI and DPI, people just call it DPI. It's completely wrong but everybody uses it, so everybody automatically assumes it's the same thing. But, its completely different, but when you say DPI or PPI people are like "oh, I get what you're saying." DPI, dots-per-inch, when it comes to ink on paper. PPI, pixels-per-inch, when you're talking a digital file.
Class Materials
Bonus Materials with Purchase
Bonus Materials with RSVP
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.