: How to recreate devices to present responsive sites I have recently just created a template, and I would like to show it on my site that it is responsive & fluid. I would like to take

@Angela777

There are templates / stock images of different devices out there on the web (and very easy to find), but the best answer I can give you is that you could easily create what you are looking for in Adobe Photoshop and then save that in your own custom template.

For example, if I wanted to have a template with a Thunderbolt display I could mask a portion of that image and then apply whatever image I wanted behind it. I could then add a lighten layer on top for that gloss realism as you see in your provided photo.

Step By Step


Download your images / templates. Arrange them however you want.

Mask the portion of the image you want by marquee-ing a portion and then Alt + Clicking the mask icon. (A quick way to invert your selection and apply your mask.

Place your website image behind your masked layer. Crop and transform if necessary.
Add gloss effect by using a gradient with the screen blending mode. ~10% opacity usually does the trick



What's nice is that you can then save this as a template which you could then easily apply any website screenshots you wanted in less than a minute. And look at you, now you have your own custom template for multiple devices.

Vote Up Vote Down