In our last post in this series, we introduced three iterations of Android and their app icons: the vanilla OS, Samsung’s S-series, and LG. Weirdly, Google’s stock Android icons have stood out the most so far, probably thanks to the company’s coherent and unified design philosophy—something that others are lacking. LG’s app icons, however, are… Read more »
Google’s Android OS is famed for its near-limitless customisation options, open-source framework, and general versatility. Through third-party launchers like Nova, users are given a huge variety of options when it comes to the look and feel of their smartphone—especially launcher app icons. With thousands of innovative icon designers out there, you’d be forgiven for thinking… Read more »
With exponential developments in smartphone OS and GUI technologies, it may often seem like new visual designs are becoming obsolete faster than they’re being created. A couple of years ago, flat icons were all the rage—and are now being superseded once more by 3D and ‘almost flat’ Material Design-style icons. Keeping up with the trends… Read more »
What icon sizes do I need for Android 5? Android 5.1 Lollipop continues with the same sensible icon size methodology as Android 4.1 As technology has evolved, phone & tablet manufacturers have created screens with ever increasing resolutions and pixel density. An increase in pixel density or dots per inch (dpi), means more image information… Read more »
We began this post series by introducing Google’s material design specification for the latest iteration of Android. Material design represents Google’s attempt to unify design across its many different Android platforms, which focuses on building a flat aesthetic with a 3D tactility. We then went on to explore the implications of this new design spec… Read more »
In our last post, we discussed Google’s new ‘Material design’ philosophy for both Lollipop and future generations of Android. Material design establishes rules and theories for how visual environments in Android should be composed. Each visual element is treated as ‘material’ and thus must be designed with specific properties, dimensionality, and spatiality in mind. In… Read more »
If you own an Android device, you might have already received (or at least heard about) the 5.x updates in the form of the latest OS update, Lollipop. With it comes a whole host of new changes and improvements to notifications, encryption software, performance, and, most importantly, the ‘Material Design’ style Google announced last year…. Read more »
What are Android Icon Sizes? It is a simple question but even Android, who provide better documentation than most, seems to make you want to work a little for the answer. Fear not, I have done the work for you! Android Icon Sizes – App Launcher What sizes do I need for Android App launcher… Read more »
So here it is… I am very slowly falling in love with Android. This romance is still in its early stages. I am still metaphorically stealing glances from afar, working my way up to my ‘big move’. You see, I have been having a lukewarm affair with iOS for some years now. Never an Apple… Read more »
Icon design is ever evolving. As new platforms embrace the use of icons, new terms and references are dreamt up and older terms fall out of favour. This glossary is an ongoing project to document the icon design lexicon. Contributions are very welcome. 16×16 Pixel Icons This icon size has its own entry here because… Read more »
As an Icon Designer I am a big fan of Adobe Fireworks, which doesn’t get the kudos of its more popular siblings such as Photoshop and Illustrator but there are some things it does far better and most revolve around its excellent handling of the PNG file format.
What is so great about PNG?
The PNG format is almost always the format of choice for icon designers as it supports 24bit colour and 8bit transparency – meaning nice antialiased curves and smooth transparency, and most software and mobile platforms support it well. Even ICO files, probably the second most popular format we are asked for, are still originated from PNG files for the best results.
This short tutorial will demonstrate the best method for rendering crisp icons from a simple icon design created in Illustrator by comparing the PNG rendering of Fireworks with Photoshop & Illustrator.
Rendering Crisp Icons from Illustrator
For this example we have created a simple vector drawing of a computer in Illustrator. This icon needs to be rendered at 16×16 pixels, which is always the hardest size and also the most important one to be rendered well with nice sharp detail.
The basic steps to ensure a crisp render are to make sure the canvas is the exact size of the required icon and that all lines and details in the illustration line up exactly to 1 pixel thickness. If you draw detail that is slightly thicker or thinner than 1 pixel, the output will be dithered as the software tries to replicate what you are drawing. If your lines exactly match the pixels then you are much more likely to get a nice crisp result.
Below you can see the original sketch on the Server Icon in Illustrator and next to it a version optimised for 16×16 pixels.
To render a PNG file from Illustrator you need to select File -> Save for Web & Devices… (Shortcut: Alt+Shft+Ctrl+S) and you are then presented with a preview before you commit to the export procedure.
The right hand side of the preview doesn’t look great so lets check it by deselecting the ‘Transparency’ tick-box.
Now you can clearly see that Illustrator has added some unwanted anti-aliasing to the right hand edge which at 100% will look like the right edge is thicker than the other lines. Sometimes this can be caused by not lining things up pixel perfect in the file but in this case it is Illustrator not doing a particularly good job of rendering.
Rendering Crisp Icons from Photoshop
We know Illustrator is a vector package, so maybe it’s no great shock that it doesn’t always do a perfect job with exporting PNG files. Let’s see if we can improve our icon by importing the AI file into Photoshop.
I find the easiest way to import an AI file into Photoshop is to drag the AI file over an open Photoshop Window but you can also do the same by selecting: File –> Open (Shortcut: ctrl+o) and navigating to your desired AI file and clicking the ‘Open’ button.
You are then presented with the Import Dialogue box.
Make sure you select ‘Srt Box’ in the Crop To drop down as this will make sure the imported file is exactly 16×16 pixels and will save you changing the canvas size later. Also check the Resolution is 72 pixels/inch and not some higher print resolution, then click ‘OK’.
Now you can see the icon in PS and it looks pretty good from here but is that some unwanted anti-aliasing on the upper of the two dark grey horizontal lines?
Let’s follow the exact same ‘Save for Web & Devices…’ export process as for Illustrator (Shortcut: Alt+Shft+Ctrl+S). We can also un-tick the ‘Transparency’ box to more accurately see how the file will actually look.
This isn’t looking good for Photoshop, it has that same issue with the tight hand edge as Illustrator but there is also some unwanted anti-aliasing within the image itself. I only have one more Image editor to try so it is over to Fireworks.
Rendering Crisp Icons from Fireworks
This process is almost identical to Photoshop but there are some differences worth noting. The import Dialogue Box for Fireworks is a little less grand but we don’t need to change anything on it, just click ‘OK’.
Now our Icon is safely in Fireworks and at first glance it looks much better than both Illustrator and Photoshop.
The other main difference in Fireworks is the keyboard shortcut for ‘Save to Web & devices’ which is the slightly less finger taxing: Ctrl+Shift+X
Once the Export Dialogue is open you can check the transparency by clicking on the ‘Options’ tab on the left hand side and then on the ‘Format’ drop drop down menu, selecting PNG 24 or PNG 32 (the latter being the transparent 32bit version).
As you can see the icon is looking the best we have seen so far.
And the winner is?
Ok you probably knew from the title which I think is the best Adobe product for rendering PNG files but let me show you all of the files I rendered so you can see for yourself.
I’ll admit you may need a magnifying glass to tell the difference on this very simple design but on more complicated designs it is really easy to lose clarity, which is why I’ll take any improvement I can get and in most cases this means using Fireworks.
If you have any comments or prefer a different technique, I’d love to hear from you.