Have a look at our new "Tipps & Tricks"

Psd2Xcode - Step by Step Tutorial

Create your Xcode Storyboard, LaunchImage, Image Assets and App-Icons directly from a single Photoshop PSD file. If you have any questions or suggestions to Psd2Xcode, please feel free to contact us. support@psd2xcode.de

Important: Up to now Psd2Xcode only works with original Photoshop® Files. Support for PSD-Files made with other software may come in the future.

Step 1 - Create the Xcode Project

First of all create a new Xcode Project. Choose Single View Application, name it example (or whatever) and save it in the location you want to (Remember the path). Xcode automatically generates a new Folder with the name of the project.

psd2xcode screenshot

You`ll get an empty LaunchScreen and storyboard:

psd2xcode screenshot psd2xcode screenshot

 

Step 2 - Create the PSD-File

Create a PSD-File, Size: 1242 x 2208 px, resolution: 401 ppi, background: transparent. Save it in the just created Project-Folder.

psd2xcode screenshot

psd2xcode screenshot psd2xcode screenshot

Step 2 - Create the App Icon

Create a new Group by clicking on the Group symbol at the bottom of the Layers Window and call it "ic-anyname“. *For „anyname" you can choose what you want except special characters.
psd2xcode screenshot

!! Psd2Xcode will render Photoshop group called "ic-anyname" as an App Icon in all different sizes.

In this Group create a square 1024 x 1024 pixels with the rectangle tool [keyboard shortcut U]. Name the Layer to "img-anyname". In our exampl we name it "img-Icon".

!! Psd2Xcode renders Photoshop Layers starting with "img-" as an UIImageView.

psd2xcode screenshot
Right-click the the Layer and select "Convert to Smart Object", If you now double click the Smart Object you can design your App Icon in a separate file. When you save it changes gonna be made in every instance of the Smart Object in our example psd.

psd2xcode screenshot

Finally delete the empty Layer named "Layer 1".

psd2xcode screenshot

*For „anyname" you can choose what you want except special characters.

Step 3 - Create the LaunchImage

Create a new Group call it "li-anyname“. (We call it li-LaunchImage)

!! Psd2Xcode will render a Photoshop Group starting with "li-" as the Launch Image.

Now choose Select All [Command A] from the Select Menu and create a Layer Mask for the new Group by going to Layer/ Layer Mask/ Reveal Selection. Like this we don`t have to care about the dimensions of any objects overlapping the borders of our PSD that are in this group.

psd2xcode screenshot

The Group Layer should look like this now:

psd2xcode screenshot

Next we draw a rectangle with the size of the PSD File (1242 x 2208) and name it "img-anyname".

!! Psd2Xcode renders Photoshop Layers starting with "img-" as an UIImageView.

psd2xcode screenshot

To make it look nicer we duplicate (Click hold & drag with alt-Key pressed) the Smart Object Layer "img-Icon" and drag it over the img- Layer. Delete the " copy" of the Layer name and position the Icon in the center.

!! Psd2Xcode renders every Layer with the same name and same size only once.

That keeps your App Size small.

psd2xcode screenshot

Step 4 - UIViewController, UILabel & UIButton

!! Psd2Xcode will render Photoshop Groups starting with "vc-" as UIViewControllers.

To create the UIViewController we copy our group "li-LaunchImage" and rename it to "vc-Start“.

We delete the Layer "img-Icon" and write some Text in a new Layer. We call this Layer "txt-HELLO". Congratulations, you have just created an UILabel!

!! Psd2Xcode renders Photoshop Layers starting with "txt-" as an UILabel.

psd2xcode screenshot

Next - a simple UIButton: Add a new Layer in the Group "vc-Start“. Draw a Circle or get a graphic from the Custom Shape Library. Place it somewhere in the right upper corner and name the Layer "btn-prefs".

!! Psd2Xcode renders Photoshop Layers starting with "btn-" as an UIButton.

psd2xcode screenshot

To tryout the Button-Function in Xcode we create a second UIViewController by copying the Group "vc-Start“, rename it to "vc-Settings“, change the color of the Layer "img-bg1" to grey and rename it to "img-bg2".

!! As the Layer got a different name it will be rendered as a new background UIImageView

Than we replace the "btn-prefs" with a Close-Sign and call this Layer "btn-close". Finally we change the Text in the Layer "txt-HELLO" to "Settings" for example and rename it to "txt-Settings".

psd2xcode screenshot

 

Finally we have to bring all Groups into the right order.

  • 1) ic-Icon
  • 2) li-LaunchImage
  • 3) vc-Start
  • 4) vc-Settings

Have a look at the screenshot:

psd2xcode screenshot

 

Save the PSD file in the project folder (example). Now we are ready for Psd2Xcode!

Step 5 - Psd2Xcode doing the magic

psd2xcode screenshot psd2xcode screenshot

Open Psd2Xcode and drag your PSD-file into the field with the green plus sign or click on the sign and open your psd file.

 

psd2xcode screenshot psd2xcode screenshot

Psd2Xcode will validate your psd file and you will get a screen like this:

psd2xcode screenshot

!! Psd2Xcode discovers if your psd is set up for portrait or landscape mode.

Next, decide wether your App gonna be a normal or a universal App and if you want Psd2Xcode to include a Navigation Controller.

psd2xcode screenshot

Now click on "Export" and choose a destination (The folder of your project).
You will be asked if you want to overwrite the existing Storyboard. Click on yes.

psd2xcode screenshot psd2xcode screenshot

!! Make sure you choose the right folder before you overwrite the Storyboard.

After a short time of processing Psd2Xcode will give you the message "Successfully generated all files".

!! Processing time depends on the complexity of the psd file.

psd2xcode screenshot

After a short time of processing Psd2Xcode will give you the message "Successfully generated all files".

!! Processing time depends on the complexity of the psd file.

Now we are ready to have a look at our Xcode Project:

Step 6 - The Xcode Project

If you open your Xcode Project you can see that the launch screen, all sizes of app icons and image assets and the storyboard are already imported.

psd2xcode screenshot psd2xcode screenshot psd2xcode screenshot

!! Psd2Xcode generates the Xcode Storyboard, LaunchImage, App-Icons and Image Assets in all sizes.

Now we are going to connect the ImageViews. Open the "Main.storyboard" in the example folder of your Xcode Project, Ctrl click and hold the little close button in the "Settings-View" and drag it to the "Hello-View". An elastic band should appear like in picture 6b.

psd2xcode screenshot

!! Connect Views with Action Segues by Ctrl clicking holding and dragging.

As soon as you release the mouse button a popup window appears asking you which type of Action Segue you want to choose. Click on "modal". Repeat this with the "Settings-Button" of the "Hello-View".

psd2xcode screenshot psd2xcode screenshot

Now you can try your little App by going to "Product / Run" (Cmd R).

psd2xcode screenshot

You should be able to switch between the two Screens and if you close the App in the Simulator you can see the App Icon.

 

!! CONSTRAINTS: To assure that your App looks good on all devices, you can add UIConstraints. The idea of those constraints is, to provide a set off rules for interpreting your layout when the screen size changes. The whole concept of UIConstraints is quiet complex and you can achieve good results in different ways. In this case we want to do it as easy as possible.


!! 1. The background image shall be centered.

Select the UIImageView (The "Hello-View"), click on the first icon in the lower right corner of the Xcode Window.

and select "Horizontal Center in Container", "Vertical Center in Container" and finally click "Add Constraints".

psd2xcode screenshotpsd2xcode screenshot


!! 2. The settings button shall be in the right corner.

Click on the UIButton, click on the second icon in the lower right corner.

Click on the top vertical red line and the right horizontal line, select "width" and "height" and finally click on "Add constraints".

psd2xcode screenshot


!! 3. All following views can be handled the same way.

This assures a relative position starting from the top and a absolut size of all views on all devices. Alternativly you can also make the size relative.

!! NOTE: Sometimes you can just use the automatic mechanism of Xcode to generate constraints (Editor->Resolve Auto Layout Issues->Add Missing Constraints).

Although this might be the most simple way, in most cases it doesn't cover all devices and looks weird then.

!! NOTE: All segues and constraints will be preserved when using Psd2Xcode again for generating storyboard and launchimage. If at that point the psd design has new layers you have to add additinal constraints in xcode.

 

If you followed the instructions your little Example-App should look like this in the iOS Simulator:

psd2xcode example

We hope you you enjoyed our Tutorial and got your App working!
An update of Psd2Xcode is coming soon. Visit our website frequently to get the news.

Jesse & Jo from j-apps

 

Tips & Tricks:

Important: Up to now Psd2Xcode only works with original Photoshop® Files. Support for PSD-Files made with other software may come in the future. (If you are a developer of PSD-compatible software please contact us for cooperation)

1.) Every Layer and every Group in the PSD-File must have a Psd2Xcode compatible Prefix.

2.) Never use Groups without any Psd2Xcode-Prefixes

vc-: UIViewControllers

ic-: App-Icon

li-: LaunchImage

txf-: UITextField

scv-: UIScrollView

btn-: advanced UIButton.

3.) Layers always should start with one of these prefixes:

btn-: UIButton

img-: UIImageView

txt-: UILabel

Only exceptions: Layers inside the ic-group and Layers inside the subfolders of Advanced Buttons (btn-group) can be named without any prefix.

4.) Do not make simple buttons as groups. A simple button always has to be a Layer.

5.) If you want to make advanced buttons with different states you can use groups. But these must than contain the three states. Use Groups or Layers with the prefix

def- for default state, hig- for highlighted state, and sel- for selected state.

6.) For complex compositions convert a Layer into a smart object and make the design in this object. Inside the smart object you can use all Layer Styles like the shadow effect* and everything you want.

*Psd2Xcode only supports Layer Styles inside of smart objects. Opacity (NOT „Fill“) is supported directly for Layers.

7.) If you use the same element with the same color and size multiple times - just copy it, remove the ending „copy" and Psd2Xcode will render only one image for use with Xcode.

8.) One last one: if you want to change or delete previously used buttons, you have to remove the segues of these buttons in Xcode. If not, Xcode could crash… (An update that fixes this bug is on the way!)

9.) For some people, the images will not be loaded into Xcode.

psd2xcode

The problem currently occurs frequently, as in the latest Xcode version of the folder containing the images now is Assets.xcassets and no longer as before Images.xcassets.
To solve the problem you need to copy/move only the images from Images.xcassets (a folder in your project folder) in the Assets.xcassets folder.