
Ask HN: How do you create product screenshots? - peacemaker
I'm wondering what people use to create really nice looking web app screenshots?  Especially those that are usually shown on landing pages, embedded in a laptop/ipad image to look realistic.  I'm assuming those aren't just actual photos of the laptop running your product, are they?<p>You can see examples of what I mean in most of the themes out there: https://wrapbootstrap.com/tag/landing-page<p>I'm not much of a designer but I'm trying to bootstrap the design, at least for my MVP, and having trouble getting nice looking images.<p>Any suggestions are much appreciated!
======
mnicole
_Paparazzi!_ for OS X 10.6.8+ (<http://derailer.org/paparazzi/> \- older
versions also available) lets you choose the dimensions of the browser (so you
can take screenshots of responsive/mobile designs), allows you to take a full-
size shot of the page (no fold) and allows you to create Automator actions to
do bulk screengrabs or anything else you can think of. You can also interact
with the page within the app to show different states/drop-downs, etc. And
it's all free :)

~~~
peacemaker
That sounds great! So once you have the screen shot, you just drop into
photoshop and position it over another image of a laptop to get the desired
effect?

I have something called Awesome Screenshot for chrome which lets me capture
parts of the screen. My issue is that it never looks quite as polished as I'd
like. Perhaps I'm just lacking in design knowledge and will never get it as
good as I'd like.

~~~
mnicole
Yup! I'm not sure what you mean by "never looks quite as polished".
_Paparazzi_ is like a little Webkit browser, so you're seeing the page exactly
as it would be rendered in Safari. You have to click the little hand icon
(bottom left) to interact with the site itself though, otherwise it looks like
it's just taking a static image of the URL. The screenshots make it look like
it's literally making little thumbnails, but it's really rendering at the
dimensions you set.

~~~
peacemaker
Well, see <http://wrapbootstrap.com/preview/WB02634G3> for example, the top
images show a laptop with the web app on screen. I've tried countless times to
take a screenshot of my app, grab a suitable laptop image and use photoshop to
combine them to look good. But it always looks bad.

Like I said before, it's probably just a lack of design skills on my part to
get the image to look 'right'. Thanks again for the suggestion, I'll give
Paparazzi a try.

~~~
mnicole
Ah, so the issue is fitting the screenshot into a laptop. There might be a few
things at play here.

Are you using Layer Masks in Photoshop to accomplish this? If not, select the
layer of the laptop in your Layers panel and click on the third icon from the
left (a circle inside of a square) at the bottom of the panel. It will create
a white box next to your layer preview thumbnail. It should automatically
select the white box, but if not, go ahead and click on it. Then make a
selection around the screen on the laptop and press delete. Place the
screenshot of your site behind the laptop layer and adjust to fit within the
dimensions of that selection.

For some reason in my version of Photoshop, it will show a bit of the original
background behind the mask. To hide this/make it fully transparent, right
click on the mask in your Layer panel and choose "Refine Mask". Then under
"Adjust Edge", move the "Shift Edge" slider from "0%" all the way to the left
to "-100%". Your View Mode should also be set to "On Layers" (which is
hopefully the default, but just in case).

If the problem you're having is that on resize, the screenshot looks "fuzzy"
or not as crisp, follow these directions -
[http://www.missiondata.com/blog/design/372/sharpening-
screen...](http://www.missiondata.com/blog/design/372/sharpening-screenshots-
in-photoshop/) and tweak as necessary.

TL;DR, open/paste the screenshot as two new images, go to Image > Image Size
and set the Resample Image (at the bottom) to Bicubic for one and Bicubic
Sharper for the other. Put the Bicubic Sharper image layer over the fuzzier
Bicubic one and fade the opacity out as necessary. You may need to apply the
Sharpen filter to make it a little more crisp too.

Hope that helps!

~~~
peacemaker
That is brilliant! Thanks a lot, I'll get right on it :)

~~~
mnicole
Just checking in, did any of that work out for you?

------
krapp
Don't make a fake image of your product on an image of a computer.

It's a waste of pixels showing a picture of an app on a fake monitor on a
user's actual monitor. It's too easy to fudge things in such a way that it
wont actually render the way it would on the actual device (because after all,
it isn't, actually) and if the user doesn't own the type of monitor you're
fudging, well, then assuming what you're showing is accurate, it doesn't
really matter to them anyway.

I'd suggest getting an actual screenshot, sans device, and just use those.

~~~
peacemaker
Good point. I might try both with and without the fake monitor and see how
they look.

------
Avalaxy
Please don't do that. It's sooooooo 'standard'. Everyone does it because it
looks 'pretty', but the fact that pretty much everyone does this nowadays
makes it look really really cheesy.

~~~
peacemaker
What would you suggest instead? I'm a developer not a designer and so I'm
taking design examples from others far more qualified to makes those
decisions. It seems the screenshot on device image is quite common but I can't
think of anything else now!

~~~
Avalaxy
I would create a nice and simple graphical explanation of how the app/service
works. I don't see that nearly as often as I'd like.

------
fuzionmonkey
Assuming you use a Mac, here's what I do:

1\. Open up your web app with Safari

2\. Hide navigation and bookmark bars

3\. CTRL+ALT+SHIFT+4

4\. SPACE

5\. Click on the window

You now have a sexy screenshot that will look like this:
[https://f.cloud.github.com/assets/98681/461852/dcd23422-b44d...](https://f.cloud.github.com/assets/98681/461852/dcd23422-b44d-11e2-8ba7-b6abc6a47ba6.png)

Anything in the background will be hidden, you will have a clean image with
white background.

~~~
peacemaker
Thanks for the advice. I'm on a PC however and I'm not aware of similar
functionality.

------
rsankar
alt+print screen in windows. It takes a picture of your current application. I
use it all the time.

