Resizing Images for Web Output / Resizing Fundamentals
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.
Learn More
Subtitles of the Movie
So you got your tour of the Image Size Dialog Box. How do you actually use him? Well, this is the part that's fraught with misunderstand and again, even some so-called experts don't really get how this dialog box works so here it is. There's two different ways to resize your images; with re-sampling or without re-sampling. Now, another term for re-sampling is interpolation. Now, do you recall way back at the beginning we were setting some Photoshop preferences and we set our default interpolation method and you can see that down at the bottom of the Image Size Dialog Box where we have this Re-Sample Image and you and I had selected Bicubic, best for smooth gradient. So what I can do is I can use re-sampling or interpolation or I cannot use re-sampling or interpolation. So let me show you this. I'm going to turn off Re-Sample Image down at the bottom of the dialog box and as soon as I do that, you'll notice that the top area of the Image Size Dialog Box sort of gets disabled or I can't go and change those values now. So in other words, with re-sampling, the pixel dimensions are now fixed or locked. When re-sampling is turned Off, I am not affecting the number of pixels inside my image. I'm not changing the pixel count inside my image. They're now locked in. They're fixed. But what I can do now is I can come along and mess around with my resolution. My resolution rate now, as you already know, is just 72 pixels per inch, which is fine for web output but what if I want to actually print this? Well, I could crank this all the way up to 300 pixels per inch and check out what happens inside the width and height fields. They adjust. So now my image is eight and a half by six and a half let's say, right? So what's interesting here is when I'm not re-sampling my image, when interpolation methods are not being used and I'll talk about that in just a second, I'm not affecting the quality of my image at all so re-sampling's turned Off, I'm not affecting the quality of my image in any way. So I can come in here and I can type in whatever numbers I want; ten pixels per inch, doesn't affect the quality of my image. All it does is it changes the width and height, the dimensions. So now if I print this out I'm going to get a pishy ten pixels per inch but the dimensions, the size of this printout is going to be huge. I could wallpaper my entire house with this if I wanted to, right? Or I could crank my resolution way up, let's say 800 pixels per inch but check out the dimensions; just over three inches by almost two and a half inches. It's like a teeter-totter. I crank up the resolution, the dimensions drop. I crank up the dimensions, the resolution drops. So again, I'm not affecting the pixel count at all. You can see I'm still set to the same pixel dimensions. Now, of course, because we're talking about web design here, we do want to mess with our pixel dimensions. I don't care about the size of the document in terms of the printout size or the physical size. What I care about is how big it's going to show up inside a web browser, right? So let me show you this. I'm going to show you another cool Photoshop trick here. I want to reset my dialog box so I'm going to hold down Option here on the Mac or Alt on the Windows side and miraculously my Cancel Button changes to a Reset Button. How do you like that? So go ahead and click on Reset and it takes you all the way back to where we started. Now what I'm going to do is I want to go about resizing my image for web use or web output and I'm going to be using interpolation or re-sampling, right? So what's going to happen now is Photoshop is going to adjust or change the number of pixels inside my image so I have re-sampling image turned On, I have Bicubic, best for smooth gradients selected and by the way, these different re-sampling methods or different interpolation methods, what they are is you can think of them as different mathematical formulas. Again, this is one of the more technical subjects in Photoshop. They're different ways to recalculate the pixels inside your image, whether you're making your image larger or smaller and that being said, sizing your image smaller is no problem. Photoshop can handle that without a problem. When you want to take a small image and make it bigger, now you're asking Photoshop for a miracle. That's pretty much impossible for Photoshop to pull off. You can't really take something small and make it bigger and keep the quality, right? Not really doable because you're asking Photoshop to make image out of nothing, right? So anyway, I hope that's all good. So now that I have Re-Sample Image turned On, if I come along and change my resolution, well, you know, before I do that I'm just going to switch to inches here, even though we don't really care about the document size. If I come along now and I change my resolution to 300, I just cranked the pixel dimensions of my image way up, ten and a half thousand pixels by 8,000 pixels. Or if I drop my resolution way down to say just ten pixels per inch, now I have a 356 by 267 pixel image. Everything's kind of interconnected here but because I'm re-sampling, I'm not changing the physical size or the printout size of my document at all. Crank them way up to 800 pixels per inch, I'm not changing the physical size at all. What I am doing is I'm completely messing with the pixel dimensions or the pixel count inside my image. That being said, I'm going to drop this back down to 72 and let's take a look at how we can go about resizing our images for web output.
Tutorial Information
| Course: | Adobe Photoshop CS4 for the Web |
| Author: | Geoff Blake |
| SKU: | 34089 |
| ISBN: | 1-936334-01-1 |
| Release Date: | 2010-02-25 |
| Duration: | 7 hrs / 105 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 