Skip to main content

How to Create Photorealistic Screenshots of your Mobile Phone

By
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 Mockups, Dunnnk 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

Post a Comment

Popular posts from this blog

The Best Google Font Combinations That Look Good Together

By
Whether you are creating a website, writing your resume or designing a presentation, the fonts or typeface you choose can make a notable difference. The Google Fonts directory offers a myriad of choices but how do you pick the correct font for your digital projects? Should you go for Serif fonts or Sans Serif or a combination of serifs and sans serifs? Typography is an art and, with thousands of fonts available, it is obviously difficult for non-designers to find that perfect font combination. Need help? Here are some useful font pairing websites where type masters have already done the hard work and all you can do is follow their recommendations to pick the most elegant and gorgeous Google fonts combination for your web and print projects. 1.  Beautiful Web Type  ( hellohappy.org ) – Chad Mazzola has created a beautiful showcase of high-quality typefaces from the Google Fonts website. You’ll discover some creative usage of fonts here though they haven’t updated ...
1 comment
Read more

A Wireless USB Stick that Expands your Phone’s Storage (And a Giveaway)

By
W hat do you do when your mobile phone has limited storage and there’s no option to add an external SD card? How do you carry all your videos and documents where there’s not an iota of space left on the device? Yes, you do have cloud-based services like Dropbox or Google Drive that add virtually unlimited storage to your phone but you’ve to be connected to the Internet to access your files. This week I’ve been testing a wireless USB stick from Sandisk that adds storage to your phones and tablets much like a regular USB drive. To get started, you plug the USB device into your laptop or desktop computer and let it charge for about an hour or two. You can also transfer the files to the stick from the computer through Windows Explorer or Finder on Mac. Once the device is charged, you tap the little power button on the stick to turn it on. Now install the Sandisk Connect app on your mobile phone, go to WiFi settings on your phone and connect to the Wi-Fi hotspot created by the...
Post a Comment
Read more

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

By
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...
Post a Comment
Read more