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

Журнал: Турбообои для iPhone

Денис Кортунов — Tue, 07 Oct 2008 17:12:46 +0400

Мы безмерно счастливы, что компания Apple наконец-то официально начала продажи iPhone не территории России. Как говорится «лучше поздно, чем никогда». По этому поводу мы сделали обои для iPhone в стиле Турбомилк.

Журнал: Microsoft MVP

Алексей Стеньшин — Fri, 03 Oct 2008 10:38:05 +0400

Случилось так, что компания Microsoft наградила турбомилкера Дениса Кортунова статусом Microsoft Most Valuable Professional (наиболее ценный специалист) в категории Expression (экспрессия). Теперь нам будут доступны знания из секретных лабораторий Редмонда, а сторонники теории «Турбомилк продался Майкрософту» получат ценнейший козырь. Все очень довольны.

Журнал: Homepage.ru

Денис Кортунов — Wed, 01 Oct 2008 12:03:45 +0400

Коллектив нашей маленькой, но гордой иконочной компании от всей души поздравляет cайт о том как жить в Москве с запуском. Сказать честно, мы даже не ожидали, что все получится настолько клево. Желаем проекту Homepage.ru множество посетителей и долгой жизни. Кстати, турбомилкеры тоже приложили руку с этому сайту.

Статьи: Интерфейс к прошлому

Денис Кортунов — Wed, 24 Sep 2008 11:49:47 +0400

Многие ставят знак равенства между GPS-приемником и навигатором, но мне кажется что круг применения глобального позиционирования намного шире. Если встраивать модуль GPS в совершенно простые и привычные вещи, то мы можем получить новые и удивительные возможности. А если в наш рецепт добавить интернет и социальные сети по вкусу, то невозможное становится возможным.

Плохи те данные, что не помнят откуда они взялись.

Например, во Flickr внутри каждой фотографии хранится много разной информации: время и дата, настройки фотоаппарата и прочее. А еще для каждой фотографии можно задать координаты того места, где была снята фотография — это называется geotag. Если фотографии лежат в публичном доступе, то можно посмотреть что было в определенный день в определенном месте. Правда, многие ленятся указывать место съемки.

Вот как выглядит Самара в фотографиях. Пока фотографий на карте города совсем не много.

Что если встраивать приемники GPS в каждый фотоаппарат? Тогда миллионы картинок со всего мира каждый день будут делать «отпечаток» этого дня. Сколько всякой разной статистики можно получить из этого — нынешним поисковым машинам этого и не снилось.

Но фотки это ладно, это еще кое-как укладывается в голове. Но, что если встраивать приемник GPS в каждую видеокамеру?! Чтобы каждые 5 секунд на пленку писались бы координаты места съемки. Потом оператор размещает свое видео в интернет на один из множества видеохостингов.

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

Это еще не все. Технологии распознавания образов развиваются бешеными темпами. Что если натравить их на это видео?! Мы получим виртуальное пространство, но не банальное трехмерное. Нет. Оно будет четырехмерным, так как мы сможем перемещаться по шкале времени. А если с рождения носить на руке часы с GPS-приемником, то на досуге можно будет «перемотать» всю свою жизнь назад. Круто?!

Будущее прекрасно!

Проекты: Stitcher для iPhone

Турбомилк — Mon, 22 Sep 2008 16:49:07 +0400

Компания Apple делает всё возможное, чтобы программисты не смогли своими ручками что-нибудь испортить. С появлением iPhone эта идеология достигла своего апогея. Во-первых, они написали огромное руководство по дизайну интерфейсов. Во-вторых, дизайнеры и программисты могут больше не заботиться о разных однотипных эффектах — все автоматизировано. Наша работа становилась все проще и проще, но общая напряженность от этого только росла. Мы нарисуем, а что дальше? Вдруг мы сделаем что-то не так.

Все началось с трех иконок для таб-бара. Это такая темная полоска в самом низу экрана. Иконки отвечают за выбор текущего раздела. Иногда, если раздел выбран, они становятся карамельно-голубыми. К счастью, это не тоже не наша забота. От нас требовалось сделать только белые PNG с прозрачностью. Задача усложнялась тем, что для двух разделов из пяти должны использоваться стандартные иконки от Apple. Надо было сделать оставшиеся три:

Settings;
Topics;
Sources

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

В общем, справились. Иконки влились в коллектив на правах двоюродных родственников.

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

Клиент проявил устойчивое желание сделать что-то более техмерное, чем имеющийся логотип. Желание клиента — закон. Портативное радио с логотипа приобрело объем и расходящиеся во все стороны звуковые колебания.

Когда мы думали, что все уже закончилось, оказалось, что для Appstore требуется огромная (512х512 пикселей) картинка в качестве иллюстрации. Пришлось нарисовать картинку заново, на этот раз с большей детализацией.

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

Журнал: Торнадо в бутылке (душераздирающее видео)

Дмитрий Жуков — Fri, 19 Sep 2008 13:03:49 +0400

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

Иконки: Хабрахабр

Турбомилк — Wed, 10 Sep 2008 14:50:11 +0400

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

Осознавая большой груз ответственности, дизайнеры Турбомилка принялись за работу. Для начала нужно было выбрать стиль иконок.

— Что самое главное в Хабрахабре?
— Карма?
— Хуярма! Самое главное в Хабре — контент! Логические выкладки дизайнеров

Было решено, что иконки должны быть не яркими, чтобы не делать Хабраленту слишком пестрой и не отвлекать от топиков. Эта панель задала общий стиль:

Мелкие иконки не имеют теней, зато некоторые из них имеют разные состояния. Иконки топиков, которые покрупнее, отбрасывают едва заметные тени.

Разработчикам Хабра иконки понравились и мы продолжили работу. Были нарисованы иконки для блогов и компаний.

Отдельного рассказа заслуживает иконка «Хабраиндикатор». Эта иконка одна из самых важных, она означает могущество хабрачеловека. В прошлой версии Хабра на ней была нарисована пуля. Новому Хабру — новое оружие! Мы нарисовали авиабомбу, которая намного мощнее пули.

Эта иконка вызвала большой интерес среди Хабралюдей. Одним показалось, что это мина для миномета, другим — что это дирижабль. Устойчивого названия пока нет, кто-то называет эту штуку «Хабрабомба», кто-то «Хабражабль», а кто-то просто «Бомба».

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

Если увеличить иконку «вставить картинку», то мы четко видим поляроидный снимок неопознанного летающего объекта, вокруг которого на Хабре ходит немало легенд.

В старом Хабре метафорой подписки на блог был электрический шнур с вилкой. Мы воспользовались этой идеей, но сделали иконку более понятной и объединили её с функцией «информация о блоге».

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

Проекты: Дрибблер

Турбомилк — Tue, 02 Sep 2008 11:50:44 +0400

Нам хотелось бы продолжить линейку логотипов и сделать логотип дрибблера «похожим» на Автокадабру и Хабрахабр. В них видно переплетение связей и прослеживается общая идея — переплетение. На дрибблере это могут быть футбольные бутcы, такая куча из бутc :) Денис Крючков, «Тематические Медиа»

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

Вышло забавно. Но есть пара проблем. Во-первых, очень уж получился огромный символ. Прямо как у Википедии. В favicon не запихнешь. Во-вторых, а как же название Dribbler? Получилась эмблема футбольного сайта вообще, никак не связанная с дрибблером. Быть может, для дрибблера нужен не столько логотип, сколько персонаж?

Результатом работы в этом направлении стало вот такое существо:

Дрибблер — один, но в нем нас — много. Переплетение связей и все такое. Сплетенье рук, сплетенье ног... Лицо на скетче получилось слишком буддийское, не обращайте на него внимание, пожалуйста.

Далее, вооружившись гипотезой, что голова и руки футболисту не очень нужны, мы нарисовали вот такого Франкенштейна:

Денис Крючков из «Тематических Медиа» напугался полета нашей фантазии и попросил скетчей больше не показывать, а нарисовать футболиста с множеством ног и мячиком вместо головы. Что мы и сделали:

Клиенту логотип-персонаж очень понравился и был принят. Был, так сказать, «оторван с руками» и всеми ногами.

Для Чемпионата Европы по футболу мы нарядили нашего Дрибблера в форму сборной России:

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

Логотипы: Дрибблер

Турбомилк — Tue, 02 Sep 2008 10:53:29 +0400

Дрибблер — сообщество любителей футбола с элементами ролевых игр. Проект создан для общения и самовыражения людей, максимально сильно вовлеченных в игру миллионов. Мы нарисовали для этого проекта яркий и забавный логотип. Теперь никто и никогда не перепутает Дрибблер с другим сайтом про футбол.

Вам непонятно что это и зачем оно? У нас есть рассказ о том, как создавался этот логотип.

Журнал: Facebook

Дмитрий Жуков — Wed, 30 Jul 2008 12:51:13 +0400

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

Журнал: Пятничная игра

Дмитрий Жуков — Fri, 25 Jul 2008 16:59:24 +0400

Сегодня пятница, а значит есть тема немного пострелять жучков.

Журнал: Пост про новый сайт и логотип

Дмитрий Жуков — Tue, 22 Jul 2008 18:19:34 +0400

Многие наши подписчики могли вчера наблюдать флюктуации в области RSS. Это потому что мы наконец-то запустили новую версию сайта. «Что же тут нового-то?!» — воскликнет невнимательный пользователь. На самом деле, просто огромная куча всего.

Наш дизайнер Валерий нарисовал новый логотип, и теперь «Турбомилк» пишется и по-русски. Наш веб-технолог Алексей полностью переверстал весь сайт. Система комментариев к записям претерпела просто нечеловеческие изменения: теперь они публикуются практически мгновенно, и могут быть вложенными. Гадские спамеры вынудили нас отключить анонимные комментарии. Как и раньше, доступна авторизация по логину LiveJournal или Vox, по OpenID, а еще вы можете быстренько зарегистрироваться прямо у нас на сайте. Кроме того, в RSS теперь попадают записи целиком. RSS c краткими анонсами по прежнему доступен, но по другому адресу.

Сообщения об ошибках принимаются в комментариях или на электронную почту.

Статьи: Скринкаст по Expression Blend: анимация

Денис Кортунов — Thu, 17 Jul 2008 12:00:07 +0400

Если вас интересует как делать анимацию в Expression Blend, то вы оказались в нужном месте, в нужное время. Именно созданием анимации я и буду заниматься в скринкасте под немного меланхоличную музыку. Рисовать мультфильмы может каждый!

Краткое содержание серии:

Оживляем унылые статичные объекты
Способ № 1: Анимация через ключевые кадры
Работаем с таймлайном
НЛО по ключевым точкам и жжет злобным лучом
Способ № 2 Движение по кривой
Рисуем кривую движения и связываем её с объектом
Движение объекта по эллипсу

Смотреть скринкаст (Silverlight)
Expression Blend: анимация (Открывается в новом окне)

Если хотите, можете загрузить себе видеофайл в формате mp4 (43,3 mb).

Статьи: Скринкаст по Expression Blend: создаем интерфейс приложения

Денис Кортунов — Thu, 10 Jul 2008 14:27:14 +0400

Представляем вам научно-популярные испытания инструмента для создания интерфейса Expression Blend. Всего за несколько минут была создана интерактивная панель управления инопланетным космическим кораблем. Все кнопочки нажимаются!

Краткое содержание серии:

Что такое интерфейс?
Импортируем картинку из Expression Design
Создаем панель управления космическим кораблем
Кнопка управления злобным лучом
Data Binding
Работаем со слайдером
Связываем слайдер и прозрачность

Смотреть скринкаст (Silverlight)
Expression Blend: создаем интерфейс приложения (Открывается в новом окне)

Если хотите, можете загрузить себе видеофайл в формате mp4 (45,7 mb).

Статьи: Скринкаст по Expression Blend: Обзорный

Денис Кортунов — Wed, 09 Jul 2008 15:33:12 +0400

Представляю вашему вниманию скринкаст про жемчужину пакета Expression Studio, а именно про Expression Blend. В умелых руках этот инструмент помогает создавать интерфейсы неземной красоты. А еще каждый дизайнер сможет почувствовать себя программистом.

Краткое содержание серии:

Ролевые игры
Создаем новый проект
Панель инструментов
Рабочая область
Режимы отображения: Design, XAML, Split
Свойства проекта и объектов
Панель Interaction
Связываем объекты и создаем событие

Смотреть скринкаст (Silverlight)
Expression Blend: Обзорный (Открывается в новом окне)

Если хотите, можете загрузить себе видеофайл в формате mp4 (41,9 mb).

Журнал: Про нас написал журнал «Секрет фирмы»

Денис Кортунов — Fri, 27 Jun 2008 13:34:08 +0400

Не зря мы писали пикантные подробности из жизни компании в наш уютный Турботвит — оказывается журналисты издательского дома Коммерсантъ подглядывали за нами. Результатом стала статья «Следи за мной», которая проливает свет на феномен микроблоггинга. Часть про нашу маленькую, но гордую компанию читайте после подзаголовка «Твиттероиды и извращенцы».

Статьи: Скринкаст по Expression Design: Рисуем

Денис Кортунов — Thu, 26 Jun 2008 15:38:21 +0400

Настало время проверить графический редактор Microsoft Expression Design в реальных боевых условиях. Попробуем нарисовать с его помощью мистическую картину, попутно рассматривая сильные и слабые стороны инструмента.

Краткое содержание серии:

Что будем рисовать?
НЛО над Волгой
Рисуем Летательный Объект
Полупрозрачная будка
Сolor Dodge — наше все
Карл Фридрих Гаусс
Симпатичная телочка
Злобный луч

Смотреть скринкаст (Silverlight)
Expression Design: Рисуем (Открывается в новом окне)

Если хотите, можете загрузить себе видеофайл в формате mp4 (56,2 mb).

Статьи: Как нарисовать иконку. Минимизация

Олеся Козлова — Wed, 25 Jun 2008 12:02:27 +0400

Итак, приготовьте лупы, мы продолжаем! После долгих и жарких споров (не волнуйтесь, до применения бластеров не дошло) у нас есть 3 утвержденные иконки размером 64×64.

Дальше начинается работа, требующая внимания и терпения, но конечный ее результат Инопланетные Захватчики будут видеть на своих экранах намного чаще (оказывается, они в процессе эволюции не увеличивали экраны, а улучшали зрение). Как грамотно построить маленькие иконки — к этому будут прикованы наши взгляды сейчас.

Нас интересуют два размера: 32×32 и 16×16.

На первое у нас большое блюдо: «Инопланетный захватчик в собственном соку» 32×32.

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

Возьмем иконку большого размера и в панельке Transform выставим у большей стороны нужный нам размер (не забыв нажать link).

Смотрим на то, что получилось...

И понимаем: многие из объектов не попали в пикселы, потому как их координаты изменились. Слишком много объектов на маленьком пространстве. Некоторые характерные черты стали слишком незаметны.

Следующие действия легко предугадать — удаляем часть объектов. Уменьшаем количество ребер у копья, неровностей на его черенке, убираем многослойность подошвы.

Далее вооружимся панелькой transform, поставим черный квадрат в левый верхний угол и начнем смотреть координаты у простых объектов (кружков и прямоугольников). В идеале координаты и размеры объектов должны быть ровными числами.

Осталось поправить «сложносочиненные» объекты (волосы и щупалы).

Готово:

Крошечки 16×16 остались на сладкое.

Берем исходную иконку и «отсекаем все лишнее». Удаляем все, кроме основных элементов. Основные части, состоящие из нескольких форм, объединяем в одну. Убираем на них все размытости.

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

Вновь в ход идет уже упомянутый выше Transform.

Все готово:

Статьи: Как нарисовать хорошую иконку для Google

Денис Кортунов — Tue, 17 Jun 2008 08:49:27 +0400

Не так давно мы ругали новую иконку сайта Google с буквой g и называли её плохой. Но ругать чужое — не сложно! А какая иконка была бы хорошей? Мы решили ответить на этот вопрос: взяли четырех дизайнеров и заставили их нарисовать хорошую favicon для Google. Такой подход у нас называется — работа по схеме «долбаный креативный бутик». В итоге получились увлекательные истории, которые описывают четыре разных решения этой задачи.

История от Дениса Кортунова

Вообще, я искренне считаю, что Google нужен какой-то символ. Чтобы он был простой и классный. Понятное дело, что напрямую связанных метафор нет, поэтому символ, скорее всего, будет надуманный. Сначала он никому не понравится, но потом все привыкнут и успокоятся.

Но я проявил слабость — отказался от своей идеи с символом и решил положить в основу иконки нынешний фирменный стиль Google. Что у нас есть? Шесть букв, написанных шрифтом Catull. Буквы G и О встречаются по два раза. Из двух букв O, как вы сами понимаете, ничего хорошего получиться не может. Будем работать с заглавной G — она проста и красива.

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

Что мы возьмем для нашей будущей favicon? Основой будет заглавная буква G, также хорошо бы использовать фирменные цвета: минимум два, но лучше все четыре. Шрифт использовать не будем — мне он не очень нравится, да и в мелком иконочном размере его будет сложно различить.

За основу иконки я хотел взять что-нибудь простое. Например, круг. Или несколько цветных кругов. Вот что у меня сначала получилось:

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

Теперь есть все четыре цвета и литеру G видно более явно. Наведем немного блеска:

А вот новая favicon в деле:

История от Егора Гилёва

Поскольку тема букв была блестяще (в прямом и переносном смысле) раскрыта Денисом, я решил предложить еще более абстрактный символ. Например, шарик. Что может быть проще шарика? К тому же, разнообразные шары давно используются в логотипах разных продуктов Google:

Шарик можно понимать как земной шар, или как мячик. Он как бы говорит нам: «поиграй со мной», что вполне подходит к образу Google как компании молодой, веселой и часто избегающей общепринятых корпоративных правил.

Глядя на логотип Google, нарисуем мячик, раскрашенный в 4 цвета:

Придадим мячику объем (не увлекаясь сложностью — ведь нам нужна иконка размером 16×16):

Добавим еще немножко бликов и теней, и — вуаля — вот такая получилась иконка:

История от Валерия Намазова

Ни для кого не секрет, что Google давно перестал быть только поисковой системой. Это настоящий микс различных технологий и сервисов. Вывод: смешаем фирменные цвета компании в ТурбоБлендере!

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

Уменьшаем до размера 16×16:

А вот так она выглядит в браузере:

История от Дмитрия Жукова

Как ни крути, лучше гугла не найти! А все почему? Потому, что у гугла отличный поиск, и только потом прицепом все остальные сервисы.

Та-а-а-ак, а что есть поиск? Поиск — это прежде все результаты. Вот я уже почти все и выболтал, теперь вы точно сможете украсть мою великолепную идею. Ну если кто еще не понял, прилагаю иллюстрацию.

Вот их и возьмем в оборот. Остается только взглянуть, что получилось.

Иконка отдаленно напоминает символ бесконечности, что в случае с Гуглом тоже совершенно не лишнее.

Журнал: Dribbler

Денис Кортунов — Tue, 10 Jun 2008 13:23:03 +0400

Сегодня сборная России по футболу проведет свою первую игру на Чемпионате Европы 2008. Мы очень надеемся, что наша команда победит! Кстати, наши друзья из Тематических Медиа на днях запустили социальную сеть для любителей футбола Дрибблер. Почти вся графика для этого проекта была сделана нашими золотыми руками, чем мы очень гордимся.