Customization the easy way: overlayed images.

Saturday 13 February 2010, 7:27AM

People ask me all the time how I get my apps looking like they do. I’m going to go into really custom design in a later post, but this post is going to reveal one of my easier secrets: overlayed images.

Basically, take a screenshot of the app, go into PhotoShop, and then design on topof the image. Then, save that overlay and create an imageView that overlays the actual app. And bam, you’re done.

I’ve used this in the Data Options page, seen here:

Before:
Before I overlayed image iPhone dayta

After:
After I overlayed image iPhone dayta

The differences are subtle, so open up the images in two tabs and flip between them if want to see all of the subtleties. Enjoy!

  • Looking forward to read some lines how you Do the overlay! It looks super!!
    Thank you
  • eemceebee
    Could you share a few lines how you do the overlay ?

    Thx
  • bendell
    I might be missing something here, but if you're creating a semi transparent PNG that you effectively then just overlay into the iPhone app, won't you loose the ability to capture touch events to the controls below (specifically the on / off switches).

    Or am I missing something? Any chance you can reveal the code used to do this?
  • slavingia
    The touch events go right through, without me having to do anything. :)
  • get out of here. Really? I really thought it was going to be something else. You know, following this has made me wish to start programming 4 iPhone right now!. Keep it up and thanks.
  • slavingia
    Wish? Don't wish. Just start!
  • bendell
    Ah great, i was just missing something then :)
  • daniele8
    lol. i'm not able to use photoshop. now i have a motive to start with it.
  • I guess, it's the shadow eh?
  • slavingia
    yup and some minor details too
blog comments powered by Disqus