EditRegion17  
Home Page Image
 
Check out my stock photography at:
View My Portfolio


Save for web tutorial

How often do you find that the images you have so carefully edited turn out dull and lifeless when you upload them to the web? Well, don't worry, you are not alone, and, what is more, help is at hand.

Download the Action

Using this quick and easy technique in Adobe Photoshop you will be able to enhance the visual impact of your photos so that when they are viewed through your web browser (or anyone elses for that matter), they will appear brighter, more vibrant and more colourful than before.

Step 1 - Open Image
Open your image in photoshop.

Step 2 - Change mode to LAB

Select Image | Mode | Lab Colour

Lab colour actually stands for "Lightness A and B" and has nothing to do with chemistry whatsoever!

Step 3 - Select Curves
Select Image | Adjustments | Curves
Step 4 - Select the "A" Channel

First of all select the "a" channel from the drop down list at the top of the dialog.

Step 5 - Adjust the "A" Channel
Now, grab the top right hand handle of the diagonal line which you can see running through the dialog and drag it so that it is in roughly the centre point of the far right hand box as shown below. Do the same for the bottom left hand edge of the diagonal line as well. Don't click OK on this dialog just yet! Although, if you do, it doesn't matter, you can always just follow Steps 3 and 4 to get back in here.
Step 6 - Select and Adjust the "B" Channel
Change the channel to the "b" channel by selecting it from the drop down menu and do the same as you did for the previous step.
Step 7 - Select and Adjust the Lightness Channel

Now, select the "Lightness" item from the drop down menu and push the centre point up a few millimetres as shown below. Then Click OK.

Of course you can play around with these settings to achieve the sort of result you want but I find that these work well for most types of images.

Step 8 - Select "Save for Web"
Select File | Save for Web...
Step 9 - Select Settings
Chnage your settings to match those you can see in the dialog below. Of course, you can select a higher quality if you want to. Notice that for web images such as these I have selected the "Bicubic Sharper" quality setting to help give the photo a little more clarity. This helps to counteract some of the detail lost in compression.
Step 10 - Apply Settings
Enter new Width or Height dimensions to resize your image for the web and click "Apply". Now when you do this, the preview window will display the smaller (or larger) sized images.
Step 11 - Save your Image
Click "Save" select a location into which to save your output file. The Save for Web dialog will then close and you will be able to see your original image with the enhancements. You can save this as a .psd if you want to save the changes to the original.