Options to Save Files for Web
Lesson 4 from: File Formats Explained: Everything You Need to KnowJason Hoppe
Options to Save Files for Web
Lesson 4 from: File Formats Explained: Everything You Need to KnowJason Hoppe
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
Options to Save Files for Web
So we're gonna jump over to starting off with Photoshop because Photoshop, we work with these files all the time and what are we gonna go with these files and how are we gonna work with these files in order to export them in all these different formats? And I've got several different files here. I've got a water bottle with some active type on it. I've got a logo that was created in Illustrator that was brought in and then I have a vector-based logo that still retains its vector. And then I just have a standard image in Photoshop. So a lot of different things that you're gonna be working with in Photoshop and what we actually wanna do. So, first and foremost, when we're working with anything in Photoshop, what we need to do is we need to figure out what the file is going to be used for in the very end. And the biggest difference between print and web, is going to be the resolution because that's critical, first and foremost. So, if I ever wanted to find out what I'm going to be working...
with, I could always go under in Photoshop, under the image menu under image size, and I can find out what size my file is. Somebody had a little bit of fun with this and so, I'm going to loop these all together. And so the original file that I opened up is six inches by nine inches at 300 pixels per inch. This is what I would need to be considered a high res file for print, but anything that I'm going to do for web, is going to be 72 pixels per inch. But I know some people out there are saying, wait a second, what about these new high, the retina displays, and the high definition displays. We're gonna talk about that because the reality of it is, when it comes down to it, they're actually all 72, but there's a little trick that you do. But in the end, 72 pixels per inch is what we need for the web. So, if I was gonna use this for print, I could save this for print, but what I'm gonna do is I'm gonna go through some of the web formats here to show you what happens. So, if I'm gonna use this for the web here, I could go in and I could reduce this down to 72 pixels per inch because this is what I'm going to see on screen. 72 pixels per inch is all I need. Anything more than that, it's gonna reduce it down anyway. So, 72 pixels per inch and the color mode that I'm in, when I'm working in anything for the web, is always gonna be RGB. RGB, for light emanating devices and anything that I save for the web is always gonna be in RGB. Always. We will get into index color. I'll tell you what index color is and we'll show you how to get to that. But I've got my image here and I would like to go and save this for the web. First and foremost one of the things I never do when I'm saving something for the web, is go under the file menu and choose save. And then go under my list of formats here and save it as a PNG or a JPG or anything like that and save it directly to a certain file format. The reason why I don't do that is because I have no control and no idea over what's actually happening with this file. If you save it as one of these file formats, you don't know the quality or the size, or the number of colors or the compression, or how it's actually going to look. So, what we have, is we have, under the file menu, we can go and we can choose Export. And we have Save for Web, which has been around for a very long time. But it also says this is legacy and legacy means that Adobe is no longer supporting the development of this. There have been some issues with the way it renders in RGB. There's a known issue and they're going and they're moving on here because they're now using the Export As. So we're gonna show you both so you understand what the difference is. Many of you are probably very familiar with Save for Web. We have it in illustrator, we have it in Photoshop. And it's been around for years. I don't know if anybody remembers out there, way back in the day when we had Adobe Image Ready, which was a separate application that you had to pay for and it did this and many years ago they integrated that in there. So, I have my image, and this is a photograph and I'm gonna choose Save for Web. When I get into my Save for Web window, it normally comes up with just the original image and on the upper left hand corner I wanna click the tabs so that I can see my original on the left hand side and it says that right here and then, my file format that I'm gonna choose right here.
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.
Student Work
Related Classes
Fundamentals