Quickly generate product screenshots in realistic environments | Hacker News Reader

Quickly generate product screenshots in realistic environments

placeit.breezi.com

398 pointsNirDremer90 comments

This is a more of a rant on an overall trend than criticism of this site completely, but I honestly do not understand the "drag to upload a file" interaction at all.

I'm in all likelihood going to need to navigate through a bunch of folders to locate what I want to upload anyway - why force me to open up Finder, reposition it so that my browser and finder are both visible, with the "drop area" visible as well, find my file and drag it over? With the default file upload that HTML provides, it's going to open a conveniently sized open window from the start, with a clear call to action on how to select the file in question, and no requirement for an awkward drag into some box on a webpage.

It really feels like prioritizing "cool" interactions over usability.

1. The default file chooser on windows is horrible.

2. With multiple monitors, multiple desktops, etc, quite often people will have their working files open anyway.

3. You can drag a picture straight from another open browser tab so it never needs to touch your browser.

4. Most sites give a choice of either method.

5. It's a fairly intuitive action. I know that I caught older family members struggling when they used to drag images and then the image would display in their browser. At this point they thought the photo was online and would be confused when they couldn't then find it on the site when they came back to it later.

>1. The default file chooser on windows is horrible.

It's really not though. I've never had a problem with it.

I've always thought it was better than Finder, and is still one of the few things I miss from Windows. I could go into why I feel this way but I don't want to go off on yet a other tangent away from the main topic.

6. file pickers are frequently modal, so you can't do anything in other tabs while trying to find a file.

Flashfolders for Windows adds a small bar on top of open/save dialogs and makes them sooo much more convenient:

- go directly to currently open explorer window!

- paste path!

- two-click favourite folders

- two-click history

- switch to most recent folder (lasts through restarts)

loads at startup, consumes 2MB of RAM and doesn't slow my 2005 XP laptop down at all

"reposition it so that my browser and finder are both visible, with the "drop area" visible as well"

You can grab a file then Cmd(or Alt probly)+tab back to your browser window and drop the file.

Don't get me wrong I don't like drag and drop interfaces for the most part. If you do have the folder open you are working on in the background, drag and dropping different files can be quicker than using a choose file dialog.

My modus operandi is setting up bottom right corner of the screen as a hot corner for Show Desktop. Just bump your mouse down the bottom right, open up a finder window to find your file, start by dragging the file down to the right corner, which resets all windows – and the just drop! This is obviously even smoother for files that are already on the desktop.

It's kind of annoying on a tiling window manager (i3) as well since I otherwise don't often open a GUI file explorer. On the plus side though I guess when I do open it, they're always both visible.

On ubuntu, I'm currently using xmonad without gnome, and thus no nautilus (or whatever other thing it is that opens Finder-like windows and generally tries to behave like the Finder) by default.

Whenever I need to drop something into a web page, I find myself starting up a one-off nautilus and dragging from that.

I seem to recall there is a tiiiiny utility you run like "drag_target <filename>", and it pops up a window that is a drag target that plumbs <filename> through when you drop it somewhere. Does anybody recall the name of that utility ?

Has the site changed since this was posted? For me it has an "Upload Image" button.

You need to get Default Folder...

Also, you know you can Exposé/Mission Control mid drag — makes dealing with window clutter ridiculously easy.

I just opened a tab and searched for some iPhone app screenshots in Google Images and dragged it back into Breezi, all without touching my filesystem[1].

[1] I should say _technically_ it did touch my filesystem as that image was probably yanked from a local cache of some sort, but to the user this feels intuitive and not invasive.

You can easily drop many files and even folders in Chrome. With a file selector this is not as easy to do And it feels more natural to pick something and drop it somewhere rather and go digging into a file picker which never open in the right hierarchy.

Seems like this guy's images became somewhat handy afterall:

https://news.ycombinator.com/item?id=5794083

Was somewhat sure these were the same but wasn't sure how to find the old post. Neat to see it come full circle.

replax, I bow to thee. How the heck did you figure that out!

Nice. http://placeit.breezi.com/cade2ae

Nicer: http://placeit.breezi.com/e0d7579

http://placeit.breezi.com/3c07b95

Holy shit that is creepy. What/who is that?

Who is right! Doctor Who villain, the Slitheen: https://en.wikipedia.org/wiki/Slitheen

I like http://placeit.breezi.com/f1bcb26

And of course, http://placeit.breezi.com/b0ddd82

Edit: I was bored. http://placeit.breezi.com/d0f04d5

http://placeit.breezi.com/uploads/productshot/716230/breezi_...

Tips x 6 + gift, please:

http://placeit.breezi.com/b0b75c3

This should save a lot of people a lot of time. FYI it's all done under Creative Commons license allowing commercial use of the images.

with attribution

http://breezi.com/blog/using-placeit-images-for-commercial-p...

You’re completely ok to use PlaceIt-generated-images for commercial use. You just need to attribute PlaceIt if the work is publicly displayed. We’re ok with any attribution so long as you’re clearly not trying to be an asshole and just burying it. Doesn’t have to be large or very prominent either. Anything along the lines of mentioning PlaceIt is fine. We’d obviously really appreciate a link back.

Hmm, I certainly won't 'watermark' my app store screenshots and distract potential customers. I'd rather pay a fee to breezi for using the templates.

You can mention that you used them in the app description.

This is fantastic. I'm surprised I haven't seen something like this before. I think you've got a great potential market here for monetizing. It's like stock photography meets product upsell.

My first suggestion would be to get similar shots to those you've already done with a female replacing the male. It's an easy way to add more shots quickly.

I also like the idea of more scenes including people. Make it look like they're having fun and also using the phone/tablet at the same time. Smiling faces sell products!

Yes, absolutely fantastic.

"Hands holding photoshop-able screens in environments" is rich photographic territory. I would also love to see fat hairy hands, dark-skinned hands, waxy old hands, prosthetic hands, etc.

Thanks for sharing, I'll be using it on my revamped marketing site.

I think in terms of conversion, potential users emphatically see themselves using the product with their device with this type of frame (opposed just a screenshot with no device frame).

However, I would suggest several PC shots. Like Lenovo laptop, Dell monitor, etc instead of being so Apple-centric.

I was trying to find screen reflection :)

The iPhone 5 screenshot area is off. Top left corner too high, top right corner too close to the right, two bottom corners too close to the right so perspective looks incongruent.

Actually content areas in almost all templates are slightly off. All these screens have gaps around them, it’s chrome - bezel - screen gap - pixels. Consider shooting template images with the device showing a solid color so you have the actual image area baked into the original, not with the screen turned off because you’re more likely to get the placement wrong that way.

Found it on HN on January and... Why it's free?!

I would be glad to pay for each screenshot generated because saves plenty of time and simply makes presentations look way better.

There is a channel (you already have it), there is a real problem to be solved and it's something people would pay... Sounds brilliant :)

I bet its free because now I know what breezi is, and I didn't before Jan. I agree this is an awesome service. I would shell out a few for it too.

We're keeping it free for now until we release a much larger library of imagery - at that point, we'll decide what makes the most sense.

Maybe 30 stock images for free, gain access to larger library for flat fee.

Only Apple products there - why tailor to the minority? Globally Apple has around twenty-something percent of smartphones, thirty-something percent of tablets and ten-something percent of 'PC's'. You wouldn't suspect if you looked at the media though where it often is Apple or bust. I never understood this herd mentality and I still don't. People will start dropping Android screenshots in your iProducts, Xmonad runninng on Macs (OK, that is plausible but still...), Windows will suddenly magically run on more iProducts, etc.

Diversity is good. Apple is not very diverse. Why not add something else?

You didn't look far enough. There are Androids and Windows Phones / Tablets to the right.

Ah, better. Now mix them so there is no selection bias.

Surely it would make more sense to group them? If I'm going to be creating a universal application for iOS, it would be much easier to see all the available options.

That said, I do think the other platforms should be given some sort of visibility to show that they're actually present.

I looked far enough. There are very few, especially compared to the endless procession of Apple products, and there are not desktops or laptops.

Simple:

- Apple hardware looks better (regardless of what you think of the rest of it)

- Apple hardware is less distracting (more minimalist than most non-Apple stuff) so the focus is on the product itself

- Apple has the single most common hardware models (Android may be more common overall, but the iPhone is more popular than any single Android device).

I mean really, who wants to have their app surrounded by some clunky boxy Dell laptop? You're basically sending the message of "look at how out-of-date we are". It's not about market share of devices, it's about perception of your product.

Maybe someone wants to send the message of "We're available on Windows/Android only"

It's not just about looks, y'know.

Isn't working for me right now...possibly server load? But great idea. I too would pay. And I second the suggestion for more diversity in the shots. E.g., I could use one right now in the hands of a Hispanic teen girl. In general, I would need more women.

Yes - try in a little while pls

Give it a try now - and we'll add more women - thanks

If you do an image search on google you can actually find companies which are using them... for example:

http://sobytes.com/world-news-translate-piechart-news-option...

( Did the image search with this one: http://placeit.breezi.com/uploads/stage/stage_image/113/bree... )

This has been discussed before over here - https://news.ycombinator.com/item?id=4988914

Previous Discussion: https://news.ycombinator.com/item?id=4988914 (118 points, 66 comments, 221 days ago)

I used this for a mock that I posted on Dribbble[1]. I remember when it was first released and there were only a few templates so it's great to see that it's still growing. If the OP is here, how hard would it be to have a scene with multiple images?

[1] - http://dribbble.com/shots/1023533-Moneys-Mobile-Digital-Wall...

It looks very nice.

Is it possible to add glare/reflection to the actual screen? It would make it look more 'integrated' into the photo's surroundings.

Some have reflections and glares on them already

I created an opensource alternative a few months back, called snappshot. (https://github.com/justinjudd/snappshot)

Right now I have just posted my own images, but my goal is to get other photographers/individuals to add photos of different devices.

I am updating my webserver right now, but for now you can run it locally or deploy it yourself.

realistic Apple environments :-)

(I realize there are one or two Android and Windows phones in the list, but still...)

Brilliant. Bookmarked.

Would love some Windows-y machines as well, all laptops are Macs. (Which is what I use, but still live in a world of Windows laptops)

I love breezi. Unfortunately, it is against Apple's marketing guidelines to use their product in unauthorized ways to promote your app. It is loosely enforced, but they have pointed it out to us and asked for a takedown (politely). They can also hold it against you if they're considering you for a feature.

Are you saying you've used the "iPhone being held"/"Photographed in context" style before and Apple told you to take it down? I would be interested in this because I've been considering this style for my landing page update.

We have. But that's because we're a big publisher and Apple manages our account with humans. They expect us to follow their rules (in return for heightened visibility with the iTunes store curation/editorial/marketing folks).

Looks great, but it's taking forever to process the image. And I'm sure that because the app provides no feedback or indication that your image is queued, people are probably stopping the process and re-trying their upload which probably only slows things down tremendously!

Why not transform the image on the client side? It will save load on the server.

But it's a nice idea!

I really want to share this with people, but it's horrendously slow. I uploaded a 2048 x 1536 image generated from my iPad, and it has been processing it for the past 10+ minutes.

edit: over 20 minutes now. I had to restart it.

It is on HN frontpage, I bet that would be the primary reason why its so slow

Not working for me either, but I have to imagine the combination of image processing and HN front page isn't terribly kind to a webserver.

Feature request: stages like these http://www.slickwebsite.com/img/showcase1.png

Also, stages with transparent background would be nice

Amazing. Thanks for sharing this. I'd been searching for stock images like the ones offered here in which to superimpose screenshots but always came short so just didn't bother. Now I'll bother.

nice idea. i can see people paying for this to use some premium background images. 3-4 generic ones are free, you could offer up a lot more custom ones for a small fee.

I do wonder if something bad happens if you try to screenshot the screenshot script url, being a get request and all.

something goes wrong

We had a little bit of fun with these:

Images + Discussion: http://www.xerq.net/showthread.php?158334-XERQ-marketing-at-...

Images Only:

http://i.imgur.com/cN6JnLh.png

http://imgur.com/ZP26pAQ.png

http://imgur.com/of7SN4p.png

http://imgur.com/RDPznPc.png

http://imgur.com/ZyKmPkl.png

http://imgur.com/xJu3fE1.png

http://imgur.com/F9T34z7.png

http://imgur.com/OQiCHx5.png

http://imgur.com/sl892ST.png

http://imgur.com/TrOHEyb.png

http://i.imgur.com/9BDMxZz.jpg

http://i.imgur.com/qUUA1mx.png

*Some pictures may be NSFW

Can I have one context photo with a laptop on the top of a roller coster ? This could be a good introduction for a VC or startup conference presentation.

I would suggest to provide HP or Dell computers too because Apple computer everywhere is getting boring. Ask them to giveaway the laptop as marketing campaing.

Correct me if I'm wrong, but it seems like you are sending a Safari user-agent string for all of the devices.

It might be worthwhile to send the proper user-agent strings for each device, so that you'll get a custom response from servers which dynamically generate content based on that header.

awesome service!

any chance of getting a good ol' boring office version maybe with a real monitor or just a laptop on a desk? the kind of people i would use this for really dont go for "macbook air with a notepad in the garden"

Awesome. I was just the other day thinking that there should be this exact service when considering doing one of these shots. This is going to save me a lot of time, thank you. Will be much easier to create marketing assets.

I loaded up my first screenshot sequence of the day. http://placeit.breezi.com/3443524 Please advise on how to kick up the 4d3d3d3

I'd love this as a webservice (I'd pay). I need to create product shots for every customer I have (white labelling) and it would be awesome to be able to generate them on the fly.

Would be awesome if this had stages for industrial environments.

Yes, that would be fantastic.

I'm guessing it takes a higher resolution image than what the device would use? The sites I tried ended up rendering wrong in terms of what media queries were used...

I tried to drag and drop one of the images on top, but I get:

We're sorry, but something went wrong.

We've been notified about this issue and we'll take a look at it shortly.

Yes, sorry try it in a little while. There's a lot of load right now

Should be good now

I was just looking for something like this. Works great!

Very nice. When I typed the url of my own website, which is responsive, it didn't get the responsive version. If it did, it would be perfect.

I'd love a way to filter the options. Scanning through all the pics looking for all the laptop ones (for example) is annoying.

Otherwise: I like it!

It doesn't work at all for me. I just keep gettign 500's

what are the terms of use? what is breezi doing with my uploaded screenshot? can I find that out somewhere? are the screenshots stored on their servers?

url2png is kicking my butt when it comes to conversions!

They get around 5 new customers for every 1 new linkpeek.com customer.

Awesome idea. Great execution.

Reply on news.ycombinator.com