Турбомилк (полная версия)

Журнал: Егор ответил за всё

Денис Кортунов — Tue, 23 Jun 2009 15:56:43 +0400

Кто клиенты Турбомилка? Как Турбомилк работает «изнутри»? Чем Турбомилк отличается от веб-студий? На эти и многие другие вопросы ответил руководитель компании Турбомилк Егор Гилев в ходе online-конференции фестиваля 404.

Статьи: Как рисовать перекрашиваемые иконки

Денис Кортунов — Thu, 18 Jun 2009 11:59:36 +0400

Что такое перекрашиваемая иконка? Это такая картинка, которой легко поменять цвет, то есть её перекрасить. Есть несколько способов этого добиться. Я расскажу о простой технологии, которую мы использовали когда делали проект Иконза. По сути, это веб-приложение, которое позволяет пользователю менять цвет иконок, а потом генерирует необходимые графические файлы.

Например, мы хотим нарисовать перекрашиваемую папочку. Берем любимый векторный редактор и рисуем.

Как сделать так, чтобы эту картинку можно было перекрашивать? Секрет в том, что картинка состоит из двух растровых файлов — полупрозрачные блики/тени сверху и цветная подложка снизу. Получается, что цветная основа «просвечивает» через полупрозрачную маску. Вот как должна выглядеть маска:

Но как нарисовать такую маску? Очень просто. Нужно взять цветную основу, а потом нарисовать сверху блики и тени.

Засветляющая маска (показана на черном фоне для наглядности), затемняющая маска, цветная подложка

В засветляющей маске используется только белый цвет с разной прозрачностью, а в затемняющей маске — только черный. Цвет подложки значения не имеет — выбирайте любой, он все-равно будет меняться. Если вы рисуете несколько иконок, то лучше выбирать единый «тестовый» цвет.

Зачем нужны и засветляющий и затемняющий слои одновременно? Мы не знаем какой цвет выберет пользователь, а иконка должна всегда выглядеть хорошо. Вот, например, нарисовали мы только засветляющий слой, а пользователь взял и выбрал белый цвет для подложки. Катастрофа! Получится плоская абсолютно белая иконка. Такая же история, но наоборот, с черным цветом. А если есть темный и светлый слои, то результат неплохой:

Иконки с абсолютно белой и черной подложками

Лучше, конечно, выбирать почти белый (светло-серый) и почти черный (темно-серый) — тогда иконка будет более объемной и симпатичной. Но и при крайних значениях получается неплохо.

Так как затемняющий и засветляющий слои находятся в одном файле, то есть опасность, что ваша иконка будет выглядеть грязной — белый накладывается на черный и получается серый, который не пропускает «цветной» цвет подложки. Это нужно учитывать при рисовании и не допускать множественного перекрытия слоев. Вот порядок слоев иконки для Иконзы:

Тень от половинки папки. В светлых слоях через маски сделана «дырка» по форме этой тени. (Цвет черный, непрозрачность 10%)
Нижний затемняющий объемный слой. Он должен быть обязательно выше обводки и перекрывать её. Тогда обводка становится темнее к низу. (Черный, 40%)
Блик на половине папки. (Белый, 40%)
Засветляющий объемный слой. Размытие краев (feather 3 pt). (Белый, 65%)
Обводка иконки. Очень важная штука которая гарантирует, что у любого цвета будет обводка. (Серый, 50%)
Светлая обводка по периметру. Делает иконку более четкой и живой. (Белый, 25%)
Верхний засветляющий объемный слой. В паре с затемняющим обозначают «освещение» иконки сверху. (Белый, 40%)
Тень от иконки (Черный, 25%)
Цветная подложка. (Любой цвет, 100%)

Если вам мало этой занудной схемы, то можно скачать исходник в формате AI.

Далее нужно убрать из иконки подложку (поместить её рядом) и растрировать векторный файл в фотошопе. Мы получили те самые волшебные картинки, которые секретный механизм Иконзы склеивает в единый файл простым сложением.

Журнал: Онлайн-конференция 404

Егор Гилёв — Wed, 17 Jun 2009 15:32:25 +0400

В прошлом году мы с удовольствием приняли участие в фестивале веб-разработчиков «404». И мы очень рады, что этот фестиваль становится ежегодным мероприятием. На этот раз все случится в сентябре. А пока для разминки на сайте фестиваля будут проводиться онлайн-конференции с разными людьми. Например, со мной. Пишите свои вопросы, и я отвечу 23 июня! Скажу всю правду.

Журнал: Иконза в гостях у Iconfinder

Денис Кортунов — Tue, 16 Jun 2009 16:23:46 +0400

Теперь иконки из проекта Иконза доступны в иконочном поисковике Iconfinder. Но они доступны не просто так. Их можно перекрашивать прямо на странице результатов поискового запроса. Изначально иконзовые иконки отображаются в готичном черном цвете, но специальный переключатель позволяет выбрать любой цвет. Заодно, передаем пламенный привет и лучики счастья создателю проекта Iconfinder Мартину Лебланку.

Журнал: Теперь морковный (фотожаба)

Дмитрий Жуков — Mon, 15 Jun 2009 11:19:12 +0400

Что может быть общего у советского кинематографа и иконок на Iconza.ru? Правильно, и то и другое можно запросто перекрасить.

На эту тему родилось два ироничных баннера с рекламой Иконзы.

Для желающих продолжить серию, у нас есть прозрачный PNG без фона. Свои версии оставляйте в комментариях. Размер картинки не должен превышать 500px в ширину!

Иконки: Drømmeholdet

Турбомилк — Tue, 09 Jun 2009 12:27:41 +0400

Датская компания Swush создала игровой портал Drømmeholdet.dk, который посвящен разным видам спорта. Чтобы проект приобрел законченный вид, разработчики обратились к нам за иконками-иллюстрациями на спортивную тематику.

Желая максимально угодить нашим датским друзьям, мы вспомнили про славных викингов и решили начать работу с рисования разного рода шлемов. Действительно, какой викинг устоит перед прочным блестящим гоночным шлемом?!

Далее понадобились разного рода мячики (balls) — для футбола и гольфа. Их мы тоже нарисовали с любовью.

А вот пример использования иконки на сайте:

Статьи: Как мы придумывали имя, а потом рисовали лого для Иконзы

Денис Кортунов — Wed, 03 Jun 2009 15:33:41 +0400

Мы решили сделать полезное веб-приложение, которое бы содержало коллекцию бесплатных иконок и позволяло бы эти иконки менять по своему желанию. Любому проекту нужно крутое название и запоминающийся логотип. Решили начать с нейминга...

Удачное название — половина успеха проекта. Оно должно быть оригинальным, отражать суть, быть не слишком длинным и произносимым на большинстве языков. Очень важным фактором было то, что у нас интернет-проект и нам нужно было зарегистрировать под него доменное имя, которое должно было быть свободным.

Мы начали мозговой штурм. Для начала выбрали ключевые характеристики нашего проекта: цветной, перекрашиваемый, изменяемый, полупрозрачный, гибкий. Долго вспоминали всяких животных и прочих существ. Вспомнили хамелеона, но сразу его отбросили, как не оригинального. Потом на ум пришли полупрозрачные гады. Например, медузы. Английское слово jellyfish мы отбросили как непроизносимое для русского человека. А вот слово meduza нам показалось интересным, только мы его превратили в meduzer. Это был первый рабочий вариант.

Далее фантазия наших сотрудников начала рождать «монстров». Вот идеи Игоря Королюка:

Я вспомнил следующие слова про раскраску/перекраску: color/colour, tint, kaleidoscope, nuance, tinge, spectrum. И тематические слова им в пару: power, invaders, squids, space, lasers, ufo, technicolor (сочный, яркий), rgb, dope, itchy, funky. Потом составил пары. Крутые типа colorspace, colorpower и tintorama, конечно, оказались занятыми. Но я нашел еще (проверял в зоне .com): colorsquid, tintpower, rgbufo (тащусь от шестибуквенной аббревиатуры), itchycolors, colordope...

Валера Намазов показал системный подход:

А я решил вообще абстрагироваться от темы перекраски и припасть к тематике родственности с Турбомилк. Получилась вот такая табличка.
fire water
holy coffee
midnight lemonade
royal mojito
atomic juice
mint tea
banana syrup
? ?
Mне наиболее симпатичны комбинации AtomicSyrup и FireLemonade. Они свободны во всех зонах.

Я тоже много думал и предложил свое название:

Kefir — родной брат турбомолока. Потом слово за слово от кефира перешел к bacteria и microb. Они же полупрозрачные когда на них под микроскопом зыришь! И о чудо! Что я нашел! Бацилла!
bacilla.com — совершенно свободен. Дело в том, что правильно писать bacilli или bacillius. Но если написать на английском bacilla, то это будет как слэнг. Типа killa, kinda и masta. Есть даже картинка в википедии. Можно нарисовать злобного, но веселого персонажа и вообще все обставить в микробной тематике. Действительно, иконки маленькие и микробы небольшие. И колонии бактерий в таких круглых пластиковых штуках. Пипетки опять же!

Стас Смоляков был краток и просто предложил название Iconza.

Далее было голосование среди сотрудников Турбомилка. Вот результаты первого тура:

Потом был второй тур, который перемешал все карты и обозначил нового лидера:

Вот таким образом мы придумали название для нашего проекта. Кстати, Iconza — довольно плохое название с точки зрения логотипа — оно нейтрально и не задает темы, которую можно было бы обыграть. Нет никакой определенной метафоры для слова «иконка». Но нас это даже обрадовало, так как не ограничивало в выборе визуального образа.

Первым появился вариант от Валеры, обыгрывающий намек на азиатскую тематику в названии:

Дмитрием Жуковым были представлены четыре наброска на разные темы:

Робот Иконза. Добрый и очень стеснительный помощник турбомилкеров в деле иконостроения с руками Бендера.

Существо. Безполездное, как покемон, Существо. Своим видом оно напоминает часть иконок из набора, те которые в кругах.

Комета. Крутая комета — подарок турбомилкерам из далеких уголков Вселенной. Блестит и сияет, сообщая таким образом о своей неземной (в прямом смысле этого слова) крутости.

Турбоулитка. Персонаж, олицетворяющий все наши проекты. Когда есть керосин — фигачим, что есть сил, все остальное время еле тащимся.

Евгений Арцебасов решил нарисовать не совсем логотип, он придумал персонажа. По его задумке это должен был быть нелегальный уличный продавец, который прячет мелкие товары в полах своего плаща. Но как-то неожиданно Евгений «перепрыгнул» на тему флешеров.

Нам очень понравился четвертый вариант своей натуральностью и яркими, живыми цветами. Но мы решили сфокусироваться на главном и отбросить избыточные детали. Плюс, в логотипе были просто необходимы усы, как символ красоты и мужественности. После небольших доработок мы получили вот такой логотип:

Кстати, знаете ли вы, что поедание моркови очень хорошо влияет на цветовое зрение?! А это именно то, что нужно, чтобы насладиться богатой палитрой иконок на Иконзе. Но не будем отвлекаться. Далее мы придумали клевое написание, которое можно приставлять к моркови снизу или справа.

На этом обычно заканчивается работа над логотипом. Но нам так понравилось, что мы решили сделать костюм моркови и нарядить в него живого человека. Сказано — сделано.

Журнал: Иконза

Денис Кортунов — Tue, 26 May 2009 11:47:13 +0400

Мы запустили новый турбопроект, который называется Иконза и имеет усатую морковку в качестве логотипа. По сути — это набор бесплатных иконок, но непростой. Иконки можно перекрашивать и менять их размер прямо на сайте!

Обязательно посмотрите видео, которое все объясняет.

Журнал: Всё должно меняться

Дмитрий Жуков — Thu, 21 May 2009 17:33:56 +0400

Мы тут кое-чего придумали и сняли про это это видео. Но его мы не покажем, потому что оно еще не готово. Зато покажем очень короткий тизер, из которого совершенно ничего не понятно!

Статьи: Пять причин перейти на новый Illustrator CS4

Дмитрий Жуков — Wed, 13 May 2009 09:10:00 +0400

Все новое и неизведанное манит своей новизной и неизведанностью. Я честно верю, что следующая версия всегда лучше предыдущей. Но есть одна программа, которая буквально каждой версией подрывала мои взгляды на жизнь. Это Adobe Illustrator. Он обрастал бесполезными функциями и, как следствие, новыми ошибками. Так было последние шесть лет. Здесь самое место для небольшой проповеди.

Возрадуйтесь! Бог все таки есть, о братья дизайнеры. Он услышал наконец наши молитвы. Воззвал он к программистам Adobe, покарал грешников, наградил праведников и сделали они Иллюстратор лучше. Аминь.

С момента выхода нового Иллюстратора прошло уже несколько месяцев. Тест-драйв пройден успешно. Разберем основные улучшения по пунктам. Всего их будет пять.

1. Это лучшая версия Иллюстратора

Иллюстратор всегда славился своими неожиданными прекращениями работы в самый неподходящий момент. Бывало просто тормозил, там где не должен был. В CS4 с этим практически разобрались. Вы не поверите, но за несколько месяцев использования он еще ни разу не вылетел. Как на Маке, так и на ПиСи. Все работает как часы.

2. Градиенты

Теперь не надо целиться и наобум прикидывать, как будет выглядеть градиент. Они теперь показываются прямо поверх объектов, в виде специальной панельки, как только вы выберите соответствующий инструмент. Цвета, положение и количество ключевых точек можно менять прямо на объекте. Что произошло с радиальными градиентами словами вообще сложно описать. Мало того, что теперь можно сдвигать центр, так еще и делать эллиптический градиент одним легким движением мыши. Старожилы говорят, что и раньше все это было доступно, но вот вы знали, как это сделать?

3. Прозрачность в градиентах

Каждая точка в градиенте теперь может быть прозрачной. Мечты многих поколений дизайнеров воплотились в жизнь. Не зря Adobe купила Macromedia, не зря.

4. Панелька Appearance

Если вы еще не используйте эту панельку, самое время начать. Вкратце, это «четвертое измерение» иллюстратора, своего рода «слои» внутри одного объекта. У каждого объекта может быть много заливок, обводок и эффектов. Последние, к слову, могут быть не только у всего объекта, но и у отдельных обводок и заливок. Это все было давно, сколько я себя помню. В CS4 панелька Appearance зажила наконец нормальной жизнью. Во-первых, перестала безумно глючить. Во-вторых, теперь около каждого пункта появился «глазик», как в слоях. Плюс теперь прямо отсюда можно редактировать цвета, градиенты и прозрачность.

5. Рабочая область

Напомню, одним из наших маленьких ноу-хау всегда была работа в два или три окна. Раньше размеры окон приходилось подгонять руками буквально на ощупь, окошки неудобно перекрывали друг друга, было плохо. Теперь стало хорошо: включаем режим «единой рабочей области» (на маке, на Windows он включен по-умолчанию). Дальше организуем окошки как нам удобно, просто перетаскивая их заголовок. Они удобно прилипают ко всем сторонам рабочей области и к друг другу. Для желающих есть возможность воспользоваться предустановленными заготовками. Еще раз спасибо, что купили Macromedia.

А что вас порадовало или расстроило в новом иллюстраторе?

Журнал: Радио «Семь небес»

Дмитрий Жуков — Tue, 28 Apr 2009 10:52:05 +0400

Мы очень любим музыку, у нас даже есть специальный музыкальный сервер. Вкусы у всех разные, несколько попыток создать общий музыкальный фон в офисе проваливались с треском. Онлайн радио Seven Skies примирило нас и уже третью неделю играет без передышки. А что играет у вас в офисе?

Журнал: ReMIX 09

Денис Кортунов — Thu, 16 Apr 2009 12:56:54 +0400

Делегация из трех бравых турбомилкеров будет принимать участие в конференции веб-разработчиков ReMIX 09, которая пройдет в Москве 20 апреля 2009. Но мы будем не только слушать доклады, Кортунов Денис ответит на вопросы участников в экспертной зоне «Интерактивный веб» в 17:00. Кстати, Турбомилк — информационный спонсор конференции ReMIX.

Логотипы: Iconfinder

Турбомилк — Fri, 03 Apr 2009 12:05:59 +0400

В интернете есть очень много разных поисковых систем, например, iconfinder.net, которая по ключевым словам находит иконки. Случилось так, что к нам обратился создатель проекта Мартин Лебланк и захотел чтобы мы нарисовали логотип. Турбомилкеры очень обрадовались такому повороту событий и принялись за работу с должным рвением.

Как правило, поисковики имеют простой и минималистичный дизайн, таким образом, логотип — главный и почти единственный графический элемент. Мы решили, что вполне логично сделать логотип сервиса в виде иконки. Но какую метафору выбрать? Как показать поиск иконок? Мы начали со скетчей.

Собака-ищейка, папка-шериф с лупами наготове и муравьед (потому что иконки маленькие как муравьи) претендовали на метафору логотипа. Достаточно безумно! Но мы решили не останавливаться на этом и продолжили.

Серия набросков с увеличительными стеклами. Во-первых, лупа — символ поиска, во-вторых иконки, как правило, мелкие и увеличение весьма уместно. Казалось бы, вот оно! Но мы опять не остановились.

Роботы — именно то, что нужно, когда речь идет о поиске и крутых логотипах. Таким образом, метафора охватывает целых три свойства иконочной поисковой системы: лупа как поиск, лупа как отражение мелкости иконок, робот как символ упорядочивания.

Мы показали клиенту все наброски и Мартин ответил: «Знаете, ребята, нам тоже очень нравятся роботы». Осталось самое простое — отрисовать робота в цвете и фактуре.

Картинка получилась довольно тревожной: будто бы оранжевый квадратик с ручками и ножками (иконка) долго прятался и скрывался, а робот-гигант его обнаружил! Обратите внимание на то, как подробно и с любовью нарисован робот — жаль что в мелком размере видны не все детали.

Далее мы написали простым, но стильным шрифтом название проекта. Все остались очень довольны.

Журнал: Designcollector 6

Дмитрий Жуков — Fri, 03 Apr 2009 12:00:00 +0400

В далеком 2004 году Арсений из Designcollector попросил нас сделать для них favicon. C тех пор нас связывают не только ссылки, но и теплые дружеские отношения. В этом году Designcollector празднует шестилетие. По этому поводу они устроили небольшой контест с приглашенными гостями. Мы тоже приняли посильное участие.

Журнал: Нам нужен веб-технолог

Денис Кортунов — Wed, 01 Apr 2009 13:01:55 +0400

Наша маленькая, но гордая компания в последнее время стала не такой уж и маленькой — сейчас у нас работает 13 человек. Но нам всё мало! Приходите к нам работать веб-технологом.

Закрома: Бесплатные аватары

Алексей Стеньшин — Mon, 23 Mar 2009 11:39:50 +0400

Мы взяли и наделали из наших иконок бесплатных аватаров. Все от того, что мы очень любим интернет, мы жить без него не можем. Поэтому кроме этого великолепного сайта с RSS у нас еще есть смешной Twitter, фотографический Flickr, страница на Facebook и даже FriendFeed.

Чтобы сохранить аватары к себе на компьютер, наводите курсор на картинку, кликаете правую кнопку мыши и в контекстном меню выбираете «Сохранить изображение как...» ну или что-то подобное.

Возвращение Пэкмана

Лупоглазики

Инопланетные Захватчики

Животный мир

Значки с животными

Монстры

Журнал: MIX 09 в прямом эфире

Денис Кортунов — Wed, 18 Mar 2009 21:38:58 +0400

Я доехал до Лас Вегаса и нахожусь сейчас на конференции MIX 09, которая только что началась. Будет очень много докладов про дизайн и интерфейсы, среди участников очень много дизайнеров. На конференции организована прямая видео-трасляция. Я буду фотографировать происходящее и выкладывать в турбофликр.

Журнал: MIX 09, March 18-20, Las Vegas

Денис Кортунов — Tue, 10 Mar 2009 16:08:44 +0400

Случилось так, что я еду на конференцию MIX 09, которая пройдет 18-20 марта в Лас-Вегасе. Как правило, дизайнерам не очень интересно на мероприятиях, которые проводит Microsoft, так как они слишком технические. Но в этот раз все обещает быть иначе — очень много докладов будет про дизайн, социальные сети и будущее интернета.

Обещаю много фотографий и видео с конференции, которые буду оформлять в увлекательные отчеты. Коллеги, едет ли кто-нибудь на это мероприятие? Давайте встретимся прямо там!

А еще с 21 по 25 марта я буду в Сан Франциско. Если у кого-то будет желание встретиться — пишите kortunov@turbomilk.com.

Журнал: Карикатура: английский в офисе

Денис Кортунов — Fri, 06 Mar 2009 13:07:09 +0400

Мы очень гордимся, что у нас есть клиенты по всему миру. Чтобы общаться с ними, нужно хорошо знать английский язык, который мы с удовольствием учим прямо в офисе в рабочее время. Английский нам преподает Брендон — настоящий англичанин из настоящей Англии. А еще у нас есть иллюстратор Евгения, которая очень любит собак. Она нарисовала очень крутую карикатуру про собак и уроки английского.

Логотипы: MashLogic

Турбомилк — Wed, 04 Mar 2009 14:22:41 +0400

Есть такая профессия — делать нашу с вами жизнь удобнее. Этим и занимается дополнение для браузера Firefox Mashlogic, которое всегда подскажет неизвестные слова и выручит в сложной ситуации.

Наш партнер из солнечной Калифорнии — компания Arseni Group — доверила нам нарисовать современный логотип для этого продукта на основе вот такого эскиза:

Задача: смешать, но не взбалтывать.

Первые попытки с радостью отправлены в корзину:

Решили полностью перерисовать форму спирали и стрелки:

И наконец, родился первый осмысленный вариант:

В процессе обсуждений с арт-директором Arseni Group мы пришли к решению поубавить стеклянный эффект:

...и развернуть всю композицию немного иначе:

Наконец, специалисты Arseni Group подобрали подходящий шрифт и логотип приобрел законченный вид:

На основе логотипа были созданы красивые и удобные иконки:

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