frameit¶

Alias for the frame_screenshots action

Easily put your screenshots into the right device frames¶

frameit allows you to put a gorgeous device frame around your iOS and macOS screenshots just by running one simple command. Use frameit to prepare perfect screenshots for the App Store, your website, QA or emails.

Features • Usage • Tips

frameit is part of fastlane: The easiest way to automate beta deployments and releases for your iOS and Android apps.

Features¶

Frame screenshot¶

Put a gorgeous device frame around your iOS and macOS screenshots just by running one simple command. Support for:

iPhone, iPad and Mac
Portrait and Landscape modes
Several device frame colors

The complete and updated list of supported devices and colors can be found here

Here is a nice gif, that shows frameit in action:

img/actions/FrameitGit.gif

Advanced Features¶

Put framed screenshot on colored background, define padding
add text above or under framed screenshot
- keyword + text
- choose text font and color
- multi line text
- "intelligent" positioning of text that always looks good(ish)

Results¶

img/actions/ScreenshotsBig.png

img/actions/ScreenshotsOverview.png

img/actions/MacExample.png

The frameit 2.0 update was kindly sponsored by MindNode, seen in the screenshots above.

The first time that frameit is executed the frames will be downloaded automatically. Originally the frames are coming from Facebook frameset and they are kept on this repo.

More information about this process and how to update the frames can be found here

Usage¶

Basic Usage¶

Why should you have to use Photoshop, just to add a frame around your screenshots?

Just navigate to your folder of screenshots and use the following command:

fastlane frameit

To use the silver version of the frames:

fastlane frameit silver

To download the latest frames

fastlane frameit download_frames

When using frameit without titles on top, the screenshots will have the full resolution, which means they can't be uploaded to the App Store directly. They are supposed to be used for websites, print media and emails. Check out the section below to use the screenshots for the App Store.

Advanced Usage (optional)¶

Text and Background¶

With frameit it's possible to add a custom background and text below or above the framed screenshots in fonts and colors you define.

A working example can be found in the fastlane examples project.

`Framefile.json`¶

The Framefile allows to define general and screenshot specific information. It has the following JSON structure:

{
  "device_frame_version": "latest",
  "default": {
    ...
  },
  "data": [
     ...
  ]
}

General parameters¶

The general parameters are defined in the default key and can be:

Key	Description	Default value
`background`	The background that should be used for the framed screenshot. Specify the (relative) path to the image file (e.g. *.jpg). This parameter is mandatory.	NA
`keyword`	An object that contains up to 3 keys to describe the optional keyword. See table below.	NA
`title`	An object that contains up to 3 keys to describe the mandatory title. See table below.	NA
`stack_title`	Specifies whether frameit should display the keyword above the title when both keyword and title are defined. If it is false, the title and keyword will be displayed side by side when both keyword and title are defined.	`false`
`title_below_image`	Specifies whether frameit should place the title and optional keyword below the device frame. If it is false, it will be placed above the device frame.	`false`
`show_complete_frame`	Specifies whether frameit should shrink the device frame so that it is completely shown in the framed screenshot. If it is false, clipping of the device frame might occur at the bottom (when `title_below_image` is `false`) or top (when `title_below_image` is `true`) of the framed screenshot.	`false`
`padding`	The content of the framed screenshot will be resized to match the specified `padding` around all edges. The vertical padding is also applied between the text and the top or bottom (depending on `title_below_image`) of the device frame. There are 3 different options of specyfying the padding: 1. Default: An integer value that defines both horizontal and vertical padding in pixels. 2. A string that defines (different) padding values in pixels for horizontal and vertical padding. The syntax is `"<horizontal>x<vertical>"`, e.g. `"30x60"`. 3. A string that defines (different) padding values in percentage for horizontal and vertical padding. The syntax is `"<horizontal>%x<vertical>%"`, e.g. `"5%x10%"`. Note: The percentage is calculated from the smallest image dimension (height or width). A combination of option 2 and 3 is possible, e.g. `"5%x40"`.	`50`
`interline_spacing`	Specifies whether frameit should add or subtract this many pixels between the individual lines of text. This only applies to a multi-line `title` and/or `keyword` to expand or squash together the individual lines of text.	`0`
`font_scale_factor`	Specifies whether frameit should increase or decrease the font size of the text.	`0.1`

Specific parameters¶

The screenshot specific parameters are related to the keyword and title texts. These are defined in the data key. This is an array with the following keys for each screenshot:

Key	Description
`filter`	This is mandatory to link the individual configuration to the screenshot, based on part of the file name. Example: If a screenshot is named `iPhone 8-Brainstorming.png` you can use value `Brainstorming` for `filter`. All other keys from that array element will only be applied on this specific screenshot.
`keyword`	Similar use as in `default`, except that parameter `text` can be used here because it is screenshot specific.
`title`	Similar use as in `default`, except that parameter `text` can be used here because it is screenshot specific.

Framefile `keyword` and `title` parameters¶

The keyword and title parameters are both used in default and data. They both consist of the following optional keys:

Key	Description	Default value
`color`	The font color for the text. Specify a hex/html color code.	`#000000` (black)
`font`	The font family for the text. Specify the (relative) path to the font file (e.g. an OpenType Font).	The default `imagemagick` font, which is system dependent.
`text`	The text that should be used for the `keyword` or `title`. Note: If you want to use localised text, use `.strings` files.	NA

Example¶

{
  "device_frame_version": "latest",
  "default": {
    "keyword": {
      "font": "./fonts/MyFont-Rg.otf"
    },
    "title": {
      "font": "./fonts/MyFont-Th.otf",
      "color": "#545454"
    },
    "background": "./background.jpg",
    "padding": 50,
    "show_complete_frame": false,
    "stack_title" : false,
    "title_below_image": true
  },

  "data": [
    {
      "filter": "Brainstorming",
      "keyword": {
        "color": "#d21559"
      }
    },
    {
      "filter": "Organizing",
      "keyword": {
        "color": "#feb909"
      }
    },
    {
      "filter": "Sharing",
      "keyword": {
        "color": "#aa4dbc"
      }
    },
    {
      "filter": "Styling",
      "keyword": {
        "color": "#31bb48"
      }
    }
  ]
}

You can find a more complex configuration to also support Chinese, Japanese and Korean languages.

The Framefile.json should be in the screenshots folder, as seen in the example.

`.strings` files¶

To define the title and optionally the keyword, put two .strings files into the language folder (e.g. en-US in the example project)

The keyword.strings and title.strings are standard .strings file you already use for your iOS apps, making it easy to use your existing translation service to get localized titles.

Notes

These .strings files MUST be utf-8 (UTF-8) or utf-16 encoded (UTF-16 BE with BOM). They also must begin with an empty line. If you are having trouble see issue #1740
You MUST provide a background if you want titles. frameit will not add the tiles if a background is not specified.

Mac¶

With frameit it's possible to also frame macOS Application screenshots. You have to provide the following:

A (relative) path to a background image file, which should contain both the background and the Mac.
The offset information so frameit knows where to position your screenshot on the background:
- offset : A string that specifies the horizontal and vertical offset in pixels, with respect to the top left corner of the background image. The syntax is "+<horizontal>+<vertical>", e.g. "+200+150".
- titleHeight : The height in pixels that should be used for the title.

Example¶

{
  "default": {
    "title": {
      "color": "#545454"
    },
    "background": "Mac.jpg",
    "offset": {
      "offset": "+676+479",
      "titleHeight": 320
    }
  },
  "data": [
    {
      "filter": "Brainstorming",
      "keyword": {
        "color": "#d21559"
      }
    }
  ]
}

Check out the MindNode example project.

Tips¶

Generate localized screenshots¶

Check out snapshot to automatically generate screenshots using UI Automation.

Upload screenshots¶

Use deliver to upload iOS screenshots to App Store Connect, or supply to upload Android screenshots to Play Store completely automatically 🚀

Alternative location to store device_frames¶

Device frames can also be stored in a ./fastlane/screenshots/devices_frames directory if you prefer rather than in the ~/.frameit/device_frames directory. If doing so please be aware that Apple's images are copyrighted and should not be redistributed as part of a repository so you may want to include them in your .gitignore file.

White background of frames¶

Some stock images provided by Apple still have a white background instead of a transparent one. You'll have to edit the Photoshop file to remove the white background, delete the generated .png file and run fastlane frameit again.

Use a clean status bar¶

You can use SimulatorStatusMagic to clean up the status bar.

Gray artifacts around text¶

If you run into any quality issues, like having a border around the font, it usually helps to just re-install imagemagick. You can do so by running

brew uninstall imagemagick
brew install imagemagick

Uninstall¶

sudo gem uninstall fastlane
rm -rf ~/.frameit

frameit
Supported platforms	ios, mac
Author	@KrauseFx

5 Examples¶

frame_screenshots

frameit # alias for "frame_screenshots"

frame_screenshots(silver: true)

frame_screenshots(path: "/screenshots")

frame_screenshots(rose_gold: true)

Parameters¶

Key	Description	Default
`white`	Use white device frames
`silver`	Use white device frames. Alias for :white
`rose_gold`	Use rose gold device frames. Alias for :rose_gold
`gold`	Use gold device frames. Alias for :gold
`force_device_type`	Forces a given device type, useful for Mac screenshots, as their sizes vary
`use_legacy_iphone5s`	Use iPhone 5s instead of iPhone SE frames	`false`
`use_legacy_iphone6s`	Use iPhone 6s frames instead of iPhone 7 frames	`false`
`force_orientation_block`	[Advanced] A block to customize your screnshots' device orientation	*
`path`	The path to the directory containing the screenshots	*

* = default value is dependent on the user's system

To show the documentation in your terminal, run

fastlane action frameit

View source code

Back to actions

frameit¶

Easily put your screenshots into the right device frames¶

frameit is part of fastlane: The easiest way to automate beta deployments and releases for your iOS and Android apps.

Features¶

Frame screenshot¶

Advanced Features¶

Results¶

The frameit 2.0 update was kindly sponsored by MindNode, seen in the screenshots above.

Usage¶

Basic Usage¶

Advanced Usage (optional)¶

Text and Background¶

Framefile.json¶

General parameters¶

Specific parameters¶

Framefile keyword and title parameters¶

Example¶

.strings files¶

Mac¶

Example¶

Tips¶

Generate localized screenshots¶

Upload screenshots¶

Alternative location to store device_frames¶

White background of frames¶

Use a clean status bar¶

Gray artifacts around text¶

Uninstall¶

5 Examples¶

Parameters¶

`Framefile.json`¶

Framefile `keyword` and `title` parameters¶

`.strings` files¶