iPhone 5 Design Resource Roundup

It’s not even out yet but there are some great resources available for creating iPhone 5 mock ups. Which is your favorite?

Angled Mockup

Constantinos Demetriadis

[Black]

iPhone 5 Photoshop Action

Simon Lord

[Black / White]

iPhone 5 PSD

Carter Digital
[Black / White]

iPhone 5 Template PSD

Mark Bauer

[Black]

iPhone 5 PSD

Legwork Studio

[Black]

iPhone 5 Mockups PSD (Vector)

Tony Thomas

[Black / White]

iPhone 5 PSD (Vector)

Pixeden

[Black]

Extract (uncrush) Images from an iOS App

Often I’ll see an app incorporate a new UI implementation that really impresses me. Still being a learner, I always wonder how these elements are coded or put together — is it an image trick? Maybe a CGGradientLayer? How are they able to achieve so much speed? It’s times like these that it helps to get a small peek under the hood. Like Mac apps, iOS apps are bundled together basically as a zip file — you can actually change the IPA extension to ZIP and unarchive the app very easily. The limitation here is Xcode compresses (or ‘crushes’) the png’s used in an app to keep the file size down. Luckily, since iOS 3.2, the command line tool that compressed these images included the added functionality of decompressing them. Peter Boctor (of iDevRecipes) wrote a Ruby script called App Crush that would uncrush the png files (with instructions here) but it hasn’t been updated in about a year. Since then, Apple has changed how Xcode is deployed (through the App Store these days) and the location in which they put it. It’s very easy to update the Ruby script to find the new Xcode and several have. I wanted to make it just a tad easier and created an Applescript Droplet that allows you to drag the IPA onto it and uncrushes the png files. You can download it here. I’ve also made this version’s source available here. This is my first attempt at an AppleScript Droplet (which seems like a dying tech) so if you see something that could be done better, let me know!

Usage instructions:

  1. If you don’t know the location of the IPA (app) you’d like to uncrush, open iTunes and click the apps tab, right click on the app you’d like and click “Reveal in Finder”
  2. Drag IPA onto the App Uncrusher
  3. It’ll take up to a few minutes to finish and you’ll have a folder called “APPNAME images” on your desktop that should be full of pngs.

Be ethical with this. Don’t steal another app’s images and call them your own.

Using custom fonts on iOS (iPhone iPad)

This is a quick walk-through on using a font other than those supplied by Apple on an iOS device.

For reference purposes, you can find out what fonts are available to you “out of the box” by checking out this comprehensive list:
http://iosfonts.com/

I’m going to be using Bebas for my example, a great font created by Dharma Type. You can pick it up here: http://www.dafont.com/bebas.font or use a font of your own choice. It’s important to note you should check a font’s license before you use it in an app you intend to distribute in the app store.

If your font’s not installed on your Mac, go ahead and install it. Before we get too deep into coding and while you’re in or around Font Book let’s go ahead and get the PostScript name of your font. You can do this by selecting your font from the list inside of Font Book and pressing Command + I to toggle the font information. The right side of the window will look like this:

The PostScript name is listed on the top, with Bebas, the PostScript name is simple… it’s Bebas but most are more complicated. Take the PTSans family for example: PTSans-Regular to PTSans-CaptionBold. Keep this PostScript name handy as we’ll reference it later.

Moving on let’s get the ttf file into an Xcode project.

I started with a Single View Application template, go ahead and get that going as normal. Inside my Supporting Files folder I’m going to create a group named “Fonts”. I’m going to drag BEBAS___.TTF into that directory and make sure “Copy items into destination group’s folder (if needed)” is checked. Click finish.

Next, open your app’s plist. Right click and add a row, we’re going to add the key “Fonts provided by application” which is an array of the ttf font files. Toggle that down and for Item 0 add BEBAS___.TTF.

Now you need to head over to your project’s build phases tab. Click to the “Copy Bundle Resources” and click the + icon to add a new item and choose BEBAS___.TTF.

Now, when your window looks like this, you’re ready to use the font in the application:

I put some simple code to create a UILabel in my viewDidLoad method like this:

    UILabel *bebasFlavoredLabel = [[UILabel alloc] initWithFrame: CGRectMake(0, 0, 320, 44)];
    bebasFlavoredLabel.text = @"Bebas on iPhone";
    [bebasFlavoredLabel setFont: [UIFont fontWithName:@"Bebas" size:15]];

    [self.view addSubview: bebasFlavoredLabel];

On line 3 you see where we use [UIFont fontWithName:@"Bebas" size:15]. The name you use there is the PostScript name you found at the beginning. Go ahead and run:

Viola! Your font is ready to be used as you wish!

Path 2.0 style animated splash screen (default.png)

I don’t use splash screens often but when I do, I want them to open like a book.

In all truth, I’m not a big fan of splash screens and even Apple recommends using a default.png that shows the controls (with no text) of the application:

Display a launch image that closely resembles the first screen of the application. This practice decreases the perceived launch time of your application.

Avoid displaying an About window or a splash screen. In general, try to avoid providing any type of startup experience that prevents people from using your application immediately.

from HIG Guidelines

However, some people love them and one app in particular has a nice implementation splash screen — Path 2.0. When you open Path, you’re greeted with their logo on a red version of the Apple linen texture that animates open like a book (or journal as that’s what Path considers themselves to be).

You can get the source for this project here: https://github.com/jaysonlane/OpenBook

Before we begin, let me preface this with a disclaimer: I am very new to animations in Cocoa so bear with me. If you spot unnecessary or inefficient code, please leave a comment and I’ll tidy it up.

If you haven’t seen the animation, hop on the app store and pick up a copy to see what we’re trying to accomplish. I’ve created a default png that we can use cleverly titled Math (like a Math book that opens, right?) You can download that here (retina) and here.

To get started, let me explain “the trickery” behind what we’ll be doing: we’re going to use the normal default splash system in place to display our default.png. In the App Delegate, once the application has finished launching, we’re going to create a UIImageView on top of our view of that same default.png. We’ll then animate that UIImageView, to rotate open to reveal our view.

So let’s go:

Create a new project, I created one using the single view template but this will work with whatever. Go ahead and set your default.png and default@2x.png to the images supplied. You can do this by clicking the project in the navigation pane on the left, click the Target and scroll down to launch images:

Open your AppDelegate.m and add the following code to your application didFinishLaunching or application didFinishLaunchingWithOptions function:


    //1. add the image to the front of the view...
    UIImageView *splashImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
    [splashImage setImage: [UIImage imageNamed:@"Default"]];
    [self.window addSubview:splashImage];
    [self.window bringSubviewToFront:splashImage];

    //2. set an anchor point on the image view so it opens from the left
    splashImage.layer.anchorPoint = CGPointMake(0, 0.5);

    //reset the image view frame
    splashImage.frame = CGRectMake(0, 0, 320, 480);

    //3. animate the open
    [UIView animateWithDuration:1.0
                          delay:0.6
                        options:(UIViewAnimationCurveEaseOut)
                     animations:^{

                         splashImage.layer.transform = CATransform3DRotate(CATransform3DIdentity, -M_PI_2, 0, 1, 0);
                     } completion:^(BOOL finished){

                         //remove that imageview from the view
                         [splashImage removeFromSuperview];
                     }];

Three things are happening here…

1) We create a new UIImageView and add it to the top of the view
2) We set an anchor point on the left side of the image to make it open from the left and then reset the frame to the full size of the view
3) We animate the UIImageView and remove it from the view on completion

That’s it, it’s that simple.

Icon already includes gloss effects but still glossy!

When we released Namely for iPhone, the first few days the app was in the store, the icon was glossy. This was not our intention. When you view the app in the store, it had the gloss effects automatically applied by Apple but once you installed it, the icon displayed on the springboard without the gloss effect (as intended). This was pretty annoying.

We had UIPrerenderedIcon (or ‘Icon already includes gloss effect’) in our info.plist but it still was having this issue with the app store. I did a bit of research and found that some people used jpg instead of png when uploading their 512×512 icon to the app store. You can only edit your icon when you’re app is in some sort of approval or waiting for approval status, not when it’s actively available in the store. I had a few changes I wanted to push in an update so I came up with 1.0.1 and uploaded it to the store. I changed to the jpg and still had gloss!

I got to looking around in the plist and realized that the UIPrerenderedIcon was nested inside of “Icon files (iOS 5) >> Primary Icon >> Icon already includes gloss effect”. So I put simply moved it out into the root of the plist and rebuilt. Submitted to the app store and viola! no more gloss.

My guess is because this key was nested the store didn’t see it so it put the gloss effects on as if the key were not there.

Dieter Rams’ Ten Principles of Good Design

Good design:

  • is innovative
  • makes a product useful
  • is aesthetic
  • makes a product understandable
  • is unobtrusive
  • is honest
  • is long-lasting
  • is thorough down to the last detail
  • is environmentally friendly
  • is as little design as possible
Dieter Rams was a consumer product designer and best known for his work with Braun. He designed coffee makers, calculators, radios, a/v equipment, consumer appliances, and more.