How to Make an Icon – from A to Z (part two)
Posted in: How-To
Before you start reading this one, I strongly recommend you read the previous post, if you didn’t already.
The last time I wrote about the general process of creating an icon. wolverine downloadThis time we are going to look into scaling these icons, i.e. their different sizes.
One of the most important things we mentioned during the preceding post is that one will have to define the different sizes of an icon which are to be delivered.
Instant reaction for most of you would be: “I’ll make a big one, and then I’ll make it smaller…” or “I am going to make it a vector, so I’ll be able to scale it up or down as I please…”
Well, WRONG! In order to keep this post as short as possible, I’m not going to talk about vectors, pixels, or their resizing; let’s just say that there is no algorithm or a mathematical function that can rescale your 48×48px icon to a 16×16px icon without making it appear blurry. The same goes when you try to make the icon bigger, only the blurring is bigger, as well!
We used the Shape tool to create the icon, thus making every element a vector, but if we try to downscale it, you can see that some blurring occurs, and icon loses sharpness.
Vectors are mathematically valued, and they have coordinates to define their position in space. Scaling the vector down to a smaller one will surely make the details smaller, but it’s not going to reduce or optimize them. You are!
download Live Free or Die Hard movie The Changeling movie full When downscaling a 512×256px icon to a 256×128px icon, the process usually comes down to plain Free Transforming and postprocesing – getting rid of the excess details, and tweaking the existing ones (maintaining the consistency of the original icon goes without saying).
In most of the cases, the sizes smaller than 48×48px need to be made from scratch. Yup! Place a pixel grid, zoom in 3600%, and knock yourselves out! You can forget about Shapes, Filters, and Transformations…
Mickey, Donald, Goofy: The Three Musketeers release And I repeat: it is important not to ruin the original look of the icon by reducing the elements. On our example, one of the bookmarks was removed, so instead of four, now we see 3! However, the form and the symbolism are still present. If we were to remove the silhouette of a man from the front page, the original message would be compromised.
Anyone with Pixel Art experience knows just how fun, but also very hard work this can be…
Discussing the details of creating an icon would mean for me to explain the basics of the Photoshop, or the Illustrator, and the necessity of you really knowing those things really goes without saying.
Again I am uploading the updated .psd file, and any interesting questions you might have you are able to post through comments. Maybe it will make an excellent topic for part 3.
