Blog: Behind the Scene
Filter: Icon designCancel Filter
cookbookHow to draw recolorable icons
What is a recolorable icon? It is a picture which is capable of changing its color, hence is the world recolorable. There are several ways of getting there. I will tell you about a simple technique that we used while developing Iconza. In essence it's a web application that provides for changing colors of icons followed by generating the required files.
cookbook10 Outstanding Metaphors in Icon Design
For each and every action or object, different icons can be drawn. These can have any variations: in style, color, perspective and even metaphor. In my view, the latter is the most valuable in the design of icons — the concentrated thought. And if the metaphor is original, and humorous, then it turns out to be not just an icon, but genuinely brilliant! I present for your review my personal selection of icons based upon unusual and shining metaphors.
cookbookWhat icons are for
You would not believe it but in 1985 Apple asserted an idea in its developers' guide to replace text messages with icons wherever possible. As though icons would be more clear to a novice user than words. Of course this is bollocks. It is much easier to express any idea in words.
cookbookHow 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.
cookbookHow 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’.
cookbookWhy 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.
cookbookEnlarge 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!
cookbook10 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…
cookbookDrawing 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.
cookbookPhysics 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.
cookbookDrawing 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.
cookbookDesigning 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.
cookbook“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”…
cookbookTools: 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.
cookbookTools: 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…
cookbookTools: 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.
cookbookThe 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).
cookbookRasterizing 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?
cookbookIcon 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.
Continue your reading in Cookbook Archive and Journal Archive.
Categories
- Adobe Illustrator (11)
- Adobe Photoshop (2)
- Basecamp (2)
- Books (3)
- Criticism (6)
- Desktop (2)
- Fundamentals (7)
- Future (2)
- Icon design (19)
- Master-class (14)
- Productivity (2)
- Reviews (7)
- Tools (10)
- Turbomilk (2)
- Usability (6)
- Visual style (3)
cookbook10 Outstanding Metaphors in Icon Design laranz.wordpress.com: people om mac always kidding Windows........ When this comes to an end :(
cookbookHow we came up with the name for Iconza and later made its logo prorender: Guys, you should really consider a merchandise shop. I would gladly buy T-shirts and Yegor's prize winning characters or featuring the Iconza carro…
cookbookHow we came up with the name for Iconza and later made its logo prorender: Glad to be a part of it!
cookbookFive reasons for migrating to the new Illustrator CS4Dmitri Joukov: Pardon I didn't quite catch the idea of question. Could you try to ask someway else. Thanks.
cookbookFive reasons for migrating to the new Illustrator CS4 abby: how to make the working area in window, can teach me? i can find the way Thank, from abby.