: What is the tool that web designers do to present prototype How do some web designers present their responsive website prototype in a computer, tablet and mobile presentation like this

@Eichhorn212

If your question is how to see your website displayed on different devices if you don't have them, then a smart solution is using the Google Chrome Browser.

Here's how it works:


Open your website in Google Chrome.
Click the top right-hand menu icon (the one with 3 horizontal lines).
Choose More Tools —> Developer Tools.
Click the small mobile device icon in the developer panel - this will show a "Device" toolbar on top of your website.
Choose the device you want to see how your website displays on.


This way you can take screenshots of your website on different devices. To get the result in your image, use Photoshop or a dedicated tool to place these screenshots inside the final image.

Hope this helps!

Vote Up Vote Down

@Welton168

I have 2 solutions for you :

First: you can do this in adobe photoshop. Choose your device frame and put your screenshot on it.

Second: if you want to invest, try some tools like placeit.net/ or picapp.net/. All you have to do is to choose what frame you like from their gallery and upload your screenshot.

Good luck !

Vote Up Vote Down

@Odierno310

There are PSD templates you can download and/or buy which typically come with actions that place your design into their (three different screens showing responsive design in your case). Just do a Google search for "mockup template psd" and you can click on just about any of the first few results.

Vote Up Vote Down