Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise I want to give you a sense for how Web graphics work, what your limitations are, and how you best exploit those limitations. I happened to be working in Firefox right now, not Photoshop, and I have it directed in my blog site, which is at my blog site which is deke.com, in case you're interested, definitely stop by, as welcome as it can be. A few months back I opposed to the couple of travelogues of this trip I took to Southern France, and I've included a bunch of photographs that I had shot. And then I decide to run a little contest asking people to guess what I've done to those Photographs, and this is an image from that contest.
Notice that it takes up the entire width of my site, and yet it measures just 590 pixels wide by 280 pixels tall and it's 91K, and that's it. That's the whole file. Now, that's dinky by Photoshop standards, but it's actually quite large by Web standards. There are sites out there that won't let all of the graphics on a single page be more than 40K or 50K or something along those lines. They do that by using very small graphics and compressing the heck out of them. I'll show you how compression works in the future exercise.
But for now I need you to know that there are two reasons to keep your Web graphics small. One is file size. You want that file to be able to download quickly, so people aren't waiting for information to load on your page. You really want the perception to be that something is there, the second they land on your page. Even if other things are loading and take a couple of seconds to refresh, you need something to be there, otherwise you're going to lose that person and they are going to go elsewhere. Secondly, the graphic has to be physically small. In this case as I say 590x280, because it needs to fit on your visitor screen.
And bear in mind that most people out there are working on monitors with resolutions of 1024x768 pixels and that is not very big. I typically setup my graphics because I have a blog site as being horizontal like this, so that I can use the maximum width of the page, and yet I have a fair amount of text above and below the graphic at any given moment in time. But it is a little frustrating to work at this site. So, I imagine that some of you are working on corporate sites, and you're just going to have to keep all your graphics small.
But then others of you who are interested in showing off your artwork, and you would like something bigger than this, after all there I'm at Pont du Gard, which is one of the most amazing sights on the planet, it's this feet of architectural engineering that was built during Ancient Roman times and it's still standing and still functional. And we managed to find this path up the side of this hill that provided us with this enormous vantage point. There was nobody up there. It was great. And the light was totally with me and you can see the light reflecting beautifully off the bricks in the whole number, and yet, this is the best I can do to share it with the people on my Web site is this dinky little graphic.
Well, what you can do is you can make it clickable, and I'm not going to be telling you the HTML or anything like that, because this course is about Photoshop, but it's not hard. You can make the image clickable. Then that will load a higher resolution version of the image that somebody can checkout in detail. In my case, I'm working at Firefox, so I can just click on the graphic in order to expand it to its full size and then you can scroll around the graphic if you want to, and so on. So now somebody visiting my site has something to look at. This still isn't a big graphic. It's 1770 pixels wide by 780 pixels tall.
Altogether, it's 577Km still just a micro image by Photoshop standards. It's 1.4 Megapixels, and yet I shot it with the 12 Megapixel Olympus E30. So I down sampled this image like crazy. Even so you can still see gobs of detail. And you can see for example, there I have some noisy shadows going on inside this image, and they're quite purplish as well. So, why don't we go ahead and solve that problem as long as we're seeing it here? I'm going to switch back to Photoshop. And I have a sample file for you; it's called Pont du Gard 4x.psd found inside the 12_for_Web folder.
The reason it has 4x in it is because it's four times the size of that little dinky version. If I go ahead and expand the Info panel, you can see that it measures 2360 pixels wide by 1040 pixels tall. And what I typically do is I figured out how big my final graphic needs to be, and then I build it at four times that resolution. I just get out a calculator, figure out what four times wide, four times tall is going to be, and that's a resolution at which I build my image. And the reason I do that is because that way I can re-purpose the image elsewhere if I need to, because we tend to use these images in all different kinds of forms, and I imagine you'll use your images in all kinds of different forms as well.
So, build big and then shrink down, and that's what we will be doing over the course of these exercises. Now, I'm going to go ahead and collapse the Info panel so that we can take a look at the layers, and notice that I already have the smooth shadows layer. So I've taken care of some of the noise inside of those shadows as you can see here. I did that using that technique that I passed along in the Reducing Shadow Noise movie back in Chapter 9, so you can check that out if you want to, it's the exact same technique. But now what I'm going to do is get rid of the purples and the blues inside of those shadows.
So I'll click on the smooth shadows layer, and I'm going to bring up my Adjustments panel, and I'm going to Alt+Click or Option+Click on the Hue/Saturation icon in order to bring up the New layer dialog box, and I'll call this layer shadow desat like so. And then this is very important. I'll turn on Use Previously layer to Create Clipping Mask. That way I'm just affecting this layer and none of the others. Click OK and we have a new Hue/Saturation layer. And then I'm going to get my wonderful Target Adjustment tool and I'm going to drag to the left inside of the shadows here.
In my case I just snagged the Blues so that's cool. I'll take those Blues down to let's say -65 works pretty nicely. I need to get the Magentas though too if I can find any here, that looks to me like a magenta, let's see, no. That's another blue. Sometimes you're not going to be able to snag a color exactly the way you want to. And if you can go ahead and just expand the area that you want to affect, or you can switch to a different color range, and then just go ahead and enter a value. In this case, I'm going to change the Magentas to -70 and I'm going to hide the panel.
Now, let's go ahead and zoom out here and make sure that we haven't taken away any Blues that we want. I'll turn off the smooth shadows layer. And I'm just going to take a look at this shadow region. It is certainly more saturated now then it is when I turned this layer back on. I'm losing a little bit of the blue there inside of the river. And if that concerns me, then I just go ahead and bring back up my Adjustments panel, switch back to blues this time, and I'll take that up a little bit. I won't bear down on those shadow colors quite so heavily this time.
I'll take that saturation value back up to -40. All right, and now this image is ready to go. We are ready to go ahead and output it to the Web, and I'm going to show you how you do and don't do that in the next exercise.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 57603 Viewers
119 Video lessons · 67164 Viewers
84 Video lessons · 16571 Viewers
125 Video lessons · 29477 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.