New answers tagged screenshot
The best way is to create a responsive prototype using HTML, CSS and JS.
The process I use for my websites, create a template with all the devices with masks for different screen sizes in photoshop or illustrator. To get the website screenshots at the correct aspect ratio, I use firefox developer tools. 1)open the site in firefox, 2)right click anywhere, "inspect element" then there is a button with an aspect ratio ...
I usually create different art boards for the same project in Illustrator. Each view (pc, mobile, tablet) gets an art board. Then I save them as a PDF and each art board gets its own page. You could make or download a frame (that looks like a phone or a tablet) to put each mockup in, similar to the links you sent and put them in your mockups.
So,as Alan had put it - one of the easiest ways to achieve this, is to cut out the image area, and leave the phone frame with a transparent window. You then add any desired image in a separate layer, bellow the cut-out frame, and export it. Step by step: Import your image above into GIMP On the Layers dialog (ctrl + L), right click on the layer with the ...
The best way to do this kind of compositing is to cut out the map completely, so that you have a frame that's transparent in the image area, then put your own image on a layer below. That eliminates alignment problems. I don't off-hand recall the specifics of how Gimp does this, but it certainly has the capability.
Top 50 recent answers are included