Shop Mobile More Submit  Join Login
Here is a great resizing and sharpening method for those of you keen to show the maximum detail in your web images.

I wish I could remember where I read it on the net but subsequent google searches havent shown up anything. Marc Adamus uses a variant of this method which is actually what lead me to use it because I noticed a certain clarity in the sharpness his images which were not present in mine.

Who should read this
I should point out that many people here dont even do basic sharpening very well or at all for web images, but it does make a difference when it is done correctly. Also this is really aimed at people who want to show their work at the highest quality on the web.

An example
So first off here is a comparison of the two methods:


The difference appears quite small but in my opinion the advanced method is far superior. It picks out the finer details much much better. Look at the grass on the left image, it looks blurry and crunchy in comparison to the pin sharp grass on the right.

How the method works
This method exploits the way Photoshop's Bicubic resize algorythm works to retain finer details. That's all you need to know!

Step by step

1: Flatten the image

2: Resize image to 1.666 times the final size you want. If your final output size is 600px then you should resize at this point to 1000px

3: Apply the Sharpen filter (not Unsharp Mask)

4: Duplicate the layer

5: Apply Sharpen filter (to the top layer, it will look waaaay oversharpened)

5: Resize to final output size. So if you have just resized your iamge to 1000px resize it to 600px now.

6: Apply smart sharpen (set to gaussian blur, 0.2px, 80%). This just brings out a little more crispness!

7: Use a layer mask on the top (sharpest) layer to adjust opacity and mask areas which look oversharpened. Alternatively just adjust the opacity.

8: You may wish to slightly correct the saturation and brightness which will have changed fractionally during the process.

Download the actions
If you can't be bothered to do it all yourself then I would suggest downloading the action I have created which gives sizes between just 100px and 1024px (all the sizes I have used since starting using this method). If you have CS3 and you arent familiar with actions, read the help! They really are very handy for repetitive tasks.

Download the action

To load the action in Photoshop CS3 open the actions pallete click on the little button with a triangle on it and select "Load Action", its that simple.
Add a Comment:
 
:iconalex37:
Alex37 Featured By Owner Jul 3, 2011  Hobbyist Photographer
For anyone coming to this article after July 2011 here is an update: [link]
Reply
:iconcapice:
capice Featured By Owner May 11, 2011
came across this just now, thanks for sharing
Reply
:iconalex37:
Alex37 Featured By Owner Jul 3, 2011  Hobbyist Photographer
Here is an update: [link]
Reply
:iconcapice:
capice Featured By Owner Sep 2, 2012
Still it;s one of the best explanations on sharpening.
Cheers
Rich
Reply
:icond1-xenotime:
D1-Xenotime Featured By Owner Dec 29, 2009  Hobbyist Photographer
Thank you.
Reply
:iconalban-expressed:
alban-expressed Featured By Owner Oct 25, 2009
This works really well. Thank you for your help, Alex.
Reply
:iconosagelady:
osagelady Featured By Owner Jun 30, 2009  Hobbyist General Artist
Awesome action Alex, thank you!
Reply
:icondigitaldreamz666:
digitaldreamz666 Featured By Owner May 29, 2009
useful, thanks for sharing!
Reply
:iconsciph:
sciph Featured By Owner Apr 15, 2009  Hobbyist Photographer
This is freakin' amazing! thank you for sharing this. I have applied this method manually and via the action - both with fantastic results. What I like about the manual method is that I can have it at any size perfect for printing purposes; the action method is by far the best web solution.
Reply
:iconalex37:
Alex37 Featured By Owner Apr 23, 2009  Hobbyist Photographer
Great, thanks
Reply
:icontherealthalion:
TheRealThalion Featured By Owner Apr 14, 2009  Hobbyist Photographer
Cool! Wish I could finally be bothered to use my PS more. Any idea if your action works with CS 1?
Reply
:iconalex37:
Alex37 Featured By Owner Apr 23, 2009  Hobbyist Photographer
should work. If not you could always make your own.
Reply
:iconhypnothalamus:
hypnothalamus Featured By Owner Mar 27, 2009  Professional General Artist
I tried your method for a 600x600 image and personally I prefer the unsharp mask with a 0.5 radius - applying a lot of filters sometimes damages an image
even your image with another unsharp mask of 0.3 100 0 gives the same results for the cascade
it's true it also sharpens the rest a bit more but I think an interesting way would be to go directly to a custom filter and write the kernel of the convolution - you can easily recreate variations of the sharpen filter and in the end most of the things you do could be written as a simple convolution
and some filters introduce some artifacts which "change" the image but give it a nice look

the method probably works for a large variety of images so it's nice that you posted it, but in the end I still think you need to adapt your method to the image you're processing, to its contrasts and colors

from what I know of signal processing there is no universal method to make an image look better
I have a lot of old images on my site that need reprocessing for web and on new ones I usually apply unsharp mask with different parameters but outputs also depend on the artistic mood I'm in
Reply
:iconalex37:
Alex37 Featured By Owner Apr 23, 2009  Hobbyist Photographer
You cant see the difference int he water because of the contrast/detail in that reas of the iamge. The difference is evident elsewhere though.

I think the benefit of this method is born out in the fact that large number of the top photogrpahers on this site are now using this method.

This method is adaptable in that you can use a layer mask to adjust local opacities of the most sharpened layer.

Are you talking about writing a filter for PS? If it is as simple as you say could you explain how to do it?

Alex
Reply
:iconhypnothalamus:
hypnothalamus Featured By Owner Apr 23, 2009  Professional General Artist
when you scale an image and sharpen, all you do is modify a pixel as a function of its neighborhood so this should be easily done with a custom filter (Filter/Other/Custom) that specifies the weights of the neighbors

lets say you want a crude sharpen - use this matrix (5 should be in the center)
0 -1 0
-1 5 -1
0 -1 0

basically it's edge detection + original image
0 -1 0 0 0 0
-1 4 -1 + 0 1 0
0 -1 0 0 0 0

if you work on the coefficients you can get better, softer results
(!) most of the times the sum of all the coefficients should be 1 - use "Scale" to correct and "Offset" to increase/decrease the overall intensity

what your filter does can be reduced to such a matrix (maybe not 3x3, but 5x5 or even larger)

other interesting stuff you can do with the custom filter:
bump - light from top
0 -1 0
0 2 0
0 0 0

most blur and sharpen filters are done this way (except for the smart ones which have some tweaks)


if you want to apply your filter only in certain areas you can simply duplicate the layer, apply the filter and then change the opacity or delete parts from the layer where you want to keep the original pixels

hope I didn't mess my explanation up too much :)
Reply
:iconalex37:
Alex37 Featured By Owner Apr 23, 2009  Hobbyist Photographer
do you use layer masks? You just finished with an explanation of how to do a method which is much better acheived with layer masks...

I'm aware of how sharpening filters generally work. They actually apply a gaussian blur and compare the blureed image tot he original. The areas where the difference is greatest are the high contrast edges. It simply increases the difference.

I would have to look into the niceties of the matrix method to see whether this is really possible. I am sceptical that it could be done in one pass, but maybe that is something I will look into when I have some spare time.

What I thought you were talking about was coding a filter/script, which is something I would like to try, but I looked into it last year nad it seemed quite challenging.

Thanks

Alex
Reply
:iconhypnothalamus:
hypnothalamus Featured By Owner Apr 23, 2009  Professional General Artist
true would be better with layer masks :)
I don't really know about coding a filter in Photoshop (it would come handy and I might try that some day) - I usually prefer to write some simple code in a programming language

:)
Reply
:iconalex37:
Alex37 Featured By Owner Apr 23, 2009  Hobbyist Photographer
mmm, I've played with the idea of coding the algorithm in php. I think I could make that work, but I would prefer to do it in PS.
Reply
:iconhypnothalamus:
hypnothalamus Featured By Owner Apr 23, 2009  Professional General Artist
damn, for the matrices the spaces kinda disappeared so for the second (edge detection + original) it sould be

0 -1 0
-1 4 -1
0 -1 0

+

0 0 0
0 1 0
0 0 0
Reply
:iconogiedomane:
ogiedomane Featured By Owner Mar 21, 2009
thanks for sharing :)
Reply
:iconmarcoheisler:
MarcoHeisler Featured By Owner Jan 15, 2009   Photographer
Hey, great news! Thanks for sharing this! :clap:
Reply
:iconrocqua:
rocqua Featured By Owner Jan 3, 2009
what resizing mode should you use? (bilinear, bicubic (sharper/smoother) or nearest neighbor?)
Reply
:iconalex37:
Alex37 Featured By Owner Jan 14, 2009  Hobbyist Photographer
bicubic standard. Sharper introduces too much sharpening, smoother too little!
Reply
:iconrocqua:
rocqua Featured By Owner Jan 14, 2009
ok, thanks. I thought so.
Reply
:iconarhcamt:
arhcamt Featured By Owner Dec 12, 2008
thanks for sharing!
Reply
:iconsolefield:
solefield Featured By Owner Dec 9, 2008  Hobbyist Photographer
I look forward to trying this out! :)
Reply
:iconwcsallysally:
WCSallySally Featured By Owner Dec 8, 2008
Consider putting your top over-sharpened layer on Luminance only, ... this is sometimes helpful!
Reply
:iconalex37:
Alex37 Featured By Owner Dec 17, 2008  Hobbyist Photographer
its actually makes fairly minimal difference if you try it, but I suppose that would be a more thorough method :)
Reply
:iconwcsallysally:
WCSallySally Featured By Owner Dec 17, 2008
I do not have PS, so for me, in PSP it is a noticeable difference!

At any rate, thank you very much for the insights!
Reply
:iconwcsallysally:
WCSallySally Featured By Owner Dec 8, 2008
P.S. Thanks for this!
Reply
:icontoo-much4you:
too-much4you Featured By Owner Dec 7, 2008  Professional Photographer
Fantastic, thank you very much :)
Reply
:iconmstargazer:
mstargazer Featured By Owner Dec 6, 2008  Hobbyist Photographer
do you know how to load an action if 5.o? I have been searching everywhere?
Reply
:iconalex37:
Alex37 Featured By Owner Dec 17, 2008  Hobbyist Photographer
I dont understand the question? Do you have an old version of PS or something? If so I'm afraid I cant help
Reply
:iconmstargazer:
mstargazer Featured By Owner Dec 17, 2008  Hobbyist Photographer
yes, I have 5.0 :(
Reply
:iconalex37:
Alex37 Featured By Owner Dec 17, 2008  Hobbyist Photographer
In that case you may need to just follow the method and create your own actions (if that is even possible!) best of luck!
Reply
:iconmstargazer:
mstargazer Featured By Owner Dec 17, 2008  Hobbyist Photographer
will try :)
Reply
:iconmewantsbekungfoo:
mewantsbekungfoo Featured By Owner Dec 5, 2008
thanks so much!
Reply
:iconorpheus038:
Orpheus038 Featured By Owner Dec 3, 2008
I tried a variant of this using PS7, so no smart sharpen, and it helped on the image I used. Maybe a little oversharpened and a tad too much contrast but I'll work on that a bit.
Reply
:iconalex37:
Alex37 Featured By Owner Dec 4, 2008  Hobbyist Photographer
yes, you should adjust the opacity of the sharpened layer to taste, somtimes you will find the full amount of sharpening is best.

Alex
Reply
:iconorpheus038:
Orpheus038 Featured By Owner Dec 4, 2008
Thank you. :handshake:
Reply
:iconancoben:
ancoben Featured By Owner Dec 3, 2008
I have saved this so that I can have a go when I have time!! As I think you know it is a very steep learning curve for me.
Anne
Reply
:iconalex37:
Alex37 Featured By Owner Dec 4, 2008  Hobbyist Photographer
yes photoshop can seem a bit daunting at first!
Reply
:icona2udoank:
a2udoank Featured By Owner Dec 2, 2008
thanks a lot Alex...i dont try it yet..:D
how about the file size? Gonna be more bigger?
Reply
:iconalex37:
Alex37 Featured By Owner Dec 4, 2008  Hobbyist Photographer
it is slightly bigger yes.
Reply
:icona2udoank:
a2udoank Featured By Owner Dec 4, 2008
yeah..;)..thanks a lot dude.. the tips is a great stuff btw..:D
Reply
:iconsandy515:
Sandy515 Featured By Owner Dec 2, 2008
thank you very much for sharing, i think it's very useful!
Reply
:iconalex37:
Alex37 Featured By Owner Dec 4, 2008  Hobbyist Photographer
no problemo
Reply
:icontobyedwards:
tobyedwards Featured By Owner Dec 1, 2008   Interface Designer
Aha, this is very similar to that method I mentioned a while back, you actually ';poo-pooed' it at the time
Does work well, but I've noticed it can bring down the saturation a bit.
Reply
:iconalex37:
Alex37 Featured By Owner Dec 2, 2008  Hobbyist Photographer
the method you meantioned a while back didnt work though toby because it was too approximate. The ratio is very important. Try it and see. I bring back the saturation a bit with a hue sat layer, as long as you dont oversharpen it doesnt make too much difference.

Alex
Reply
:icondrewhopper:
DrewHopper Featured By Owner Dec 1, 2008  Professional Photographer
Fantastic!
Reply
Add a Comment:
 
×

:iconalex37: More from Alex37


More from DeviantArt



Details

Submitted on
December 1, 2008
Link
Thumb

Stats

Views
9,089
Favourites
193 (who?)
Comments
75
×