The most efficient way of adding "AppIcon" to project in Xcode? - ios

Im programming an app in xcode and something has recently come to my attention when designing app icons. Here is the current setup that I have in my project:
Right now I have a 87x87pixel image for the "29pt" option (far left of the image), I also have a 120x120 for the 40pt option(middle) and I have a 180x180 pixel png for the 60pt option(far right). This seems highly inefficient, not only this but I need to supply #2 resolution images too? Surely there is a better way of doing this?

There are a couple of approaches I've taken in the past. One way is to create your icons, etc. in GIMP, Photoshop, etc. If you need to resize them, there's a command line utility called ImageMagick which I find to be a lot easier for resizing images than setting sizes in an image editor. The command you would use for resizing is called mogrify.
Option two is to get your hands on an app called Asset Catalog Generator. You just dump your images in and it spits out the correct file sizes and naming conventions. It's probably the best $4.99 I've spent in a long time.
Update
It appears someone has written a script to create the icons, too. I haven't used it myself, so you might want to poke around and look for others.

Create your app icon (once) at a decent resolution say 1024x1024. Drop the file into MakeAppIcon (a free service) and out pops all your icons in a zip file properly sized, enhanced as necessary, and rendered. Just drop them into images.xcassets and you're done. This avoids having to tweak any icons that may be off by a pixel or two and avoids those annoying Xcode warning messages.This vendor also offer a service for bulk uploading your iTunes screenshots, but I haven't tried that yet. Luv it!

You can use the vector-based images from a PDF. Session 411 from WWDC “What’s New in Interface Builder” discussed—albeit very briefly—Xcode’s support for creating your PNG files at build time from a vectorised PDF.
There is good article on this, you can refer that as well. http://martiancraft.com/blog/2014/09/vector-images-xcode6/
(Note that this does NOT cover PDFs for icons, just for images)

I would suggest you try SquareIcon, which I believe makes creating Xcode app icon sets very easy. Just to let you know, this is my own app.
The app allows you to drop in a generic image file (like a JPG or PNG) and convert it to a .appiconset file which you can put into your project's asset catalog. This takes care of all the naming and resizing that you might have to do manually.

UPDATE 2: I might've misunderstood you. When I wrote this answer, I thought that by 'inefficiency' you meant memory consumption and the resulting app size. If you meant, that making an icon for all the sizes is a lot of work, and you're looking for a better way to do it, consider looking at Adrian B's answer instead.
First of all, no, there is no more efficient way of doing it (unfortunately). Xcode supports vector images, but they are only supported on OS X, AFAIK. On iOS it just generates all necessary images at compile time.
Second, the app icon is small. You won't save a lot of space by optimizing app icon size. If you need to decrease the app size, try finding something that really takes much space. The icon doesn't.
UPDATE: Luckily, Apple realizes, that forcing everybody to download resources that they don't need is no good. So they introduced App Thinning along with iOS 9. I haven't looked into it thoroughly yet, but the general idea is that you upload a binary containing all the resources as usual, but when your users download the app from the AppStore, they get a version containing only resources that they need.

Related

Xcode tab bar and SVG icons

I was hoping I could use SVG icons on a tab bar. I'm currently using Xcode 12 beta 3 and whilst it works with these images, the icons don't seem to rescale.
Is there a solution to this?
A few observations:
See the Creating Custom Symbol Images for Your App for suggestions on how to build symbol SVG assets.
Historically in Xcode, we couldn’t easily use SVG assets. But we could convert them to PDFs, which we could then drag into our asset catalogs. When you use the asset in the app, it still ends up rasterizing it, which it saves you from having to create bitmaps of the three different sizes yourself. If you need to make it scalable (e.g., notably, for accessibility), check the “preserve vector data” option in the asset catalog.
In Xcode 12 (only beta right now), the importing of SVG assets has greatly improved. It still appears to rasterize the asset when you go to use it, though, just like the old PDF approach. You need to make sure your SVG/PDF has an artboard of the appropriate size for the eventually rasterized images.
If you consider these various vector graphic solutions, make sure to test this on your target minimum OS before you go too far. I had app with vector/PDF assets and got some unexpected edge-case behaviors on old OS versions.

Is it really necessary to provide all the different app icon sizes for an iOS app?

I'm tempted to provide the highest resolution icon and let iOS scale it down as necessary. Is this a bad idea, and (if so) why?
you'll definitely want to produce files of various sizes as required by xCode. You want to make sure that the file presented when the app runs is of a high quality.
There are tools out there that will automatically create all the sizes you need for your app icon. Here is a link to the site that I use: https://makeappicon.com/
Hope that helps!
Yes, it might be bad idea. If your icon art was produced using a vector image editor (e.g., Adobe Illustrator, Adobe Photoshop with vector primitives, Sketch, etc) you best bet is to export all required resolutions yourself. In doing so, you will guarantee the best possible output for each resolution.
Keep in mind that exporting a single high resolution image and then resizing, for each required resolution, using a bitmap editor (e.g., macOS Preview) won't produce the same results.
PS. As already pointed out, I'm not sure your binary will even be accepted by Apple if missing icon data :-(

Vectorial PDF with xCode using Affinity Designer

I'm newbie to Affinity Designer and I'm trying to export some Affinity Designer's project to xCode as vectorial pictures in PDF format.
Initially everything was working fine but, after some attempts (I'm designing the launch screen so, after every export, I make some little adjustments then I re-export the PDF) xCode started giving troubles: sometimes picture doesn't appear in XIB, sometimes appear only some giant pixels and, in very luck times picture appears but very grainy.
I tried changing the pixel's size of the picture (is the only setting I see) but it doesn't change nothing so my questions are:
- what are the requirements for xCode's vectorial PDF (resolution or other settings)?
- is there a precise iter to follow in Affinity Designer to export vectorial and import them in xCode? (I can't find any tutorial about it)
Thank you!
EDIT This issue has been fixed some time ago.
I think there's something missing (or wrong... for this context at least) in Affinity Designer's exported PDF files. If you open them in Preview, rotate (and back), then re-save, the vectors will load properly in your app.

Keep many images in an iOS app

I want to make an iOS app. This app will have over 200 images, each with different sizes (500x500[maybe smaller] and less). What is the best method to keep them, having a smaller app size?
I think about optimizing their sizes for web in photoshop, but still the app will have a big size if I want to keep and a respectful quality.
Any ideas?
Well, I don't know if you can do this for your app, but you can download them from the internet once the user installed your app. This way you can keep the size of the package as small as possible (I assume you talk about non-critical images, that can be obtain afterwards).
UPDATE
Alternatively you can use SVG instead of bitmaps, of course if applicable:
how to render svg file in iphone and ipad

Slicing/Dicing UI Files

Is there a quick/easier way to create the required graphic files for an iOS UI theme (at standard and 2x resolutions) from a PSD such as http://graphicriver.net/theme_previews/2989093-magnanimous-ios-ui-kit-for-mobile-interface?index=6. The only way I know of is to use Photoshop to painstakingly cut the image up, but it will probably take me the best part of a day to do so.
Take a look at Slicy for Mac OS.
In Photoshop you can use: from the menu: File/Automate/batch and record actions which you use lots of times. Like save As, to -> PNG and add name #2x to it, enz.
After the recording you are able to edit the Action via menu: Windows/Actions

Resources