Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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

share|improve this question
add comment

1 Answer

up vote 4 down vote accepted

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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