>- 5 different images
So, no rotation, then?
The app that I'm working on will be landscape only. I got the 5 different dimensions from the site I referenced, I'm not sure if that is correct approach or not, kind of why I'm asking.
>everything seems to reference the 1x, 2x, 3x. I get what that stands for, but it doesn't seem to apply when it comes to the background image.
I believe it does. Seen this SO thread?
I'm not concerned with how to call the images from code. I'm concerned with with how many images I need, what sizes, what do I name them, and how do I implement them in xcode.
When I click new image set from the assets.xcassets file, I get 3 slots 1x, 2x, 3x. So I don't know how to go implementing a background for all devices using 3 slots...
thanks for the reference. I'm not able to understand how it works from that thread...
>I'm not concerned with how to call the images from code.
Didn't furnish that link for code, but you should be...hint: iOS IS case-sensitive. See the 3rd reply w/sizes & using asset catalog(s).
Naming involves using the right suffix and again, paying attention to the fact that iOS is case sensitive.
As for '3 slots', as I recall, when you add multiple (properly named) images more slots will appear as needed.
Just when I think I'm getting a grasp of this, I get lost again.
So here is my unofficial chart: (using portrait sizes)
Devices image size file name
iphone 4s (@2x) 640 x 960 ???
iphone 5 (@???x) 640 x 1136 ???
iphone 6/7 (@2x) 750 x 1334 firstname.lastname@example.org
iphone 6+/7+ (@3x) 1242 x 2208 email@example.com
iphone SE (@???x) 640 x 1136 ???
ipad2 / ipad mini (@1x) 768 x 1024 ???
ipad3+ / ipad mini 2+ (@???x) 1536 x 2048 ???
ipad pro (@???x) 2048 x 2732 ???
So If I want to cover all my bases for the majority of iphone devices, and if it was portrait only, I would need 8 images. Is there a naming convention for the other images in the chart?
This seems like a lot of work just for one image on all devices. I saw that you could do ~iphone and ~ipad and those would work for all iphone devices and all ipad devices.
You have been helpful, I'm still on the hunt for full understanding.
I would keep names short, all lower case and include a reference to their use.
The convention in your example is all about their suffix. File names are important for launch images and icons, tho.
image1.png (= 1x, non-retina)
firstname.lastname@example.org (=2x scale)
email@example.com (=3x scale)
Perhaps put the size in the name:
...that way same sized images are shared between devices - don't bother with more than you otherwise need (duplicates).
> I saw that you could do ~iphone and ~ipad
That may be the legacy (icon) naming mentioned here - not sure I would get creative w/it today: https://developer.apple.com/library/content/qa/qa1686/_index.html
I think the reason Apple stopped listing which-for-which everything sizes is because of the routine additions to the product line...
Have you worked thru icons and launchimages yet? Do the math
For those contemplating scaling as a means to reduce image count, see https://forums.developer.apple.com/thread/72112
I tried the naming convention as you mentioned with the resolutions, but assets.xcassets doesn't recognize it.The best I can do is have a set of 1x,2x,3x for iphone and a set for ipad. But that limits me. Not the worst idea to make just those sizes. but the image will have to be downsized to fit the appropriate device. I'm not sure if that is the standard technique for a background image.I want to do my best to not have to use code to make things easier, but I don't know if that is possible in xcode 8 within th assets file
So I notice that all ipads have the same aspect ratio, and all iphones have the same aspect ratio as well. This would mean that if an image scales down, it should look pretty good.
With that in mind, does this sound logical:
I can make 3 images:
ipad @2x image size: 2048x2732 all ipads would use this image
iphone @2x image size: 750x1334 all iphones would use this, except for the 3x models
iphone @3x image size: 1242.2208 the iphone 6+ and 7+ would use this image
I'm not worried about non-retina displays, because who really uses those anymore.
Is this the standard way that someone would use for making an image that would serve as the background image for an app?
with this logic I can do the same with all other images as well.
Just to be clear:
@3x - Retina HD (model list as applies) - sizes used 2/3x may vary, since we basically have non-retina, retina and retina hd, but those 3 represent more than just 3 devices, of course.
>I'm not worried about non-retina displays, because who really uses those anymore.
App Review does, when your app is iPhone-only so that your UI can be checked via 1x/2x emulation mode. Universal apps get a bye on this, I think.
>Is this the standard way
I guess your summary is about as 'standard' as the average dev could hope to apply at this point in time for static image use via the bundle, yes.
Now the question is what is your workflow for generating the proper image, size, dpi and resolution for each example?
I didn't know the app review would matter, I'll have to look into that to be sure on universal apps. If not I could implement another image. As far as workflow goes, I'm not exactly experienced with graphic design and best practices when it comes to constructing images of different ratios... A possibility is to create an image that is bigger than the biggest image I need without regard to ratio... then crop it to the 2 image ratios I need. They won't be exactly the same, but fairly close... from there I can scale down as needed... Again, im not that experienced in this field so it would take some practice... I'm more of the programmer, definitely in need of a graphics guy. But I do want to develop enough graphic design skills to crank out prototypes at least... What do you think? Am I on the right track?
I start with the largest (proofed) image, then resize down, keeping the dpi constant (I don't crop, but that's when I want the large image to appear the same regardless of device/scale, etc.).
I've used GraphicConverter for my dev work for years now (GC's batching tools are comprehensive and easy to configure, etc.), also Preview (great for a quick resize/resolution change/check - very reliable) - check out offerings via the mac app store, as an example. Some can batch icons to correct sizes and save tons of work. If you lean towards PhotoShop, be careful - it's not that iOS savvy without the right plug-ins, I think.
Experiment with a sample image or two to get your process worked out, then device test to confirm they look correct, then add the rest to the project but only once you have reliable assets. Don't get ahead of yourself/the process.
Resist the urge to juggle images once they've been added to the project. Don't change an image name* (in or outside of Xcode), or replace an existing image with the same name (especially outside of Xcode via the Finder) - Xcode loves to hang on to old/indexed info, and if you're not careful, you can make a legitimate change that doesn't seem to work and bamm....wash/rinse/repeat until you do nothing but get worn out chasing your tail.
If you find an image isn't what you want, delete it via Xcode's Resource navigator (confirm to move to trash)**, then drag/drop the next try, from the Finder, into Xcode's Resource window.
My opinion is that a good dev has at least basic image editing skills - more tools in the box, etc. and makes you easier to work alongside/explain things to should you bring an expert in later.
*As I tried to point out before, create a naming scheme that is consistent, lower case, not lengthy and helps to identify image purpose so you don't have to head scratch next year when you've been away from the project.
**If you make an image change and it seems to fail/not take, perform an option-clean build folder to force Xcode to out the old and in the new. Hold the option key, use the Product menu, choose 'clean build folder' (no just a simple clean).
Take your time to create a valid workflow that fits your style first...it will pay off later.