Awesome looking iOS screenshots using Frame.IT for iTunes Store, No Photoshop skills required!

Introduction

You are an iOS developer and ready to submit the build to iTunes connect. You need iOS screenshots of different sizes to upload, but wait, you suddenly realise that you don’t have the necessary Photoshop skills or might be you don’t have the designer available at that moment.

Then, “frameit” comes to the rescue.

This article is about explaining how frameit helps you to add iOS frames to your app screenshots taken from device.

frameit is a part of an open source toolchain “fastlane“, which helps to animate beta deployments and releases for iOS and android apps. fastlane toolchain saves hours every time you push a new release to the store.

Lets start using frameit. You are going to love it.

Installation

As I mentioned, frameit is a part of fastlane tool. So we need to install fastlane first. Wait! fastlane is installed using commands in Terminal app in mac. No Installer. You are a developer, you must be loving these commands.

Installing fastlane is not straightforward. You should have “Homebrew” and “gems” installed in your mac. “gems” are preinstalled in mac these days. So, its the Homebrew you need to install. But Why we are installing Homebrew. because frameit internally used imagemagick library to add frames to the screenshots. So, we are taking help of Homebrew to install frameit.

Run following commands in Terminal to install Homebrew and imagemagick library.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Run above command to get Homebrew installed.

Now, it is time to install imagemagick library in your mac. Run following command in Terminal.

brew install imagemagick

Now, install fastlane gem.

sudo gem install fastlane

But, when you will run the above command in the terminal in your macOS Sierra, You may encounter the following problem:

Apple introduces a new security system in its operating systems that prevent users to modify system files. It’s called “Rootless“. To overcome this issue, we need to install gem on /usr/local/bin Rootless doesn’t effect this path

So, this time, execute the following command in Terminal

sudo gem install -n /usr/local/bin fastlane

How to use it!

Let’s use Fastlane now!

Keep the screenshots you took from the device in a folder in png format something similar to the following:

Now, again open up the Terminal app and move inside the above directory.

Now, execute the following Fastlane command:

fastlane frameit

Your device screenshots are READY WITH FRAMES!

You are probably running frameit for the first time, So it takes a couple of extra minutes to download devices frames into your mac.

See, how beautifully frameit creates frames for your app. Isn’t Easy?

But, that’s not the end of the features of frameit. You can even change the frame color as well. If you want to see the frames in gold, run the following command in Terminal.

fastlane frameit gold

It takes just a few seconds to create it.

Using frameit, we can also add Titles to the screenshots and even can change the background color of the screenshots. We will cover those topics in the next article. I will also explain the remaining tools of Fastlane one by one. In the end, you will be able to use continuous deployment with your apps.

Click here for more details…

At BoTree Technologies, we build enterprise applications with our Mobile Dev team of 20+ engineers.

We also specialize in RPA, AI, Django, JavaScript, and ReactJS.

Consulting is free – let us help you grow!