How can I accurately draw a mockup for an iPhone 5 app in GIMP?

Question

In the Appstore you can show screenshots of what the app looks like to the user so they know what to expect. I am looking into creating an image from scratch of a screenshot of an app.

Here's my question: From what I understand, apps measure width and height in "points" instead of "pixels". In GIMP I have the option of using "points" instead of "pixels" too. Should I use "points" as the unit of measurement for my canvas or should I stick to using "pixels"?

Also, are the colors on my computer screen the same as the colors on the iPhone screen? How do I make sure the colors I use in GIMP look the same when viewed on an iPhone?

GIMP mentions using different color profiles which I understand help display colors on my screen exactly the same way they would be handled and shown on the iPhone. Where I could find a color profile for the iPhone?

Answer 1

What I understand from your question is the following: You want to create screenshots of an app (NOT an actual app), like the ones in the Appstore. Is this correct?

So some notes about your questions:

• Unless you are preparing things for printing, you won't be using points (in any graphic software). For digital work, pixels are all you need.

• The iPhone5 resolution (when designing apps) is 1136 x 640 pixels. Now, here's the important thing: You might wonder (you might not), why 1136 and not 568px, that is roughly what you see in "real life"? Because iPhone uses retina display, so you need to prepare app assets in double the size. But, since you are only working with screenshots (graphics), you don't need to care about that. You need to prepare them for 568 x 320 px.

• Color profiles are good for trying to keep the colors consistent across devices (cameras, scanners, printers). Because colors are rendered differently depending on the device, the profiles create sort of equivalencies. You will be creating a screenshot, for a computer. Therefore, you don't need color profiles.

I hope this clarifies. If you want to show screenshots in an actual phone (well, a graphic of a phone!), check this question out or do a search in the site for "prototype", "mockup" "phone" and things like that.

Answer 2

Another resource you could try is Lucidchart! They have some awesome features and tools for iPhone app mockups. https://www.lucidchart.com/pages/examples/iphone_mockup_tool