Transcripts
1. Get Your File Size Right Every Time in Photoshop - Intro: Hello. I'm Helen Bradley. Welcome to this graphic design for lunch class; get your file size right every time in Adobe Photoshop. Graphic design for lunch is a series of classes that teach a range of tips and techniques for creating designs and for working in applications such as Illustrator, Photoshop, and Procreate. Today we're looking at how to size an image the right size and resolution for print in the web so that you can confidently know how big to make a file and so that your images won't be either too big or too small or worse still squashed or stretched out of shape. As you're watching these videos, you'll see a prompt which lets you recommend this class to others. Please, if you're enjoying the class, give it a thumbs up, and if you'd like to leave a written review, please do so. These help other students find my classes and determine if they'll enjoy them too. Unfortunately, I can't reply direct to these reviews, but be assured that I do read them all and I really appreciate your feedback. If you'd like to leave a comment, please do so. I read and respond to all of your comments, and I also look at and respond to all of your class projects. If you're ready now, let's get started on determining the right file size for your images every time.
2. Get Your File Size Right Every Time - Part 1: We're going to start in this video by looking at an image and using it to understand terms such as the resolution of a file, the dimensions of a file, and the file size. To do this, I'm going to actually open a Photoshop dialogue. So I'm going to image and then image size. Just going to size my image so we can set, and we're going to look at how this dialogue is set up. Now I have my dimensions here set up to pixels, which I think is valuable and I would recommend to you and I have these settings here set to inches. If you're working in Europe or Australia, then you may want to set those to centimeters if that makes more sense to you. Now, the dimensions of the image are the physical number of pixels wide and tall. So this image is 4000 by two and a half thousand. That's what this dialogue is telling us. This dialogue will be different in earlier versions of Photoshop, but the same information is always here. So 4000 pixels wide, two and a half thousand pixels tall. If we multiplied 4000 by 2500, we would get the total number of pixels, those little boxes of color in this image. That's what an image is made up of, is lots and lots of little blocks of color, and they're called pixels. So the dimensions are in pixels, the number of pixels wide and tall. We also have something called resolution. At the moment it's set to 300 pixels per inch. We're going to see in a minute how we can change that. But we're also going to learn right now that this only matters for print. It is totally irrelevant for putting images up on the web. If you're sending to Facebook or posting images on your website, resolution is just not a term that you need to understand at all. As soon as you start to print, it becomes really important. Here's the current width and height of the image at a resolution of 300 pixels per inch. All of this is relevant to print only. It has no relevance at all if you're going to put this image up on the web. So we just need to be really clear about that. We have dimensions and we have resolution here, which we've now determined is not relevant for the web, but is relevant for print. We will also need to look at image size, and that's the amount of space that this image is taking up on disk. If you were to e-mail it to somebody, how much are you sending? Well, I'm going to open Windows Explorer here. Here is this image, it's a PSD file and it is 58,631 kilobytes. So that's its size, that's how much space it's taking up on a disk that has limited relevance to the image size. It's relevant in that a bigger image is going to be a bigger file size, but you can't see a direct correlation between the two because this is a Photoshop file. If it had multiple layers in, it could blow out to be really large indeed even though the dimensions of the image are just a fixed 4000 by two and a half thousand. This is file size, the amount of space it's taking up on disk. Now that we're clear about what resolution is, what image dimensions are, and what file size are, we're going to move on to the web and see what's important for us to know about getting images to the web and how we would resize them to appropriate sizes.
3. Get Your File Size Right Every Time - Part 2: Before you can put a file up on the web, you're going to need to know how big it needs to be. I'm going to a website called HubSpot. I'm going to give you the link to this info-graphic. This is a list of the 2016 file sizes for social media. These file sizes change regularly, but this is a fairly up-to-date list. It covers sites such as Facebook and Twitter and LinkedIn and Pinterest and YouTube and Instagram. You're going to find all the major sites are represented here. What we're going to do is we're going to make a video graphic for YouTube here. We are told the video upload graphic should be in a 16:9 aspect ratio and 1280 by 760 is a good size. We're going to make our image that size. I've written those dimensions down. That's critical because you need to remember them. I'm just going to close this down for now. This image needs to be 1280 by 760 pixels. At the moment it's 4,000 by 2,500. So we're going to need to resize it. I'm going to choose Image and then image size. At this point, I suggest that you change your width and height to pixels, because you've been told by that website that the measurements for this image need to be in pixels. To re-size it's going to be easier if you use pixels as you're resizing dimension. You want this check box to be selected. In earlier versions of Photoshop this would be constrained proportions checkbox. You want to make sure that you select that. The reason for this is that if you don't select that, let's have a look and say what Photoshop would quite happily do. I've just made an image that's 4,000 by 100 pixels, and Photoshop is quite happy to smooth this image up so it's unrecognizable and total nonsense. If I had click this check box, it would not be allowed to happen. If I typed 100 in here, Photoshop would have said, "Oh, well to keep this in the proportions, it's width now has to be 160." It's going to save you from making stupid images effectively if you have this checkbox here. It also saves you from having to do the math yourself. Let's just take this image back to its original size. It was 4,000 pixels wide by 2,500 pixels tall. We have to make it 1,280 by 760, it is most likely not going to scale down to the exact dimensions. We have to throw any thought at this stage of getting this right and this very step out because it's not going to happen. We're going to start by typing in 1,280 here. Now when I size this to 1,280 wide, the height in proportion is 800. If I look at the height of the image I'm supposed to be creating, it's supposed to be 760. In other words, it's a little bit too tall. I've got a little bit too much image at this stage, and that's exactly what I want. I don't want too little, I can deal with too much. I want this value here to be the same or greater than the value that I need to use for YouTube. If that happens, well on our way. In a minute we're going to see what happens if it's not right. But let's assume that at this stage we're able to get a value here that is the same or a little bit bigger than what it is that we came here to make. Now we need to re-sample this image. Whenever you scale an image up or down, it has to be re-sampled. You need to use a re-sample method that is suitable for making the image smaller because we're making our image smaller. We're going to choose bicubic sharper for reduction, and we click there. I'll click "Okay". Now we have an image that is 1,280 pixels wide at 800 pixels tall, we're nearly there, but not quite. We'll press Control or Command zeros so I can see my image more clearly. All I did was scale it up. It hasn't changed size. We need to crop it because we need to get rid of the excess pixels that we have, so I'm going to the crop tool. It's going to clear the values from it. I'm going to click on "Ratio", and I'm going to type in here 1,280, and in the second box, 760. I'm saying to Photoshop I want an image whose ratio of width to height is 1,280 by 760 out of this process. Photoshop's gone well. Let's find, that you can kiss goodbye to bits at the top and the bottom of this image because you've got too much image. Now,I can move this around. I can say, I want all the pixels I'm going to lose to come off the bottom of the image. Or I can say, they're all going to come off the top of the image. This is going to be discarded. Or I can go for half-and-half. Any combination thereof. But to get an image that's 1,280 by 760, something has to go. And right now I'm choosing a top to go because I really want to keep the tree planted on the sidewalk. I'm going to click the check mark. I've lopped off a strip that's 40 pixels high off the top of the image, but it's now the size that YouTube wants it. Let's double check image, image size. Read off the dimensions of the image because that's what we've got 1,280 by 760, perfect. Now, before this goes to the web, we should make sure that we're using the right color space because the web is not a managed color space. That's just gobbledygook for you have to fix it before it goes or it's going to change color when it gets there. What I'm going to do is I'm going to choose Edit, I'm going to choose Convert to Profile. I need this to be sRGB. Right now, the source space is Adobe RGB. The correct color space for the web should be sRGB. I'm making sure that I have that selected. I'm going to click "Okay". If your image is not in the correct color space I'm going to show you where you are going to work that out, and that is the solution. We're going to save this image now but what I don't want to do is I don't want to save it back over the top of the original because otherwise I'm going to have discarded pixels and I'm going to have shrunk my image. I need to save this as a brand new image. I'm going to choose File Save As. I'm going to save this as a JPEG because that's the format that we use for the web. Down here you can see that the ICC color profile assigned to this image is sRGB. If you get to this stage and say that there's a different color profile assigned to the image at this point, click "Cancel" and go and fix it. Because you really need to send it up on the web using sRGB or you run the risk of the colors behaving really stupidly once they get to the web. I'm going to call this justice, and when I'm making an image at lots of different varieties of dimensions for different purposes to put the actual dimensions in the file name just makes it so much easier to see what's what. I'm calling this justice 1,280 by 760 and then click "Save". Because it's a JPEG, we get to choose the quality because this is a compressed file format. We're going to lose some image quality as we do it. We have to. That's the rules with JPEG. But we can choose whatever quality value we need. Now, if this is just going on YouTube, I'm probably okay with high. That will give me a smaller file size. Now it's not shrinking the actual dimensions. The dimensions of the image are not going to change. What this is all about is that a little bit of quality is being lost from the file so that the physical amount of space that this file takes up on disk is going to be a little less. That's all. I'm making it high. I'm going to click "Okay". Now we're done. In the next video, we're going to look and see what happens when we don't get the results in the image size dialogue that we need the first time. We're going to be able to work out how to solve that problem.
4. Get Your File Size Right Every Time - Part 3: Next up we're going to look at the situation where the image size doesn't scale quite as easily as it did the first time. I'm going to create a tumblr image, and I'm going to create it at 500 by 750 pixels. So it's a portrait size image. I've written down those values so I'm going back to the image that I'm going to use. I'm going to re-size it using the image size options. I'll choose image, image size. We're going to make sure that we're working in pixels here because we know that the image has to be 500 by 750 pixels. We also know that it's highly unlikely that this is going to work correctly the first time. We know to click this link icon, so it's selected. In earlier versions of Photoshop, it's the constrain proportions icon here. We're going to type in 500. The problem with this is, when we type in 500, the height of the image, to keep this image and proportion is going to be 662 pixels. The tumblr image has to be 750 pixels. We don't have enough image. So this resizing is simply not going to work. What we need to do is, we need to try the height and see what we can do with that. So I'm going to type in 750 because that's what my height needs to be. If I make my height 750, then the width is going to be 566. I came here to make an image that was 500 by 750, so this is too wide. We already know that when it's too wide or too tall, that's fine because we can lop a bit off. We're going to take this version now. Sometimes you may need to test your values in the width and the height box to work out which one is going to give you either the exact right dimension or too much image because you can't do this with too little image. Again, resolution is nonsense. We don't need to even consider resolution because we're going to the web. We do need to consider our re-sampling method because we're reducing the size, we're going to use bicubic sharper. I'm going to click Okay. Now we need to crop the image. I'm going to the crop tool, I'm setting the ratio, and it's going to be 500 by 750. As we would expect, this time we have to lock bits of the side because the image was 750 pixels tall, but it was too wide. We can now work out where we're going to make the crop. I think I like it best this way, so I'm just going to click the check mark. Now because we're going to the web, I'm going to check my color space, edit, convert to profile, I'm going to make sure that I'm converting to sRGB and I'm going to click, Okay. Now I have a image in the sRGB color space, I'm ready to save it for the web. File, Save as. I don't want to save it over the original because I've re-scaled the original. I'm calling this eucalypt 500 by 750, and it's going to be JPEG. Checking that the color profile is correct, it should be, we just converted it, and I'll click save. Again, I need to select the quality. Because it's going up to the web onto Tumblr, I can use just the high quality to keep my file size down to a reasonable level. I'll click okay. So much for getting images ready for the web in the next video, we're going to look at how we can prepare them for print.
5. Get Your File Size Right Every Time - Part 4: When it comes to printing an image, things are very different and the preparation that you need to do is very different to the preparation that you need to do for the web, and part of the reason for this is that image resolution is crucial when you're printing. You will need to have an image that is at least 100 pixels per inch in resolution, probably something up to 300 or even more. You'll need to determine what resolution you need by looking at the print service you're using, either your printer manual will tell you the ideal pixels per inch resolution for your image, if you're going to send it to your printer, or if you're doing it through an online site, you should look at their health information, or contact them and ask them how much or how big an image you need to send to them, and it needs to be much bigger for printing than for the web. The other thing you need to do is to make sure that your image is the right size, and we're going to have a look at something here. Just going to go and get my layer comps, and pop those over here for a minute, and let's go and get my layers because someone would be able to see those too. Let's have a look first at six by four. If we were going to print this image at six by four, this is the problem we're facing. The dimensions of the image are not six inches by four inches, they're a little bit more. Part of this image is going to be locked off. The positive to six by four for printing if you like here, is that whatever we lop off, we're still going to get the text. Because obviously the graffiti text here is the important part of this image, and whatever we do with it, we want all the text to print. Depending on which bit of the image gets lopped off, we're still going to get all our texts because this is a six by four dimension area. As to what gets lopped off, it depends. If you don't crop this image to a six by four ratio before you send it to the printer, some of this image is going to disappear and you're not going to have control over it because the printer can't print an image that's larger than six by four. It's going to do one of two things. Either it's going to lop a piece off the image, or it's going to shrink the width of your image, and you're going to end up getting a piece of white paper up the top, and down the bottom or something is going to happen because it just won't fit correctly. If you don't crop it, it's not a conversation you're going to be part of. Other people are going to do it for you. Photoshop in your printer are going to organize it for you, but you don't get control. If you crop it before you send it to the printer, then you do get control. At six by four, that's probably not a huge issue. But let's have a look at something like 8 by 10 when it does become an issue. Because this is an 8 by 10 overlay here. If I go and get it, you will see that regardless of where I put this overlay, the words in this image are not all going to get printed. This image is not the right dimensions, so working part of this image here are not the right dimensions for it to print on an 8 by 10 sheet of paper without lopping something off. If you've ever sent something to a printer and it's come back with grandma's head chopped off or something missing, this is the problem. It helps to understand what a 10 by 8 dimension image looks like, and in this case, 10 by 8 would not be a successful way to print this image. Seventeen by eleven would be much better. You can see at 17 by 11, we're almost getting the whole image in. Five by seven, we could also work at that, let's go and get the five by seven box here, and it's going to be fine for getting all the text into the image but let's look at this. If we don't crop it to five by seven before we send it out, there is a chance that we would lose this text. Again, another good reason for cropping your image before you send it to the printer is to make sure that you're getting the working part of the image, the bit that you want to have printed, actually printed. At any of these sizes, six by four, seven by five, 8 by 10, 17 by 11, some part of this image is going to be gone. There is no choice. You cannot save all of this image and still have it printed from edge to edge of a piece of paper that is any of these dimensions. That's why printing is often fraught with difficulties quite often people will get images back with bits missing and this is why they're missing. If we wanted to print this as say, a five by seven image or seven by five image, this is the dimensions we're looking at. I'm going to actually turn this off and I'm going to crop it to five by seven. I'm going to select the crop tool, I'm going to select ratio, and I want the width to be seven, and I want the height to be five. This is just a simple crop ratio of seven by five, and now I can determine where I want the image to be in that five by seven print. I'm going to line it up so the text is central, I'm going to click the check mark. This is now a five by seven ratio image. If I send this to the printer, everything should print. But then we're confronted with the question of do we have enough image to print? Well, let's go to image, image size, and say, we've got an image that is now 3500 by 2500 pixels in size because we had to lop a piece off the edge. Let's go and set it to inches, and then let's set the resolution. Let's say that our online print services, it wants a resolution of 300 pixels per inch. Well, that's 300 pixels per inch. It will print it the moment at just over 11 inches by eight inches. There's plenty of image here to print. The print width and the height is in excess of what it is that we need to send. If you need to send it exactly, then you're going to do this. You're going to type seven here and five inches here. You're creating an exact seven by five-inch image with a resolution of 300 pixels per inch. You can see then that the dimensions are going to be decreased yet again. It's going to be 2100 by 1500 pixels in size, and you would just click okay. This image is now set up for five by seven printing at 300 pixels per inch, and it's exactly the right size. We would save this to print it, and you would save it in the format, that your print service requires. Of course, if you're printing it from Photoshop, you can just choose "File Print" from here. But if you're sending it to an online service, you'll look up and see whether they need JPEG or TIFF or PNG or whatever format they will accept, and you will then go and save it. Of course, you would never choose "File Save" because you don't want to save this over the original because you've cropped it and resized it. You would choose "File Save As", and then you would name it whatever you need to name it. Now I'm going to save this as a JPEG ready for printing, it's going to be justice, and I'm going to call it seven by five, 300 PPI, pixels per inch. You could easily say DPI, it doesn't matter, they're pretty much synonymous. The color profile itself doesn't matter so much as on the web, except that you should match the color profile, that you're printing service asks you to use. If they have a specific color profile, you would need to set it to that. But most of them can probably handle Adobe RGB. I'll just click "Save". Now in this instance, because it's not going to [inaudible] , because it's going to print, I want to send the largest possible highest quality file. I want to make sure that I've selected larger file and that the quality is really high. Because I don't want to compromise the print and I'll click "Okay". That image is now ready and sized for printing. Your project for this class is going to be to prepare an image for printing or for the web. Go and find a file size that you either need for the web or go and determine a print size for an image that you want to print through an online service or through your own printer. Determine how you're going to prepare the image, and prepare it for printing. Then post the image or perhaps a reduced-size version of it in the case of printing to the class project area. I hope that you've enjoyed this class and that you've learned something about image size terms such as file size, dimensions, and resolution. I hope that you are now able to prepare images for use on the web as well as for printing. If you did enjoy this class and if you see a prompt to recommend it to others, please give it a thumbs up. These help others to identify this as a class that they may want to take, and if you'd like to leave a comment, please do so. I read and respond to all of your comments and I look at and respond to all of your class projects. My name's Helen Bradley. Thank you so much for joining me for this episode of Graphic Design for Lunch, and I look forward to seeing you in an upcoming episode soon.
Helen Bradley, Graphic Design for Lunch™
