Lessons

Lesson Info

File Formats for Different Applications

So we have Our files are file types. What? They're going to be used for the color modes, resolution and terminology. And now we're going to show you what this actually looks like when we have a vector file and when we have a raster file and when we save things incorrectly and when we save things correctly, we're gonna show you how to do this as easily as possible for you. If you're using Photoshop or Illustrator, we're gonna show you this. We're going to show a little bit of advanced features, but we're trying to keep this. A simple is possible. Now, this is a fairly complex topic, So I tried to boil this down to the most essential information here. It's a lot of information, but we're gonna jump over and we're going to show you how this actually works in both Photoshop and Illustrator. So I'm gonna start with photo shop, and here is my image and one of the things that there's several things I don't know about this image. I don't know how big this is, and I don't know the resolution, s...

o I need to find this out so I can understand how this is going to work for me. So when I'm in photo shop under the image menu, I can go under the mode and I can see that it's an RGB mode, which is great. I can convert this for print later. I can use this for the Web. It's an RGB mode so I can check that one off my list. The next thing is going in and understanding the image size. An image size is based on two things. The physical size that is going to be used if I'm going to use this for print and the resolution so that I can know what size it's going to be used at. So when I go under image size here, this tells me two things. This tells me the size. It's like 15. by 11.5 inches at 300 pixels per inch, which is great. I can use it at that size for print. It's a big file. This is great, absolutely wonderful. If I want to know how big it's going to be used on the Web, I can always change the measurements two pixels and it tells me how many pixels and I could go in and put in my resolution. And there's my resolution. It's 11. by 8 30 pixels when it's 72 pixels per inch. So I can pretty much understand what I have to start with now. Super simple stuff to keep this as easy as possible. If you want to size your image to the size that you need, we have just a really simple cropping. And if you want a crop, your image to the size, this will go through and adjust the resolution and the size of your final image This simple as possible. And this is what I love, cause you don't have to go through a lot of other steps. It does it all in one step. So what I'm gonna need is I'm gonna need my crop tool. I'm gonna grab my crop tool here when I get my crop tool up in the control bar gonna go in and it's the second option at the drop down menu and it's within the height Times resolution. So if I'm going to use this for print, I can go in here and I can determine the number of pixels per inch and I can say, OK, it's 300 pixels per inch But I know my image was that because I had gone under image size and check that out and now I can say, OK, I need to use this at this size, so I know that my final file size needs to be eight inches by six inches, so I'm gonna type in here. I'm just going to type in eight inches. I'm gonna type in six inches, don't have type of inches. I just put in eight I n six. I am, and you can type in centimeters millimeters whatever. And once I do this, here's my eight inches wide, six inches high at 300 pixels per inch. Then I congrats any one of my crop corners and I can move my crop around, and I can position by picture inside that crop. When I cropped, this image, when I'm done by end result will end up being exactly eight inches wide, six inches high at 300 pixels per inch. It crops, it scales it and sets the resolution right where we need it to be. Now. I started off with a high res image a pixels per inch image. So that's why I was able to go in here and keep it at 300 pixels per inch and scale the size. Once I crop that I can click on the check mark or simply hit Return on my keyboard, and that will crop my image to that exact size. Awesome. And now I can save that file. If I save this file here going back to my original presentation, how do I save this file? Well, I'm gonna want to save this as a J peg because it's an image. So on simplest terms, if I go under the file menu and I choose save as I have all these different menus that I can choose, I want to save this. It's an image. It's best to save it as a J peg, so I'm gonna save it is a J peg. You name it, and I'm going to save this. And I must say, this is a J peg. I click save, and now I have the quality that I'm going to save this image at. I could have very low quality, which is going to reduce the size of my file drastically loads very quickly, but it's going to reduce the quality of my file. If I have a very large file, it's going to make it look a whole lot better. And it tells you the file size right here. That's the size of that file. So if I say this is a maximum file and I click OK, I'm now ready to go when I have saved my image for print because this is 300 pixels per inch. So I've saved it for print. If I use this for the Web, the resolution is way too high for the Web. If I would like to crop this for the Web, I certainly can. If somebody tells me they need a certain resolution and are a certain pixel with, I can go in here, go back to my crop tool, go back to the drop down menu with a height of resolution and somebody tells me I need this picture to be 800 pixels. So I type in 800 pixels PX and I need it 600 pixels high p X, and it's going to always be 72 pixels per inch for the Web. Now the crop I can move around. I could have an exact same size. And even though it looks the same size here when a crop it it's going to re sample the image, reduced the number of pixels per inch, set it to the number of pixels here and do this all at once. It, even though it looks the same as print, it's not. We're adjusting the resolution and the number of pixels. So once I cropped this and I do that, that's the new size of my image. And when I zoom in here, you can see if I zoom in really far, I can see those pixels. But in reality, I'm only going to be using this image at about this size. So if I'm going to save this for the Web now, I can save this, going to file and choose save as I'm also going to save this for the Web. It doesn't hurt to go ahead and label it for Web. Make sure you save it is a J peg because it's an image best format to save a photograph for the Web. I'm gonna call this starfish for the Web and I'm gonna click, Save. And if I want the maximum quality out of this, I can set this to maximum. If I want to save a lot of space, it's going to go and it's going to reduce the file size down. Now, I want to show you what happens here when we save this as a very low quality. Then we can see this happening right on screen. It's a slight shift, but you can see when I say this is very low quality. I'm gonna zoom in here and you can see what we have here. We have all these little compression lines I call these little crusty bits. This is what happens when you compress a J peg. It makes it a very small file, but it also tends to ruin the file. If I set this to be a very high quality file, you can see how it renders very nicely small or low quality file. It's going to go ahead and compress it greatly. So when you do save that file, you want to make sure that you get a good looking file, keeping it toward the higher end, and then you can click OK, If you want to see how this file is actually going to look when it's used on the Web, it's really simple. All you have to dio is open anyone of your browser's and in that browser, simply go into the file and choose open file. Navigate to where that file actually is in your on your hard drive. Jump in here and there's my starfish for the Web that I saved. There is the file, and I contest it out by opening it directly in my browser. I open it up, and that is my J Peg save for the Web. That's 800 by 600 pixel J. Peg Save for the Web. That's how it looks. Easy way to go ahead and test your files. We can't do this for print because print files don't display on Web. But if you want to test out a file like that for the Web, go to your browser file open and open that file directly in your browser. It's an awesome way to do it completely simple, too. Okay, so that's how we can save a photograph for both the Web and print. It's a photograph JPEG for the Web Low resolution J. Peg for print. High resolution All good. Now I'm going to jump over to my illustrator file and I've created this logo and it's all done in Vector. It's all shapes here. There's no raster when I zoom in really close here, the quality of it looks perfect all the time. Now, this is great if I save this for print, but I can save this for print in a couple different ways. The great thing is, if I say have an illustrator file, if I want to use it for print, I can go and I can save it just is an illustrator file, plain and simple. I could also save it as a PdF file to either way I can use it in any of my print applications, and it's gonna work just fine. But now I need to save this for the Web. And so if I'm gonna save this for the Web, I'm want to save this not as a J Peg, because if I save this is a J peg. It's gonna turn all those nice, smooth lines into very crusty bits. So I'm gonna go and I want to save this as a PNG file because I'm going to use this for the web. So I'm gonna export this file, and I'm going to go into the file and choose export, and I'm gonna choose save for web so I can actually see what this looks like. So when I call up my safer Web format here, I want to click on the two up here so I can see my original logo on the side here, and I can see my one that's gonna be saved for the Web. And I'm going to go when I'm going to choose the floor map that I want to choose. And choosing a PNG is going to be something. It's gonna work for me very well. And so here's my original file, and here's my PNG P and G's are going to be great, because the transparent background that I had around that logo will remain transparent. And even though it breaks it into Rast arised, our pixels for the Web is the only way it displays on the Web. It's still going to do a much better job. I'm gonna show you what a J peg looks like here when we go in and we have Avery low quality J peg and we save our image as a low quality J peg. So as I go in and I look at this, see, here's my two up right here. So here's my J peg right here, and I go into my J. Peg and I say, This is a low quality you can see is a zoom in here and I look at the edges, you see, Zoom in just a little bit more here so we can see that over here you can see what happens to my logo. I start getting all of those little crispy, crunchy edges, but I don't want that. J Pegs are best used for photographs for Leinart, drawing in Vector for the Web. I definitely want to save. This is a PNG. You can see how much that cleans it up. It's not perfect, but it's a whole lot better. So once I save this logo as a PNG Aiken, simply click save. Or if I need to know the size that I'm gonna use it at. Aiken size it right here in the file because I don't know how big I actually created this logo. But here, in the safe for web, I can go in and somebody says, OK, you know, I need this label 450 pixels wide so I can save this at 450 pixels wide as a PNG that I simply click Save it. Size is it saves a PNG. I'm gonna save this right here. It saves the PNG and there we go. So I'm gonna save that file and there's my bumble bee label dot PNG and I'm gonna save that to my file. Here it is. Click save and I'm done. I want to see how that looks. We're gonna jump back over to our Web browser. I'm gonna go under file open. I'm going to grab that file that I just saved as a PNG that Bumble bee got PNG. I open it up and there's what my PNG looks like in a Web browser. That's the size that's 450 pixels wide. Great, that easy Now, if I was really advanced and I wanted to save this for the web because somebody's doing a website and they did want this saved a scale will vector graphic I can only start with a vector graphic and save it as a scalable vector graphic. I can't take an image or raster based image and save it that way. If I go into her file and I choose save as I can save this as an SPG file, which is going to be a scalable vector graphic, which can also be open in a Web browser. But I have to start with a vector file. It's pretty simple. I've saved this as an SPG in my folder where everything goes right there, and I must say this as an SPG file when they say that scale of Elektra graphic click OK, and now it's saved it as an SPG file. If I go back to my finder where I have my content and I've got my Dropbox with all of my creative life files, there's my file. There is my SPG file, and I can look at that right in a Web browser and see how it looks