: How to represent a screenshot on multiple devices without using third-party branding The company I work for wants to release a brochure and they want to demonstrate that our app works on PC

@Si6392903

found this one and works fairly wewll, lets you skipp all extra work.. techsini.com/multi-mockup/index.php

Vote Up Vote Down

@Welton168

If you want to represent your app on different devices, I have 2 ways for you:
First you can do this in adobe photoshop. Open your image with tablet / smartphone / pc, drag and drop your screenshot from your pc on photoshop. Then go to Edit -> Transform -> Distort. Now drag from the corners and place the screenshot on the right spot.
The second way is to use an online tool like placeit.net or picapp.net. Both are free for low resolution images, but you have to pay for high res. On placeit it costs or for ultra high res. PicApp.net offers all images in high res for .

Vote Up Vote Down

@Vandalay110

Since you are hoping to avoid "third-party branding":

If you were to show screenshots cropped to just the browser/application content, the PC shots would be easily distinguishable based upon the aspect ratio if the image alone. It would be safe to ignore the rotational aspect of the handheld devices.

If you were to also scale the device imagery to something approximating the relative sizes of the different devices, the point will be made without resorting to featuring the actual devices.

Throw in some text in the brochure about features, and the point is made.

To make it pretty: pretend they are devices made of a single piece of glass, throw in some perspective and drop shadow as if they are all grouped into a product shot.

Rough numbers:


PC image: 16 x 9 inches, landscape;
iPad 9 x 7 portrait;
iPhone 4.8 x 2.3 portrait;
Apply a multiplier to all these numbers for sane sizes in a brochure format. (try * .25)

Vote Up Vote Down

@Rambettina927

This isn't a great question for the SE format but I do think it's a question that might come up again. I'll venture an answer and let the purists close you out ;)

When you get right down to it, you can present screen mockups however you like. There's no rule other than be consistent. Here's my approach.


Desktop: I have a very simplified indication of a browser window I wrap the mockup in.
Mobile: A simple illustration of the device (the lastest Android or iPhone, depending on the project) without the browswer's header/footer ui in the way.
Tablet: Same as mobile with the addition of the browser ui, since it doesn't usually collapse like on mobile.

Vote Up Vote Down