0

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 a few screenshots of my site, and display them on multiple devices such as PC, iPad, iPhone, etc.

Are there any online tools/services that allows me to upload an image, and it frames it with a device of my choice?

This is an example of what I'm looking for:

enter image description here

4

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

  1. Download your images / templates. Arrange them however you want. Image
  2. 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. Masked
  3. Place your website image behind your masked layer. Crop and transform if necessary.

  4. Add gloss effect by using a gradient with the screen blending mode. ~10% opacity usually does the trick Gloss Effect

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.