Quick Photoshop Secrets 16: Perfect Sharpening & Resize for the Web
You can download the sharpening actions by subscribing here.
In today’s Photoshop tutorial, we look at how to resize and sharpen photos so that they are beautifully sharp for the web. We use a tried-and-tested method for coming out with crisp scenes.
Essentially, we resize our images by choosing the size of our image, and multiplying this by 1.67 and selecting the sampling method, Bicubic smoother. Then we add 3 sharpening layers and finally resize our image again but this time to the correct size.
Step-By-Step Guide
1. Go to Image>Duplicate
2. Click OK.
3. Go to Image>Image Size.
4. Change the size of the image.
Don’t change this to the final size you want, instead. multiply the final size that you want by 1.67. for example, we want this image to be 1000px wide (1000 x 1.67 = 1670) so we enter 1670 in the width box.
5. Select Bicubic Smoother (enlargement) in the resample box.
6. Click on OK.
7. Duplicate the layer by pressing Crtl+J on a PC or Cmd+J on a Mac.
8. Add a layer mask to this layer.
9. Make sure the image is selected and not the mask by clicking on the image thumbnail.
10. Go to Filter>Sharpen>Sharpen.
11. Duplicate the layer again by pressing Crtl+J on a PC or Cmd+J on a Mac.
12. Go to Filter>Sharpen.
13. Duplicate this layer again.
14. For the final time go to Filter>Sharpen>Sharpen.
15. Hide the top layer by clicking on the eye icon to the left of the image thumbnail.
16. Now, let’s resize to the final size we want. Got to Image>Image Size.
17. Enter the final size that you want, in our example, this is 1000px wide.
Step-By-Step Guide
And as a big thank you from me, you can download my sharpening tools using the button above which will do the work for you. And feel free to join 30k other photographers and subscribe directly to my youtube channel for more useful tutorials.
Thanks Jimmy! I suppose its just for the web, right? Can you create similar thing for the printing? I would surely like that.
These will also work for print if you are planning to resize the images in PS first. Otherwise, if you need to sharpen full size, I recommend a high pass sharpen filter. Thanks
Hi Jimmy, thanks for the new tool. I tried using it in both modes and found that when I chose the height option the pop up still asked what width I wanted but then applied my request to the height, so it gave me the right height but a little confusing. Thanks
Thanks for letting me know. I’ve updated the files so it should be okay now.
Jimmy
Will the easy panel work with elements?
Hi,
I’m afraid Elements does not support extension so the Easy Panel will not work in it.
That’s too bad,but thanks for the info
Hi! You told us on 500px ISO there are superb HDR software. Can you tell me some of these in the case I’m not able to use Photoshop? Thank you!
Hi there, I highly recommend NIK HDR Efex. It produces sharp and relatively natural HDRs.
Nice tutorial, I’m just wondering: are there any broad guidelines for when you would/wouldn’t want to use this kind of sharpening as opposed to high pass or unsharp masks?
Hi,
I would always use this for images I’m sending to the web. For high pass or unsharpen, usually I’d use them on larger images as a finishing touch, when the full size image isn’t quite sharp enough.
Hi Jimmy, Many thanks for the tutorial(s) and these tools. I use the web panel in RayaPro frequently. One thing puzzling me though, my images are being resized at 300dpi. Should I resize to 72 or 96 dpi after running the script? Looking forward to the RP update in June! Cheers Jimmy
Hi Neil,
Thanks for the message. Dpi is only relevant in print. In digital terms your screen pays no attention to dpi, only dimensions. You can read more about this here: http://layersmagazine.com/photoshop-resizing-images.html
But since most monitors can only handle 72dpi, I think it would be wise of me to change the code behind these sharpening tools so that all images prepared for the web have a dpi of 72.
Thanks again
Hi Jimmy. Thanks very much for this. Just wondering though … is there a way to retain the original filename of the image? I’m running the process on about 20 images and every one gets renamed to “JM Sharpen Resize.jpg”
Yes, just open the script files and change line 15 from
desc237.putString( idNm, “””JM Sharpen Resize””” );
to
desc237.putString( idNm, activeDocument.name );
Excellent. Thanks Sascha!
You’re a very large-hearted person Jimmy…I absolutely love your tutorials.
Great tutorials and tools! When resizing smaller, you choose resampling for enlargement, while Adobe recommends for reduction. Why resample for enlargement when you’re reducing the size?
Thanks a lot. Now your tool has become an essential one for me, it really helps. The only drawback is, as Mark Power says, the changing of the name. It would be really useful and time saving if it could retain the original name or a variant of it.
how to fix?
you’re a bit of a legend mate but im sure you have been told that before
In the Easy Panel what is the difference between Enhance Details & sharpening?
Hi Jimmy, I got another question, hopefully you can help me with that… I just want to know: Do you also sharpen your images with Camera Raw before continuing editing them in Photoshop and again sharpening them with the above scripts? Or is this the only sharpening you do?
For everyone who wants to use “Unsharp Mask” (130%/0.4/0, which is the same amount of sharpening as “Sharpen”) plus Smart Object-Layers (to being able to change the USM afterwards) instead of just “Sharpen” with this script:
Add the following function to convert a layer to a smart object (e.g. at the very beginning of the file after the line “var realsize = prompt(“How wide do you need your image in pixels?”, 0, “Jimmy McIntyre Super-Duper Sharpen/Resize”);”):
function createSmartObject(layer) {
var doc = app.activeDocument;
var layer = layer != undefined ? layer : doc.activeLayer;
if(doc.activeLayer != layer) doc.activeLayer = layer;
try
{
var idnewPlacedLayer = stringIDToTypeID( “newPlacedLayer” );
executeAction( idnewPlacedLayer, undefined, DialogModes.NO );
return doc.activeLayer;
}
catch(e)
{
return undefined;
}
}
afterwards, change each of the three sharpening code-blocks in the scripts which look like
// sharp
var idShrp = charIDToTypeID( “Shrp” );
executeAction( idShrp, undefined, DialogModes.NO);
to the following:
createSmartObject(activeDocument.activeLayer);
activeDocument.activeLayer.applyUnSharpMask (130, 0.4, 0);
Explanation:
The new function is just a helper function which converts the activeLayer, after it got created, to a smart object. It is used in each sharpening code-block before applying Unsharp Mask. This happens here:
1. createSmartObject(activeDocument.activeLayer);
2. activeDocument.activeLayer.applyUnSharpMask (130, 0.4, 0);
First the layer gets converted, then I apply UnsharpMask with the values in the brackets.
Because the layers get converted, you can choose to change the USM values as much as you want after the script finishes.