Skip to main content

How to Create Photorealistic Screenshots of your Mobile Phone

Capturing screenshots on a mobile phone is easy. If you have an iPhone, press the Home & Sleep buttons and the screenshot image will be saved in the Photos app. Android users can press the Volume Down & Power button simultaneously to capture the screen. And in the case of Windows Phone, press and hold the Start and Power buttons at the same time to take a screenshot.
That’s a raw screenshot saved in your camera roll but if you would like to use that image in your website, a presentation or even in your Apps Store listing, consider adding device frames. This is important because people should be able to figure out whether a screenshot was captured on an iPhone or a Microsoft Lumia or a Google Nexus phone. The device frames can be actual photographs so your screenshot images appear gorgeous and more realistic.
Mobile Screenshots in Photoshop

Realistic Device Mockups for Beautiful App Screenshots

A layered photo editing tool like Adobe Photoshop (Win/Mac) or Pixelmator (Mac) makes it really easy for you to add hardware device frames to any screenshot image. Go to Dribbble and search for “freebies PSD <mobile name>” and you’ll find beautiful mockups for any mobile device. The Facebook design team too provides Handskit – photos of hands holding devices that you can use without restrictions.
Download and import the PSD file into Photoshop and then use the File -> Place command to place the screenshot image as a new layer over the device mockup. Then use the Save for Web option to export the image in JPEG format.
[*] Dribbble users usually add the tag “freebies” or “free” to indicate that others can reuse their design(s) for personal and commercial use. Other than Dribbble, Deviant Art and Behance are also good places to discover high-quality hardware mockups for all popular mobile devices.
Photorealistic Mobile screenshots
If you don’t have Photoshop, you can use web apps like Magic MockupsDunnnk and Frame to add photorealistic device frames to your mobile screenshots.
These tools offers a collection of professional-quality photographs of mobile phones, tablets and computers placed in realistic settings. You need to drag your app’s screenshot image on to a photograph and it will automatically get placed in the screen area of the mobile device perfectly aligned with the hardware frame pixel by pixel.
Google’s own Device Art Generator lets you quickly add vector device frames around screenshots of Android phones and tablets. Device Art Generator includes templates for Android Wear and all Google Nexus devices. Drag the mobile screenshot image on to a device frame and it will quickly wrap that frame around your image. You also have the option to add screen glare and depth (for perspective) to the generated screenshots.
MockuPhone is another useful web app for adding device frames to your mobile screenshots with a unique feature. You pick a device frame, upload the mobile screenshot image and the tool will generate multiple screenshot images of the same device but at different angles.
The tool produces very high-resolution screenshots and they offer device frames for the iPhone, iPad & iPad Mini, Windows Phone, TV screenshots and Android.
PlaceIt and Mockerie are other good services for adding device mockups to your screenshots but they requires a subscription.
Mobile Device Frames
Scenery is a free Mac App that will helps you convert your app screenshots into professional looking and real-life photographs. Launch the app, drag the screenshot and you can instantly preview it inside gorgeous device photos. The starter pack includes a couple of free images of the iPhone and Samsung Galaxy phone.
You can also add realistic device frames to your mobile screenshots via email. Just send the raw screenshot image as an email attachment to smartphones@mailchimp.com and, within in a minute or two, they will send you the processed screenshot with the device frame. You can also attach multiple screenshots in the same email message.
The service will automatically detects the mobile device name and the image orientation (portrait or landscape) using the EXIF data in the image and adds the appropriate hardware frame. It supports iPhone, iPad, Galaxy Tab, Nexus and a bunch of mobile device – send an email with the subject “help” to the same address for a complete list.
Finally, if you know a bit of HTML and CSS, you’ll love devices.css. They have created realistic mockups of iPhone, Android, Lumia, iPads and Macbooks using pure CSS and you can add image screenshots and text captions inside the mockups by editing the HTML. The big advantage here is that your text can be read by search engines too.

Comments

Popular posts from this blog

How to Secure Your Wireless (Wi-Fi) Home Network

Wireless Networking (Wi-Fi) has made it so easy for anyone to use Internet on your computer, mobile phones, tablets and other wireless devices anywhere in the house without the clutter of cables. With traditional wired networks, it is extremely difficult for someone to steal your bandwidth but the big problem with wireless signals is that others can access the Internet using your broadband connection even while they are in a neighboring building or sitting in a car that’s parked outside your apartment. This practice, also known as piggybacking, is bad for three reasons: It will increase your monthly Internet bill especially when you have to pay per byte of data transfer. It will decrease your Internet access speed since you are now sharing the same internet connection with other users. It can create a security hazard* as others may hack your computers and access your personal files through your own wireless network. [*] What do the bad guys use  – There ha...

Twitter Guide: How To Do Everything With Twitter

The first tweet was published almost 8 years ago and Twitter has come a long way since then. There’s a whole ecosystem of apps and services available now that allow us to use Twitter in more ways than ever before. This guide curates the best tools that will help you get the most out of Twitter. 1.  Nuzzel  – This works as an intelligent filter for Twitter and helps you discover the most popular news stories shared across your Twitter network. All signal, no noise. 2.  Flipboard  – Connect your Twitter account to Flipboard and it will create a beautiful magazine for all your Twitter feeds that you can flip through on the web (example), mobile and Windows 10 devices. 3.  LifeOnTwitter  – Get interesting statistics and facts about your Twitter account (example). 4.  TallTweets  – It lets you send tweets of any length by slicing your long tweet into multiple 140-character tweets (sample) and sending them ...

Make International Phone Calls from your Mobile even without the Internet

While apps like Skype or Viber let you make cheap (or even free) international phone calls, you need to connected to WiFi for these apps to work. Meet an alternate that offers similar features but needs no Internet. H o w do you make international calls from your mobile phone? Mobile carriers often charge exorbitant rates for international phone calls but you can Internet based services like Skype or Google Hangouts and call any landline or cell phone number in the world for a low per minute fee. All you need is a mobile phone connected to a Wi-Fi hotspot and some credit balance in your account for making the phone call. You can use these VoIP apps when travelling overseas as well and make significant savings for both domestic and international calls. Now consider a scenario where you have a mobile phone but there’s no Wi-Fi around and the 3G/4G services are either slow or unavailable. Would you still be able to place calls through any of these apps? The answer is obviously in ...