Under the Bridge

UI Design and Asset Creation

So it’s been quite a while since we last mentioned anything to do with the design process, but we’ve noted a couple good posts recently:

Starters Guide to iOS Design

As someone who does work on both the development and design side of iOS apps I find that many designers struggle with the transition to UI work, or with the different processes involved in iPhone and iPad app design. In this guide I’ll describe the deliverables you’ll be expected to produce, outline the constraints of the medium and introduce fundamental iOS and UI design concepts…

Even if you’re not a starter, read it through anyway; it’s packed with all sorts of resource links and further references worth checking out.

My app design workflow

Here it is — my complete iOS, Android and Mac app design workflow, starting from the first time you open Photoshop, to the app release and beyond. Now seemed like a good time to document how I’ve been working, because my workflow is about to drastically change again, with the release of Skala.

There’s a Skala Preview out now that is well regarded, too.

Moving on to the asset creation side, big recent news is that TexturePacker thing which you’ve probably heard of is up to 3.0.11 these days which just added massively convenient integration with UIKit:

UIKit Animations with TexturePacker

UIKit applications often contain animations and lots of graphics. Adding the graphics as single images might consume a lot of memory and impede performance.

Using TexturePacker to create sprite sheets instead:

  • Reduces memory usage
  • Speeds up loading of your application

I’ve created some powerful classes which allow you to simply load the sprite sheets created with TexturePacker into your application – including code to play animations.

If you use animations that are pre-aligned, you might also have a lot of transparent pixels in your images. While the individual files might not use much memory – due to compression – the RAM usage might be quite big.

If you pack your sprite with TexturePacker this transparency can be removed. The provided CAWSpriteLayer class compensates the missing transparency by moving the sprite into the same spot as if it had its original size…

So yeah, now TexturePacker is good mojo for not just game makers but everybody working with lots of bitmap images. Oh, that would be … everybody, pretty much. So download it now!

… unless, of course, you want to skip the whole bitmap thing and go straight from vectors to code. We’ve kept a list of SVG options appended to this SVGKit mention a while back, but there’s one in particular worth pulling out for a more in-depth link collection, and that would be PaintCode:

PaintCode 1.3 is here!

For example, you may want to include real-life photos in your designs. We’ve added support for images to PaintCode to let you do just that…

PaintCode can now import layer graphics, paths, texts, groups and effects from Adobe Photoshop (PSD) documents…

And it’s file compatible with their new WebCode Canvas/CSS+HTML/SVG editor.

fabiankr / FKRBlockDrawing “is a collection of two classes and one category to make creating artwork in code a lot easier. It’s great in conjunction with PaintCode, where the graphics in the examples project are from.”

Recreating MKUserLocationView is a great walkthrough of how to do a tricky control that highlights the benefits of PaintCode nicely.

And of course make sure you check out their tutorials and examples.

Looks pretty darn useful, huh? Yep, we’re free with your money today; download it NOW!


misterwell / MMScalableVectorView: “Turns static PaintCode or Qwarkee code into a UIView that honors the contentMode property.”

How To Set Up Photoshop For UI Design