Background

PIXELZ BLOGG

Få viten om produktbilder, bilderedigering, og 'best practice' for optimering av produktbilder til netthandel.

DIY 3: Editing Product Images


Main Image

After setting up your photo studio and shooting high-quality images with your manual camera mode, you’re almost ready to sell your products online.

There’s only one last step to have great product photos ready to upload to your online store. There are many things involved in preparing your images for the web. In this post I will show you the best practices for editing product images, step by step.

On the other side if you need to edit a large amount of images, and you feel it will be time consuming, you can also consider reaching out for help. Outsourcing certain functions can make your business significantly more efficient. Most photographers or business owners do not have the extra time to retouch and web-ready their images. Photographing your product alone can be truly time consuming, so don’t be afraid to seek out help in the retouching category, with companies such as Pixelz, and you will get a bulk of high- images ready to sell in a short time frame (24 hours or less).

Software recommendations

To start, you will need a computer with either Lightroom or Photoshop (or similar), along with the images that you have selected to move forward with. Follow my step by step process by utilizing the videos to help guide you through the process. The first time may be tedious, but the more you do these things to your images, the faster you will get.

I am going to be using Photoshop, but if you are uncertain as to which program would be best for you, try them out using their free trial! You can also utilize Adobe’s “Creative Cloud Plan” that allows you to choose a membership plan that best suits your needs. You can choose a no commitment plan where you pay monthly, or choose a slightly cheaper option that holds an annual commitment. If you plan on doing your own retouching work at home, I would recommend choosing the annual commitment as it will save money, you will use it lots and you will always be up to date on the programming you will need to use! This explains the membership process in detail: Plans at a glance

Another helpful tip for you to become more efficient with your retouching, is learning the default keyboard shortcuts in Photoshop/Lightroom. There is a broad range of the keys you can use to make your process faster. The more you use them, the more they will become second nature, and you won’t even have to think about it! For now you can just focus on the few tools I use in this process before diving into the rest.

Adobe Keyboard Shortcuts button

Let’s get started!

Learn the default keyboard shortcuts in Photoshop and Lightroom to make your process faster.

Step 1: Raw corrections

1 RAW Corrections from Pixelz on Vimeo.

After you have your images selected in their own folder, open your set of images into Photoshop RAW. If you did not shoot in RAW, don’t worry, just skip ahead to step 2!

It’s important to know that what you see on your camera may look different than your Camera RAW, while the camera has it’s own settings, it defaults to show through the viewing features on your camera. So there needs to be some tweaking on your images. First, make sure to select all of the images you want to look the same, by clicking “Select All”. This means that any changes you make to the image you are currently looking at, will be applied to all of the other images as well. Here I will be using a few fundamental tools that can help make it a fast and convenient way to correct all of your images, all at once!

  1. Firstly, I choose the white balance eyedropper tool, to even out the colors and tones in the image. As you can see my image looks rather blue so by toggling the tool over the white background and clicking it, it automatically changes it to what Camera RAW looks to be right. See it has already warmed up, not only is my image visible, but the rest of them as well!
  2. Looking at my product as it is now, I think it looks rather dark and dingy so I am going to use my Exposure tool to brighten the heel. If you toggle this to the left, it gets darker and if you toggle it to the right it will get brighter. I photographed black so it needed a boost.
  3. Next, I think certain areas in the product needs some extra fill light, which lightens just the darkest areas in the image. This will help some of the texture shine through. The more you move it to the left, the more it will lighten or fill those darker areas.
  4. Then I played with a few tools simultaneously, to get the look I was achieving. I brightened up the product some more, by using the Brightness tool, but then felt like it looked a little flat. I then played around with the Contrast tools and the Blacks too, which really just affected the blacks and whites in the image and left the greys. This helped the texture come out even more!

After making your changes, as you will see, all images that you have selected, will change in RAW and have the same overall changes – try toggling the preview to see your work in progress!

Once you are done with your simple RAW corrections, you can open the images right from RAW to start working on them, but I like to save them out as JPEGs to stay organized in my process. Also, if this is the only step you think you may have time to do, saving your images in JPEG form can be great, because then you can send them via a web service to continue the rest of the process.

I clicked “save images” to save versions of these changes in the same folder, to keep them all together and consistent. Once photoshop is done saving the images, go ahead and click “done.” You should then see your images saved as JPEGs in your folder as well.

Accurate capturing colors can be tricky, so have your product on hand when you are retouching.

Step 2: Spot Retouching

2 Spot Retouching from Pixelz on Vimeo.

Open up your JPEG images into Photoshop. Starting with my the first ‘main’ product image in the set (This is the first image your customers will see when browsing your website).

I brushed my suede shoes prior to photographing, but because of the nature of the fabric, it unfortunately collected dust and hairs that I was not aware of until I opened my images on the computer for a closer look. There are also a few scuff marks in the leather from wear and tear. This is a common issue with footwear, so I am just going to remove these defects from the shoe using Photoshop. Firstly, I duplicated my layer to see the process before and after retouching. Then I began to remove all the tiny specs of dust and hairs by using the patch tool.

Start by selecting a circle around the spots you want to correct. Then gently grab onto the selection you have made and move it to a spot near it that resembles what you would like it to look like. This tool will replace what you do not want with what you do want. You can use this on almost anything!

I also use the clone stamp tool for parts that are worn away on the shoes. This is very similar to the Patch Tool.

Go up into your brush selections and choose a softer feathered one, and you can adjust the size of the brush as you go. I like to make this brush opaque quite a bit, because as I work I’d like to have a lot of control over the changes it makes. Zoom in on your tiny spots that you’d like to correct and “Option/Click” the area you would like your scuffs to look more like.

Then go to your scuffs and marks and “paint” over that area. Every so often I “Option/Click” an area around that scuff so it stays consistent and fresh. You’ll notice I switch between these two tools quite often, depending on how I feel each thing needs to be removed and in what area it is. For harder areas to retouch, I typically use the Clone Stamp tool because I have more manual control over it. For easy small corrections I stick with the Patch Tool.

Other tools I use a lot is the Dodge and Burn Tools, which help even out the tones in areas of your product. If something needs to be lightened use the Dodge tool and if something needs to be darkened use the Burn tool.

It is helpful to know the shortcut key to switch between these two tools, because you can work faster when working simultaneously with both. As you can see I start to ‘burn’ in the lighter areas in the suede that I think need to be a little darker than they are, because it looks a little worn away, due to the suede fabric.

Toggle your retouching layer on and off to see your transformation before and after! If you feel like you need to keep going, keep using those tools to achieve the look desired. I bet your product looks great now, but let’s keep going to make it even better!

Step 3: Quick color adjustment

3 Quick Color Adjustment from Pixelz on Vimeo.

Although you have made some adjustments in RAW, I like to make a few more adjustments in the post production process in order to make my products pop! Start by making a curves layer. This adjustment layer is a little tricky to grasp at first, but once you do, it is a great tool to use to make your images look amazing.

When using this adjustment, you must know that the top of the curve affects the whites, the middle affects the greys and the bottom affects the blacks. So when looking over your image, see what you think needs to be popped a little in the greytones. In my case, I felt like I needed more contrast in the entire image, so I pulled the whites to be brighter and the darks to be darker.

If you look at the bottom and side of the curves box, you will see a gradient from white to black. This helps you know that whichever way you pull each of those sides, it will either get lighter or darker. After making those tiny adjustments, I felt that overall the image needed to be brightened, so I took the middle and pumped it up so the entire shoe brightened.

Photographing certain colors can be tricky, so have your product on hand at the time you are retouching. This will help you change the colors if needed. Since I shot a black heel I need to neutralize the suede because sometimes the colors around the image show into the blacks instead. I have made a Hue/Saturation layer which can affect the colors (ex: from red to purple) and how vibrant they are (ex: from pale to neon)

ex: from red to purple

ex: from red to purple

ex: from pale to neon

ex: from pale to neon

When changing a color to another color, use the hue toggle in your adjustment layer and move it until you see the desired color you need. If it’s too saturated or vibrant use the saturation toggle, and move to the left to desaturate and move to the right to make it more saturated.

I wanted to desaturate my blacks so I toggled the saturation to the left. I didn’t want my adjustment to affect part of my product, because it’s color needed to stay, so I selected the little white box in my layer and “masked” out the areas that I didn’t want affected. This basically tells your adjustment layer “do not touch”, which is great because sometimes you may not want to change one part of an image or product. I then used the Brightness/Contrast layer adjustment to pump up my contrast just a tad more, in the black and whites, which helped my suede to really pop. Then I flattened all of my layers to the retouching layer, so I could see my adjustments before and after.

Step 4: Making File & Alignment

4 Making File & Alignment from Pixelz on Vimeo.

Most e-commerce websites set the same file size guidelines for their images, but make sure of this because some categories are different on each site. You can easily go to the website you will be utilizing and find this information. When making your document, use the maximum dimensions available to use, because your images will look their largest and best when viewed by your customers.

Image Alt

Start by creating a new document under File>New. Since now you know the image dimensions necessary, change your dimensions to Pixels and make your file size to whatever your maximum dimensions needs to be, and make sure your resolution is 72 dpi and that your background color is white. I named my image like the shoe with an _1, and going forward I will mark them numerically in their set of images. I don’t have a specific naming organization for this file, but most people name their image files by their products style, and color code numbers, to stay more organized going forward in your process.

For easy small corrections, use the Patch tool. For challenging areas, use the Clone Stamp tool.

After you click okay and have created your new image file, drag guides on your file evenly from top to bottom and side to side. These will be your guides to contain your product within, so your images will stay aligned throughout. Drag your flattened, retouched product image onto your new white background file. You will need to resize your product within the margins that you made with your new guides. Make sure to align the bottom of your product, in my case the bottom of this heel, so your product stays consistent and grounded throughout the image set.

Once your product is centered in the image within the guide margins, use your Magic Wand tool to select the current background of your product. Then go to Select>Refine Edge, and you will see the selection you have just made around your product by smoothing out your edge. Within this tool you can run your circular tool around the edge of your product, and the tool will naturally cling and tighten around it.

Then make a mask of this selection by clicking the button with a little square with a circle inside the middle. It will automatically attach a mask onto your retouched layer. If you enter into your mask by clicking “\”, you can check your mask to make sure everything is masked like you want. In my case, I had a little bit of the shadow in the image that I wanted to take out as well. You can use your brush tool to simply brush out those parts unwanted. Click “\” again to exit your mask mode. And now your product is sitting on your white background!

Step 5: Shadow & Saving

5 Shadow & Saving from Pixelz on Vimeo.

One last step before we are finished! If you’d like to make your product pop even more, try adding a shadow! This will help ground your product and give more depth to the image.

Because I photographed my product on white with window light, I naturally achieved a shadow underneath the heal. I will bring back the shadow by duplicating the retouched layer. I delete the mask that is on the bottom layer – now you can see the shadow appear. Then I desaturated the shadow, because it looked a little red to me. I made a new mask on my layer, in which I will brush out everything in the layer, except for the shadow under the shoe. Make sure your brush is extra feathered so it’s a smooth transition. VOILA! Here are the before and after of my beautiful product images!

Before

Before

After

After

Now that your product looks great, let’s save and move forward! Save your finished .PSD file so you have your original to go back to if needed. Then, save a .JPG file so you can use this on your website! Now that your first file is all done, it’s time move onto the next file in your set. Follow the same process and save out your new file with the post-fix ‘_2’ and so on.

I have been retouching for a long time and everything has become second nature to me so it is hard to give you an accurate time frame that it will take you. Once you get started be patient with yourself, when you start doing it more and more you can get faster and faster.

Invisible Mannequin Photography: Increase Apparel Sales With This Post-Production Technique