True Stories:

How to draw an icon. Minimization process

So get your magnifying glasses handy — we continue! After long and feisty arguments (do not worry — no blasters involved) we have 3 approved icons sized 64×64. Further starts the work that requires attention and patience but its end result will be seen by the Alien Invaders much more often (as it happens in the process of evolution they did not enlarge the screens but worked on improving their eyesight). Now we will grab your attention with the proper method of drawing small icons.

Read more…

How to draw a good icon for Google?

Not so long ago we berated the new Google icon and called it bad. But denouncing something that is not yours is easy! But what icon would be good? We decided to answer this question: let’s take four designers and make them draw a good icon for Google. Such approach we call running ‘a creative boutique’.

Read more…

Why the new Google favicon is bad?

A few days ago I visited the site of my favorite search engine and saw a new icon in the URL line. My first thought was that I misspelled the URL but then it occurred to me that Google had changed its favicon. I do not reckon it’s some kind of world-shaker for the whole IT industry but to me — an GUI designer — this fact appealed as rather interesting.

Read more…

Enlarge your icons

A small icon is OK! It’s nothing to be ashamed of; it’s not a big deal. Icons can even be very small or plain tiny. This has been their iconic fate. For many years it was the reality and everyone was happy. But something went wrong. All of a sudden, icons got big!

Read more…

10 Mistakes in Icon Design

It is much easier to criticize somebody else’s work than to create something cool yourself. But if you apply a systematic approach to criticizing, make a numbered list and prepare illustrations, it will be regarded as a fully-fledged analysis! In my opinion, icon design is undergoing a transitional period. On the one hand, screen resolutions are increasing, hence enhancing icons. On the other hand, we still have good old pixels. Icons sized 16×16 and even smaller are still widely used. And so, here are the most commonly observed mistakes in icon design…

Read more…

Drawing an icon: Creating and destroying the Earth

Last time we finished off with sending sketches to the Invaders corrected and refined according to their comments. The invaders had a lot of discussions and tentacle waving. While they were killing the time all of their Gigantic Assault Squids contracted the Space Pox and died. Oops! There goes the bio-weaponry. The good old methods proved to be more reliable. So the decision was made to invade planets using flying saucers with powerful blasters like in good old times.

While the invaders still have their saucers up and flying, we decided to draw the Earth invasion icon first.

Read more…

Physics still matter, even with special effects

Sharp-sighted Craig Hockenberry from the Iconfactory have spotted the inconsistency between the new 3D Dock and the old good Apple Human Interface Guidelines. Craig draws our attention to the fact that the sidelines of the Dock’s surface are sloping at different angles than the sidelines of the imaginary desk where the application icons are lying in the guidelines:

The floor displayed on the Dock does not use the perspective of the desk in front of you, nor does it appear as a shelf. Because there’s a difference between the floor angles and the traditional desktop icon angles, many icons look wrong.

Read more…

Drawing an Icon: Sketches and Metaphors

Rejoice, our young fans of digital miniature! The festival has finally come to your town. TurboMilk in my person is starting a series of posts on how we draw icons: from the moment of placing the task and receiving an advance payment to sending the final versions to the customer. Eugene Artsebasov, our illustrator, was so kind to assist me.

Read more…

Designing an iconic language

Last fall I made a brief report at a conference organized by RusCHI and 1C in the context of celebrating the World Usability Day. I was talking about designing a user interface icon language. Following the “better later than never” principle, I hereby bring the same report to your attention in the form of text with illustrations.

Read more…

“Circumcision”, a children’s holiday

Let’s recall the operating systems of the last century — the range of MS Windows up to 2000, Mac OS up to version 9. All of them supported only icons with one-bit transparency. Fortunately, the industry is moving ahead and the modern operating systems nowadays use the eight-bit transparency. However, for the sake of back compatibility Microsoft has recommended to include resources with one-bit transparency into icons made for Windows XP. With time the tinkering with turning the modern eight-bit transparency into one-bit was romantically coined “cutting edges” among icon designers. Today, I am going to talk about this “tinkering”…

Read more…

Tools: Chapter 2, the raster-based one

You are probably beginning to boil over — it’s been three weeks since Dmitry revealed the mysteries of the vector stage of icon creation, so where is that continuation? Let me tell you why we made no haste.

The thing here is that we always try to cut down on this raster stage as much as possible. We take pains to dally that moment when we minimize Illustrator and launch Photoshop. I wish I’d never see that Photoshop! Where do I get that hatred to all designers’ holy cow? It’s nothing personal, I assure you. There is nothing bad I can say about Adobe Photoshop as a specimen of the class of raster editors, let alone the fact that it is crafted with more quality that our beloved vector-based Illustrator. My dislike lies not for the specific product but for all methods to edit an image whilst they are based on their raster output.

Read more…

Tools: Chapter 1, the vector-based one

At the dawning of my creative career the one and only vector-based drawing program was Corel Draw. I didn’t even care to think there were any other. Corel Draw was perfect until you had to rasterize your work. It was the worst I have ever seen in my life. To import your work in Photoshop, you had to save the vector in the EPS format, which is alien to Corel and kin to Adobe, losing some effects at the time.

Thus, my acquaintance with Adobe Illustrator was the result of despair. Yegor, he is a true martyr. He went through Corel Draw, Xara and Macromedia Fireworks, and he had yet a lot to suffer, hadn’t he chosen Adobe Illustrator. And it was only Denis the smart boy, who decided to master the vector-based thing by Adobe and even bought a book on the subject.

I’m saying all this to let you know that Adobe Illustrator is not the choice dictated by our ideology, as some might think; it is the only tool suitable for making vector-based icons. Had we the opportunity, we’d eagerly change it for something else. Illustrator would have won the first prize in the contest for the worst and most carelessly written $500-priced program. The quantity of errors stuns your mind and sometimes makes you just livid. Well, let’s not go too deep in the sad thoughts…

Read more…

Tools: Introduction

Once upon a time we received a letter from Mr. Anton Tretyakov (Internet). He asked the following (we retain the original spelling and punctuation):

“Hello! Tell please in what programs I can bigin making icons. I am a designer and know basic graphic programs. I am interested in the steps of drawing.”

That’s one strange question, isn’t it? One should have looked a bit deeper and read our wonderful blog. It would have become clear that we are using Adobe Illustrator and Adobe Photoshop. Of course, we didn’t get upset with Anton’s paying little attention to our work: his letter let us furnish our blog with a series of articles about the tools we are using.

Read more…

The Icon Book

If one studies the evolution of user interfaces since the 80’s of the last century up to now, it is difficult to get rid of the feeling that the trade of icon-building, which hardly was able to become an engineering science (e. g., in the Macintosh System 7 interface) can now be regarded as a fine art (Windows XP and Mac OS X).

Read more…

Rasterizing in Adobe Illustrator 10 & CS

Many a stumbling block is there on the way of a patient icon designer. Some you jump, some you push away but still once you stumble. The question “how to make a tiny nice picture — an icon — from a big nice picture?” is in the first lines on the top problem list. In other words, how do you make a raster icon out of a vector-based picture without the loss of clarity and sharpness of the image?

Read more…

Icon Design by Caplin

It was with greatest surprise that I understood that the moment we’d been waiting for so long arrived a year ago. The first book dedicated to “computer pictogram design” was published in Russia.

Read more…