Question

looking at dribbble, I have started to ask myself, how I would implement a very custom UI in Xcode as a back-end dev.

Assuming, I have a photoshop file with layers with the whole mockup, how would i basically port it to iOS?

I am curious for some answers!

Answer 1

As hotpaw2 rightly mentioned, you create each object (button, textfields, segment control, etc..) in photoshop and apply desired effects (Drop shadow, Gradient, Stroke, Inner Shadow etc..) .

To create a button draw a rectangle shape (with radius if needed) and apply the effects to that layer from Layer > Layer Styles >
Drop Shadow.

Most important is to adhere to Apple’s HIG guidelines while designing the custom UI otherwise your app may get rejected.

Once the button is ready in Photoshop in the Layers windows choose that layer, goto Paths tab and right click that layer and choose “Make Selection“, Select Copy Merged from the Edit menu and create a new document and paste the copies layer and choose Save it for Web from the File menu, save it as PNG24 with transparency.

 // Image with cap insets sample code:
 UIImage *buttonImage = [[UIImage imageNamed:@"blueButton"]  resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];

This makes the left and right 16 pixels of the button image are not scaled or resized and the center part of the image to be scaled.

All the Best.