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.

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

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.

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.