Have you have ever needed to share your app screenshots with other team members, but skipped adding the frame just to save time? Taking a screenshot is as simple as a click, but designing & dealing with image editing tools is definitely not a developer’s forte. Well, adding a device frame is now a simple keyboard tap!While lurking in the iOSProgramming subreddit, I saw an answer to a question taking me to Fastlane’s page teaching how to take screenshotsusing automated UI Tests. And there, I stumbled upon the frameit
command.Getting StartedThere are several ways you can follow mentioned in the docs. I prefer using homebrew
. First you need to install homebrew
, then install fastlane
and finally install imagemagick
using the commands shown below:
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew update && brew install fastlane
$ brew install imagemagick
Before and after framing a screenshot with a silver frame
fastlane frameit
. In seconds, a copy of all the images will be made along with frames!If you runfastlane frameit silver
instead, the screenshots will be made in the silver iPhone device skin.As you will notice, it automatically checks the dimensions of your screenshots to choose which iPhone frame to add to the image.For Android
Screenshot before and after using frameit
In a folder for Android screenshot, just run the frameit command with the android modifier instead fastlane frameit android
.Note: The Android part didn’t work for me readily because I got an error saying Tried looking for offset information for ‘portrait’, Nexus 5X in ‘/.fastlane/frameit/ latest/offsets.json’
. When I opened the offsets.json
file in that location, I noticed that the Nexus 5X was written as Nexus 5x, so I updated the file, saved it, and it fixed the error.
#android-app-development #fastlane #mac #programming #ios-app-development #ios