Photoshop Question posted in
The official user guide can be found here.

How do you put a UIKit into an iOS app? – Photoshop

I’m a newbie iOS developer. I’m getting a UIKit designed by an independent designer. How do I take his photoshop design and put it in my app?

Do I code the app first and then put the design in? What’s the best way to do it?

Tags:

2

Answers


  1. 0

    You can never import the Photoshop designs, usually PSD formats directly as your iOS UI. You have to use the controls in the storyboard or .xib. The PSDs will only help you to extract images that you can us in your buttons, imageViews. It will help you identify font size and style. Get the sizes of the elements. Thats all!

    It might also help you in extracting images in all 3 required sizes that is 1x, 2x and 3x.

    Thats all I can guide you. Edits are welcome.

    Login or Signup to reply.
  2. 0

    So a friend of yours is doing the design and you are doing the coding. (UIKit is a different thing indeed).

    I am usually starting with wireframes. From a wireframe you can actually implement a fully working app with all functionality. But that’s my preference as you can work in parallel with the designer.

    Then you need to take from the PSD all the assets (images) in PNGs (that’s my preference) for every element of the UI and “dress” your app, make it pretty.

    For the assets that you need to take from the PSD e.g. an icon or a logo, you will need to start with the highest resolution, at this moment for iPhone 6+.

    You need 3 versions for the assets:
    @1x (you don’t see it in the actual name of the file as it is implied)
    @2x for retina screens iPhone 4, iPhone 4S, iPhone 5, iPhone 5C, iPhone 5S, iPhone 6.
    @3x for iPhone 6+

    So you start from @3x and then you work your way down to @1x (if needed – see hints below). So for example a logo with fix width 300 and height 150 at @3x, should be width:200, height:100 for @2x and width:100, height:50 for @1x.

    Hints:

    • The PSD should have vectors in them so as to resize nicely and have a dimension of 1080×1920 (that’s for iPhone 6+).

    • Most assets these days, with the introduction of flat designs, can be done with code or in interface builder.

    • Never, ever resize assets up as you will lose quality.

    • Unless you are supporting iOS6 and therefore iPhone 3GS you don’t need @1x.

    • You should really use an Asset catalogue https://developer.apple.com/library/mac/recipes/xcode_help-image_catalog-1.0/Recipe.html

    Finally, make this a bookmark, you will need it. 🙂
    http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search