Sharpen And Save Your Photos For Web In Photoshop
Subscribe to Phlearn
How to Make Your Photos Look Stunning on the Web
Color Space. For the most part in Adobe 1998, but the problem with with this color space is that it simply has too many colors for the web. Web browsers use sRGB, which is a smaller color space than Adobe 1998. It’s kind of like comparing a human’s eyesight to a dog’s – our eyes let us see more colors than dogs are able to.
SO, if we’ve edit an image in Adobe 1998 and upload it straight to the internet, the colors will be incorrect. By changing the color space to sRGB before saving, the colors will remain correct!
Sharpening. Make sure to resize your image before you sharpen, otherwise your sharpening effects will be for the most part lost. Using high pass with a combination of different blending modes and layer masks will allow to you create a natural sharpening effect.
Help Save the Rainforests With Photoshop
Save for web. This will result in a much smaller file size. The internet isn’t just magic, it requires energy to upload all of those amazing photos. By saving for web and lowering the quality just a little bit, you can help to make a difference!
Image by Andrej
Today I’m going to show you how to sharpen your images, get them sized correctly and get them on the internet all in Photoshop.
Hey guys, welcome to Phlearn. My name is Aaron Nace, you can find me on Twitter at Aknacer. Today we're going over something we've got a lot of questions about recently. The first is Color space. People seem to say that they're editing images in Photoshop, they'll upload it to something like Flickr, 500px and the colors will be totally wrong. I'm going to show you guys exactly what to do to make sure your colors are showing up correctly. Now we're also going to be showing you guys how to sharpen an output for the correct sizes for these things and also for things like your website. They're going to make your images look a lot better. This is really going to make a huge, huge difference.
Let's go ahead and start . . . we're using an image of a fly's face shot with (laughs) a macro lens today. I think it will be really nice for sharpening. This is Atray's image and he won the close-up contest that we had last week. Very cool image. Let's go ahead and talk about a couple things.
Our first is our color space. If you're in, let's say you set a color space, you can go to edit, and then down here to color settings. For the most part, I work in Adobe RGB 1998. The problem is that's not what the web uses. Adobe RGB 1998 has a very large color spectrum. In other words, you're going to be able to see and edit and work with a lot of colors. It's not really a great idea to work with SRGB because SRGB is a lot smaller of a color space. It's like you're not working with the entire image, you're just cutting yourself out of a lot of colors initially. What's a good idea is to work with as many colors as you can, and then when you're outputting it, then you save it for SRGB. This is what I'm working with here, and if I were to just go ahead and save this out with that color space and then load it on the internet, the colors would be not correct. That's one thing we're going to show you how to fix.
The other thing is, let's say we're going to be putting this on a website. In this case, we're going to just put it on Phlearn.com. Now the images that are below us in this post are 730 pixels wide. Let's check out the image size in this. We'll go to image, and then here to image size. Here we have a width of 1000 pixels. Now that's not a huge difference, but you'll probably notice sometimes if you sharpen an image, and it's the full resolution, it's 4000 pixels wide, or 5000 pixels wide, you sharpen that and then upload it on the internet, and its only displayed this big. It's not going to look sharp.
The reason is sharpening occurs at different scales depending on how big your image is. If your image is only going to be displayed 730 pixels wide, you don't want to sharpen an image when it's full size. You want to get it to 730 pixels, then sharpen it, and it's going to look much, much better because it's in its native resolution. That's what we're going to do. Even though this is not a huge difference, the width is only 1000, we're going to go ahead and take this down to 730 pixels. What you can do is you can create several different versions of your image. Let's say this is we'll pretend for a second that this is your full size. This is a full 20 megapixel file or whatever. You can right click here, go to duplicate layer, go over here to new and there we go.
So let's say this one we're going to be putting as a bio-picture—which I don't know why you would do that (laughs)—but we'll go to image size and this bio-picture is only going to be 100 pixels wide. You can make that 100 pixels wide. In this one, we're going to put . . . we're going to actually put this in the post down below. This is going to be 730 pixels wide. I went ahead and sized that. You can create a couple different versions and then after you've created these versions, then you sharpen. Let's go ahead and show you how to sharpen.
First, get to the proper size that you're actually going to put something on the internet. Then you want to do your sharpening. Here's how we're going to do our sharpening. Let's go ahead and full screen that, and zoom in. You can see it's not a very large image, but this is when you want to sharpen. What we're going to do is, is I'm going to hit command J on a background layer, that's going to duplicate it. Now, we're going to use a high pass filter for sharpening, and I don't want that to mess up our colors. The next thing I'm going to is desaturate, and you can do that while holding Shift command and hit U, or you can go to image adjustments and then down here to desaturate. Both will do the same thing.
The next thing we're going to choose is to change our blending mode and we can choose either overlay, soft light, hard light, any of these things and I'm going to talk about the differences between them in a second. Let's go ahead and choose overlay. This is a pretty common one. We can see already it does have an effect, not exactly what we want, this isn't sharpening, it's just actually making the image look a little different. Now what we're going to do is run the high pass filter. We're going to go to filter, down here to other, and here to high pass.
Now you want to choose a radius over here that's going to be. . . that's going to show the maximum amount of detail for your image. The reason I go ahead and change my blending mode to begin with is I can actually see what's going on here. You can see as I bring this up and up and up, we're going to get a different effect. Somewhere along the lines, it's going to go from not being very sharp to quite a bit sharper, and then right over here it just looks pretty poor. What I would recommend is finding . . . you can use the numbers or the up and down keys on your keyboard, by the way.
If you hold the Shift up and down, it will go by full numbers here and just up or down one will go by .1, .2 or .3. I would recommend just popping a couple of these up and down, figuring out what looks the best. Here the radius of 1.9 pixels–that looks pretty good. We're going to hit okay. Keep in mind guys, my radius was 1.9 pixels, but if this image was full size, a 1.9 pixel high pass filter would do almost nothing. That's why you want to get to the size first, and then do your sharpening. Let's just go ahead and see some of these areas might look good, but some of them might be overkill.
I like the eye's before, so we'll just pop a layer mask on that and we can just paint black on our layer mask over where the eye's are and then we're not losing some of that nice information that's there. I can do this, which is going to selectively sharpen part of my image. Now I can do the same thing. Let's just duplicate our background layer again. I'm going to go ahead and hit Shift command U to desaturate this. We're going to try something like linear light which is going to be a bit stronger of an effect. Soft light is going to be the least amount of effect, overlay is about in the middle and linear light is the strongest.
For this, we're going to go, basically just do the same thing. Filter, other high pass, and we can choose a different radius. You can see it starts to get really, really gritty. The one thing I do want you guys to keep in mind is that you can totally use your . . . let's just hit okay. That's pretty gritty, right? It's a bit too much. For the most of the image, but you can use your layer mass to define what areas you'd like to be sharp and what areas you don't.
Let's just go ahead and hold Alt or Option, Alt or Option. . . I'm going to put a black layer mask on that. Then I'm going to paint white right over here, and that's going to allow these hairs to really stand out. I'm choosing my selective area of what I want to sharpen and what I want to keep relatively unsharpened. Here's the before, and there's the after. You can do things like lower your opacity, which is just going to bring those effects down just a little bit.
Finally, we're going to do a soft light layer, and you don't have to do all these layers, by the way, I'm just showing you guys a couple different techniques that you can do in any combination with each other. Soft light is going to be the least amount of effect, so sometimes what I'll do is I'll go ahead and bring my radius up a little bit higher with the soft light. There we go. We can see that just did a general sharpening of everything.
Here's our before, and our after. You can see it's much sharper, it's got the crispy, crunchy look on the after. Maybe these are just a little bit too visible, and you can change your opacity and things like that, just like I'm doing here. There's our before and our after. We went ahead, we've got it to the exact size we want, and that's a disgusting looking fly. (Laughs) It's going to be great on the internet. People will be, "Whoa, it's so sharp and disgusting." Maybe that's the whole point of it all. I don't know. Let's change the opacity just a little bit on that. There we go.
Now what we're going to do–we sized it correctly, we went ahead and sharpened it at this current size and now we're going to save it out for the web, and make sure it's going to display correctly on every website. What you want to do is go to file, and you want to go save for web. Don’t bother with save as for this point. If it's going on the web, go to save for web. Trust me, every time it's just going to be much better. There are a couple of reasons why.
First is right over here. It's going to automatically convert it to SRGB. Web browsers like Google Chrome and Firefox, they use the color space SRGB as their default. If you're images are SRGB, they're going to show up correctly. The correct colors are going to be there, you're not going to get any weird things going on. The second reason is, and this is a moral reason, (laughs) every time you upload something on the internet, it takes energy to do so. That energy comes from somewhere. Usually they're cutting down trees, or burning coal to do so.
The difference between uploading a one megabyte picture and a ten megabyte picture to the internet, over the course of a year that could be a small part of a rainforest . . . if everyone in the world is doing that over and over again . . . I read recently that every time you upload a picture to facebook, it's the equivalent to cutting down a tree. Keep that things in mind, that's kind of a moral thing too. We just owe it . . . we don't need every single image we ever take to be on the internet and we don't need them all to be huge. This is a great place to get your images small, but still look good. It's in a safer web and devices.
We're going to choose our JPEG right over here, and we can see, here's our quality. If we go up to 100, our file says it's 280 kilobytes, which is not bad. We can come down to something like 67, or let's just try 60. I see no difference. It doesn't look any different, and now our file says it's 95k. Think about if every single person did that before uploading images to the internet, all the images . . . that's a pretty big saving and file sizes which saves in energy and transfer costs, all kinds of things. Just trying to save the environment, one file at a time.
Let's go ahead and bring this down to 60. The file still looks exactly the same, which is great. It's just taking up less space, 94 kilobytes, as opposed to again, 280 kilobytes. There we go. We're going to hit save, and we'll just put this on my desktop and we'll call this flyface, because that looks fun. That's all you have to do guys. Again, all you really (laughs) . . . what you're doing here is you're getting your images sized correctly, to what they're actually going to be on the internet, to sharpen them at that size and then save for web and devices. That's going to fix all of your problems in life. Guys, thanks so much for watching Phlearn. Hope you didn't mind that environmental message, but it's really important. Thanks a lot guys, and I'll Phlearn you later. Bye everyone.