Let's say you want to screenshot an entire web page at a specific size. I often do this to embed them in a device mockup of a laptop or mobile phone to create marketing materials.

Example of a stage file to embed your own product screenshots

But you need to get a decent screenshot of your site and at the right dimensions. Fortunately you can do this in Google Chrome with no additional extensions. 🤗

1. Open the Dev Tools

In the top right of Google Chrome, select the menu, go to More Tools and select Developer Tools. You can of course use the hotkey if you wish.

2. Select the Toggle device toolbar button

When active it will allow you to simulate the responsiveness of your site based on a range of profiles. For us, we can use it to put the website at a specific size and access the screenshot option.

3. Set the size you want your screenshot to be

You can use one of the predefined sizes such as an iPhone, iPad, Galaxy, etc. Or you can select Responsive and enter the specific dimensions you need.

4. Capture Screenshot

Select Capture screenshot from the device area menu

In the top right of the preview area is another menu which you can then select Capture screenshot. This will save the file to your computer. You can of course select Capture full size screenshot if you want the entire page including the contents below the scroll.

Now that you have your image, you can use it as you wish. In this case, I can insert it into the placeholder of a device mockup PSD file.