How do some web designers present their responsive website prototype in a computer, tablet and mobile presentation like this
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.
I have 2 solutions for you :
First: you can do this in adobe photoshop. Choose your device frame and put your screenshot on it.
Good luck !
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!