Psd2Xcode

Overview

Psd2Xcode, create your Xcode Storyboard, LaunchImage and App-Icons directly from a single Photoshop PSD file.

Although Psd2Xcode should work just fine, it is still in an early stage of development. If you encounter any difficulties, please don't hesitate to contact us. support@psd2xcode.de

Features 1.0

  • App-Icon support
  • LaunchImage support
  • Generate with a UINavigationController
  • Supports UIImageView, UILabel, UIButton, UITextField, UIScrollView
  • Intelligent merging for UISegues, UISegues and Subviews
  • iPhone 6 and iPhone 6 Plus support
  • Universal size support
  • Portrait and Landscape support
  • Photoshop Mask support

Usage

Psd2Xcode supports iPhone as well as iPad and Universal designs. Simply drop your App-design PSD file into the Psd2Xcode window or choose a file by clicking on the area in the top right corner.

If your PSD file has a valid format you can generate your design by clicking on "Export" and choosing your Xcode project. Inside the PSD file you can have the App icon and the Launch Image as well.

Additional you can always choice to generate your design in a universal format, conform to Xcode 6.

Notice: If your Xcode project already has a Main.storyboard you will be asked to overwrite the file. Psd2Xcode automatically recognizes segues, constraints and custom classes set in the storyboard. If you modified the storyboard somehow else it will be overwritten

Example

  1. Create a new Xcode project.
  2. Download Xample PSD-File
  3. Start Psd2Xcode and click on the area in the right top to open Xample.psd or just drag Xample.psd there
  4. Choose weather to generate Xample.psd in universal dimensions. Although Xample.psd has a Portrait orientation it is possible to generate a universal storyboard. In Xcode it will look clinched but after applying constraints it will still look good in all simulators.
  5. Press "Export" and choose the directory of the previously created Xcode project.
  6. Since all Xcode project templates come with a Main.storyboard Psd2Xcode will ask you if you want to overwrite those files. That's what we want.
  7. Open your Xcode project and checkout the Main.storyboard and the LaunchImage.xib.
  8. If you start the iPhone 5 or iPhone 5s simulator now it should look alright. To have the same experience on the iPhone 6 and iPhone 6 Plus, you need to add UIConstraints
  9. Try different simulators now and checkout the result.

For more examples checkout: Examples on Github

PSD Structure

To let Psd2Xcode know how your design shall look at the end, we defined the following name conventions to identify different UI elements.

Layers

Simple UI elements are represented by layers. At the moment the following elements are supported by layers:

Available layer prefixes version 1.0:

  • btn: UIButton
  • img: UIImageView
  • txt: UILabel

- UIButton

Define a UIButton by starting the name of the Layer with: btn-. The Layer will be used as background for a UIButton. The title of the UIButton will be set to "".

- UIImageView

Define a UIImageView by starting the name of the Layer with: img-. A UIImageView will be created an the content of the PSD img-Layer will be set as an image.

- UILabel

Define a UILabel by starting the name of the Layer with: txt-. For now only the text size is supported. The txt-Layer will generate a UILabel that holds the same text with the same font size (scaled proportionally to the dimensions) as the Photoshop layer.

Groups

To create more complex elements, that can't be represented by a simple Layer we use Groups. For example is a UIViewControllers always represented by a Group with a name starting with vc-. If a Group doesn't have a reserved prefix the child Layers will be processed as usual.

Available group prefixes version 1.0:

  • vc: UIViewControllers
  • ic: App-Icon
  • li: LaunchImage
  • txf: UITextField
  • scv: UIScrollView
  • btn: advanced UIButton

- UIViewController

Define a UIViewController by starting the name of the group with: vc- The first UIViewController group will be the starting point for the Storyboard.

- App-Icon

Define the App-Icon by starting the name of the Group with: ic- Psd2Xcode will automatically generate all needed Icon Sizes and place them into Images.xcassets

- LaunchImage

Define the LaunchImage by starting the name of the Group with: li- It behaves as a ViewController.

- UITextField

Define a UITextField by starting the name of the Group with: txf-. Inside this Group you can define a txt-Layer and a img-Layer, whereby the txt-Layer is used to set a Placeholder and the img-Layer to set a background. Both Layers are optional but there should be at least 1 Layer to determine the size of the UITextField. To create a standard UITextField the txf-Group just needs a Layer with no prefix.

- UIScrollView

Define a UIScrollView by starting the name of the Group with: scv-. A scv-Group can break the 9:16 or 3:4 ratio in Portrait orientation. That means the PSD file can have dimensions like: 1242x3000. 1242px is the recommended width for iPhone in Portrait orientation.

To create a regular sized UIViewController you would now Mask the vc-Group to the size of 1242x2208.

By using a UIScrollView you can now use the entire size of the PSD-File. Create your vc-Group as usual and add a scv-Group as a child. All elements inside the scv-Group will ne now subviews of the UIScrollView.

Notice: To make the UIScrollView work you have to add UIConstraints in Xcode later.

- UIButton

Define a UIButton by starting the name of the Group with: btn-. For a simple UIButton you can also use just a Layer. See next Section.

The advantage of defining a UIButton as Group is that you can set additional Button-States. The default state is defined by a Group or Layer with the prefix def-. Use hig for highlighted state and sel for selected state.

Dimensions

Psd2Xcode always tries to identify your PSD dimensions and crops it to the linked Device sizes. To ensure the best quality of your design, we recommend to use a width of 1242px (iPhone 6 Plus). Since Psd2Xcode supports UIScrollViews you make the height as big as as you want. Although the minimum should be 2208px (iPhone 6 Plus).

App Icon

According to the ........

Navigation Controller

Generate your PSD with a UINavigationController.

This feature simply adds a UINavigationController to your Main.storyboard. You can then add push-segues to establish the navigation flow for your app.

Notice: The NavigationItem on top takes ~8% (44px on a height of 568px) by default of the screen. Adjust your PSD so that area can be under the NavigationItem.

Filehandling

Image Assets

All graphic data will be exported as image assets in 3 different sizes conform to Apples (@2, @3) documentation. You can find them in Images.xcassets after using Psd2Xcode.

Notice: When two Layers or Groups have the exact same name the will access the same Image resource. To avoid unexpected behavior always be sure that your Layers and Groups have unique names.

Segues, Constraints and Custom Classes

Once you have generated everything from the PSD file and changed the state of your Storyboard by for example adding a Segue, you can still use Psd2Xcode again with the same project. The changes you made in Xcode for Segues, Constraints and Custom Classes will not be overwritten. This makes it very easy to change the your App design at any time. Also new added subviews will be obtained.

Notice: Changes you do on generated elements in xcode will be overwritten in case you you export the PSD-File with Psd2Xcode again.

Notice: Every time you generate the files you should open the Storyboard and LaunchImage to check if everything seems fine, before starting the simulator. Xcode still adjusts those files on opening.