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. firstname.lastname@example.org
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
For more examples checkout: Examples on Github
To let Psd2Xcode know how your design shall look at the end, we defined the following name conventions to identify different UI elements.
Simple UI elements are represented by layers. At the moment the following elements are supported by layers:
Available layer prefixes version 1.0:
UIButton by starting the name of the Layer with:
The Layer will be used as background for a
UIButton. The title of the
UIButton will be set to "".
UIImageView by starting the name of the Layer with:
UIImageView will be created an the content of the PSD
img-Layer will be set as an image.
UILabel by starting the name of the Layer with:
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.
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:
UIViewController by starting the name of the group with:
UIViewController group will be the starting point for the Storyboard.
Define the App-Icon by starting the name of the Group with:
Psd2Xcode will automatically generate all needed Icon Sizes and place them into Images.xcassets
Define the LaunchImage by starting the name of the Group with:
It behaves as a ViewController.
UITextField by starting the name of the Group with:
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
txf-Group just needs a Layer with no prefix.
UIScrollView by starting the name of the Group with:
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
Notice: To make the
UIScrollView work you have to add
UIConstraints in Xcode later.
UIButton by starting the name of the Group with:
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
hig for highlighted state and
sel for selected state.
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).
According to the ........
Generate your PSD with a
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.
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.
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.