There is more than one way to skin a cat, as the saying goes. And that saying is extremely true inside of Photoshop. There are so many ways to do any one task in Photoshop, in this case; image sharpening. From Unsharp Mask, High Pass filters to the much newer, and actually quite powerful, Smart Sharpening. Photoshop is certainly not short of sharpening options.

One technique I’ve recently discovered and can’t wait to share with you guys, is a technique for sharpening images specifically for output to the web. The technique involves resizing your image in two passes during the sharpening process. Check out my video below to see how it’s done! And if you have trouble following the steps in the video, then feel free to continue reading!

 

Preparing your image for sharpening

Before sharpening takes place in any image, you must first flatten any layers you have created in your .psd file. The easiest way to do that is to select the top-most layer and press command (control)+option (alt)+shift+e. This will merge all of your existing layers into it’s own layer. Now that you’ve got your merged/flattened layer at the top of your layer stack, duplicate that layer by pressing command (control)+j.

First resize

Before we apply any sharpening we need to resize the image. Where this technique differs from others is that you would normally resize your image to it’s final output resolution and then apply the sharpening. In this technique the sharpening is applied to the image at 1.667 times the final resolution. What I mean by that is if you want your final image resolution to be 1000px wide, then you will now need to resize your image to 1667px wide.

Once again, there a multiple ways to resize an image in Photoshop. My preferred method of resizing is using the ‘Fit Image’ function found under File>Automate>Fit Image. At this stage you want to enter the dimensions you want your final image to be outputted at, but multiplied by 1.667. In the video above, my final resolution was 1000px, so I resized the image to 1667px. But lets say you want your final image to be 960px wide, then you would enter 1600px in the width and height box. When using the Fit Image dialogue, think of it as Photoshop trying to fit your image into a box Xpx wide by Xpx high. I won’t go into explaining too much on how it works, but basically you’ll want to input both width and height as the same number.

Applying the sharpening

Now to the sharpening. To sharpen your image, go to Filter>Sharpen>Sharpen. Make sure to do this on the top layer. Duplicate that recently sharpened layer and apply that same sharpening to the new layer. You should now have a layer with one level of sharpening, then above that; a layer with two levels of sharpening. At this stage, your image is probably looking ridiculously over-sharpened. That’s great!

Final resize

Like I said, your image should now look seriously over-sharpened. It’s not until after this stage that it will look much better. So we need to resize the image once more, this time to the final output resolution of 1000px or 960px or whatever it is you’re working towards. Once again, go to File>Automate>Fit Image and enter your final pixel dimensions in the dialogue box and hit OK.

Final touches

There you have it. Most of the time, once you’ve gotten to this stage, you’re image will look great and ready to export. Sometimes however, it may still look a little over-sharpened, so I would suggest reducing the opacity of the top layer until it looks good to your eye. You may even want to add a layer mask to that layer, or group both sharpening layers and add a mask to the group, and mask out any areas you wish to have to sharpening applied to. For example, in this image, I would probably mask out any sharpening applied to the sky.

Exporting for the web

Now all that’s left to do is export your image as a web-ready jpeg. My preferred way of doing this is using the File>Save for Web function. In this dialogue box, there are a few things you need apply/check before you press save. The first thing is that you’ll need to make sure that you’re exporting the image as a jpeg and not a gif or png (unless for some reason that’s what you want). Then adjust your image quality making sure that you’re not sacrificing image quality for image size or vice versa. The sweet spot for me is around 60-80. I find that any higher than 80 there is no improvement in image quality but a significant increase in image size. One final thing before you export your image is to make sure you have sRGB checked. This just basically makes sure that the image colour looks uniform across different web browsers. That’s it! Hit save and you’re done.

Here you can see that the image on the left has no sharpening applied, the image to the right is with sharpening. Drag the bar in the middle from left to right to see the difference.

NotSharpenedTwoSharpened

There you have it, guys! This has got to be one of the easiest and best methods for sharpening that I’m yet to come across. I’d love it if you left a comment below either sharing your sharpening techniques or to let me know how this sharpening method turned out on your files!