Web Sharpener Panel – Better Sharpening for the Web

Introduction

For many of us the internet has become the main portal for the presentation of our images. Unfortunately the necessary downsizing results in a loss of details and clarity of the original. To preserve some of these details an efficient workflow is required, that surpasses the default algorithms used in Photoshop.

Over the years I’ve looked for better methods and created a more and more refined process for downsizing my images. First I used Photoshop actions to accomplish the task but I wanted more flexibility and so I wrote a script to make this possible. Now my web images look more detailed and closer to what I’ve got in the original shot.

It’s nice to talk about things but seeing the result is even better. Look at this comparison between the downsizing done by Photoshop (on the left) and the version I created by using my script (on the right). You can move the slider in the middle of the image to switch between the versions.

Photoshop (left) – Web Sharpener Script (right)

Requirements

Photoshop CC2014 or higher (Windows or MacOS)

Removing older versions

I recommend to remove older versions of the panel before installing the new version. If you still have the uninstaller script that was created after your previous installation, you can use it. If not, you can delete the extension folder(s) manually. They are named „websharpener_extension“ (before V1.1) or „com.websharpener.ep“ (from 1.1 on). Here’s where you can find them …

On Windows: C:\Users\[USERNAME]\AppData\Roaming\Adobe\CEP\extensions\
On MacOS : Macintosh HD > Library > Application Support > Adobe > CEP > extensions

IMPORTANT – One file you have to delete is the old preset file. Unfortunately you will lose the old presets, but as the structure of this file has changed with the recent update, this needs to be done. So go to the Documents folder of your system (usually \Users\[USERNAME]\Documents\) and delete the file named „WebSharpener_Settings.xml“. If you really have a lot of presets that you want to keep, drop me an email with the XML file and I will update it for you.

Installation

After downloading the extension (link is here) extract it to your harddisk. Among the extracted files you will find one that is named „installer.jsx“. That’s the one that will perform the installation for you.

There are two ways to install the panel:

  • Drag and drop the file „installer.jsx“ onto the empty workspace of Photoshop.
  • In the Photoshop menu go to File->Scripts->Browse… and locate the file „installer.jsx“ that you’ve just extracted.

During the installation you have to click through a few windows and if no errors pop up, you’ve successfully installed the panel. After that you need to restart Photoshop – the panel is not loaded yet. After the restart, you can find the extension in the menu under Window->Extensions.

During the installation an uninstaller script is created in the same folder where the „installer.jsx“ script is located. It’s a JSX-file with the word „UNINSTALLER“ in its filename. You can use this script later (the same way as you used the installer file) to uninstall the extension.

The Panel

Extension Icon

When you click on Window->Extensions->Web Sharpener EP the extension window pops up. Its content is higher than the window itself, but you can scroll inside the window by using the thin brown scroll at the right side of the window or using the mouse wheel while the window is active. After you start the sharpening or collapse the window by clicking the double-arrow in the upper right corner of the window, the panel collapses into a little red icon that resides in the window panel for quick access.

In Detail – Header

Header
The header shows you the title and the version of the extension. When you click the red button on the left, my website opens up in your browser. The script and extension have always been free and always will be. However, if you appreciate the work that I did, feel free to click on the Paypal icon on the right and donate as much as want. Any support is appreciated.

In Detail – Presets

Presets
There are a lot of settings that you can adjust in the panel. If you want to save them, you can create a preset to access them again later.

The Dropdown List
In the dropdown list all the available presets are listed. The extension comes with a few predefined presets. Feel free to try them out. The preset „Default“ should be fine for most cases and is a good configuration to base your own presets on.

The Update Button
By clicking the Update button, the active preset will be overwritten with the current settings. In the beginning you might want to adjust the „Default“ preset with your own settings (like a different size, watermark etc.).

The Reset Button
If you want to revert the settings to the last saved state of the active preset, click the Reset button.

The Delete Button
To remove a preset from the list, you can hit the Delete button. After confirming your decision, the preset will be removed from the list and the configuration file.

The Add Preset Button
Whenever you want to create a new preset based on the current settings, you can hit the Add Preset button. The preset will be added to the bottom of the dropdown list. At the moment the list can’t be rearranged, but you will find a description on how to edit the settings file further down on this page.

In Detail – Main Settings

Main Settings
This section contains the most important and most used settings of the extension. Remember – you can always create a separate preset (see above) if you use a certain combination of settings rather often.

Final Size and Orientation
The Final Size value defines the final size of your sharpened image in pixels. Next to it you can decide if this size should apply to the Longer Side or the Shorter Side of the final image.

Duplicate Image
When this option is checked, the original image will be duplicated before the sharpening starts. In doing so, the original image will be preserved.

Create Edge Mask
When sharpening an image you usually get oversharpened edges in areas of high contrast. To prevent this from happening, the script can create an edge mask to exclude this areas from being sharpened. In most cases this works well and the option should be checked. You can always deactivate or adjust the mask in the sharpened version anyway.

Mask Paint Mode
The final image is separated into individually sharpened layers for a more precise control of the outcome. The strength of these layers is controlled by their opacity value (see next section). However, if you want to control the distribution of the sharpening more precisely, the transparency can be controlled by the brightness of the mask instead. In that case the opacity of the layer will be set to 100% but the mask will show a gray value corresponding to the opacity of the layer. You can now paint inside that mask with white/black to increase/decrease the amount of sharpening.

To 8Bit & sRGB
If the final image is intended for the internet it’s recommended to convert it to a depth of 8 Bit and the sRGB color space before saving. If this box is checked, the script will take care of that for you. Otherwise you will have to address the conversion on your own after the sharpening.

Layer Opacity – Basic/Details
For a more precise control, the sharpening effect is split into a few layers. As their full effect would be way to strong, their strength is controlled by an opacity value. In this section you can define these values.
The „Basic“ layers contain a more straightforward and contrasty sharpening effect, while the „Details“ layers show a more textured and noisy sharpening effect. They again are split into a „Lighten“ and „Darken“ layer group. „Lighten“ controls the bright details of the image (like bright leaves, stars etc.) while „Darken“ takes care of the darker details of the image (typically dark details in front of brighter ones – like dark branches in front of a bright sky).

Layer Opacity – Compensations
Because of the details and noise introduced by the sharpening, the final image can lose a bit of saturation and contrast. There are two layers that compensate for that loss. Their strength can be controlled by these values.

In Detail – Watermark

Watermark
Most of us like to put a watermark on their images. This section can automate that process for you. If you want to use a watermark with transparent areas, it’s best to save it in a format that supports that (like PSD, TIFF or PNG). If you want to offset the watermark from the border of the image, you will have include that offset in the watermark file.

Show Watermark
If you want to the watermark file to be loaded and placed in your final image, check this box.

Select Watermark File
Click this button to open a dialog where you can select your watermark file. If you use that watermark most of the time, you can update the Default preset to remember this file for the future.

Watermark Opacity
This sliders controls the opacity of the watermark layer.

Position Grid
On the right side of this section you can see a grid that lets you specify the position of the watermark. Just click on one of the nine available positions. Remember – the offset from the border has to be included in the watermark file.

In Detail – Expert Settings

Expert Settings
This section is hidden by default to keep the interface shorter. You can expand/collapse it by clicking on the double arrow on the right side of the section bar. If you feel that your sharpening is almost perfect and you can’t get the expected result by playing with the layer opacities in the Main Settings section, you can adjust the sharpening process a bit more precise here. These changes can be saved alongside the other settings of the preset.

Downscale Factor
Throughout the sharpening process, the image is scaled down in several steps. Each time the image is reduced by a specific ratio, which can be defined here. So if the value is „1.66“ the image will 1.66 times smaller after each reduction.

Reduction Steps
The number of reduction steps used for the final image can be defined here. The smaller your original image is, the less steps should be used. Sometimes you might even want to lower the Downscale Factor as well.

Strength Base
This is a representative value that defines the overall strength of the sharpening used in the individual steps. The higher this value is, the stronger the sharpening will be.

Step/Final Sharpening
For the sharpening, the Smart Sharpen algorithm of Photoshop is used. The Sharpening value corresponds to the Amount value in the Smart Sharpen dialog. Radius corresponds to the value of the same name in this dialog, while Noise Reduction represents the Reduce Noise value.

Edge Mask
These sliders control the creation of the edge mask that is used to prevent the oversharpening of the edges. Detection Blur is the blur radius that is used to soften the base image of the edge mask. Lower values will result in thinner, sharper lines in the mask while bigger values will create thicker lines. When changing this value, you will also have to adjust the other three sliders to get the best result. Edge Gamma, Edge Black Point and Edge White Point are Level dialog settings to define the final look and contrast of the edges.

Start Sharpening (Active Image)

Start Sharpening (Active Image)
Pressing this button closes the panel and starts the downscaling/sharpening process for the currently selected image.

Sharpening of Multiple Images (Batch Sharpening)

Sharpening of Multiple Images (Batch Sharpening)
If you want to sharpen a folder filled with images, you can do it here in the lower part of the panel. The settings that will be used are the same that would be used to sharpen a single image. The settings of this sections are not saved in the presets however.

Source/Destination Folder
Select the folders where the original images are located and where you want the results to be saved.

Save As …
You have a few options for the output file formats. You can have multiple formats selected at the same time if you want to. The settings for each of the formats correspond to the settings that Photoshop uses for the individual file formats.

Start Sharpening (Multiple Images)

Start Sharpening (Multiple Images)
You can start the batch process by hitting this button. Depending on the amount and size of the original images this can take a while and Photoshop will not be responsive during the process.

The Layers of the Sharpened Image

The Layers of the Sharpened Image

Layer Structure

After the script has finished, the downsized and sharpened image contains several layers which allow further adjustments. Here’s a little more information about their purpose.

Layer „No Sharpening“
You can find the unsharpened version of the image here.

Group „Sharpening Group“
This group of layers contains all the layers that contribute to the sharpening. If you had the option „Create Edge Mask“ checked, the edge mask is applied to the layer group. If needed you can further refine this mask or switch it on and off by SHIFT-clicking on the mask thumbnail.

Group „Darken“
This group is responsible for the sharpening of the dark details of the image. This can be examined best with branches or grass in front of a brighter background. If the result appears to be too strong, you could lower the opacity of the group or paint into the mask of the group with a dark brush.

Group „Lighten“
This one is similar to the „Darken“ group, except that it takes care of the brighter details in the image. A good example for this are blond hair in front of a dark studio background or snow-covered branches in front of a blue sky. Again the effect can be adjusted by changing the group opacity or modifying the mask of the group.

The „Basic“ Layers
In either of the groups „Darken“ and „Lighten“ you will find a layer named „Basic (…)“. This layer contains the main sharpening effect which affects the bolder details of the image. You can adjust the effect by changing the layer opacity or the mask. In case you had the „Mask Paint Mode“ option checked, the transparency of the layer is controlled by the brightness of the mask instead of the layer opacity value. You can further refine the strength of sharpening by painting directly inside mask. Painting in black lowers the effect, painting in white creates a stronger sharpening in that area.

The „Details“ Layers
Unlike the „Basic (…)“ layers, the „Details (…)“ layers control the sharpening of the finer details. This will enhance textures like rocks, distant forests and so on. If you go too far here you might increase noise and moiré – so be careful. The effect can once again be adjusted by the layer opacity or the content of the mask.

Saturation Compensation
This layer can help to restore some of the lost saturation due to the details and noise that are introduced by the sharpening. The strength of the layer can be adjusted by the layer opacity or the mask.

Contrast Compensation
Similar to the loss of saturation, a loss of contrast is possible. Use this layer to compensate for that. Again the strength of the layer can be adjusted by the layer opacity or the mask.

Watermark
This one is created if you had the option „Show Watermark“ checked in the script dialog.

The Preset File – WebSharpener_Settings.xml

All your presets are stored in an XML-file called „WebSharpener_Settings.xml“. This file is located in the Documents folder of your system (usually \Users\[USERNAME]\Documents\). In most cases you would not want to edit this file. But let’s say that you want to change the order of your presets (which is not possible from within the panel itself). You can do this manually by using a text editor (like Notepad or Notepad++).

Here’s how the file is structured:
Every layer of information has a start tag and an end tag. They look like this – „<...>“ and „</...>“. So the top layer that contains all the presets starts with „<presets>“ and ends with „</presets>“. The layer below contains the individual presets themselves. They each start with „<preset name=“[NAME]“>“ and end with „</preset>“. One layer below you will find all the individual parameters that belong to each preset. Again you can see, that they start and end with a properly named tag. Visually the individual layers are separated by progressing indents.

How to rearrange the presets:
So if you want to move a preset within the list, you need to cut the whole preset from its old position and paste it into the new location. You need to start the marking before „<preset name=“[NAME]“>“ and end it after „</preset>„. Press CTRL+X (and eventually delete empty lines that might be left by the cutting) go to the place where you want to paste the preset into (place the cursor after some „</preset>“ and hit ENTER) and paste it.
After you’ve done all that, you might want to clean the file up so it’s as neat as it was before (remove empty lines and check all the indents).

Another comparison between Photoshop (left) and Web Sharpener (right)

Download the Extension

To download the extension, click on the following button.

Download the Extension

Details about the installation can be found higher up on this page.

Older Script Version

If you use a Photoshop version prior to CC 2014 you can try the older script version of the Web Sharpener. Just click on the button below to go to the old site of the script.

Older Script Version

Support

As you can imagine, the creation and support for the extension takes some time. If you use and like what I did here you can support the development of the extension by donating as much as you find appropriate to my Paypal account. To do this, just click on one of the buttons below.

Donate via Paypal (Dollar)Donate via Paypal (Euro)