Ask HN: How do you create product screenshots?
5 comments
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 :)
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.
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.
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.
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.
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.
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... 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!
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... 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!
That is brilliant! Thanks a lot, I'll get right on it :)
Just checking in, did any of that work out for you?
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.
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.
Good point. I might try both with and without the fake monitor and see how they look.
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.
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!
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.
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...
Anything in the background will be hidden, you will have a clean image with white background.
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...
Anything in the background will be hidden, you will have a clean image with white background.
Thanks for the advice. I'm on a PC however and I'm not aware of similar functionality.
alt+print screen in windows. It takes a picture of your current application. I use it all the time.
You can see examples of what I mean in most of the themes out there: https://wrapbootstrap.com/tag/landing-page
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.
Any suggestions are much appreciated!