Quick Photoshop Tip: Make your product images shine.
Jarrod Medrano Oct 31 2008
When designing a website for a business, it’s easy to overlook the little things. A lot of time is spent on design, layout, and development. Other, less glamorous things like image file size and product images are often overlooked. Attention to the little details in a website can make all the difference in the world when it comes to catching a customer’s eye. In less than five minutes I’ll teach you how to spruce up your product images in Photoshop. Keep in mind you can do this with any jpg.
I start with a nice high res photograph of a teddy bear. Notice the fine details in its hair and the reflection in the eyes. You can follow along using any suitable photo.
Now I’m going to size it down to an appropriate size for the web. Photoshop does a pretty good job when reducing the size of an image. But notice how most of the detail is gone. My once fluffy, hairy bear is now looking rather dull and blurry. He also seems a little dark.
I’m going to duplicate the layer of the teddy bear and place it alongside the original for comparison. I want to lighten up the image a little bit, so I’m going to convert it from RGB color to LAB color. That way I can adjust it’s lightness/darkness without affecting the color of the image. Go to the image menu and select Mode, then select Lab Color. Next, go to the channels tab (next to layers in the layer palette) and select the lightness channel. Now here’s an important step, press the ~ key so that you can preview the image in full color.
Now I will adjust the curves of the image to make it a little lighter. Press Ctrl+M or go to Image > Adjustments > Curves. I’m going to drag the right node to the left a bit. I’m going to exaggerate it a bit for comparisons sake.
That’s looking a little better, but it’s still not as sharp as I’d like it to be. I’m going to duplicate this layer and move it beside the others to compare the next step. Now I’ll select the lightness channel of the new layer, as I did before, and this time I’m going to apply the smart sharpen filter to it. If you are using an older version of Photoshop, you may use the regular sharpen tool or unsharp mask for similar results.
Go to the Filter Menu > Sharpen > Smart Sharpen to start the tool. The smart sharpen tool is an extremely powerful filter, with lots of settings and knobs. For now I’m just going to apply a simple sharpen at 53% with a radius of 1 pixel. Play around with it until you think it looks good.
There, now I have an image that’s presentable. You might have to look closely, but notice the details of the hairs, especially on the paws. The bear’s eye seems to light up in the third image, and you can see the indent of the fur around his nose. All of this was accomplished in just a few minutes. Remember that you only have about five seconds to get a customer’s interest, so if you can do anything to make your images look a little more fetching, so much the better.
Jarrod has lent his extensive experience in web design, HTML, CSS and more to Portent for over 6 years. Read More
- Do You Use Data To Improve Your Website Design?
- How to use Intention.js for Responsive Design
- What Does a Degree in Architecture Have to Do with Web Design & Development?
- A Front-End Workflow For The Evolving Web
- Stop Writing Blog Posts: Ideas for Interactive Content
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques