TIP-Sharpening for the Web

[JeanH]

About Sharpening for the Web:

I use a variety of sharpening tools for photographs, and for work I have printed, or I print, but I’ve never been completely satisfied with them when it comes to sharpening my low-resolution page designs when I post to web sites. Often, the image seems a bit flat, somewhat blurry.

Last month, Ona (Wombat146) posted a challenge/tutorial at another site. After trying this one out, I just had to pass it along to you. I have checked and it works in Photoshop, Photoshop Elements, Paint Shop Pro and Photo-Paint. I don’t have any other programs, but it’s worth looking through them to see if you can find this.

Best of all, it’s completely non-destructive and reversible—so, if you don’t like what you get, just zap the effect and you’ll still have your original image.
After you’ve prepared your image for the web (72 ppi at 600x600), but before saving, do the following:

Duplicate the image on a separate layer. In Photoshop it’s just a CNTRL-J; in PSP, use the duplicate function under layers.

On that duplicated top image, then apply a high-pass sharpening filter ( Photoshop under Effects, Other, High Pass; PSP is Effects, Edge Effects, High Pass). If every case, you’ll see a window pop up with a slider or a box. For this to work on your layout, you’ll want to keep the number below 2 (I use about a 1.6-1.9 at the most). I found with PSP that going to 1.5 seemed to work well.

I did a bit of research on High Pass and discovered that the rather strange image you see when you apply it to the layer shows what the effect does. The grey part is a mask of what will NOT be sharpened; the line at the edge of objects is where the effect will be applied. You want to really just slightly bump up the sharpening effect on the edges, so you need to keep the number low.

Now, here’s the magic. Change the layer from “normal” to “overlay”. MAGIC! Suddenly your rather dull page will sparkle. You can use “soft light” for less effect or “hard” light for more. And, you can adjust the intensity of the effect with the opacity slider. Now, to see the difference, turn off the “high pass filter” effect (the little eyeball) and see if you like the effect. If you do, merge the layers and complete your process of saving for the web. If not, just delete the layer!

And I want to do a shout-out to Ona for introducing me to how well this works on my layouts!

[Romy]

that is a tip worth exploring - I never used High Pass...thanks, Jean, and to Ona as well!!

[heathert]

High pass works great for photos, too! =)

[Sexy__Eyes]

Wow...it is magic! Thank you both for the tip.

[fruitysuet]

I must give it a whirl, thanks for sharing to the both of you.

[wombat146]

Thanks Jean!!! I am sooooooo sorry for not getting back to you, been a bit busy of late!!!!!!!!! I am glad that you liked this technique Jean, its one that I use for every single layout!!

[nmatthew]

Most of the work people now go with are being published online so it would just make sense when you make sure that you are giving it your all as you would not want to get left behind just because you were not able to come up with something really interesting and important, for whatever it's worth.

You just have to ensure that it would be something that would be presentable be it seen by whatever ages they are in.

[Angelclaud]

Thanks for the so useful tips. Will definitely try it out.

[Victoria32]

Thanks for the tip....certinly woth a try.

I often use the high pass filter for blurry photos. When saving my LO to use on the web, I do an image resize and select bicubic sharpener from the menu drop box (best for reduction). I also save as a jpg...as the gif image always looks grainy on the screen.

[Margje]

I use it all the time! Set to linear light works great too! i mostly keep it to 0.3 (When you see colors coming true the grey you are a bit to high i found out!