Product Images and Making the Hero Shot

Design & UX
1

(Linked from the SitePoint Design Newsletter)

What does the phrase ‘hero shot’ mean to you?

For me, it will always be Luke Skywalker careening down a Death Star trench. Pew pew pew!

But I know that to most of you the ‘hero shot’ is the prominent poster image usually at the top of a layout. Of course, on a product site, this will most often be the product itself.

There’s an interesting sub-genre of graphics software dedicated entirely to preparing these images.

I’ve tested a few and thought we might skim across a few options.

RotaryView & Arqspin

There are services like RotaryView and Arqspin that are both dedicated to helping you to produce interactive 3d rotating views of your product.

They take care of the technology side, but generally require iframes and a monthly subscription - a dealbreaker for many.

Of course, these solutions assume you have the finished product in your possession. If you’re mocking up a virtual or proto product, you’ll need another approach.

ProductShotPro

ProductShotPro is a Photoshop-based set of interactive SmartObjects that make it very easy to map 2d book covers and labels onto 3d books, bottles and other objects.

This system works really well and is very reasonably priced. Single product templates are $29 – that’s all most of us will need – or you can get the whole set for $200.

If you do a lot of product shots, ProductShotPro is a worthwhile investment.

PSDCovers

At SitePoint I’ve been producing book mockups PhotoShop actions from PSDCovers.com. These are a little more complicated to use, but they have a great range of template types – and they’re free to use.

Also note that you’ll encounter a bug if you’re using the latest version of Photoshop CS 2014. Happily, they’ve worked out a workaround until a permanent solution is made available.

It’s certainly worth testing PSDCovers actions before you spend on anything else.

2

[quote=“alexmwalker, post:1, topic:115148”]
There are services like RotaryView and Arqspin that are both dedicated to helping you to produce interactive 3d rotating views of your product. LINK - https://rotaryview.com/home/ LINK - https://arqspin.com/product-tour/

They take care of the technology side, but generally require iframes and a monthly subscription - a dealbreaker for many.
[/quote]Sorry, but that rotating image is horrible. It makes me feel so nauseous I couldn’t actually read the article until I found a way to disable it.

Being able to see a 360° view of a product if/when I choose is a great bonus, but I would strongly advise against a moving image with no means to pause/stop the movement. (It’s an accessibility fail.)

3

The product itself doesn’t animate unless you interact with it – but it’s difficult to demonstrate that idea in flat newsletter/post, so I recorded it animating. Point taken though.

1 Like
4

Ug, my bosses want that rotating crap. Anything that seems shiny, they want. They wanted marquees and flashing fade-in videos going on behind the websites too, until I managed to convince them that the 90’s are gone. That and the sites they were looking at were basically nothing more than large brand-oriented advertisement website-billboards, not useful web sites with content. Nobody goes to the BMW site to buy a car, they go there to oggle at the shiny new stuff BMW is doing. Doesn’t match us at all.

How they couldn’t see the difference was beyond me. Those are two separate things.

I can guarantee we will get more laughs than oohs and aahs when a page loads with 30+ rotating nearly-identical Brother multifunctional printing machines or office-cafeteria-supplies like Cup-A-Soups show up on a page.

Hell, okay, I do want rotation for those things, it would just make life at work so much more fun, I’d be giggling all over…

1 Like
5

I think if it’s an item you would instinctively pick up and turn around in your hands, I think a rotating view can be useful. Running shoes would be a yes. Cup-a-soups are a no. Printer cartridges might be useful if it helped reassure you it was the right refill format.

I wouldn’t ever use iframes though. Seems like a perfect use for HTML5. Even a CSS only version might be possible. I might try a codepen on that.

6

Was just sent some Javascript plugin that does this yesterday, though I don’t know the name because they called it “HTML5” (which I guess is what they call things that are not Flash).

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.