The launcher icon is the little icon that is displayed for the android app on the screen of apps. Google provides some pretty detailed information here.
As far as color goes, the basic specs dealt with here are:
- just use a small color set
- top lit
- have a drop shadow
Notice how the "top lit-ness" and the shadowing on the image itself are a little different for each icon. Again, there are just guidelines from Google, not unbreakable rules. Look at all the launcher icons on your phone and you'll see even more variations, and maybe some even intentionally break the guidelines (like the launcher for Amazon's Kindle app, which is beautiful but is bottom-lit!).
Since you are going to need it in several resolutions, it is probably best to use some kind of vector graphics program to create the core graphic. Each such program is going to have its own peculiarities with both its interface and terminology, and that's where I think you can burn a lot of time if you're not familiar with one to begin with.
So here we go. I will be using Inkscape, and for this program, I highly recommend the tutorials by Nicu Buculei or the youtube videos by "tutor4u". Also, there are helpful folks in the Inkscape community.
Small Color Set
Google recommends a small color palette. Xebra Labs did us all a little favor by creating a palette based on those recommendations for Inkscape that you just need to save to a ".gpl" file in Inkscape's share/palettes directory (version 0.48). You can get info on the palette here, where you can just copy and paste to a file.
In my case, I have a basic spinner board I want to make a launcher icon out of. As indicated by google, you want your icon to be a caricature, not a screenshot ("highly simplified and exaggerated"). I had initially ignored this advice, and got to appreciate why they say that: you can't see the details, anyway, and it can just become a blurry mess.
Here's the core image I created in Inkscape. I initially had a few more colors from the palette on the wheel, but the wedges had to be smaller, and this resulted in an icon that was one of the "blurry messes" I mentioned.
Getting It "Top-Lit"
What does "top lit" mean? You won't find much to help artistic idiots such as myself when you search for "android top-lit launcher icon". For anyone who knows what they are doing with graphic programs, this is a trivial thing, and "top lit" is all they need to know.
As far as I can tell, "top-lit" basically means some kind of white gradient at the top of the image.
Following Nicu's general suggestion, the first thing I did is create a solid circle that is the same size as the spinner board. Ideally, you would just use "Edit->Duplicate" and then fill the duplicate with black before adding the gradient. However, those little lines between the wedges were still there (and I couldn't figure out how to get rid of them), so I ended up just manually defining a circle that was the same size as the spinner.
I then created a radial gradient on this new circle that starts with pure white at some alpha (later to be tweaked til the cows come home), and then the gradient ends up pure white transparent. You slide this thing over on top of the original spinner board to get a top-lit effect. Here's what the color dialog looks like for gradient, where the first color (white, alpha=128) is selected:
Below is what things look like with the radial gradient selected with the "Gradient Editor". I can't figure out how to get the background to be a different color, so you can't see it unless it's on top of the spinner. However, I want to show this to let you see the little handles that can be adjusted on the gradient itself. You can also do this when the gradient is actually on top of the spinner board.
This is an encouraging start, and provides an opportunity to spend some time experimenting with the location, size, and angle of the gradient. There is no set formula. In looking at other launcher icons, it seems that sometimes folks will use more than one gradient, not necessarily linear, and not necessarily just "white to transparent".
Using a similar approach, you can use gradients that have a middlin transparent black in them to add "shadows" on the icon (see the globe icon above).
Creating the Icon - Android Asset Studio
At some point, you will be ready to create the icons to be distributed for your app - you'll need it at various sizes and resolutions. An easy way to do this is to use google's "Android Asset Studio", which allows you to create icons per google specs online (it's in beta). You just upload the image, play with the options a bit, and then click a button to get a zip file that has the image saved in the needed formats, AND in the right folder structure relative to your app(!). If you don't have much tweaking once the image is uploaded, it may take you just a few seconds.
Here's an example using the image above - they even do the drop shadow for you.
No comments:
Post a Comment