{"id":4234,"date":"2014-09-25T08:59:47","date_gmt":"2014-09-25T07:59:47","guid":{"rendered":"http:\/\/www.thetawelle.de\/?p=4234"},"modified":"2014-10-01T21:24:55","modified_gmt":"2014-10-01T20:24:55","slug":"using-uiimage-pdf-category-for-x-resolution-independence-and-ever-increasing-apple-idevice-size-fragmentation","status":"publish","type":"post","link":"https:\/\/www.thetawelle.de\/?p=4234","title":{"rendered":"Using UIImage-PDF category for @#x resolution independence coping with ever increasing Apple iDevice Size Fragmentation"},"content":{"rendered":"

Since iOS 8<\/strong> revealed YADS (Yet another device size)<\/strong>, things start to become too fragmented and way to complicated to optimize the display of your app on all those devices down to the pixel. I mean there never was a pixel, only a point and subpixel antialiasing, but up until @2x<\/strong> we were able to optimize for pixel perfect alignments with a little bit of extra effort in Photoshop (or other good tools like Pixelmator).<\/p>\n

The Post-@2x-era<\/h3>\n

Since @3x<\/strong> this time is over. If you have a universal app which needs to work on iPad, iPhone and iPod and on @1x, @2x and @3x, your matrix<\/strong> looks something like this:<\/p>\n\n\n\n\n\n
 <\/th>\niPhone\/iPod<\/th>\niPad<\/th>\n<\/tr>\n
@1x<\/th>\nPicture.png<\/td>\nPicturePad.png<\/td>\n<\/tr>\n
@2x<\/th>\nPicture@2x.png<\/td>\nPicturePad@2x.png<\/td>\n<\/tr>\n
@3x<\/th>\nPicture@3x.png<\/td>\nWho knows what`s next?<\/b><\/td>\n<\/tr>\n<\/table>\n

If your app goes the extra mile on perfect UXP with the display of your image assets you will also take portrait and landscape orientation into account. This means the following:<\/p>\n\n\n\n\n\n\n\n\n
 <\/th>\niPhone\/iPod<\/th>\niPad<\/th>\n<\/tr>\n
Portrait@1x<\/th>\nPicture.png<\/td>\nPicturePad.png<\/td>\n<\/tr>\n
Landscape@1x<\/th>\nPictureLandscape.png<\/td>\nPicturePadLandscape.png<\/td>\n<\/tr>\n
Portrait@2x<\/th>\nPicture@2x.png<\/td>\nPicturePad@2x.png<\/td>\n<\/tr>\n
Landscape@2x<\/th>\nPictureLandscape@2x.png<\/td>\nPicturePadLandscape@2x.png<\/td>\n<\/tr>\n
Portrait@3x<\/th>\nPicture@3x.png<\/td>\nWho knows what`s next?<\/b><\/td>\n<\/tr>\n
Landscape@3x<\/th>\nPictureLandscape@3x.png<\/td>\nEven in Landscpe?<\/b><\/td>\n<\/tr>\n<\/table>\n

If you have 9 image assets you want to display (say some simple icons), this will amount to 9 x 10 = 90<\/strong> image assets to add. Repeat my words, that is ninety assets<\/strong> you need to provide.<\/p>\n

The power of 10<\/h3>\n

This was way too much for me. Since I am independent developer, I simply cannot afford ill-sized amount of workload. So why not go back to 9 image assets from the 90 assets you usually need to craft?<\/p>\n

And that is what I did. I just vectorized all those image icons which were very important for the main screen in my app. That took some time, but from now on I simply do not care anymore about Apple’s next plans to release the oversized iPhone Plus Plus<\/strong> or the iPhone Super Plus<\/strong> or the iPad Air Hyper Retina<\/strong> or the iPod Hexagonal<\/strong>. Even iOS 9 with frosted glass effect for text and vibrancy effect for the device home button… I DON’T CARE.<\/p>\n

I just use mindbrix UIImage-PDF<\/a>, a category which enables to create UIImages from PDF-files containing scalable vector content (Kudos to cocoanetics<\/a>). This category allows you to switch your assets from .png<\/strong> to .pdf<\/strong> in no time and saves you megabytes in your binary bundle.<\/p>\n

Results of using PDF<\/h3>\n

I have an app on the AppStore called Sea Weather Pro<\/a><\/strong> which actually needs 9 icons and uses them to create a nice rendered main screen menu with large tap targets and some kind of „plates“ which have a light gradient and some nearly invisible borders. These plates need to be rendered differently in different sizes and with different icon sizes and for different screen scales on each and every device in portrait and landscape.<\/p>\n

The Portrait screen looks like this now (click to see full size):
\n\"\"<\/a><\/p>\n

The Landscape screen looks like this now (click to see full size):
\n\"\"<\/a><\/p>\n

I was able to adjust the landscape size of the icons on these plates to be a little bit smaller, so when the iPhone\/iPod is rotated to the landscape orientation the overall visual impression is lighter than before. This was only possible due to the use of PDF-assets.<\/p>\n

The used resources (png vs. pdf)<\/h3>\n

The assets I used were completely different. It was bitmap versus vector data and the vector won by far. The additional flexibility you gain for having every size you want at any time with no more tool involved than UIImage, combined with the time saved editing and slicing bitmap assets is mindblowing.<\/p>\n

BUT<\/strong> and this is a real issue, I was at first not able to use a PDF file which actually supports alpha blending or transparency. This is a well known issue because PDF never was meant to be used for something other than printing on paper (which is white\/opaque background by default). So we need to jump through the following loop, if your exported PDF file does not yet kill the white box<\/a> usually found in such files when exported<\/a>.<\/p>\n

Where I used this before:<\/strong>
\n\"PNG<\/a><\/p>\n

I now use this:<\/strong>
\n\"PDF<\/a><\/p>\n

The process in 11 steps (using InkScape in X11 & XQuartz FTW!)<\/h3>\n

I was a Photoshop heavy user in the Ante-@3x-era<\/strong>, so all my resources are still in PSD-files. My vectorization of icons was done in PS. When I started saving the vectorized content as PDF-files I recognized that the PDF files contained always a white box on which the shape was drawn. There was no transparency or alpha blending whatsoever. I tried really every single configuration and colorspace to make this box disappear. It was not possible!<\/strong> So I tried using InkScape<\/a><\/strong> to fix my problem. Which actually worked.<\/p>\n

\"process_inkscape_01\"<\/a><\/p>\n

Step 1<\/strong>
\nImport EPS file you exported from Photoshop. Be careful to clip to the objects bounds\/frame. This ensures you keep the aspect ratio and spacing in the document.
\n\"process_inkscape_02\"<\/a><\/p>\n

Step 2<\/strong>
\nNow you see your icon, but you also have a white background, which should be transparent (alpha = 0).
\n\"process_inkscape_03\"<\/a><\/p>\n

Step 3<\/strong>
\nAdd a layer to the image, below the existing layer containing your whole shape.
\n\"process_inkscape_04\"<\/a><\/p>\n

Step 4<\/strong>
\nDraw a color filled rectangle on that new layer behind the vector shape you imported.
\n\"process_inkscape_05\"<\/a><\/p>\n

Step 5<\/strong>
\nChange to the layer of the vector shape. Choose the selection tool and select the shape. Now choose ungroup<\/strong> from the menu.
\n\"process_inkscape_06\"<\/a><\/p>\n

Step 6<\/strong>
\nNow select the white background box. And press the delete button…
\n\"process_inkscape_07\"<\/a><\/p>\n

Step 7<\/strong>
\nAfter the deletion you now have the single shape without a white box. Select the layer containing the colored rectangle…
\n\"process_inkscape_08\"<\/a><\/p>\n

Step 8<\/strong>
\n…delete\/remove this layer.
\n\"process_inkscape_09\"<\/a><\/p>\n

Step 9<\/strong>
\nNow go to file menu and choose print<\/strong>…
\n\"process_inkscape_10\"<\/a><\/p>\n

Step 10<\/strong>
\nChoose „Print as File“<\/strong> and give a meaningful name to it.
\n\"process_inkscape_11\"<\/a><\/p>\n

Step 11<\/strong>
\nYou now have a pdf image that is way smaller than the EPS file or PDF file Photoshop spit out. And this one is able to be rendered with transparency\/alpha blending.<\/p>\n

Why do I blog this?<\/strong> Because I am fed up with Apple’s neckbreaking pace of dropping new iOS releases and iDevice sizes. I need to come up with solutions Apple did not provide to make all those transitions cost efficient.<\/p>\n

There is no other way to provide app updates than reducing the amount of work on this hell of fragmentation which now was introduced by iOS 8. Even the category class I linked to above is not yet fully ready to be used in iOS 8. Check out my forked one<\/a> which fixes several issues with caching and the correct scale values.<\/p>\n

I hope I can help other independent developers. And I dare Apple to slow down their amount of OS iterations dropped on developers and instead spend a whole year in just improving and cleaning up the mess they left behind after this power play on fragmentation and design changes. Apple please start thinking about usefulness and simplicity again and CONSOLIDATE. And please show some empathy towards developers (aka your ecosystem), or you will soon have messy, ugly and buggy apps all over the place or even worse are left with only OpenGL non-UIKit-using apps like games. You will end up with a GameStore instead of an AppStore if you continue going down this road.<\/strong> It’s the developers in the first place which take care of bugfree and perfectly working apps and not your review team. You simply cannot replace developers with reviewers. And the next time something isn’t yet ready to ship – like iOS 8.0? Don’t ship it! It’s that simple.<\/strong><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Since iOS 8 revealed YADS (Yet another device size), things start to become too fragmented and way to complicated to optimize the display of your app on all those devices down to the pixel. I mean there never was a pixel, only a point and subpixel antialiasing, but up until @2x we were able to … \u201eUsing UIImage-PDF category for @#x resolution independence coping with ever increasing Apple iDevice Size Fragmentation\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,17,88,67,95,59],"tags":[],"class_list":["post-4234","post","type-post","status-publish","format-standard","hentry","category-advocatus-diaboli","category-best-practice","category-coding","category-english","category-hack","category-iphone"],"_links":{"self":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/posts\/4234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4234"}],"version-history":[{"count":0,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=\/wp\/v2\/posts\/4234\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thetawelle.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}