Workflow & Automation

Product Pictures That Finally Look Like a Set

The problem is almost never photography. It is that nobody wrote down what a product picture here is.

Every individual picture is fine. Together they look like a jumble sale, and the fix starts with a ten minute specification rather than a camera.

A tools menu with background studio and mockup generator

Open almost any small shop and scroll the category page. Some products are on white, some on a wooden table, one has a shadow, one is floating, two are slightly warmer than the rest, and one is a photo from the manufacturer with a watermark in the corner.

Every individual picture is fine. Together they look like a jumble sale, and the reason is not photography. It is that nobody ever wrote down what a product picture on this shop is.

Write the specification first

This takes ten minutes and pays for itself immediately. Decide, once:

  • The canvas. Square is the safe default because grids, thumbnails and marketplaces all like it. Pick one ratio and never deviate.
  • The margin. How much empty space around the product, as a percentage of the canvas rather than in pixels. Something like ten per cent. This is the single biggest driver of whether a grid looks calm.
  • The background. One color, one gradient, or one surface. Not three.
  • The shadow. Present or absent, and if present, always the same direction and softness.
  • The angle. Straight on, three quarter, or from above, consistently.

The margin rule is the one people skip and it matters more than the background. If one product fills its frame and the next sits small in the middle, the grid looks broken even when both are on identical white. Scale each product so it occupies roughly the same proportion of its canvas and half the problem disappears.

Cutting out without the tell-tale halo

If you are putting products on a consistent background, you have to separate them from whatever they were shot on. The mechanics of that are a subject of their own, but three things specific to products are worth saying.

Subject detection is very good at products. Manufactured objects have clear boundaries and detection handles them well. Select the subject, turn it into a mask rather than deleting anything, and you are most of the way there.

Refine the edge before you judge it. A cut-out looks perfect against the old background and reveals every flaw against the new one. Put it on the final background first, then look.

Glass, chrome and anything transparent will fight you. These need the reflections and the see-through parts kept, which no automatic mask does well. Either shoot them on the background you actually want, or budget real time for them.

A tools menu with color schemer, background studio, screenshot beautifier and mockup generator
Background Studio can build the surface from the colors already in the document, which keeps a whole range in the same family.

The shadow is what sells it

A cut-out product with no shadow floats. It reads as a sticker, and the eye files it as artificial without ever articulating why.

A believable contact shadow follows three rules. It is darkest and sharpest right where the object touches the surface, and it gets lighter and softer as it moves away. It goes in the direction the light is not. And it is never pure black, it is a dark version of the surface color, because a shadow is a surface with less light on it rather than a black shape lying on top.

Get those three right and a flat cut-out sits on a table. Get them wrong and no amount of gradient will help.

If the product was photographed with a real shadow, keep it. Mask it back in at reduced opacity. Real shadows have a subtlety that is genuinely hard to fake.

Consistency is a settings problem, not a talent problem

Here is where it gets fun, because this is exactly the kind of repetitive precision that software is better at than people.

Record the sequence once as an action: the resize, the background, the adjustment, the sharpening. Then apply that action to the whole set through the image processor, as new attachments rather than overwrites, and every picture in the range gets literally the same treatment.

Recording an action and playing it on one image is free. Applying it to a whole set in one go is the Image Processor, which comes with WunderPaint Pro.

Not similar treatment. The same. Which is the thing you cannot achieve by eye across sixty products on a Tuesday afternoon, no matter how careful you are.

The same run handles the export: the format, the quality, the maximum size, optionally a watermark. So the output is not only consistent in appearance but also in file size, which your page speed will notice.

When you do not have a photograph at all

Sometimes the product does not exist yet, or it is digital, or the manufacturer supplied something unusable. A mockup puts your artwork onto a rendered object: a box, a book, a phone, a shirt, a monitor.

Two rules keep mockups honest. Match the light: if the mockup is lit from the left, your artwork should not have a shadow falling left. And do not use the same mockup scene for every product, or your shop looks like a template gallery.

Used sparingly, they are excellent. Used for everything, they read as placeholder.

A mockup studio placing artwork onto a rendered product
Mockups are a supporting picture, not a substitute for showing the actual thing somebody is buying.

The detail shot nobody takes

One last thing, and it is not about consistency at all.

Buyers zoom. Not on every product, but on the ones they are seriously considering, and what they are looking for is texture: the weave, the grain, the seam, the finish. A single close-up at full resolution answers questions that three more catalogue shots do not, and it is the picture most small shops never take.

So: keep the set consistent, keep the framing calm, keep the shadows honest, and then give people one picture where they can see what the thing is actually made of. That combination does more for trust than any amount of retouching.

Table of Contents

Learn it by building something

Every week one thing you can make the same afternoon, from dynamic templates to 3D type. Written down step by step.

One mail a week, and then it ends.
Unsubscribe in one click.

Free

Chaos Art

Autonomous painters make one-of-a-kind abstract art in 3D space - gestures, art movements, painterly media, and embeds that paint a new original for every visitor.

Download the free WunderPaint Plugin for WordPress

The Image Editor & Design Studio

Everything described here can be done in the browser, on your own site. The live demo runs the full editor with nothing to install.

Design Tools

Brush & Paint Styles

Paint with six styles that mix pigment instead of blending it, pick from thirty-seven tips shown as real strokes, draw a tip of your own out of shapes, and let the color travel along the stroke.

Workflow & Automation

Dynamic Templates: Build the Design Once, Let Your Posts Fill It In

You build the layout once, tell a few layers where to get their content, and from then on every post, product or page renders its own version.

Print & Craft

Making Things That Fold: Dielines, Duplex and Why Previews Matter

A gift box, a paper crane, a bunting banner. They look simple, and they fail in ways flat design never does, because there is a second geometry underneath.

WordPress Images

Why Should a Design Become a File at All?

Every static graphic on a page is a snapshot of what was true when somebody exported it. There is a whole category of quiet wrongness that follows from that.