http://feedproxy.google.com/~r/turbomilk/~3/VA3iOLDds6s/

http://turbomilk.ru/portfolio/web_sites/yagoodza/

Ребята из интернет-инкубатора inVenture придумали замечательный вебдваноль-стартап с интересным именем «Ягудза»:

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

Ягудза помогает узнать о вещах то, что действительно важно, о чем не пишут на сайтах магазинов и форумах. Ягудза — это проект о вещах и отношении к ним людей».

Руслан Маджитов, автор проекта

Как перенести списки реальных вещей в виртуальный мир, не потеряв капли впечатлений? Светлые головы Ягудзы придумали систему, где каждый пользователь представлен своими вещами. Вещи собираются в списки. Списки помогают избежать предпразничной беготни и истерии. … Профит!

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

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

Все началось с фирменного стиля. Мы придумали и нарисовали серьезный логотип:

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

Фирменный стиль задал ритм остальному. Полгода мы определяли сущности, придумывали сценарии их взаимодействия вместе с разработчиками и рисовали экран за экраном.

Работу над интерфейсом начали, как водится, с идей и набросков:

Придумали основные механизмы и сразу взялись за визуальный стиль. Получилось модно и радостно:

Перешли к внутренним страницам и динамическим элементам:

Не забыли про служебные сценарии:

Какая соцсеть без дизайнерского изюма? Наш ответ — ковер из любимых фетишей на фоне:

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

За год дизайнеры Турбомилка нарисовали более сотни страниц и элементов для любимой Ягудзы:

Пока рисовали, наступил Новый год. У Ягудзы в шапке — праздник:

Нам особенно приятно, что проект живет и развивается. О Ягудзе рассказали в журнале «Секрет фирмы» и в рубрике «Лучшие веб 2.0 сайты» каталога bestwebdevs.ru.

http://feedproxy.google.com/~r/turbomilk/~3/wf-SXiTiZjQ/

http://turbomilk.ru/blog/journal/masterclass_in_kazan/

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

Программа моего выступления такая:

1. Кто такой я и кто такие Турбомилк?
2. Почему иконки это классно и зачем они нужны?
3. Язык пиктограмм (автор Егор Гилёв, рассказываю я).
4. Иконки простые и сложные, большие и маленькие. Основные принципы рисования иконок.
5. Инструментарий: Adobe Illustrator и Photoshop.
6. Мастер-класс по Illustrator — как рисовать иконки.

В любой момент можно будет задавать вопросы, я на них с радостью буду отвечать.

Вся эта радость состоится 12 декабря в помещении Региональной академии Сократ. Стоимость участия и контакты организаторов смотрите в блоге дизайн-бюро «Knock Knock».

Организаторы разрешили провести с собой одного человека совершенно бесплатно. Пускай это будут самые-самые. Оставляйте в комментариях ссылку на вашу лучшую работу. Избранный получит почетное звание «Любимчик Димульки» и бесплатную проходку.

http://feedproxy.google.com/~r/turbomilk/~3/5AzXFCT1yo4/

http://turbomilk.ru/blog/cookbook/masterclass/transvestitor/

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

Весь коллектив ломал голову над названием проекта, складывая слова Twitter и translate, в итоге коллеги развеселились и выдали «Transvestitor»!

За основу логотипа мы взяли голубую птичку, такую же, как и у оригинального сервиса. Но с «изюминкой» — это Птичк мужского полу, небритый, щедро напомаженный, в мужских плавках, с накладными сиськами (ой!) и в красных туфлях. Результат можете наблюдать здесь. )))

Теперь, собственно, к делу — как нарисовать объемного персонажа из плоского логотипа?

Я рисую в Photoshop CS4. Открываем программу и быстро рисуем кисточкой предварительный набросок. Изобразить Птича я собираюсь в поворотном ракурсе в ¾. По многолетней привычке я всех персонажей рисую обращенными лицом влево, мне так удобнее. Но готовый набросок я поверну зеркально вправо, потому что так он будет выглядеть лучше.

Вот, примерно так выглядит работа на второй минуте.

А вот так — на двадцатой. Я добавила Птичу руки и гламурную сумочку.

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

Теперь раскрашиваем Птича цветом.

Инструментом pen я создаю контуры в кривых для всех объектов, затем назначаю векторную маску.

С помощью «пипетки» копируем цвета с плоского логотипа Трансвеститора и раскрашиваем персонажа соответственно.

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

Если требуется четкий контур у объекта — то лучший выбор, на мой взгляд, векторная маска. Можно использовать множество слоев, в них нарисовать тени, блики, рефлексы, орнаменты, текстуры и т.п., но контур объекта, сформированный масками, останется ровным и четким. Для растровой графики под 72dpi это очень актуальный вопрос.

Пример — выделенная маска на объекте (это заключительная стадия рисунка).

И для сравнения — эти же слои с отключенной маской.

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

И снова к персонажу. Результатом закраски слоев должна стать вот такая картинка:

Теперь нарисуем на Птиче тени и свет.

Наш условный источник света расположен в левом верхнем углу, соответственно, рисуем свет на теле персонажа слева, а тени справа.

Для собственных теней берем кисточку brush с мягкими краями, а для падающих — с четким краем. При необходимости края теней растушеваваем или вытираем резинкой.

Режим прозрачности слоя я выставляю multiply, тени так выглядят более естественно.

Теперь добавим свет! Свет рисуем так же, как и тени, но используем самые выбеленные цвета или же вовсе чистый белый. В настройках прозрачности слоя выставляем overlay или softlite. Должно получиться вот так:

Далее, добавим в рисунок рефлексы. Это своеобразный «клей», позволяющий объединить части объекта воедино. Например, свет падает на пластмассовую сиську и отражается от нее на голубое тело Птича. И обратно — голубой блик отражается на розовом пластике. То есть, оба объекта бликуют друг на друга отраженным светом.

А теперь добавим картинке «вкусняшек» — мелкие детальки на лифчик, щетину на лицо и кустистые брови со следами бритья. А также всякие мелкие блики на глянцевые поверхности. )))

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