Easily Manage Graphics in Xcode Projects
Permalink
Failed to load latest commit information.
Speculid.xcodeproj fixing codesigning issue Nov 2, 2018
Speculid.xcworkspace removed libgraphite2.dylib Oct 31, 2018
_layouts added card metadata for facebook and twitter Nov 12, 2018
applications updated build number Nov 2, 2018
assets updated home page Nov 5, 2018
bin added deployment feature Nov 9, 2017
certs adding new private key Aug 3, 2018
examples added quiet to travis-ci, fixed shasum Nov 1, 2018
frameworks updated build number Nov 2, 2018
images adding social icons Nov 4, 2018
scripts finished updates to the web site, fixing issue #64 Nov 3, 2018
tests added quiet to travis-ci, fixed shasum Nov 1, 2018
.gitattributes created first draft Jul 13, 2018
.gitignore updating travis-ci Nov 1, 2018
.gitmodules working on migrating gh-pages Aug 29, 2018
.ruby-version working on unit tests Aug 2, 2018
.swiftlint.yml adding dependencies directly from homebrew Jun 28, 2018
.travis.yml finished updates to the web site, fixing issue #64 Nov 3, 2018
CNAME Create CNAME Jul 13, 2018
Gemfile adding slather back Nov 1, 2018
Gemfile.lock updated gem file for jekyll Nov 6, 2018
Podfile working on unit tests Aug 2, 2018
Podfile.lock upgraded pods Oct 5, 2018
README.md finished updates to the web site, fixing issue #64 Nov 3, 2018
Speculid-Mac-XPC.entitlements hardening for notorization Nov 2, 2018
Speculid.entitlements [ci skip] working on build and execution Oct 26, 2017
_config.yml adding placeholder images Nov 2, 2018
android-chrome-192x192.png added favicons Jul 16, 2018
android-chrome-512x512.png added favicons Jul 16, 2018
apple-touch-icon.png added favicons Jul 16, 2018
browserconfig.xml added favicons Jul 16, 2018
codecov.yml fixing codecov configuration Nov 1, 2018
exportOptions.plist adding certs Oct 26, 2017
favicon-16x16.png added favicons Jul 16, 2018
favicon-32x32.png added favicons Jul 16, 2018
favicon.ico added favicons Jul 16, 2018
index.md finished updates to the web site, fixing issue #64 Nov 3, 2018
mstile-144x144.png added favicons Jul 16, 2018
mstile-150x150.png added favicons Jul 16, 2018
mstile-310x150.png added favicons Jul 16, 2018
mstile-310x310.png added favicons Jul 16, 2018
mstile-70x70.png added favicons Jul 16, 2018
safari-pinned-tab.svg added favicons Jul 16, 2018
site.webmanifest added favicons Jul 16, 2018

README.md

Introduction

Challenges Managing Graphic Assets

Part of the process of building an app for watchOS, iOS, or macOS is including all the image assets and app icons in your application. Each image assets or app icons requires several copies for different resolutions, different devices, and different sizes. Right now, this needs to be done by exporting all the various similar images from a major graphics application.

That means developers need to:

Manually Create Multiple Sizes

Each graphic must be manually converted and resized several times for each update.

Store Generated Image Files

An asset catalog image set will need a 1x, 2x, 3x of each graphic and App Icons may need as many 30 different sizes.

What If You Had...

Care-Free Graphic Management Where...

  • Only one file is needed for each Image Set and App Icon.
  • Graphic Designers need only export a single file change each time rather than as many as serveral scaled copies.
  • Resizing and conversion is done behind the scenes based on a single source image.

What Speculid Does

Speculid links a single graphic file to an Image Set or App Icon and automatically renders different resolutions, file types, and sizes for all the image specifications required.

diagram

Automate the process

Speculid automates the process so only one graphic file is needed. Add Speculid to your build process and now the conversions and resizing are automated as part of the build process. Now there is no need for anyone to manually create each size for each device every time.

Tidy Your Repo

Reduce the size of your repository by including a single vector or raster image and ignore all your automated png and pdf files at compile. That means faster remote pulls, less redundancy, and complete syncronization between sizes.

Features

This means Speuclid can...

  • take multiple input file types including SVG vector files and raster PNG files
  • automatically create each necessary resized raster file
  • remove transparencies from PNG and SVG file for App Icons
  • export to PDF for vector images in Image Sets as well as PNG

Input File Types Supported

  • SVG - Scalable Vector Graphics
  • PNG - Portable Network Graphics

Modifiers

Output File Types Supported

  • PNG - Portable Network Graphics
  • PDF - Portable Document Format

Download

Enter your email address here to request access to the latest version.

Table of Contents

Installation

Once you have unzipped the file, go ahead, and copy the application Speculid.App to the Applications folder.

A command line tool is included in the application bundle. Copy the command line tool to your /bin/ folder:

$ sudo cp /Applications/Speculid.app/Contents/SharedSupport/speculid /usr/local/bin

Usage

Right now, Speculid only supports being called through a command line terminal for now. Once you have copied the command to your /usr/local/bin folder you should be able to access it easy.

$ speculid --process <file>
$ speculid --help
$ speculid --version

Options:
  --help     Show this screen.
  --version  Show version.

File Format and Properties

The .speculid file is a json file with the image set or app icon path, the graphic file source, and optionally basic image geometry (width or height). All paths specified in the json file could be relative to the .speculid file or an absolute path. Such as

{
  "set" : "Assets.xcassets/Raster Image.imageset",
  "source" : "layers.png",
  "geometry" : "128"
}

or

{
  "set" : "Assets.xcassets/iOS AppIcon.appiconset",
  "source" : "geometry.svg",
  "background" : "#FFFFFFFF",
  "remove-alpha" : true
}

Set set

Image Set Examples from Xcode

A set is an image set or app icon used by Xcode.

Source source

The image source file which could be a SVG or PNG file.

Geometry optional geometry

The destination geometry of image if needed (i.e. image set). It must be in the format of:

  • width (ex. "128") - for specifying the width of the destination image
  • xheight (ex. "x128") - for specifying the height of the destination image

You can only specify the height or the width. The other dimension is automatically calculated based on the aspect ration of the image.

Background optional background

As a requirement, App Icons are required to exclude any alpha channels. In order to remove a transparency from a source PNG or SVG file, you can specify to remove the alpha channel and add a background color.

The background color can be set in a standard rgb, rgba, or hex code format (#RRGGBB or #AARRGGBB). If no alpha is specified an alpha of 1.0 is assumed.

Remove Alpha optional remove-alpha

To specifically remove the alpha channel, a true boolean value must be specified. This will remove the alpha channel from the file. Make sure to specify an opaque background color when removing the alpha channel.

Exporting SVGs for Speculid

Sketch

Sketch iOS App Icon Template Window

  1. Open Sketch and create a new document using the iOS App Icon Template. If you are using an existing project, you can skip to step 3.

    Sketch Slice Panel

  2. Once you are in the template, duplicate one of the icon size slices on the left side.

    Sketch Present Format

  3. On the right size, change the preset format to SVG.

    Sketch Export Menu

  4. In the top menu, select File...Export.

    Sketch Export Window

  5. Select your duplicated slice and select Export.

  6. Select the destination for your SVG file and Save.

Photoshop

Photoshop Export Menu

  1. Open your Photoshop document, select File...Export...Export As....

    Photoshop Export Format

  2. Under the File Settings on the right, change the format to SVG.

    Photoshop Save Dialog

  3. Select Export All and choose the destination for your SVG file and Save.

Illustrator

Illustrator Export Menu

  1. Open your Illustrator document, select File...Export...Export for Screens....

    Illustrator Export Format

  2. Under Formats, update the format to SVG.

  3. Select Export Artboard and choose the destination for your SVG file and Save.

Xcode Integration and Automation

With Speculid, the process of building image assets can be automated in Xcode.

  1. Create the speculid file and add it to your project folder as well as your source graphic files.

    Xcode Target Membership

    • Note: you don't need to add these files to any target membership
  2. Edit the speculid file.

    1. Add the property for the source - the path to the SVG or PNG file.

      {
        "source" : "geometry.svg",
        ...
      }
    2. Add the property for the set - the path to the Image Set or App Icon folder.

      {
        "set" : "Assets.xcassets/iOS AppIcon.appiconset",
        ...
      }
    3. optional Add the property for the geometry - if this a conversion from a vector graphic (SVG) to an Image Set, you may want to supply the 1x size.

      {
        "set" : "Assets.xcassets/Raster Image.imageset",
        "source" : "layers.png",
        "geometry" : "128"
      }

      If you specify 128 in the geometry property, that means the width for the 1x image will be 128 pixels, the width for the 2x image will be 256 pixels, and the width for the 3x image will be 384 pixels. Heights will be calculated based on the aspect ratio of the SVG file. Vector images in an image set will be converted to a iOS compatible PDF file.

    4. optional Add the properties for the background color and alpha removal - if this a conversion to an App Icon, you should remove any background transpareny and add a background color.

      {
        "set" : "Assets.xcassets/iOS AppIcon.appiconset",
        "source" : "geometry.svg",
        "background" : "#FFFFFFFF",
        "remove-alpha" : true
      }

    See the file format section for more details.

  3. Add the Run Script Build Phase to the top of your project with the following code:

    find "${SRCROOT}" -name "*.speculid" -print0 |
    while IFS= read -r -d $'\0' line; do
    /Applications/Speculid/Contents/MacOS/Speculid --process "$line" &
    done
    wait

    Xcode Build Phase Run Script

  4. Build the application. This will create the graphics which you will use in your asset image set or app icon.

    Xcode Unorganized Assets

  5. After the first build, drag the images to the correct asset slot. Each rendered image file is suffixed denoting its slot.

    (source file base name).(size)@(scale)~(idiom).(extension)

    Examples

    • logo.20x20@1x~ipad.png - 20x20 size 1x scale for iPad
    • logo.60x60@3x~iphone.png - 60x60 size 3x scale for iPhone
    • logo.83.5x83.5@2x~ipad.png - 83.5x83.5 size 2x scale for iPad
  6. Build and Run. Done.


Speculid ©2018, BrightDigit, LLC.