Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

New tab bar icons in PDF format... Guidelines to create custom?

I have noticed that in recent versions of Xcode, the project template for "Tabbed Application" creates a project where the tab bar icon images (dubbed "first" and "second", for the default two tabs/view controllers available) are actually stored in .pdf format, not .png, and displayed in the Assets.xcassets folder with a resolution of "All" for use as "Universal" (instead of -say- a resolution "@3x" for use as "iPhone app iOS 7-8", like the app icons).

I assume this is to provide a vector graphics-based resource that is truly resolution-independent and hence supports all sorts of devices.

My question is: What are the guidelines to create custom resources in this format? I guess it should start by creating a custom outline in Adobe Illustrator and exporting it in pdf format, but, What size and units should I use? Are there any other things to look out for? I haven't found anything in official Apple documentation and a web search for "ios tab bar icon pdf" only gives links to websites providing clip art etc.

Note: I have thought whether to post this question here or in Graphic Design Stack Exchange site, but it still has to do with the Xcode IDE and developing iOS apps, so I place my bet here. Feel free to vote for closing it if you think otherwise.

like image 781
Nicolas Miari Avatar asked Dec 01 '22 17:12

Nicolas Miari


1 Answers

I understand MirekE's answer as I lived the challenge and now have a solution. But for anyone else, here's a real world example.

I create all my line icons (or anything of your choosing) using sketch (highly recommended) using a 30 X 30 Artboard then applying the drawings inside. I make the background transparent and then set my export to 1x size and apply the PDF format. Visible in this screenshot.

enter image description here

Then it's a simple import into Xcode > create the object in Images.xcassets > select the image group > choose single vector from the pulldown scale factors (in the attributes inspector) > then just drag and drop the imported image in the single place holder.

enter image description here

I've applied this approach to all my custom tabbar items and the result has been stellar.

like image 193
deijmaster Avatar answered Dec 05 '22 01:12

deijmaster