Transcripts
1. Intro: Hi, I'm Sarah Rain, and this is Resolution Explained, where I'm going to talk to you about print and screen resolution and demystify the topic. I'm a surface patch and designer and artist living in Japan and I can't tell you how long I was confused about resolution far way too long. If you've ever been unsure about how big to make your documents, or, if you've been confused by PPI and DPI or ever had any problems with the quality and sharpness of your work, then this class is for you. It's so frustrating and I totally get it. At the end of the class, you're going to have a solid understanding of what resolution is and be able to set up your documents and exports confidently and nail it every time. There is literally nothing worse than opening up a menu or looking at a poster and it has a low quality image on it, or, a profile photo that looks like it was taken on a potato. Let's make sure resolution will never be an issue in your work again. In this class, we're going to take a look at screen resolution, print resolution, and then move on to resizing and what to consider when setting up a new document. Next, we'll have a crack at a we quiz, and then I'll jump on to Photoshop to answer the questions with some demos. I've also put together a couple of cheat sheets that you can download. One has the recommended resolution for print and the other has optimal social media sizes for different platforms. This class can be useful to anyone who's ever been frustrated by resolution. Or, for anyone who's just starting out in digital art and design. You don't need any prior knowledge to follow all along. I use Photoshop in my demonstrations, but you could be using anything. The principles are exactly the same.
2. Class Project: Are you ready for the most exciting class project ever? Well, this isn't it, I'm sorry. I do promise it will give you a better understanding of resolution.I highly encourage you to do one of the two following options. Option one is to set up two documents for web, one high resolution and one low resolution. You can export these as jpegs and upload them to the class project section. Option two is setup two documents for print. Again, one, high- res, and one low-res. To really see the difference here, I recommend you print them out. You can scan them back in or take a quick photo and upload it to your class project that way. Intentionally making something that's really low quality will make you aware of what you want to avoid in real life projects. It can be a really useful thing to try. Let's get started.
3. What is Resolution: What is resolution? The most important concept to grasp is that print resolution and screen resolution mean two completely different things. They are totally different animals, like zebra and earthworm are different. Let's start with screen resolution.
4. Screen Resolution: What is screen resolution? Screen resolution is tiny little boxes of color a screen or monitor can display. It's expressed in terms of how many pixels a screen can display horizontally and vertically. For example, an HD screen resolution is 1920 pixels by 1080 pixels. Let's break this down. This is a box, this square, let's call it square A, has five boxes horizontally and five boxes vertically. The second square, square B, is exactly the same physical size as square A, but has 10 boxes horizontally and 10 boxes vertically. Now, I have an image here that measures five boxes by five boxes. If I put it in square A, it'll take up the entire square. If I put it in square B, it still only takes up five boxes by five boxes, so only fills a quarter of the square. Remember, both squares are the same physical size. This is how it works on a screen. This time we have an iPhone, a computer monitor, and a cinema screen. These screens are all different physical sizes, but they have the same screen resolution of 1920 by 1080 pixels. This means that they all measure 1920 pixels one way and 1080 pixels the other, and they all display a total of 2,073,600 pixels. Let's see how a 500 by 500 pixel image would appear on these screens. As you can see here, each screen has the same number of pixels going horizontally and vertically. So the 500 by 500 pixel image takes up exactly 500 by 500 pixels worth of space. The physical size of the image appears at changes according to what the physical size of the screen is. What might measure one inch on an iPhone could be three feet on a cinema screen. If you stand up close to a cinema screen, you can see the pixels. But if you're sitting further away, the picture looks great. This is why we can't use inches or any other real world measurement in the digital space. I'm sure you've all heard of PPI. PPI means pixels per inch, as in how many pixels there are in a square inch. As we talked about in the last example, that depends entirely on what screen is viewed on. There's a long-running Internet myth that 72 PPI or pixels per inch is the optimum resolution for web. But this simply isn't true and has caused so much confusion. A screen's PPI is a fixed number of pixels that it can display per inch. So there's always going to be the same number of pixels on the screen, regardless of what the image is. When we're creating an image for web, the resolution box here can be ignored completely. When the final output is a screen, is the pixel dimensions appear that are important. That is, how many pixels horizontally and vertically there are in your image. So if we have two images, say one at 500 pixels by 500 pixels, and the other 1000 by 1000 pixels next to each other on a 1920 by 1080 pixels screen, it would look something like this. It doesn't matter if the images have been made as 72 PPI or 300 PPI, the pixel density will be the same. A 1080 by 1920 pixel screen will always display 2,073,600 pixels, no matter was on the screen. Take a look at these two images here. These are both 500 pixels by 500 pixels. The one on the left is 300 PPI and the one on the right is 72 PPI, and they look exactly the same on the screen. Also, if you try saving for web, we'll go to File, Export, Save for Web. You'll see that there isn't even a resolution box at all. You can't change it because it's irrelevant. All there is is the image size box in pixels because that's what's important. Inches and dots are relevant on screen. I'll say it again, for screen resolution, we can forget about inches all together. Let's take another look at one of the 500 pixels by 500 pixels images from the last example. It doesn't matter which one because they look the same on screen. When the computer is displaying an image at its original size, each screen pixel corresponds to each pixel of data. So a 500 pixel by 500 pixel image takes up exactly that amount of space on the screen. What would happen if I zoom into it? So this image here is at 100 percent, so it's taking up exactly 500 pixels by 500 pixels worth of space on the screen. If we zoom in and double the size, is now 200 percent. The screen will be using 1000 pixels to display 500 pixels worth of data. This means that each pixel of data is now being represented by four screen pixels. If you zoom in far enough, you'll begin to see the pixel data. The same is true the other way around. If the image that you're viewing has more pixel data than your computer can display, your computer will do its best to compress the data into the pixels that it can display. It can't physically display anymore pixels because the pixel resolution of the screen is fixed.
5. Print Resolution: Now let's look at print resolution. Like I said before, print resolution is a completely different animal to screen resolution. This is where my confusion was for so long. What you need to remember is that they are totally different. Print resolution is the measure of how detailed a printed image is. Print resolution is measured in dots per inch or dpi and that means how many dots of ink that are in every square inch. Both of these squares are one inch by one inch. The square in the left to 300 dots in it and the square on the right has 20 dots. The more dots that are in an inch, the higher the quality and that's all there is to it. Now these images both measure five inches by five inches but the one on the left has 300 dpi and the one on the right only has 20 dpi. As you can see, the image on the left is much higher quality. Basically, the more dots there are, the higher the quality of the image. It's always better to have an image that is too big than too small. You can always scale an image done, but it's not easy to enlarge and image without losing quality. What do you need to consider when you're making a document for print? The main questions you want to ask yourself when you're setting up a document for print are, what is it for? For example, is it a business card or poster? How big will it be physically? Will it be viewed up close or at a distance? This last question is really important because something small and handheld, like a flyer, a business card or photo needs to be very detailed to be high quality. Whereas something like a billboard, which will be seen from a distance, doesn't need to be so detailed. Optimal resolution for print. The optimal resolution for things that are up close or handheld is 300 dpi. This includes leaflets, business cards, bit covers, small art prints, greeting cards, notebook covers, and anything else that you would view up close. For posters viewed from six feet away, the minimum dpi is a 150. Of course, if you can make it 300 dpi that's preferable. Bigger is always better for source images. You can always downsize when you're exporting. If you're making a wall mural, billboard or something else huge like an ad for the site of a plane or truck, you can go as low as 12 to 15 dpi, 30 dpi is certainly more than enough for these examples. If you're ever in doubt and working with a printer, you can always just ask them and they'll tell you exactly how it's supposed to be. Resolution does not equal size. One last thing to remember when thinking about print resolution is that in this case, the term resolution is a measure of density and quality and has nothing to do with the physical size. A business card and an A1 poster may both have 300 dpi, meaning that each square inch is made up of 300 dots of ink on both images. It has nothing to do with the physical size of the printed image itself. Digital to print. Now we've clarified what screen resolution and print resolution are. Let's think about how images will translate from your screen to print. When you create a new document in Photoshop, this dialogue box pops up. For real-world print projects, think about how big it will be physically an input the numbers here. You can input them in centimeters, inches, or millimeters, forget pixels. Pixels are irrelevant here. Now set the resolution to whatever you need it to be. Notice how this box says PPI or pixels per inch. This is where a lot of the confusion lies. It will be much clearer if it said dpi or dots per inch. Pixels per inch really is irrelevant here so it's easier to understand if you think of it as dpi. If you choose a resolution that's lower than what you need for print, it might still look great on your screen, so don't be fooled. Let's say you have an A2 document that you want to print but you accidentally set your dpi to 72. The pixel dimensions of the image would be 1188 pixels by 1684 which means that the image will appear nice and big and clear on your screen but when you print it out, it's going to be low res. Just because it looks great on screen, doesn't mean it's going to look great on print. Always make sure you have the correct dpi before sending to print.
6. Resizing and Resampling: Changing the size. There are two ways to change the size of your image through re-sampling and resizing. If you want to change the size of your image, first, we go up to image, image size and you can change it up here. There's a little box in here that says resample. If it's checked, is going to change the size through resampling. If it's unchecked is going to change it by resizing. This box is checked by default. Resampling. Resampling an image means that pixels are added or subtracted to an image depending on if you're making it bigger or smaller. Upsampling is when an image is made bigger by adding pixels, the computer has to guess where to put these extra pixels, and does this by essentially taking one pixel and adding other pixels of the same value around it. This is why it's difficult to enlarge and image without losing quality. Down-sampling is when the computer makes an image smaller by reducing the number of pixels. It does this by taking the average of a bunch of pixels and replacing them with one pixel. Of course, the actual calculations of resampling are a bit more complicated than my super simple explanation, but we don't need to worry about that. Resizing, When the resample boxes unchecked, Photoshop will change the image size by resizing. Resizing means that the physical size of the image will be printed at is changed, but the number of pixels stays the same. This means that if the physical size is decreased, the DPI will increase as there will be more dots per inch. The reverse is also true in that if you increase the physical size, the DPI will decrease. You need to watch out for this when you are sending an image to print. For example, if you realize that you need to lower the DPI of your poster, maybe you can't get a photophobic enough or your computer can't handles file size, you can lower it from 300 DPI to 150 DPI, but this is also going to change the physical size of the image we'll print out. Changing the DPI of an image from 300 to 150 means that you're only packing 150 dots into every square inch rather than 300 dots. This means that you need to double the inches to fit in all the dots, so your physical image size will double. If you change the print resolution, you always need to make sure you change the physical size accordingly to ensure it prints out the correct size. By now you're probably wondering, should I be resizing or resampling? Well, there's no clear cut answer and both have their advantages and disadvantages. If you enlarge an image by resizing, eventually you'll be able to see the pixels. An upside to resizing though, is that you aren't changing the number of pixels but if you change the image back to its original size, it's going to be the same as it was to start with, there will be no loss in quality. If you enlarge an image by resampling, the computer is adding extra pixels by guessing where thinks they should be. Although there will be a lot of pixels, it can begin to look blurry. If you go to large. It can also add odd pixels where there shouldn't be any. When you resample, you're changing the number of pixels and generating a brand new image. If you change it back to its original size, it's not going to revert back to its original state. Instead, it's going to recalculate another image so there's going to be a further loss in quality as the computer has to guess again which pixels to add or remove. It's never a good idea to resample an image more than once because there's going to be a drop in quality. To make sure you always have a high-quality version, it's a good idea to save the original file and resample a copy. This really will depend on your project, but personally, I've not had any problems with leaving the settings as they are by default with the resample button checked. If you aren't happy with the results, you can try resizing instead. One last note is to work big. As a rule of thumb, it's best to always work with big source images are original artwork, because you can always export to different sizes. If you scale down an image and then want to enlarge it later, it's going to lose quality, so it's best to keep a large version just in case.
7. Quiz: Are you still with us? That was a lot of information. To help you digest, we are going to do a quiz. You can pause the video after I have read out each question and heavily think about how you tackle each situation. You can either jot these down on a piece of paper or keep a mental note. After I have read out the questions, I will hop on over to Photoshop and answer them with a demonstration. Are you ready?
8. Questions: Question 1; How would you set up a document for a downloadable printable on your website? Question 2; How would you set up a document for a small web profile photo? Question 3; How would you set up a document for a portrait image to be viewed on a 4000 by 2000 pixel screen? Question 4; How would you set up a document for an image that will become an A2 poster, an A4 art print and a postcard? Question 5; How would you set up a document for an image for an unknown purpose but you know you want to put it on Instagram and print it in a physical portfolio?
9. Answer 1: When you open Photoshop, you want to hit "Create New", and this window here will open. Let's go up to the print preset bit here and you can see that there's a A4 preset. We're going to hit that and that'll give us the physical dimensions that we need and also the resolution that we need will automatically be there. We want it to be at 300 because we're going to make a printable version. We can hit "Create" and quickly put some art in here, there we go. Now, we want to save two versions. We want to save one that the user can print and another for the web preview on your website. For the printable one, we can save it as it is because we already have the settings exactly how we want them. To do that, just go up to File, Save As, select JPEG, you can name it, printable and hit "Save". Maximum is fine because we want it to be good quality and hit "Okay". Now, for the web one, we want it to be a little bit smaller because when you open up a preview in a website, we want the loading time to be as short as possible and so we want the size to be a little bit smaller. We can go to File, Export, Save For Web. I know it says legacy, but I still like to use it. Here notice that it says nothing about PPI or DPI, resolution in printing terms has nothing to do with saving an image for web. What we're concerned with here is the image resolution or the image size, which is currently set to 2,480 by 3,508. Now, this is going to be pretty huge on most screens and so I'm going to change the long end, the height to 1,080 and that should appear big enough on most screens and we can hit "Save" We'll make this one printable web, hit "Save" there. Now, I want to show you if we open it up again, you can see here in printable web, the web version is 17 kilobytes compared to the printable version, which is 652. This one has much less data and so it's going to load a lot faster on your website and that's why we want to export two versions.
10. Answer 2: This time we're going to make profile photo for social media. I have a photo here that I might want to use and I'll drag it into Photoshop to put it in there. For some reason the Crop tool is already open, that's great. We want to crop it. There we go. That looks about right. Now we want to make it much smaller. I'll go up to image, image size, and there is nice big close-up menus there. We can see at the moment that the image size or the data size is 22.1 megabytes, so it is pretty huge. The pixel dimensions are 2781 by 2782. Now we want this to be about 400. Here you can see I have my re-sample button checked, which means that we can change the pixels. It means that we can affect the data size. We can reduce the number of pixels. If this was unchecked, we would be resizing. Notice how the pixel option is gone, it's grayed out now because if you're resizing, you cannot reduce the number of pixels, you can't change the number of pixels. In this situation we want to hit the Resample box, go up to pixels, change this to about 400. It'll automatically change the height to 400 because the width and height are linked to the correct proportions. Now we can see here that our new image size is 468.8 kilobytes, whereas before, it was 22.1, and now we can hit "Okay". There we go. Notice how it's so much smaller now than it was. Now we can just go to File, Save JPEG, and we will call it profile and hit "Save". Maximum is fine. I'm going to close this just for a second. I don't need to save that. Now I want to show you that here, Sara profile is 133 kilobytes, and here the original is 11.4 megabytes. Now that is much smaller than it was. If we drag these into Photoshop, here's one, and there's the other. Let's get rid of the Crop tool. If we put this to 100 percent, it's massive. This one is already at 100 percent and it's this size. As you can see for web, this is all you need. This is probably way too big actually. But if you have 400 pixel by 400 pixels sized photo, it's going to be much better for social media than if you upload something this big that the computer is going to try and compress.
11. Answer 3: Once again, let's create a new document in Photoshop. This time we'll go to the web preset and the screen that we want our image to be on is 4,000 by 2,000 pixels. That's 4,000 going along the top and 2,000 downwards. Now, because this is a portrait image, I want it to take up the whole screen going up and down, so that's 2,000 pixels. I'm going to make the height 2,000 here. It's already set to pixels because we're in the web preview. Now, the width is up to you. It depends what kind of rectangle you want, what kind of portrait shape you want. But I'm going to type here 1,500 and see how that looks and the resolution books here can be ignored entirely. I don't even really know why it's here. It can be ignored completely, that's what confused me for ever, and ever and ever. Let's hit create. There we go. Now, we can add some art. There we are and that's it. You can just save it as it is. File, save as, portrait and we'll make the JPEG, save. Perfect, and it's as easy as that. When you look at it here portrait, you can see that is 1,500 by 2,000. It's exactly how we need it to be for web.
12. Answer 4: So again, we want to create a new document, and this time we're going to be making an A2 poster, an A4 art print, and a postcard, all from the same piece of artwork. We want to start with the biggest one. So we'll go to print, and there isn't an A2 preset. So we can type it in here manually. I have the centimeters written in front of me. I'll go to centimeters here, and type in the width which is 42, and the height which is 59.4. The resolution here, we want it to be 300 because we're printing it, so that's perfect, and we'll think of it as DPI, will ignore the pixels and hit create. Now let's add some art and we're pretty much ready to export. Now, I normally save posters as PDFs. To keep the file size small, I usually flatten the image. Now there's not a lot here to flatten, but if you have a lot of layers in a lot going on, flattening the image is going to keep your file size nice and low. To do that, we go to layer, flattened image, and that will put it all on one layer. Now, we go to File, Save As, and select Photoshop PDF, and we can name it poster, hit Save, and I normally select this setting here in the pdf X 1A 2001, that seems to work pretty well and hit Save. Now that is our A2 poster. It's sorted and it's exported. Now for our A4, we want to go up to image, go to image size, and here there is a fit two option. Now if we look down here, there's an A4 at 300 DPI option. See how it's suddenly DPI. No wonder it confuses everyone. We have fitted it to the A4 at 300 DPI option. This is going to resample it to that size, will hit Okay. There we go. It's smaller now, so we can save that in the same way. We can go to File, Save A, s choose Photoshop PDF, and we'll rename it art to print A4, and save. The settings are fine. Now we're going to do it again. But this time, when we go to image, image size, there isn't a postcard size, or at least there isn't the size I want in this drop-down menu. I can add it, I can type it in manually. The width that I want is a 105 millimeters, and the proportions are the same, so the height will change automatically, and I want the resolution to be 300 DPI, and so I'll hit okay, and then I can export it in the same way as I did before. Now what you need to be careful with here is, if this works fine and it looks great then there's no problem at all. But what we did was we down-sampled sorry, from A2 to A4, and then we resampled again from A4 to postcard size. This means that we double resampled. If you do experience any loss in quality, it might be worth going back to your original A2 size, and then resampling it directly from A2 to postcard size, and that might solve any issues that you have there.
13. Answer 5 : I'm going to keep this last one quite sharp because we've already been through most of the points. Again, we'll create a new document. When it's an unknown project, you need to think about how big it is that you might need, and I know that is tricky when it's an unknown project. But for me it's pretty unlikely that any of my artwork is going to be on a billboard or the side of a bus, at least unexpectedly anyway. For me, I think A2 is big enough. Probably a large art print or poster is about as large as I need it to be, but that's going to be different for you. Think about how big it is that it might be at its largest. I'm going to go to Print. Let's keep the resolution at 300 because we know that we want to print a version for our portfolio. I'll set mine to A2, which is 42 by 59.4. I'll hit Create, add some art. I can just keep this as a PSD, as a Photoshop file until I know what I'm going to do with it. For your portfolio version, as we did before. You can go to Image, Image Size, and set it here to the size that you need it to be. Or you can choose an existing size from the drop down menu, like we did before, and export that as a PDF. For social media. You can do it like we did before in the Image, Image Size window or if you don't really need a PSD that size, if you only need the exported JPEG, you can go to File, Export, Save for Web. We did this actually in Question 1. Here you can just change the image size for the export, for the JPEG that is going to be exported. You don't normally need any larger than 1,080 on the longer side, depending on whether is portrait or landscape. Then we can hit Save, and save it to wherever you would like it to be. Social_Media. That means that you're going to have your original large PSD still a A2 size and yet you have just a social media sized image here. Nice and small. Only 14 kilobytes ready to export.
14. Thank You: You made it to the end. Thank you so much. I hope it was useful to you and that you feel more confident about resolution now. Remember, having a cricutter yourself is going to help look in the information that you've learned. I highly encourage you to have a go at the class project and to post it so that we can all see. There are also two principles with information on documents sizes for print and social media, so be sure to download those as well. Thank you so much again for watching my class. I hope you have a great day. Thank you.
Sara Rain, Surface Pattern and Illustration
