design app art by a GUI “Screenshot” or an “Art Board”? and how to apply it to the app?

Question

1.Should I design a "screenshot" of the UI graphics of my app?

An example of a "screenshot" from this link

2.How would i apply the "screenshot" i designed in photoshop and illustrator to the graphic UI of my app?

3.Should i design an "art board" with the buttons, backgrounds etc?

An example of an "art board" from this link

4.Do I cut the art board to exact sizes?

5.If anyone knows of a relevant tutorial i will appreciate a link very much.

I think this question is relevant for iPhone development as it is a crucial part of the process.

thanks.

UPDATE I found a great post on how to export from photoshop to iPhone

Answer 1

Here's a link to a tutorial I came across that explains the different ways to export UI elements from Photoshop: Exporting UI Elements from Photoshop.

Hope this helps!

Answer 2

1. Well sure. Normal design process is to first produce crude wireframes, from which the app itself can be built, and then to go back and add in the specific graphics supplied by your artist.
2. Use either UIButtons with your images properly cropped and exported, or as "invisible buttons" on top of the background. PC-like behavior is to respond to UITouchUpInside, but sometimes you might want to respond to UITouchDown if you're using an invisible button (ie a custom button with no image or text title). Depending on the art, you might want to create custom images for UIControlStateHighlighted.
3. An artboard is a design-time thing; your artboard will never make it into the app. If you want to use one, you do so for your design flow, not to make the app run better.
4. Yes. Your artist should export each individual button as its own PNG -- in both normal and @2x resolutions, of course.

On that Dragon Storm screenshot you posted, I see: A) a static background image B) four buttons on the right, probably invisible buttons. Even though the wooden placards for New Game and Settings aren't axis-aligned, it's kosher to fudge this a bit and use axis-aligned images. Your buttons can, of course, include a transparent area so that the placard highlights on click, but the stone and chains do not. C) three buttons on the bottom, managed via a UIScrollView hooked up to a UIPageView - which actually suggests that there's 12 buttons in the interior view. It's probably OK to use the stone Chapter images as button images here. D) A custom font used to display the dates for each save

So the art assets would be:

• one background PNG
• zero, one, or two PNGs for each of the four buttons on the right
• one or two PNGs for each chapter
• the custom font