Blog: Secrets from the Chef
How we came up with and drew the mascot for 404 Festival
In the coming fall the next (third in a row) festival of web developers, Internet evangelists, designers and other supporters of the industry will be held in Samara. You are welcome to learn more about the event, its history, organizers and participants here and this article talks about the mascot we developed for the upcoming event.
The story of one illustration: 404 error page for Iconfinder
Every site has a 404 error page. Its purpose is to tell the user that he landed in the wrong place. It is unnecessary to scare the user by some alarming page, though the message should be clear to all. Some time ago we created a character for the icon search engine conveniently named Iconfinder, now it was the time to create an illustration for its 404 page.
Tutorial: drawing a 3D character from a plain logo
Turbomilkers dig Twitter and most of us are thrilled by their ability to share their deep thoughts though this web service. When we faced the need to share the twits with twitter users from other countries, we developed a convenient service that will be translating our twits from Russian into any other language (a whole selection of languages) and post them in Twitter automatically.
7 tricks for your corporate twitter
Our twitter @turbomilk is one of the most popular corporate twitters in Russia. The password to the twitter is available to all our staff but there is just a few of us posting. And, as it happens, most of the posts are coming from me. After more than a year of observations and experiments involving real people I came up with a range of plain tricks on how to make twitter more interesting and popular.
How 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.
What 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.
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.
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’.
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.
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.
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.
Cone Gradient in Adobe Illustrator. Episode Three: Happy End
You still can produce a normal cone gradient in our beloved Illustrator. This process was uncovered in konischer-verlauf.zip file with a description in German, and, I believe, many of you have already downloaded and thoroughly studied it. In general my note repeats all of what’s contained in this file, however, in English and with a few extra comments to clear up on things.
“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”…
Cone Gradient in Adobe Illustrator. Episode Two: The Truth Is Out There
Last week I promised to tell you how to make the right cone gradient in Adobe Illustrator. I must keep my word, and I have nothing but to reveal this secret on the example of the same compact disc.
First we’ll have a little brainstorm. I’ll give you a couple of clues and you try to make that cone gradient by yourselves. If you are lucky you can save your time and skip reading this article. Do here we go with the clues:
- Linear gradient
- …
- Effects → Warp → …
Can you make out anything? Or not too much?
Cone Gradient in Adobe Illustrator. Episode One: A False Trail
Once upon a time there was a conversation about the various opportunities, advantages and disadvantages of vector-based drawing programs, and it was then that Yegor said, a hint of sadness to his voice, “I wish we had some cone gradient at hand, like we do in Corel Draw”. To which I had a delicate question, “Ah, why would you need the cone gradient?” I’ve been feeling uneasy about this question for many years. Who would ever need such a trite thing as the cone gradient? Yegor said, dreamily, “It’s so good when it comes to drawing compact discs!”
Our professional specifics sometimes requires that we draw a wide range of everyday life objects, CDs included. It is true that creating a CD icon is a painstaking process over and over again. How good it would be, had we an opportunity to take two circles, cut one of them from the center of another and apply the cone gradient to the object. Tempting, is it not?
Everyone knows, though, that Adobe Illustrator does not allow you create those cone gradients. How should we draw this CD in Adobe Illustrator then? All right, my beloved reader, I hope you are ready! If need be for preparation, I would recommend reading my article “Pure Vector”. Don’t forget to turn on the Scale Strokes & Effects option, it’s the last time I remind you about it.
A bottle… or not a bottle?
We are a small office, and sometimes it happens that you fell all alone early in the morning or late at night. Working becomes impossible. Grief and sadness kick you off the working mood. We’ll get rid of this problem right away and make ourselves a new colleague, never hungry and never tired.
Many of you are likely to take good care of their health and order pure drinking water (it can be even iodized) delivered to your office in big nineteen-liter bottles. Those bottles are a gloomy and hideous sight, whatever measures dispenser designers take. Well, it’s all in our hands! Let me tell you…
Pure vector
Many of you are likely to be using such bitmap effects as Blur and Feather to get nice highlights and shadows. It would be good, but if you were to rasterize such a picture in high resolution you would either have to pre-set the high resolution of the bitmap effects or to enlarge the picture itself in the Adobe Illustrator. Below are some simple tricks to allow you get rid of all that fuss and create modern nice scalable icons (and not only the icons) without using bitmap effects.
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?
Categories
- Adobe Illustrator (12)
- Adobe Photoshop (4)
- Basecamp (3)
- Books (3)
- Case Studies (8)
- Criticism (6)
- Desktop (2)
- Fundamentals (7)
- Future (2)
- Icon design (25)
- iPhone (2)
- Marketing (1)
- Master-class (18)
- Productivity (3)
- Reviews (13)
- Tools (14)
- Turbomilk (2)
- Usability (7)
- Visual style (4)
Popular
- cookbook10 Mistakes in Icon Design
- cookbookPhysics still matter, even with special effects
- cookbookHow to draw a good icon for Google
- cookbookWho pecked all the crumbs, or why MacOS is not Windows
- cookbookWeb 2.0-styled design
- cookbookFirst impressions of MacOS, or von Neumann remains von Neumann even in Africa
- cookbookWhy the new Google favicon is bad
- cookbookInkscape
- cookbookLooking for an alternative to Basecamp: review of PBworks Project Edition
- cookbook10 Outstanding Metaphors in Icon Design



articlesLooking for an alternative to Basecamp: review of PBworks Project Editiondeepika10: This is very informative article. But i want to suggest more alternative to basecamp that is http://www.proofhub.com/ It is easy to use and fast. It includes many tools like time tracking, Collaboration, Milestones, Online File Proofing, Real Time Chat and many more.
journalWe have moved into a new officetype8: can show some photo of the inside few ?
articlesThese could be the new LiveJournal’s icons type8: your logo is quite nice. simple and clean. maybe what they want is fresh look. easy to recognize the icon. some of your icon is hard to recognize the image, example "track this" icon. The winner icon is not as good as your icon, but what they got is fresh look, simple. that is what i can say
articlesThese could be the new LiveJournal’s icons Czerny: I think a lot website owners would prefer the icons with button because your icons look great but they need .png alpha transparency... And with the button it needs only 4 x 1px transparency on each of the rounded corners which can be made within .gif-files. Most big websites needs full IE6 support and it is too complicated to handle .png-files in some reasons. Damn IE6!!
articlesLooking for an alternative to Basecamp: review of PBworks Project EditionSydneyCoyle: This is information is very useful, thank you. But I am concerned with having to use multiple software to accomplish online CRM tasks while fulfilling management needs for my freelance projects. It’s good that I found one that came in handy for collaborative CRM and project management - http://www.worketc.com/CRM_Project_Management -- with the integration of business tools that meets multiple needs such as time-tracking, resource leads, and billing.