How I prepare images for web in Photoshop

It is very easy. I know, most of you know how to do it. But may be some of you find something new in this tutorial. Let’s start. Open your photo that you want to re-size and adjust for web.

Step 1Manual Levels adjustments.

In this step we will make the image more bright, contrast and crisp.

Image ->Adjustments -> Levels
Level adjustments in Photoshop

Level adjustments in Photoshop

This tutorial is not about using levels in Photoshop, so if you don’t know theory, but want your photo looks good, this is an universal solution. This idea works good if you have a correct white balance on your image.

Simple move sliders to  both ways on 5 points starting with color channels and finished in RGB.

Input levels red channel in Photoshop

Input levels red channel in Photoshop

Input levels green channel i Photoshop

Input levels green channel i Photoshop

Input levels blue channel Photoshop

Input levels blue channel Photoshop

Input levels rgb channel Photoshop

Input levels rgb channel Photoshop

You can see before and after your adjustments by clicking check box “Preview”

Step 2. Re-size the image

Image -> Image Size -> Pixel Dimensions (for example width 600)

Don’t forget to choose Bicubic Sharper (Best for reduction)

Resize image in Photoshop

Resize image in Photoshop

Step 3. Sharpening photos for web in Photoshop.

There are many different ways to get sharp clear images. I will show you only two basic methods.

First – Unsharp mask

Filter -> Sharpen -> Unsharp Mask

Unsharp mask

Unsharp mask

I apply these settings (use it for most images):

Unsharp mask settings

Unsharp mask settings

Check and uncheck “Preview” to see changes.

Second method is Filter “High Pass”

Duplicate layer. Change the Blending Mode of this new layer from “Normal” to “Overlay” from the drop-down box.

Change normal mode to overlay

Change normal mode to overlay

Remove saturation on this layer. Image -> Adjustments -> Hue/Saturation

Remove saturation

Remove saturation

Apply The “High Pass” Filter To The Duplicate Layer:

Filter -> Other -> High Pass.. (I prefer Radius value 0.2-2)

High Pass filter for sharpening in Photoshop

High Pass filter for sharpening in Photoshop

Use the Opacity slider on the High Pass layer to adjust the effect as desired.

Step 4 Mark your image with your Signature or Copyright

Step 5 Save your photo for web

File -> Save for Web & Devices

Save photo for web

Save photo for web

I save my pictures as JPGs, usually 68-75 quality.

Then click the “Save” button, type a file name, browse to the desired folder on your computer and click “Save”.  You now have an optimized, web-ready photo.

3 comments to How I prepare images for web in Photoshop

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>