Editing a photo for the web

Editing a photo for the web

The best way to share your photography with others in this day and age is via the internet. In this tutorial, I will take you step by step how I process my photos to put on the web. You can download the file and work on it as I go through each step. Thanks to Jorge for the photo I will be using to work on.

Click here to download the original file to use along with the tutorial


Here is the before/after image

Before and After example

Step 1: Cropping

This is always the first thing I do. After opening up the image in Photoshop, click on the crop tool which looks like this

Crop tool

Click and drag around the area you want to keep, and then press ENTER. I chose to crop off the bottom and remove half of the rocks in the foreground because they detract from the tower itself. I would have cropped more off, but that would make the image square in proportion which I didn't want. So here is how the crop looks now.

Devils Tower cropped

Step 2: Levels and Sharpening

I explain levels and sharpening in depth in my Post Processing tutorial, so read them if you want to know about how it works exactly. Otherwise, read on.

The next step I always do is adjust the levels and then sharpen. It is important to do it in this order because you want to apply as little sharpening as possible. Levels usually increase the perceived sharpness of an image, and you may find that do not need to apply sharpening at all.

In Photoshop, go to Image > Adjusments > Levels... or press ctrl+L

This is what I adjusted my levels to:

Levels adjustment

The photo was a little underexposed, so I pulled the white arrow down to the left, just a little past where the curve ends. I did the same for the black levels, and moved the black arrow to the right which made the shadows in rocks more darker. It is already looking better, with much more contrast to it.

The next step is to appy some sharpening. The image needs very little sharpening as it is fairly sharp already.

Go to Filter > Sharpen > Unsharp Mask...

These are the settings I used for this image:

Unsharpen mask

Amount controls the amount of sharpening done, you could probably even do a little less here. Radius is set to 1 because we are working with a decent sized image. If you are working with larger images (6 megapixel or up), you should increase the radius accordingly (refer to sharpening tutorial)

Once you have applied Levels and Sharpening as instructed, it will look something like this

Levels and Sharpening applied

Step 3: Finishing touches

Apart from resizing it, the image is probably ready to go on the internet, but I wanted to play a little more with it. At this stage, it is really pretty much up to personal preference and creativity. I didn't particularly like the yellowy shade of the rocks so I adjusted the hue a little.

Go to Image > Adjustments> Hue/Saturation or press Ctrl+U

Hue and Saturation

I set the Hue to -10 which gave the rocks a little bit of red, and the sky turned a pleasant teal. I think this gives the image a more fantastical feel.

Finally, I did some touching up with the dodge and burn tool. I dodged ever so slightly the sky around the the tower and burned the outer edges of the image to make the tower stand out that much more. Again, these final touches should be done based on your personal preference, everyone has a different opinion on what they think looks good.

So here is my result:

Devils Tower after dodging and burning

Step 4: Resizing ad framing

Sizing for the web is important because you don't want to upload huge images that take forever to download and stop half the people from viewing it. Most people have screen resolutions of 1024x768, with a few still on 800x600 or lower. I tend to choose a photo size that is lower than 800x600, not only so that most people can view it, but also because it is small enough so that people cannot steal it / print it / sell it, etc.

For this image, I scaled it down to 500px in width

Go to Image > Image Size ... or press Alt + Ctrl + I

Image resize

Type in 500 for width and the height should be calculated automatically. Make sure the values are linked (you can tell by that black line that joins the two). If it isn't click on the little chain icon which keeps the image the same aspect ratio.

After that, I added frame, and it is finally ready to display on the web! Please see Frames with Photoshop tutorial for applying a frame.


When you are done go to File > Save for web or press Alt + Shift +Ctrl + S

Save for Web

Select JPEG format and choose a quality level. I choose to compress at a quality of 80% which I find to be the best compromise between size and quality. Anything above 90 is not noticeable unless you zoom in a few times and really look and it is fairly noticeable if you go below 70.

Finally, save the image and you are done!

Final image