Categories

Feb 17, 2016

How to Color, Sharpen, and Save for Web in Photoshop

How to Color Images for Web

In this episode we use a couple of different adjustment layers to color the image before saving it out to the web. We start with a Color Balance adjustment layer and add green and blue into the waves. Then we add another Color Balance layer to bring some red and yellow into our subject and the background, adding a nice contrast to the blue. After getting our color right, it is time to work on the exposure. We use a Curves Adjustment Layer to bring up the shadow level and keep the highlights where they are. then we mask that layer to only be visible over the subject.

How to Sharpen Images for Web

After getting our color perfect, it is time to sharpen your image. It is important to resize your image before you sharpen, so the image will be sharp at the display size. Avoid resizing your original image, it is much better to make a copy and resize the copy. To do this we create a new layer on the top of everything, and go to Image > Apply Image. Use the default settings in the dialog box and you will get an exact copy of your image on the new layer. From there, right click on the layer and select Duplicate Layer, and select a new document.

Once you have a new document, resize it to the output resolution, in this case we use 1200 px wide.

Now it is time to sharpen. Go to Filter > Sharpen > Unsharp Mask. Choose a radius that provides the optimum level of sharpening without going overboard. My recommendation is to go a little too far then back it off to get the right amount.

How to Save Images for Web

Once you have your image colored, resized and sharpened, it is time to Save for Web. Go to File > Export > Save for Web. You want to make sure you have “Convert to sRGB” checked, this is the color space that most internet browsers use, and converting to this color space will ensure your colors look great on the web.

If you want to see a preview of your image online, click on the Preview button on the bottom left of the dialog box, it will open your default internet browser and display your image. This is the best way to see how your image looks online!

18 Comments


user image You
(will not be published)

  • user image
    Rob

    IMO the best thing of this tut is local Color Balance Adjustments 😉
    Great tut anyway . Thanks for sharing.

  • user image
    Ana M

    Great tutorial, as always! I watched a tutorial about the Save for Web function a while ago, but never used this feature. If you already work in sRGB in Photoshop, do you still need to Save for Web if you put the image online? Because I always work in sRGB (never had the need to switch to a better color space) and just saved the images normally and uploaded them online and they looked good.

  • user image
    Ian Black

    Just wanted to say your the best at teaching Photoshop, if i can do it anyone can !!
    I’ve added a picture that I’ve edited, and thought you might like to comment on it, would you take the editing further, and if so what else would you do.
    Thanks again Aaron 🙂

  • user image
    Dick

    Another great tutorial. Unfortunately, the control bar is not available for full screen viewing. Makes it difficult to see the details for the adjustments you made. Not sure what the problem is on this one. All others allow full screen.

  • user image
    Kerry Boytell

    Thanks Aaron, had no idea it was important to sharpen at output size. I was sharpening the PSD and then downsizing and saving.

  • user image
    joe

    Great tuto Arron. Just what I was looking for as I have a whole slew of pics that I need to integrate into my new web site. I do wine tours in the south of France. thanks. Joe

  • user image
    vjeko

    Hi
    I like to know why color changes when are converted to sRGB specially red one. I don`t convert my images because of that. My monitor is calibrated.
    Thank you

  • user image
    Trevor Waller

    As usual a superb presentation. When it comes to teaching beginners in our club, why shouldn’t we tell them to duplicate the image they want to reduce for club projection (no greater than 1400pxx1050px) by using the Image>Duplicate command, please?

  • user image
    Alan Kovarik

    I wonder why do you use “automatic resample”? I thought automatic resample sharpens the image by its self. Wouldnt be better use another resample method if you want to sharpen the image by your self?

  • Rachel

    Thank you for this tutorial. I have used several of your free and PRO tutorials to help me understand Photoshop better. I am wanting to create a Facebook page to put my daughter’s grad photos on for people to choose which ones they want (I took them myself so there is no copyright issue). What size would be best to save those in? Thank you, in advance, and I look forward to watching and learning more from you!

  • user image
    LD Matte

    You always taught Shift Option Command E to merge the layers down to one image, what is the difference in doing that and the method used here with Apply image? Are they one and the same?
    So the PSD file should be saved as a PSD file and then go back into it to sharpen at the original size, after you have created your web sized document as a new document?
    I was sharpening the original, then saving as a psd, and then once saved, I was just changing the size to a web sized photo and saving at a web size,so I learned I’ve been doing it wrong.
    So at what point do you sharpen the PSD file, after you have created the new web sized document? Thanks!
    Another Phlearntastic moment!

  • clive1

    Used Photoshop for many years, and watched many video tutorials. I thought I was pretty proficient … started watching Phlearn last week, and hours later, I feel like a beginner again, and sooo frustrated that I have never picked up on some of the processes that you brilliantly demonstrate.

    I also really love the delivery of your tutorials and am delighted that you pitch at those, like me, who are familiar with the most of Photoshop techniques, and that you do not dwell on the basics.

    So huge thanks for your passion and willingness to share, and showing us “old hands” that the Photoshop learning journey is endless, but so satisfying.

    Interested to know why you use un-sharp mask rather than smart sharpen?

    • user image
      JanS

      I wanted to congratulate you on such excellent tutorials. I have been learning in my spare time and now edit our photographers photos at work as an ‘extra’ for my manager. I would love to have more time to dedicate to Photoshop but with your tutorials have progressed so much. I have purchased your 101/102 courses to run through too. I would also like to know the different between Shift Option Command E to merge the layers down to one image, and the method used here with Apply image.
      Thanks.

  • user image
    shaw

    hi can you please tell me how to edit my photo so that it can look like this

  • user image
    Jessica Anwyl

    Hey, for some reason after hitting ‘command I’ it doesn’t apply the colour onto the image. The box goes black as shown, do you have any suggestions?

  • user image
    Caroline

    Wow. Best PS tutorials I’ve ever found. I’ve learned more in one day than I have in years. You have an excellent teaching manner and you explain things very clearly. Thank you.

    But please note for this post specifically the video embed is cropped so the controls are not accessible. Again though – THANK YOU!!!