Блог: статьи
Тренды в дизайне иконок 2010
![]()
Создание иконок — довольно консервативное направление дизайна. Часто новая и оригинальная иконка работает намного хуже, чем стандартная и привычная. Но индустрия не стоит на месте — появляются новые устройства с новыми интерфейсами, и меняются способы работы с ними. Происходит это все довольно медленно, но тренды выделить можно.
Такими могли бы быть новые иконки для LiveJournal
Давным давно трое самарских дизайнеров познакомились друг с другом в Живом Журнале и стали общаться — показывать свои работы
и обсуждать чужие. Так появилась компания Турбомилк. Поэтому когда был объявлен конкурс на новые иконки для LiveJournal мы оживились и принялись за работу.
Как рисовать перекрашиваемые иконки
Что такое перекрашиваемая иконка? Это такая картинка, которой легко поменять цвет, то есть её перекрасить. Есть несколько способов этого добиться. Я расскажу о простой технологии, которую мы использовали когда делали проект Иконза. По сути, это веб-приложение, которое позволяет пользователю менять цвет иконок, а потом генерирует необходимые графические файлы.
10 необычных метафор в дизайне иконок
Для одного и того же действия или объекта можно нарисовать совершенно разные иконки. Варьировать можно всё: стиль, цвет, перспективу и даже метафору. На мой взгляд, последнее — самое ценное в дизайне иконок — концентрированный смысл. А если метафора оригинальная и с юмором, то получается не иконка, а настоящий бриллиант! Предлагаю вашему вниманию мою личную подборку иконок, основанных на необычных и ярких метафорах.
Silverlighter
Однажды компания Microsoft придумала кросс-браузерную, кросс-платформенную технологию для разработки богатых интерактивных Web приложений, основанную на технологии .NET, которая имеет красивое название Silverlight. Потом появились люди, которым эта технология понравилась и они создали сообщество пользователей Сильверлайтер.
Зачем нужны иконки
Вы не поверите, но в 85-м году компания Apple в своем руководстве для разработчиков прямо призывала всегда, когда это возможно, стараться заменять надписи пиктограммами. Якобы пиктограммы понятнее начинающему пользователю, чем слова. Конечно, это полная чепуха. Словами намного проще высказать почти любую идею.
Stitcher для iPhone
Хорошие друзья из d.workz обратились к нам за помощью в оформлении приложения Stitcher для iPhone. Надо было сделать все в лучшем виде.
Как нарисовать иконку. Минимизация
Итак, приготовьте лупы, мы продолжаем! После долгих и жарких споров (не волнуйтесь, до применения бластеров не дошло) у нас есть 3 утвержденные иконки размером 64×64.
Как нарисовать хорошую иконку для Google
Не так давно мы ругали новую иконку сайта Google с буквой g и называли её плохой. Но ругать чужое — не сложно! А какая иконка была бы хорошей? Мы решили ответить на этот вопрос: взяли четырех дизайнеров и заставили их нарисовать хорошую favicon для Google. Такой подход у нас называется — работа по схеме «долбаный креативный бутик». В итоге получились увлекательные истории, которые описывают четыре разных решения этой задачи.
Почему новая иконка Google плохая
Несколько дней назад я зашел на сайт своей любимой поисковой системы и увидел, что там новая иконка. В первые секунды я подумал, что ошибся адресом, но потом стало ясно — Google сменили favicon. Не думаю, что это какое-то глобальное событие для IT-индустрии. Но мне, как человеку, который занимается иконками, стало очень интересно.
Нашествие иконок-гигантов
Маленькая иконка — это нормально! Не нужно стесняться, в этом нет ничего страшного. Еще иконки бывают очень маленькие или совсем крошечные. Такая уж их иконочная судьба. Так продолжалось долгие годы и все были счастливы. Но что-то пошло не так. Всё изменилось. Вдруг иконки стали большими!
10 ошибок в дизайне иконок
Критиковать чужую работу всегда намного проще, чем создать что-то клевое самому. Но если подойти к критике системно, сделать нумерованный список, подготовить иллюстрации, то это будет уже целый анализ! На мой взгляд, в дизайне иконок сейчас переходный период. Разрешение экранов становится все больше, а следовательно и иконки увеличиваются. Но все еще актуальны иконки размером 16×16 и даже меньше. Итак, вот главные ошибки в дизайне иконок…
Автокадабра
Компания «Тематические Медиа» задумала реализовать социальную сеть для автолюбителей, но не простую, а с элементами ролевых игр. Имя этому проекту — Автокадабра.
Как нарисовать иконку. Создание и уничтожение Земли
В прошлый раз мы остановились на том, что отослали Захватчикам наброски, исправленные и доработанные по их замечаниям. Те долго совещались и махали щупальцами. Пока они тянули время, все их Гигантские Кальмары для захвата миров подхватили Космическую Чумку и померли. Все! Вот вам и биотехнологии. Старые и проверенные методы оказались надежнее. Теперь планеты решено захватывать с помощью летающих тарелок с мощными бластерами, как в старые добрые времена.
Поэтому мы решили нарисовать иконку порабощения Земли в первую очередь, пока Захватчики не попереломали свои летающие тарелки.
Как нарисовать иконку. Наброски и метафоры
Радуйтесь и танцуйте, юные любители цифровой миниатюры! Праздник пришел в ваши дома. Турбомилк в лице меня начинает серию заметок о том, как же мы рисуем иконки: от получения задания и предоплаты до отправления финальных файлов заказчику. Евгений Арцебасов — наш иллюстратор — любезно согласился ассистировать мне в качестве художника-оформителя.
Конструирование языка пиктограмм пользовательского интерфейса
Прошлой осенью мне довелось выступать с небольшим докладом на конференции, организованной RusCHI и 1С в рамках празднования Всемирного дня юзабилити. Я говорил о конструировании языка пиктограмм пользовательского интерфейса. Руководствуясь принципом «лучше поздно, чем никогда», я предлагаю вашему вниманию тот же самый рассказ в виде текста с иллюстрациями.
«Обрезание» — праздник детства
Вспомним операционные системы прошлого века — куча Windows до 2000, Mac OS до 9-ой версии. Все они поддерживали только однобитную прозрачность для иконок. К счастью, прогресс не стоит на месте — современные операционные системы используют уже восьмибитную прозрачность. Однако ради обратной совместимости Microsoft рекомендовала включать в состав иконкок для Windows XP варианты картинок и с однобитной прозрачностью. Со временем возня со сведением современной восьмибитной прозрачности к однобитной обрела в среде дизайнеров-иконочников романтическое название — обрезание краев. Именно об этой возне пойдет сегодня речь…
Инструментарий. Часть 2. Растровая
Вы, должно быть, уже негодуете — три недели прошло с тех пор, как Дмитрий раскрыл секреты «векторного» этапа создания иконок, и где же обещанное продолжение? Сейчас объясню, почему мы так медлили.
Дело в том, что мы всегда стремимся по возможности урезать «растровый» этап создания иконки до минимума. Всеми силами стараемся оттянуть тот момент, когда наступает время свернуть Illustrator и запустить Photoshop. Глаза бы мои не видели этот фотошоп! Откуда же такая ненависть к «священной корове» всех дизайнеров? Ничего личного, уверяю вас! Ничего не могу сказать плохого о самом Adobe Photoshop как о представителе класса растровых графических редакторов, тем более что сделан он не в пример качественнее столь любимого нами векторного Illustrator’а. Неприязнь я питаю не к конкретному продукту, а вообще ко всем способам обработки изображений, основанным на их растровом представлении.
Инструментарий. Часть 1. Векторная
На заре моей творческой карьеры для меня единственным векторным редактором был Corel Draw. Я даже не задумывался о том, что бывают и другие. В Corel Draw все было как надо, пока дело не доходило до процесса растеризации. Хуже растеризации я за всю жизнь не видел. Для того чтобы импортировать все это счастье в Photoshop, приходилось сохранять вектора в чуждый для Corel и родной для Adobe формат EPS, теряя при этом часть эффектов.
Так что мое знакомство с Adobe Illustrator состоялось от безысходности. Егор — тот вообще великий мученик. Прошел через Corel Draw, Xara и Macromedia Fireworks, и блуждал бы еще долго, если бы не зацепился бы за Adobe Illustrator. Только Денисочка, умненький мальчик, тот сразу решил осваивать векторный редактор от Adobe и даже купил себе книжку.
Это я все к тому, что Adobe Illustrator для нас вовсе не идеологический выбор, как некоторые могли бы подумать, а единственный инструмент, подходящий для создания векторных иконок. Была бы возможность, мы с радостью поменяли бы его на другой. В конкурсе на самый отвратительно и неаккуратно написанный программный продукт за 500$ Illustrator занял бы почетное первое место, причем с огромным отрывом. Количество ошибок просто поражает воображение и порой выводит из себя. Но не будем о грустном…
Инструментарий. Введение
Однажды мы получили такое вот письмо. Антон Третьяков из Интернета спрашивает нас (пунктуация и орфография авторские):
«Здравствуйте! Скажите пожалуста в каких программах я могу начять разработку иконок. Я-дизайнер и знаю основные графические пакеты. Мне интересен ход разработки».
Странный вопрос, не правда ли? Надо было лишь копнуть чуть глубже и почитать наш великолепный блог. Тогда стало бы ясно, что в работе мы используем Adobe Illustrator и Adobe Photoshop. Разумеется, мы не обиделись на Антона за его невнимательность к нашему творчеству. Ведь его письмо дало нам повод пополнить наш блог серией заметок о нашем инструментарии.
Категории
- Adobe Illustrator (15)
- Adobe Photoshop (4)
- Basecamp (3)
- iPhone (2)
- Будущее (4)
- Визуальный стиль (4)
- Десктоп (2)
- Дизайн иконок (25)
- Инструментарий (14)
- Книги (3)
- Критика (6)
- Маркетинг (2)
- Мастер-класс (22)
- Обзоры (13)
- Организация работы (4)
- Основы (9)
- Проекты (11)
- Скринкасты (7)
- Турбомилк (3)
- Юзабилити (7)
- Юмор (1)
Популярное
- cookbookПервые впечатления от MacOS, или фон Нейман — он и в Африке фон Нейман
- cookbook10 ошибок в дизайне иконок
- cookbookДизайн в стиле web 2.0
- cookbookКак нарисовать хорошую иконку для Google
- cookbookЧто может быть лучше Basecamp?
- cookbookРаскрываем карты, или почему Windows не MacOS
- cookbookWindows 7: встречаем по одежке
- cookbookНашествие иконок-гигантов
- cookbookОптимизация Adobe Illustrator: разгон до первой космической
- cookbookКто склевал все хлебные крошки, или почему MacOS не Windows
ЖурналГалерея персонажей@igorgema: Красиво 2
ЖурналГалерея персонажей@igorgema: красиво
СтатьиПравильный экспорт макетов дизайна из AI в PSD@vladossipov: Егор, а если поверх текста идет в виде popup какая то плашка и на ней текст, то тогда делаете два текстовых слоя?
СтатьиОптимизация Adobe Illustrator: разгон до первой космическойKate Umnova: Всем привет, Подскажите пожалуйста, нет ли в cs5 возможности изменить следующую вещь: каждый раз при открытии файла видимые слои и подгруппы на панели \"слои\" представлены в раскрытом виде. И перед началом работы мне приходится сворачивать все группы по-очереди, оставляя только нужный слой, с которым собираюсь работать. Слоёв у меня как правило много, и надоело каждый раз тратить время на подобное наведение порядка. Я уверена, что есть более рациональное решение этой проблемы. Может быть нужно изменить какое-то умолчание или нажать кнопку о повсеместных репрессиях... о мудрые люди, подскажите!
СтатьиКак мы придумывали и рисовали логотипы-оригами для LondonClassesBodya: ох, сколько же лет я захожу на эту страницу и мечтаю воспользоваться вашими услугами. Просто шедеврально!