ScreenshotFramer - Create localized App Store screenshots

Overview

ScreenshotFramer

Twitter: @PatrickKladek License Target Mac Language Swift Build Status

With Screenshot Framer you can easily create nice-looking and localized App Store Images.

How does it work?

It's super simple: Screenshot Framer simply puts pictures on top of each other (think Photoshop Layers), allows you to move them around and saves the resulting image to disk. You can specify the path of every image layer and use a .strings file to localize the displayed texts. Once you're done configuring, you can export all possible image & language combinations at once.

Preparation

  • First check out the repository and build the app. Alternatively you can download the precompiled app here.
  • Next open the Sample Project or create your own project structure. When you are using fastlane's snapshot tool you can reuse that folder structure and only add missing files.

backgrounds

This folder allows you to specify background images for your screenshots, if you don't want to go all-white.

device_frames

If you want your screenshots framed in a device, you may use any image here. You can for example download Apple's device images or Facebook's Device Assets and copy them into this folder.

Localized Image Folders

(en-US, de-DE, ...) are generated using fastlane snapshot or you may also copy them into this folder. Important is that you have a strings file in this folder called screenshots.strings.

"1" = "It Starts With a Thought";
"2" = "Add Your Thoughts";
"3" = "Discover Connections";
"4" = "Visualize Your Idea";
"5" = "Productive on the Go";
 |
This Number is later replaced with variable "image"
Configuration File

This file contain the configuration for the image export. Open the file iPhone SE and change the number in the image textfield or language popup. You may also change the position and size of each layer or create new layers.

Usage

The main difference to your favorite image editor is that you can specify variables and use them for the image path.

Possible Variables:

  • $image can contain only numbers (typically 1-5)
  • $language contains every sub-folder name in your project folder (in this case Sample Project) excluding backgrounds, device_frames and Export

In the screenshot below the file is: $language/iPhone SE-$image.png. This is automatically translated to en-US/iPhone SE-1.png and this file is then rendered. For German this would for example be translated to de-DE/iPhone SE-1.png.

From the Command Line

  • You can either Install Screenshot Framer on your computer by copying it to /usr/local/bin and run following command
cd ~/Developer/MyProject/Screenshots
Screenshot-Framer-CLI -project "./iPhone SE.frame" 
  • To create screenshots for all devices simply pass the whole directory instead of a file
cd ~/Developer/MyProject/Screenshots
Screenshot-Framer-CLI -project .
  • You can also copy Screenshot Framer to your repository and run it from there
cd ~/Developer/MyProject/Screenshots
./Screenshot-Framer-CLI -project .

Known Limitations & Bugs

Please keep in mind that this tool was made to automate screenshots for a very specific need, so it might not fit yours. If you find bugs please create an issue first. Pull Requests are very welcome, but we also reserve the right to not merge them, if they don't take the tool into a direction we need. Therefore it's best to first open an issue and discuss your plans, before jumping right in and implementing it.

  • No rearranging of layers (drag & drop in table view)
  • May use excessive amount of memory while exporing (up to 4GB)
  • no aspect ratio lock, keep that in mind if you scale images
  • For better overview output is set to Export/$language/iPhone SE-$image framed.png

Screenshot Framer is brought to you by IdeasOnCanvas GmbH, the creator of MindNode for iOS, macOS & watchOS.

Comments
  • Option to show frame outline for easier alignment

    Option to show frame outline for easier alignment

    Thanks for building this. In my project we are at 17 supported languages by now so it's about time to simplify the screenshot creation.

    What I've been struggling with a bit while getting everything setup was aligning everything. For the content, device and text layers it would be of great help to be able to show an outline or e.g. 30% red background while positioning everything.

    opened by jpstuehler 2
  • Homebrew Support

    Homebrew Support

    Fixes: #15

    Changes

    • Add Version flag -v and -version to CLI target

    Open Issues

    • [ ] when running brew install screenshotframercli the version is missing (Copy screenshotframercli.rb to /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula). Somehow git log does has some problems. git describe --abbrev=4 --dirty --always --tags does not work correctly. git describe returns the following error message: fatal: No names found, cannot describe anything.
    opened by Patrick-Kladek 2
  • Home-brew Installation

    Home-brew Installation

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

    ==> This script will install: /usr/local/bin/brew /usr/local/share/doc/homebrew /usr/local/share/man/man1/brew.1 /usr/local/share/zsh/site-functions/_brew /usr/local/etc/bash_completion.d/brew /usr/local/Homebrew

    Press RETURN to continue or any other key to abort ==> Downloading and installing Homebrew... error: could not lock config file /usr/local/Homebrew/.git/config: Permission denied fatal: could not set 'core.repositoryformatversion' to '0' Failed during: git init -q

    opened by lucycamlin 1
  • Use NSTextField itself to calculate text size

    Use NSTextField itself to calculate text size

    It's a follow-up to #12.

    Unfortunately, it seems like String.boundingRect(...) is not always precise and returns values that are smaller than actual heights. I'm not very familiar with AppKit and can't identify potential pitfalls of using sizeThatFits, though.

    opened by nikolaykasyanov 1
  • Fix Layout Issue in generated Website

    Fix Layout Issue in generated Website

    Description

    Layout of generated website had an issue if the device name was bigger than the image.

    Task

    • [x] Render title over full width of table instead of one element

    Result

    Result

    opened by Patrick-Kladek 0
  • Disable Alpha channel in exported images

    Disable Alpha channel in exported images

    Description

    Uploading new Images to AppStoreConnect failed with following warning: Bilder dürfen keine Alphakanäle oder Transparenzen aufweisen

    Tasks

    • [x] Disable alpha channel when creating png file
    • [x] Add transparency to export options

    Infos For Reviewer

    Attention this Version will not work with existing files as a new property was added (Codable doesn't support migration). Therefore bumping Version Number

    Bildschirmfoto 2022-02-08 um 13 37 15

    opened by Patrick-Kladek 0
  • Add more cli options

    Add more cli options

    Description

    Allow exporting of fewer selected images to save export time and reduce cost when syncing to S3. Could be useful if only one images changed eg updated strings. (aws s3 sync compares the timestamp of each file to decide if it should be uploaded).

    Tasks

    • [x] Allow exporting only a given language
    • [x] Allow exporting only a given image (number)
    • [x] Migrate to swift5
    • [x] Fix Warnings

    Infos For Reviewer

    • Screenshot-Framer-CLI export --language de-DE will stop if de-DE folder/language is not used
    • Screenshot-Framer-CLI export --image 7 will only work if 7 is in range of export options.
    opened by Patrick-Kladek 0
  • Preview Website

    Preview Website

    Description

    Add command to generate a nice preview website with all images.

    Tasks

    • [x] Add HTML Framework - SwiftSoup
    • [x] Create Website based exported files.

    Infos For Reviewer

    Inspired by fastlane's screenshots.html file. Do we need to add attribution?

    Finished Result

    Bildschirmfoto 2021-12-07 um 13 57 38
    opened by Patrick-Kladek 0
  • Xcode 13

    Xcode 13

    Description

    Update to Xcode 13 and fix some new warnings along the way.

    Tasks

    • [x] Apply recommended warnings
    • [x] Change Protocols to conform to AnyObject instead of class

    Infos For Reviewer

    There are still 2 warnings in UserDefaults+Keys. Seems to be an issue with SwiftLint though: Implicit Getter Violation: Computed read-only properties should avoid using the get keyword. (implicit_getter)

    opened by Patrick-Kladek 0
  • Ignore System Files

    Ignore System Files

    Using Screenshot Framer Documents in the root directory of a git repository leads to unwanted side effects. System files beginning with a dot are shown in the language variable.

    Bildschirmfoto 2019-10-02 um 08 54 49
    opened by Patrick-Kladek 0
  • Add new shortcut

    Add new shortcut

    New Shortcuts

    • cmd alt → shows the next Image (increments image variable)
    • cmd alt ← shows the previous Image (decrements image variable)
    • cmd alt P opens a preview with all images in the same language side by side
    • cmd ctrl P opens a preview with the same image in all languages side by side

    Technical Details

    • Travis uses the new Xcode 10.3 image.
    • Code Signing is now disabled for CI Build via following arguments: CODE_SIGN_IDENTITY="" CODE_SIGNING_REQUIRED=NO.
    opened by Patrick-Kladek 0
  • Add positioning elements via dragging/mouse

    Add positioning elements via dragging/mouse

    Description

    Right now elements can only be positioned via the stepper or absolute values. It would be easier & faster to drag an element with the mouse and then use the stepper to fine tune it.

    opened by Patrick-Kladek 0
  • Allow to reorder Layer

    Allow to reorder Layer

    Description

    Allow to reorder a layer by dragging it.

    Current Workaround

    Open project file with a text editor and rearrange the layers there. Because thats not practical add it to the UI.

    Bildschirmfoto 2022-05-16 um 16 17 29

    opened by Patrick-Kladek 0
  • Duplicate Element

    Duplicate Element

    Description

    While designing it could be helpful to simply duplicate existing elements instead of repeating all steps. Support Copy and Paste incl keyboard shortcuts for this.

    opened by Patrick-Kladek 0
  • Support text formatting

    Support text formatting

    Currently ScreenshotFramer only supports single color for a label because it uses a strings file.

    Adding HTML tags could make sense while still maintain a readable strings file.

    This could look something like this My great <b>feature</b> Text in <#6423F3>color

    Drawbacks

    Formatting is different in each language. The localizer will have to consider that.

    Link

    https://twitter.com/rsebbe/status/967027660709879808

    enhancement 
    opened by Patrick-Kladek 0
  • layoutHierarchy is created on a background Thread

    layoutHierarchy is created on a background Thread

    The export runs on a background queue so that the UI stays responsive. Unfortunately the layout code is also called on that background queue. For now its not a big deal but should definitely be fixed

    wontfix 
    opened by Patrick-Kladek 0
Releases(v2.0.1)
  • v2.0.1(May 16, 2022)

  • v2.0(Feb 8, 2022)

    It seems like the AppStore is now enforcing images without alpha channel. Until now this wasn't a problem if no actual pixel was transparent.

    Unfortunately this also breaks existing projects as the file structure has changed.

    What's Changed

    • Disable Alpha channel in exported images by @Patrick-Kladek in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/31

    Full Changelog: https://github.com/IdeasOnCanvas/ScreenshotFramer/compare/v1.1...v2.0

    Source code(tar.gz)
    Source code(zip)
    Screenshot-Framer-CLI(3.11 MB)
    Screenshot.Framer.app.zip(1.27 MB)
  • v1.1(Feb 8, 2022)

    What's Changed

    • Fix fastlane spelling by @KrauseFx in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/9
    • Enhancement by @ss18 in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/10
    • Rename LICENSE.md to LICENSE by @Rubenfer in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/11
    • Add multiline support to font size limiting implementation by @nikolaykasyanov in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/12
    • update for Xcode 9.3 by @Patrick-Kladek in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/13
    • Use NSTextField itself to calculate text size by @nikolaykasyanov in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/14
    • Fix SwiftLint errors by @nikolaykasyanov in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/16
    • Xcode 10.1 Update by @aquarius in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/17
    • Fix wrong preview while editing by @Patrick-Kladek in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/18
    • Add link to Facebook device assets by @hannesoid in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/19
    • Add new shortcut by @Patrick-Kladek in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/20
    • Xcode 11 Update by @aquarius in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/25
    • Language skip hidden folders by @Patrick-Kladek in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/24
    • Add Aspect-Ratio locking and centering controls by @hannesoid in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/26
    • Xcode 13 by @Patrick-Kladek in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/28
    • Preview Website by @Patrick-Kladek in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/29
    • Add more cli options by @Patrick-Kladek in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/30

    New Contributors

    • @KrauseFx made their first contribution in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/9
    • @ss18 made their first contribution in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/10
    • @Rubenfer made their first contribution in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/11
    • @nikolaykasyanov made their first contribution in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/12
    • @aquarius made their first contribution in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/17
    • @hannesoid made their first contribution in https://github.com/IdeasOnCanvas/ScreenshotFramer/pull/19

    Full Changelog: https://github.com/IdeasOnCanvas/ScreenshotFramer/compare/v1.0...v1.1

    Source code(tar.gz)
    Source code(zip)
    Screenshot-Framer-CLI(3.11 MB)
    Screenshot.Framer.app.zip(1.25 MB)
  • v1.0(Feb 23, 2018)

  • v0.3.1(Jan 30, 2018)

  • v0.3(Jan 23, 2018)

  • v0.2(Jan 10, 2018)

  • v0.1.2(Dec 22, 2017)

    Until now when a document was closed with undo applied the document reopened in an incorrect state (undo was ignored before opening the document). To fix this the redo stack is discarded before the document is closed.

    Developer Pre-Release

    The app is not code signed. If you don't trust me you can build the app your self. To open the app anyways open: system preferences>security>general>open anyway

    Source code(tar.gz)
    Source code(zip)
    Sample.Project.zip(1.41 MB)
    Screenshot.Framer.zip(3.51 MB)
  • v0.1.1(Dec 22, 2017)

  • v0.1(Dec 21, 2017)

Owner
IdeasOnCanvas GmbH
IdeasOnCanvas GmbH
HockeyKit - HockeyApp was retired and the SDKs are deprecated. Please use App Center instead.

About: Hockey is a iOS Ad-Hoc updater framework. It can be used for all apps that target the Apple AppStore and improves the beta testing process dram

Bit Stadium GmbH 2.2k Nov 24, 2022
LaunchKit - A set of web-based tools for mobile app developers, now open source!

LaunchKit This repo contains an unbranded version of all the code that once powered LaunchKit. This notably includes Screenshot Builder, a web UI for

LaunchKit 2.2k Dec 29, 2022
Appfiguratesdk - Appfigurate provides the ability to change configuration properties in iOS and watchOS, apps and app extensions, securely, at runtime.

Appfigurate™ Appfigurate provides the ability to change configuration properties in iOS and watchOS, apps and app extensions, securely, at runtime. Do

Electric Bolt 21 Dec 14, 2022
A command line tool that calls your Xcode Test Plan and creates screenshots of your app automatically.

ShotPlan (WIP) A command line tool that calls your Xcode Test Plan and creates screenshots of your app automatically. ShotPlan will also take care of

Devran Cosmo Uenal 6 Jul 21, 2022
PinpointKit is an open-source iOS library in Swift that lets your testers and users send feedback with annotated screenshots using a simple gesture.

PinpointKit is an open-source iOS library in Swift that lets your testers and users send feedback with annotated screenshots using a simple gesture. F

Lickability 1.1k Jan 6, 2023
Cordova plugin for detect screenshots and recordings

cordova-plugin-detect-screen-capture This plugin detects screen recording and screenshot events. The plugin will only work on devices with iOS >= 7 Su

Sasha 0 Nov 4, 2021
🍎 An App to check whether a non-App Store app is in App Store.

AppStorify ?? An App to check whether a non-App Store app is in App Store. Benfits Use App Store's upgrade mechanism instead of app's. App Store apps

seedgou 58 Dec 7, 2022
Store-App - Store app made for IOS using Swift programming language

Store-App Store app views products, cart, and using login from https://fakestore

Anas Khalil 2 Jan 1, 2022
Minification of localized strings

SmallStrings Reducing localized .strings file sizes by 80% How it works The library consists of two main components: A tool that converts the .strings

Emerge Tools 48 Jan 8, 2023
Setting up application specific localized string within xib file.

LocalizedView ##What is this? LocalizedView is a helper class for setting up application specific localized string within Xib file. Here is a video de

darkcl 8 Oct 2, 2017
OS font complements library. Localized font supported.

SwiftFontName SwiftFontName is font name complements and supports localized font library. You don't need to search font name any more with SwiftFontNa

Morita Naoki 114 Nov 3, 2022
A μlibrary in Swift containing all the countries with their localized name, ISO code, phone code, country code, flag image and emoji.

CountryKit CountryKit A μlibrary in Swift containing all the countries with their localized name, ISO code, phone code, country code, flag image and e

Alessandro 24 Nov 11, 2021
EmbeddedStringsKit: Representation localized string in code

EmbeddedStringsKit Representation localized string in code Usage public struct L

Muukii 1 Jul 13, 2022
Xcode plugin for quickly creating localized strings

Extractor Localizable Strings Extractor Localizable Strings is a open source plug-in for Xcode. It lets you extract localizable strings without openin

Vinícius Oliveira 220 Jun 29, 2022
Generate Swift and SwiftUI symbols for localized strings files.

localized-strings-symbols An SPM and Xcode build plugin for creating Swift symbols for localized string keys. What It Does This is a very simple build

Daniel Kennett 12 Oct 18, 2022
🌊 A clean wave - report unused localized strings

Ripple ?? Ripple - a command line tool that reports unused localization strings in your Xcode project. Install Clone from repo git clone cd Ripple sw

Edoardo Benissimo 3 Sep 16, 2022
Provides API access to localized musical instruments and their tunings.

instruments.fyi instruments.fyi provides API access to localized musical instruments and their tunings provided by InstrumentKit. Table of Contents Wo

Brian Drelling 10 Sep 5, 2022
Provides type-safe access to localized musical instruments and their tunings.

InstrumentKit InstrumentKit provides type-safe access to localized musical instruments and their tunings. Table of Contents Work In Progress Installat

Brian Drelling 14 Nov 3, 2022
daemon DICOMweb store proxying to pacs in c-store protocol

POSTCSTORE versionado versión autor comentario 2021-11-02 Jacques Fauquex versión inicial 2021-11-02 Jacques Fauquex aetLocal en la ruta del servicio.

null 1 Mar 18, 2022
🚀 Create XCFrameworks with ease! A Command Line Tool to create XCFramework for multiple platforms at one shot! The better way to deal with XCFrameworks for iOS, Mac Catalyst, tvOS, macOS, and watchOS.

Surmagic ?? Create XCFramework with ease! A Command Line Tool to create XCFramework for multiple platforms at one shot! The better way to deal with XC

Muhammed Gurhan Yerlikaya 260 Dec 28, 2022