Turbomilk (full version)

Cookbook: How to draw recolorable icons

Denis Kortunov — Thu, 18 Jun 2009 12:21:21 +0400

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.

For example, we want to draw a recolorable folder. We take our favorite vector graphics editor and draw a folder.

How do we go about making this picture recolorable? The secret is that the picture contains two bitmap files: semitransparent flashes/shadows and a color backing at the bottom. So we have the color backing shine through the semitransparent mask. The mask should look like this:

How do we draw such mask? It is quite easy. You take the colored backing and put flashes and shadows on top.

Shining mask (shown against black background for the purposes of demonstration), shading mask, and color backing

The shining mask uses only the white color with various transparencies and the shading mask — only black. The color of backing is not important — pick any color you like, it will change anyway. If you draw several icons, pick a single test color.

Why do we need shining and shading layers at the same time? We do not know what color will be selected by the user and the icon should always look good. Here, for instance, we drew just the shining layer and the user picked the white color for backing. Catastrophe! We got a flat absolutely white icon. The same story only reversed will repeat with the black color. And with shining and shading colors the result will be rather good:

Icons with absolutely white and black backings

It is better, of course, to select almost white (light gray) and almost black (dark dray) — the icons then will gain more volume and appear neat. But even with the extreme values we get good results.

As the shading and shining layers are located in the same file, there is a risk that your icon will appear smudgy — white overlays black giving gray, which blocks the color of backing. You have to take this into consideration while drawing to avoid the multiple layer overlays. Here is the sequence of layers of an Iconza's icon:

Shadow from the folder's half. The shining layers have a hole shaped as this shadow. (Color: black, 10% opacity)
The lower shading volume layer. It should be higher than the backing and overlapping it. This way the outline becomes darker at the bottom. (Black, 40%)
Flash on the half of the folder. (White, 40%)
Shining volume layer. Edge feathering (3 pt) (White, 65%)
Icon's outline. It's a very important thing that guarantees that any color will have an outline (Gray, 50%)
Light outline around the perimeter. It makes the icon more crisp and vivid. (White, 25%)
Upper shining volume layer. Coupled with the shading makes the icon lit from above. (White, 40%)
Shadow from the icon. (Black, 25%)
Color backing. (Any color, 100%)

If you are not completely pleased with this boring sketch, feel free to download the source in AI format.

Next step is removing the backing from the icon (placing it next to it) and bitmapping the vector file in Photoshop. We got the magic pics that the secret mechanism of Iconza glues together into a single file simply by bonding them together.

Journal: Iconfinder meets Iconza

Denis Kortunov — Tue, 16 Jun 2009 16:43:50 +0400

Now Iconza's icons are available in Iconfinder, the icon search engine. But they are not merely lying around there. You can recolor them right on the search engine results page. Originally the Iconza's icons are depicted in Gothic black and a special switch serves for selecting the right color. We also would like to use the opportunity to give our best to the creator of Iconfinder Martin Leblanc.

Icons: Drømmeholdet

Turbomilk — Tue, 09 Jun 2009 12:55:48 +0400

Danish company Swush created a gaming portal Drømmeholdet.dk (international web site: sportsbox.com), dedicated to various sports. To complete the project developers approached us for illustrations covering the subjects of sports.

Wishing to please our Danish friends we remembered about daring vikings and started off with drawing various helmets. Clearly, what viking can resist the sight of a durable glossy racing helmet?!

Later we needed various balls (football and golf). We also drew them with much affection.

And this is an example of how one of the icons was used:

Cookbook: How we came up with the name for Iconza and later made its logo

Denis Kortunov — Wed, 03 Jun 2009 16:31:51 +0400

We decided upon making a web application that would serve a collection of customizable icons. Any project needs a cool name and a logo. We started off with naming.

A project success lies half-way in its good name. The name should be original reflecting the essence of the project, not too long and pronounceable in most languages. A very important factor was that we had a Web project and we needed to secure the right domain name for it, provided it was still available.

So we started a brainstorming session. First, we have concentrated upon the key characteristics for our project: colored, repaintable, customizable, semitransparent, and flexible. We have spent hours thinking about animals and other creatures. The chameleon came to our minds first but it was trashed for being unoriginal. Later we came up with semitransparent creatures such as jellyfish. The English name “jellyfish” was discarded as unpronounceable for a Russian person. However the word “meduza” sounded like interesting. We turned it into meduzer and it became our first draft version.

Later, the fantasy of turbomilkers started generating “monsters”. Here are the ideas of Igor Koroluk:

I remembered the following words about recoloring/repainting: color/colour, tint, kaleidoscope, nuance, tinge, spectrum. And theme words to couple with: power, invaders, squids, space, lasers, ufo, technicolor (vivid, colorful), rgb, dope, itchy, funky. Later he came up with couples. Cool couples, such as colorspace, colorpower and tintorama have been bought out log ago of course. But I found some that have not been (I checked in .com zone): colorsquid, tintpower, rgbufo (I totally dig this six-letter abbreviation), itchycolors, colordope...

Valera Namazov demonstrated a systemic approach:

I have decided to get away from the theme of recoloring and work with Turbomilk relationship context. So I came up with the following table:
fire water
holy coffee
midnight lemonade
royal mojito
atomic juice
mint tea
banana syrup
? ?
My most favorable combinations were AtomicSyrup and FireLemonade. They were available in all zones.

I also thought a lot and made my contribution:

Kefir — a Turbomilk’s sibling. Later I moved to bacteria and microb from the kefir. They are semitransparent when watched through the microscope! And the miracle happened! Eureka! The Bacilla!
bacilla.com was totally available. The thing is the correct inscription is bacilli or bacillus. But if you write bacilla, it will sound like slang sort of like killa, kinda and masta. There is even a picture in Wikipedia on the subject. We could draw an evil or funny character and do everything in microbial theme. Clearly the icons are small and microbes are also minute. And bacteria colonies in plastic round... things. Dropping tubes again!

Stas Smolyakov was concise and simply threw in the name Iconza.

All this was put to a vote of the Turbomilk board. Here are the results of the first round:

The first round was followed by the second that shuffled all the cards and pointed out the new leader:

This is how we came up with the name for our project. Iconza is a rather complicated name from the logo’s creating point of view for it is neutral and does not sound a theme that we could play around. There is no defined metaphor for the word “icon”. Actually we even cheered, since the limitations for picking a visual figure vanished.

First was the Valera’s version playing with the hint at the Asian theme in the name:

Dmitry Joukov came up with four sketches:

Iconza robot. Kind and very shy assistant to turbomilkers in iconbuilding with Bender-like hands.

Creature. Useless as pokemon creature. It reminds some icons from the set, the ones in circles.

Comet. Cool comet — a gift to turbomilkers from the deep corners of the Universe. It shines and glows sending us the message about its ET (literally) coolness.

TurboSnail. Character picturing our projects. When we have kerosene, we work our butts off, the rest of the time we slide down the office walls.

Eugene Artsebasov decided to draw not really a logo but a character. He has thought up a range of swindle-like pitchers hiding small merchandise inside there mackintoshes’ underlining. But inadvertently Eugene jumped over to the subject of flashers.

We really enjoyed the fourth flasher for being true-to-life and vivid. But we decided to concentrate upon the most important item and throw away the unnecessary details. Plus our logo really begged for whiskers as a symbol of male beauty and masculinity. After a range of minor corrections this was the logo that hit the spotlight:

Do you know that eating a carrot really improves your sight?! And this is exactly what you need to enjoy the rich palette of icons in Iconza. But let’s stop distracting ourselves. The next thing we came up with was the cool inscription that could be fitted under a carrot right below or to the right.

This normally ends the work over a logo but we enjoyed it so much that we decided to cloth a human being as a carrot. Said and done!

Journal: Iconza

Denis Kortunov — Tue, 26 May 2009 12:40:41 +0400

We have launched a new Turboproject called Iconza with a whiskered carrot for a logo. In essence it is a set of royalty-free icons but it is not as simple as it looks. You can recolor and resize the icons right on your screen!

Please be sure to watch the video that explains it all!

Journal: Everything should change

Dmitri Joukov — Thu, 21 May 2009 17:54:19 +0400

We have invented something special here in Turbomilk and even shot a video about it. We won't show it, because it's not ready yet. However, we will show you a short teaser that really does not tell you a thing :)

Cookbook: Five reasons for migrating to the new Illustrator CS4

Dmitri Joukov — Wed, 13 May 2009 09:10:00 +0400

All new stuff is extremely lucrative: it lures a feeling of novelty and freshness. I sincerely believe that a newer version is always better than the previous one. But there is one software package that undermines my life views. I am talking about Adobe Illustrator. It gained so many useless functions that operational mistakes have become too easy to see. It all lasted for six passed years. Here is an appropriate time for a short sermon.

Alleluia! The God does exist, my creative brothers and sisters. And our prayers have been heard. The God rested upon the Adobe’s coders and punished the sinners with all the vengeance and Illustrator have been healed. Amen.

A few months passed since the introduction of the latest version of Illustrator. The software has completed the test-drive successfully. Let’s consider the main improvements one-by-one. There will be a total of five.

1. It is the best Illustrator so far

Illustrator was always famous for its spontaneous seizures at the most inconvenient moments in time. Sometimes it behaved as an IT retard. In CS4 this was practically solved. And you would not believe if I told you that it did not fail to operate even once since then. Both Mac and PC versions work flawlessly.

2. Gradients

Now you do not have to target too hard in order to imagine how the gradients gonna look like. They are shown above the objects now shaped as a special bar once you pick the required tool. Coloring, placement and the number of pivot points can be changed right on an object. What happened to the radial gradients is really hard to describe. You can not only shift the center but make the elliptic gradient with a move of a mouse. Old-timers say that it used to be accessible in the past but did you really know how to go about it?

3. Transparency in the gradients

Each point in the gradient can be made transparent now. Dreams of many generations of designers have finally come true. Adobe really bought out Macromedia for a purpose.

4. Appearance bar

If you did not have a chance to use this bar, now it’s the right time to start using it. In short, this is the fourth dimension of the Illustrator, sort of like layers inside one object. Each object can feature several types of filling, text floating and effects. The latter BTW can be featured not only on its own object but with segregate filling in and text floatings. All of this was present in the previous versions as I remember it. In CS4 the Appearance bar finally has been revived. First, it stopped failing like it did. Secondly, right now every item has an eye as with layers. In addition you can edit colors right from here including colors, gradients and transparency.

5. Working area

Let me remind you that one of our small know-hows has always been working with multiple screens (two or three). We used to adjust the sizes manually. The windows were overlapping each other and caused headaches. Now we are cured: we turn on the “single working environment” mode (on Macs, Windows version has this mode on at all times). Then we organize windows as we think fit by dragging them to the header. They stick to all sides of a working area and to each other. Users can also use the preset templates. Thank you again for buying Macromedia.

And what pleases or frustrates you in the new Illustrator?

Journal: Radio Seven Skies

Dmitri Joukov — Tue, 28 Apr 2009 11:20:21 +0400

We love music very much. We even have a dedicated music server. Tastes differ however and we failed several times creating a one-type-suits-all music background in our office. Online radio Seven Skies reconciled this problem and we keep tuning in to this wave for three consecutive weeks non-stop. And how does your office sound like?

Journal: ReMIX 09

Denis Kortunov — Fri, 17 Apr 2009 12:56:40 +0400

A delegation of three brave Turbomilkers will descend at ReMIX’09 web conference to be held in Moscow on April 20, 2009. And we will not only be engaged in hearing the reports. Denis Kortunov will give his answers to the questions of participants of the “Interactive web” worshop at 5:00 pm. By the way, Turbomilk acts as an information partner of ReMIX.

Journal: Designcollector 6

Dmitri Joukov — Mon, 06 Apr 2009 18:25:20 +0400

Back in 2004 Arseniy from Designcollector asked for a favicon for their project. Since then we are connected by not just hyperlinks but also by warm friendly relations. This year Designcollector celebrates its sixth anniversary. The guys have setup a little contest with some invited guests. We have also participated in it!

Identity: Iconfinder

Turbomilk — Fri, 03 Apr 2009 12:14:19 +0400

The Internet features a multitude of search engines, for instance, inconfinder.net, which gets you icons matching your query. It happened that we have been approached by the project's creator Martin Leblanc, who requested a logo. Turbomilkers were extremely pleased by this range of events and zealously went straight to work.

As a rule, search engines have a simplistic and even minimalistic design, which makes a logo pretty mush the first and the foremost graphic object. We decided that it would make more sense to make a logo as an icon. But what metaphor to choose? How do we show an icon search? So we started sketching.

A bloodhound, a sheriff folder with a magnifying glass and an anteater (since icons are as small as ants) all competed for being the logo's metaphor. Sounds crazy!? But we went even further!

A series of sketches with magnifying glasses. First comes a magnifying glass — the symbol of search. Icons are rather small as a rule, and magnification obviously comes in very handy. “This is it!” — we thought. But again we kept digging.

Robots are what we need when we are talking about search and cooler logos. Thus, the metaphor covers three attributes of an icon search engine: a magnifying glass for search and a symbol of minuteness of icons, and a robot as a symbol of arrangement. We showed the icons to the client and Martin responded: “You know, guys, we like the robot idea very much also.” So what we had to do is to color the robot and add textures.

The picture became rather disturbing: as though an orange square with hands and legs (an icon) had been hiding for a long time and a giant robot has finally found it! Note the level of detail of the robot — it's a pity that a lower resolution does not show all the gears and bolts.

Later we added the project's name in a stylish but simple font. Everyone was happy!

Downloads: Free Avatars

Alexey Stenshin — Mon, 23 Mar 2009 15:23:35 +0400

We have taken some liberty and created free avatars from our royalty-free icons. This is all because of the Internet and our endless affection for it. That’s why beside this wonderful site and the RSS feed we also have hilarious Twitter and photographic Flickr, and also an account on Facebook and even FreindFeed.

To save the avatars on your hard drive, right-click an icon and choose “Save the image as...” from the menu, or some other way your OS works.

Pacman Returns

Zoom-eyed creatures

Space Invaders

Animals

Animal pins

Monsters

Journal: MIX 09 Live

Denis Kortunov — Thu, 19 Mar 2009 11:26:00 +0400

I finally reached Las Vegas and now joined the MIX 09 conference, which has just begun. Expect a number of reports on design and interfaces (lots of designers among participants). The conference features the online video broadcasting from the event. I will be taking pictures and Turboflikring it as it progresses.

Journal: MIX 09, March 18-20, Las Vegas

Denis Kortunov — Tue, 10 Mar 2009 23:11:44 +0400

So it happens that I will visit MIX 09, the conference that will be held in March 18–20 in Las Vegas. As a rule, the designers get bored at the events organized by Microsoft due to the high level of technicality. But this time we are promised quite the opposite — a lot of reports on the subject of design, social networks and the future of the Web.

I can only promise you tons of pictures and video clips shot at the conference, packaged and shaped as exciting reports. Dear colleagues, will anyone of you come to Las Vegas this time? Let’s meet right on the spot.

Also, from March 21 until March 25 I will be in San Francisco. If anyone wants to meet, your suggestions are welcome at kortunov@turbomilk.com.

Identity: MashLogic

Turbomilk — Wed, 04 Mar 2009 14:39:11 +0400

There is a job to make the lives of others easier. This is exactly what Firefox Mashlogic plug-in is tasked to do. It will always prompt you on the unknown words and will help in a tough situation.

Our partner from the sunny California — Arseni Group — has entrusted us with drawing a modern logo for their product based on the following sketch:

Task: make it shaken, not stirred.

The first attempts have been trashed with no regret whatsoever:

We have decided to completely redo the spiral and the arrows:

Finally, we have come up with our first comprehensible version:

In the conversations with art director of Arseni Group, we have come to a conclusion to save on the glossy effect:

...and turn the whole setting around a little bit:

Finally, the experts from Arseni selected the most suitable font to finalize the logo:

Nice and handy icons have been created based on the logo?s theme:

Journal: remix.ru

Denis Kortunov — Mon, 02 Mar 2009 15:21:53 +0400

The delegation from Turbomilk had tons of fun at ReMIX last year. Therefore, it was out pleasure (and honor) to make a modest contribution into setting up ReMIX'09: we have drawn remix.ru, which is not really a site but a stub in Windows 7 logon screen style.

Journal: New Apple's Safari is catching up!

Dmitri Joukov — Thu, 26 Feb 2009 10:06:02 +0400

We very much like Google Chrome. Apparently Safari was originally meant to be like Chrome from the interface perspective. As it happened recently, Apple released a new version of its browser resembling Chrome in may interface solutions. Now we are wondering, whether Google has finally became the lawmaker in GUI and Apple was made a sad runner-up?

Cookbook: Windows 7: clothes count for first impressions

Yegor Gilyov — Thu, 12 Feb 2009 14:14:57 +0400

Judging by the many online reviews, the brave souls who have downloaded and installed the beta version of Windows 7 are, in general, pleasantly surprised. Your humble servant likewise entered into the ranks of the brave souls. I confirm: it’s actually pleasant to work with No. 7. However, given the many new and different functionalities, and well-written reviews of other authors, allow me to throw in my two cents worth in our particular area of expertise: visual interface design.

The previous version of Windows was, well, just lazy instead of cursed, and only gave the appearance of being so. Even if you don’t take into account old-fashioned PC users, who up to this point in time considered the blue panels of Norton Commander to be an unsurpassed masterpiece of interface design, the number of those who were dissatisfied with the visual style of Aero were plentiful. Some were annoyed by the transparent window frames, others, by the ubiquitous glare — a la Apple Aqua, and yet a third group — by the dark, ink-filled shade of the windows.

“Why do designers load all this stuff on?” — they ask, and they activate Windows Classic in this plaintive litany. The correct answer to this question (although we would prefer not to admit it) is: because they can.

New technical capabilities in the visual presentation of user interfaces are similar to a loaded gun hanging on the wall. Developers have to shoot, and preferably kill somebody. You can make windows transparent? Blam! Done. You can embed complex textures (the gun had already been discharged but it’s a multi-chambered weapon)? Blam! Was anyone injured? Get in the infirmary. Windows can now appear and disappear smoothly? Blam! Nobody was hurt? Well, that was just dumb luck.
Then and only then, when all the shots have been fired and when the smoke clears is it possible to calculate the losses and to try to correct all the obvious oversights in the next version.

This is not a new story, and it will be repeated at each turn in the upward spiral in the development of technology.

The designers at Apple can now be malicious towards their colleagues from Redmond, but it is only because the technological shackles were removed from them a few years earlier, and they have already succeeded in completely cleansing everything of the unbridled horror with which they painted Mac OS X 10.0.

And so, the visual style of the Windows 7 interface — is an evolution of Vista’s style. This is a chance for designers to prove that they weren’t brain-damaged since childhood, and to show when working on Vista, that they just had a minor case of dizziness due to the newly acquired capabilities. Let’s take a look at what happened in the meantime.

For starters, well, let’s start with the Start menu:

Windows 7

Windows Vista

We have seen previously that on the menu bar were two white “islands.” Now they have been merged into one. As a result, this menu is a little easier on the eyes. In addition, the menu and the taskbar are no longer such an uncompromising black (at least, by default). Now they have the same color and degree of transparency as the window frames.

Pay attention as well to the halo around the circular Start button. In Vista, a similar halo was only on the window control buttons (Minimize, Maximize, Close).

Windows Explorer makes us happy with the light-blue toolbars. Now they do not stand out as much against the general background, like the previous log of a sea-green color:

Windows 7

Windows Vista

Column headings have become even simpler, although the previous format could not be described as overly intrusive.

Windows Media Player has been completely transformed:

Windows 7

Windows Vista

If closely scrutinized, there are not too many changes, but the interface is free of contrasting elements, and is much easier on the eyes. A high-altitude overview helps to “cloud” the texture in the background. In this realm of appeasement only album covers and the Play button exist (but that’s the most important button after all, right?). By the way, please note that the main control buttons are not on a transparent background as they were previously.

For “dessert” I left the Superbar. For now we will not speak of its substantial differences from the Taskbar, or about its new functionality. It’s better to take a look at how the backlight button works when pointing the mouse. Not only is the color for each application unique, but it is also alive!

It seems that this is a completely new gun. It was shot for the first time in Windows 7 and struck me right in the heart, because it made good sense, which was unusual. Ah yes, well done folks. That’s the ticket!

So, progress is evident. Even if the final version of the user interface design for Windows 7 does not undergo any changes, enough was already done that it can be pronounced that: Windows has become pleasant to look at.

Web sites: Homepage.ru

Turbomilk — Mon, 02 Feb 2009 12:25:44 +0400

Once upon a time, two very mysterious fellas arrived into our office from the capital of our nation. They told us about their plans to create a large and interesting portal about the Moscow's lifestyle. They had themselves some prototypes too! We have gotten extremely exciting to participate in such a large-scale project and went straight to work.

“We've attempted to come up with a set of unified content units — i.e. we were worried that the units with places, events and topics and other things were too scattered in the prototype. Could we have this stuff unified to improve the overall usability of the page?” Wondered Nick Zayarniy in the midst of the project meeting

The portal's structure appeared daunting — endless menus and sub-menus, multiple pages. We had to make things look as though everything was nice and easy — in the best traditions of Web 2.0

We have finally generated a calm well-balanced template with contents put right upfront.

Home page

Then, we proceeded with internal pages

Profile Article News editing

We have drawn a set of unique icons for the site:

One of the zestful features of Homepage.ru is that all events come up before the user right on the map. It is so cool.

We have created special customized dropdowns for the geotargeting (pardon the lingo).

Homepage.ru is a lively, constantly evolving project. New pages, units, and sections appear every now and then. Developers always come to us for new imagery. So here is how the “crisis” appeared!

...and this is a New Year's snowed-in header...

...or check out this banner for a competition.

We totally enjoyed working on this project. And would like to take this opportunity to extent thanks to our two mysterious fellows mentioned in the beginning of the post.

Journal: Turboillustrations

Denis Kortunov — Wed, 28 Jan 2009 15:54:54 +0400

We have decided to significantly improve our web sites's usability (by 37%) to become even more visitor-oriented (by 59%). For this reason our new designer Evgeniya has come up with a set of rocking illustrations for About Us picturing the hardships of our working days. The verisimilitude of the pictures tops all possible heights. The pictures were drawn on location. Now everyone is clear about what Turbomilk is really up to!

fire	water
holy	coffee
midnight	lemonade
royal	mojito
atomic	juice
mint	tea
banana	syrup
?	?