3 ms·

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

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 13y ago
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 13y ago
  Well, see http://wrapbootstrap.com/preview/WB02634G3 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 13y ago
    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-screenshots-in-photoshop/ 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!
    - peacemaker 13y ago
      That is brilliant! Thanks a lot, I'll get right on it :)
      - mnicole 13y ago
        Just checking in, did any of that work out for you?

mnicole 13y ago

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 13y ago
Well, see http://wrapbootstrap.com/preview/WB02634G3 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 13y ago
  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-screenshots-in-photoshop/ 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!
  - peacemaker 13y ago
    That is brilliant! Thanks a lot, I'll get right on it :)
    - mnicole 13y ago
      Just checking in, did any of that work out for you?