How to easily create “in-device” screenshots
Here’s an easy way to get a screenshot of a website so it looks like it’s in a mobile device.
Perfect for creating your portfolio images, or updating your old images to use more modern device frames.
Note: all images are linked to larger versions so you can more easily see details.
Download Chrome for Desktop or update Chrome
You may already have the Chrome browser installed. If not, download Chrome for free.
On a Mac you can check Chrome > About Google Chrome to make sure you have the most recent version (set up auto updates if not already enabled!).
Open Chrome & the page you want to display
Just like you’re surfing the web. Now we’re going to dive in behind-the-scenes.
Enable Developer Tools
In Chrome, find the “three dots” menu at the top right of the browser window and choose More Tools > Developer Tools. Click that, opening the Developer Tools panel (may be a sidebar, at the bottom of the window, or a separate window entirely). Or, on a Mac press command-shift-I (capital I as in Ice Ice Baby) to open the panel.
Go into Responsive mode
At the top of the Developer Tools panel find the icon that looks like a phone and a tablet. Click that, which constricts the viewport and adds the “device toolbar” above the current webpage. Or, on a Mac press command-shift-M to show the device toolbar.
Choose the device you want
Find the “Responsive” menu at the top of the new interactive bar and choose the device you want to emulate.
Choose to show device frame
If the resulting viewport doesn’t already have the device frame around it find the “three dots” menu at the top-right of the device toolbar and select “Show device frame”.
Rotate the device, if wanted
You can rotate the device by finding and clicking the rotate icon in the device toolbar.
Choose Capture Screenshot
(It's okay if the device frame is cropped by your browser window. The resulting image will still be complete.) From the same “three dots” menu choose “Capture screenshot”. This will download a PNG image to your downloads folder (wherever that might be). You can also access the download from the toolbar that appears at the bottom of the Chrome window or on a Mac from Window > Downloads.
Now with just a few clicks you have a PNG image of the webpage inside of the device you selected, ready to place into your portfolio image layout PSD.
Design comps in a device
If you want to show design comps rather than a live site, use this technique to get a device frame PNG and then mask in your website artwork.
Hope that is helpful!
