So, I'm currently trying to put a title screen image together for my app, and I wanted to make sure it would be the right size without having to scale it, so it doesn't end up losing resolution or something.

But, currently I'm using GIMP for my image manipulation, so I have free range over what kind of resolution I want to work in. Does it matter if I work on a canvas with a resolution of, say, 100 px/inch (for example's sake)? Would that affect the assets when drawn in my mobile app? I wanted to know before starting so that I wouldn't waste hours of my life on this logo, and have it be completely ruined because I'd been working in the wrong resolution.

For reference, I'm going for more of a crisp 32-bit style, and I want to make sure it doesn't blur so much. I'm also probably going to be developing for iOS only, with a focus on the iPhone 6.

You have a few options, and it really depends on your current workflow. If you're making graphics in Vectors, you can easily scale up and down to match screen ratios and you will have a dynamic image to work with. If you're making your graphics using Raster Art, you will have to consider resolution size, and ratios. The problem with Raster Art is scaling up, if you do this your graphics will look horrible, and if you make a super high rest image, scaling down will cause loss in detail to some extent depending on the level of detail and how much you're shrinking the image. Text will also suffer!

I would suggest you understand what resolutions you're going to working with.

https://developer.apple.com/library/content/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

Also read up on:

https://developer.apple.com/design/tips/

My advice is to pick the highest res at ratio (a), and the same for ratio (b) if you cannot convert your prior image to other ratios, and then scale down.

If I remember correctly iPhone 5 and up are all on 16:9 ratios, and iPad are on 4:3.

I personally use Vector art, but I had to use Raster on a client's project so I just created several versions to match the different devices.

Just a final tip for you! Find out what the "basic dimensions" of the graphic will be for both ratios, and just make a place holder, load it into your project file and emulate the different iPhones through Xcode to see how they fit. You should also consider Landscape and Portrait view modes as well. This will at least let you know you can work with those dimensions, and how it will look when taking up screen space.

If your focus is only iPhone 6 (not iPhone 6 Plus) then you only have to work with the specs for that device (ratio is 9:16 / 16:9 as per portrait / landscape):

iPhone 6 Portrait
Resolution: 750 × 1334
Scale: 2x
Scaled Resolution: 375 × 667

iPhone 6 Landscape
Resolution: 1334 × 750
Scale: 2x
Scaled Resolution: 667 × 375

I hope this helps.

On 3/23/2018 at 5:17 PM, Rutin said:

You have a few options, and it really depends on your current workflow. If you're making graphics in Vectors, you can easily scale up and down to match screen ratios and you will have a dynamic image to work with. If you're making your graphics using Raster Art, you will have to consider resolution size, and ratios. The problem with Raster Art is scaling up, if you do this your graphics will look horrible, and if you make a super high rest image, scaling down will cause loss in detail to some extent depending on the level of detail and how much you're shrinking the image. Text will also suffer!

So, I'm really going for a 16-bit look... And, I really don't have to tools to work with vector graphics. Unless Krita has it... my program that I'm using probably doesn't....

And I also kind of made a 16-bit logo as a raster... but either way, I guess I should rephrase my initial statement to where it's probably easier to understand. Because, reading it back now, I phrased it rather poorly.

The resolution that I'm working in on the document itself (the .xcf, or .psd file if you're using photoshop) doe that resolution matter? Or is that more of a display option for while you're working? For instance, working in a 300 px/inch resolution won't change how it will appear on the end product, would it?

On 3/23/2018 at 5:17 PM, Rutin said:

iPhone 6 Portrait
Resolution: 750 × 1334
Scale: 2x
Scaled Resolution: 375 × 667

iPhone 6 Landscape
Resolution: 1334 × 750
Scale: 2x
Scaled Resolution: 667 × 375

I hope this helps.

OK, so... let's say I my logo is 600x900, and I wanted to use it on iPhone 6 in landscape... would it still fit on the screen, or would it appear to be a 1200x1800 when I try to place it on the screen?

I developed the logo (not quite those dimensions) after using a diagram for reference, with pixel measurements.... Anyway, here's to hoping I didn't ruin my logo before I even begin putting the project together.

Thanks for the advice, though!

I was hoping that I could just make it meant for the iPhone 6/6s, and maybe re-size the assets for a later iPad version. I figure, on a screen as small as an iPhone 4 (which I believe also has a 19:5 aspect ratio) I may not be able to make it look very good just in general... that screen is awfully small. If it's blurry and becomes an issue, I might do a re-vamped version, but I really want to get it working on 6/6s first

What I personally do when designing any graphics for mobile is to create a image file in Photoshop with the exact dimensions, or highest resolution (if working in ranges), then make layers and work from there. My workflow will change if I'm supporting all platforms at 1x, 2x, and 3x.

If you're going to make a logo for the iPhone 6/6s remember they scale at 2x, so make the images to work with 1334 x 750, and leave some padding on the sides. NOTE: iPhone 6 Plus is 3x - 1242 x 2208 if you decide to support it.

Make a document in Photoshop at 1334 x 750, make a layer and load in your graphic. If it doesn't look good it most likely will not work. You can also save the file as a single 1334 x 750, load it as a single image that fills the phone screen and see how it looks with the iPhone 6 emulator or actual phone before doing more work. Work with the 2x sizes because you're not going to support 1x anyhow.

Your logo at 600x900 will not work with 1334x750, your height is too large. If you meant 900x600 it will fill majority of the space, so you can scale it down if needed. I don't know what you're trying to do, and if your logo is supposed to fill majority of the screen or not, so I cannot offer anything in terms of design size advice.

14 hours ago, Rutin said:

Your logo at 600x900 will not work with 1334x750, your height is too large. If you meant 900x600 it will fill majority of the space, so you can scale it down if needed. I don't know what you're trying to do, and if your logo is supposed to fill majority of the screen or not, so I cannot offer anything in terms of design size advice.

 

Oh, yeah, I meant to specify that the app is going to be horizontal-only. After reading some guidelines about putting an app on the app store, I probably will just have to drop it on top of a backdrop to use. Because iOS apps apparently need a start screen, just in case content needs to load or something.

But, to clarify, how big would this start screen image need to be to perfectly fit on the iPhone 6 screen? Assuming that the phone is in landscape view, would the image be 1334x705, or 667x375? I guess I'm just having a bit of trouble wrapping my head around the whole "scaled resolution" thing.

If your app is going to be only in landscape mode "[         ]" then you can design based on the 2x scale of 1334x705.

There are a few schools of thought when it comes to iOS Design. Some people suggest deigning at the 1x then scaling up as needed, other people suggest designing at the highest res, or even higher to support rounded down scaling, then making scales for 1x, 2x, and 3x. This will depend in if you're using Raster Art or Vector Art as well. (Most people I find who use the 1x design first work flow are using Vectors, not Rasters)

I personally will design at the scaled resolution when working with Raster Art (usually in a res that rounds evenly - sometimes you need to do some cleanup if it gets too distorted). With Vector Art I will always work in 1x first, but consider line sizes, and borders as these can sometimes get too thick depending on original sizes when up scaling, but it's not a problem to fix without ruining the entire image.

If you're only going to support the iPhone 6/6s and you're working with Raster Art, there is no reason to work in 1x. When working with Raster Art you'll always run into this problem with scaling as new devices come out. You only need to consider 1x, 2x, and 3x as a whole if you're trying to support all devices, and possibly give more future life to your app. I know many people that had problems when they made their iPhone 6 apps at 2x with raster art, and when iPhone 6 Plus came out with 3x with the new res they had to re-do the graphics.

This is why I've moved to almost a 100% Vector workflow.

OK, I just want to make clear that everything @Rutin wrote is true. The only reason I am butting in here is because some of it could be misunderstood by a new artist.

OK, first thing. It's bad workflow to make images at none power of two. All your images should be power of two images: 1, 2, 4, 8, 16, 32, 128, 256, 512, 1024, 2048, 4096 etc.

So once you have your images in a power of two format it also becomes very easy to scale up or down without too much loss in quality.

1 pixel -> 4 pixels -> 16 pixels. This is what is meant by 1X 2X and 3X design. Zoom in on the next image to see how the pixels grow:

Some engines need you to fill in all these but with good engines with 3D support like Unity and Unreal you can use mipmaps. A mipmap scales a large image down to save on performance, often based on depth.

Mips however provide a awesome tool for making 2D games, because you only need to make the 3X art and the mips will make the 2X and 1X for you. Not only that but mips can be blended to provide proper scaling. For example: 

2208 x 1242 -> 1334 x 705 is a difference of 1.66 x 1.76. In other words it isn't a perfect 3X to 2X. So the Mips can blend the X axis by 0.34 and the Y axis by 0.24 .

Summary: When working with raster(pixels) art it is better to make the largest possible graphics, the largest screen size you support, then to down scale from there using mips or a scale function.

Design gameplay from 1X upwards and art from 3X downwards. Is the rule of thumb.

Only pixel perfect and vector art is designed 1X upwards.

42 minutes ago, Scouting Ninja said:

OK, I just want to make clear that everything @Rutin wrote is true. The only reason I am butting in here is because some of it could be misunderstood by a new artist.

You explained it a lot better than I did!

Great post.