Блог: статьи

Инструментарий. Часть 2. Растровая

Егор ГилёвАвтор: Егор Гилёв
6 июля 2006

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

Дело в том, что мы всегда стремимся по возможности урезать «растровый» этап создания иконки до минимума. Всеми силами стараемся оттянуть тот момент, когда наступает время свернуть Illustrator и запустить Photoshop. Глаза бы мои не видели этот фотошоп! Откуда же такая ненависть к «священной корове» всех дизайнеров? Ничего личного, уверяю вас! Ничего не могу сказать плохого о самом Adobe Photoshop как о представителе класса растровых графических редакторов, тем более что сделан он не в пример качественнее столь любимого нами векторного Illustrator’а. Неприязнь я питаю не к конкретному продукту, а вообще ко всем способам обработки изображений, основанным на их растровом представлении.

Судите сами. Векторная иллюстрация кропотливо составляется автором из множества простейших элементов: форм и линий, с наложением всевозможных эффектов. И какой бы сложной ни была эта иллюстрация, всегда можно добраться до любого из этих составных элементов, и изменить любые его свойства. В растровых редакторах все не так. Провел кистью — и все, пиши пропало, это уже не мазок, а отдельные пиксели, никак между собой не связанные, зато намертво впитавшиеся в тот рисунок, поверх которого был нанесен мазок. Почти как на бумаге, как в каменном веке! Я чувствую, любители Adobe Photoshop, если дочитали до этого места, уже точат свои перья для злоехидного комментария. Дескать, неплохо бы автору подучить матчасть и узнать про такие полезные функции, как Layers, Paths, и прочее. Однако же черного кобеля не отмоешь добела, и, согласитесь, при всей своей полезности эти функции все же не позволяют редактировать детали сложных иллюстраций столь же легко, как это делается в любом векторном редакторе.

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

Что же мы делаем с иконками в Adobe Photoshop после того, как благополучно сэкспортировали их из векторного исходника, используя технику, описанную в заметке «Растрирование в Adobe Illustrator»? Не так уж и много. Иногда прикладываем тень. Иногда делаем «подсвеченные» варианты (состояние иконки при наведении мышки). Делаем варианты с «жесткими» краями (без анти-алиасинга). И, наконец, нарезаем набор иконок на множество отдельных файлов. Первые две операции исчерпывающе описаны в руководстве от Microsoft, так что сейчас мы поговорим про «жесткие» края и нарезку.

В том же руководстве в двух словах сказано, почему файлы иконок для Windows должны включать 256-цветные варианты с однобитной прозрачностью (то есть с «жесткими» краями). В режиме 16-битного цвета Windows XP использует именно такие варианты иконок. Мне остается лишь добавить, что до сих пор не все разработчики программ научились в своих интерфейсах отображать иконки с 8-битной прозрачностью (то есть с анти-алиасингом), даже когда система работает в режиме 32-битного цвета. Наверное, тот день, когда мы сможем забыть про «жесткие края», как про страшный сон, уже близок. Но, увы, еще не наступил.

К сожалению, способ делать из векторных иконок с анти-алиасингом иконки с «жесткими» краями, описанный в руководстве от Microsoft, совсем никуда не годится. Я уже предупреждал, что в этой заметке вас не ждет ничего интересного и приятного? Так вот, самый правильный способ вам не понравится. Потому что и способа-то, по сути, нет: тут закрасил пиксел, там почистил… и так, пока вся иконка не будет выглядеть более-менее прилично, причем без полупрозрачных пикселей по краям, причем на разных фонах. Только ручная обработка может дать достойный результат во всех случаях.

Иконка с антиалиасингом и без оного

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

Когда, наконец, вся работа над графикой завершена, остается вырезать все нужные варианты каждой иконки и сохранить в отдельных файлах нужного размера (вы, надеюсь, не думаете, что мы рисуем каждую иконку в отдельном файле с самого начала?). К счастью, нам не нужно делать это вручную, благодаря встроенной в Adobe Photoshop функции Save for Web. По задумке разработчиков при помощи этой функции веб-дизайнеры могут со сказочной легкостью нарезать макеты сайтов на отдельные картинки, и даже генерировать HTML. Нам HTML обычно ни к чему, а вот возможность вырезать и сохранить в отдельных файлах фрагменты исходного изображения, заранее заданные и поименованные при помощи инструмента Slices, является для нас настоящим спасением.

Save for Web

Как и следовало ожидать, судя по названию, функция Save for Web отлично справляется с сохранением в отдельные файлы иконок для web-приложений в форматах PNG и GIF. Более того, если разработчику Windows-приложения нужны, например, иконки для тулбара в формате BMP, и в этом случае Save for Web отлично справится с задачей. Однако для главных иконок Windows-приложений, также как и для иконок файлов с данными, нужны файлы ICO. Так далеко возможности Save for Web, увы, не заходят. Для создания ICO-файлов приходится использовать специализированные инструменты. Такие, как IconBuilder для Mac и Axialis IconWorkshop для Windows.

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

Условия использования

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

Комментарии

Извените но я не особо понял смысл написания это статьи. Да возможно для начинаюших неплохо будет узнать как пользоватся слайсами и фунциее «Save for Web» Мне кажется лучше бы описали «правила» (принцыпи) разработки пиктограм, и GUI дизайн.

Пс. Ещё было бы неплохо если кроме рисования эконок вы разрабатывали элименты управления… =) это так мелочь…
Извените за ошибки…

Ответить mse, 7 ноября 2006

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

Ответить yegor, 16 ноября 2006

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

Ответить Игорь Иной (Onlime.ru), 26 декабря 2006

Напишите комментарий

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

Connect with Facebook

Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.

Авторизуйтесь при помощи аккаунта Турбомилк. Вы также можете зарегистрироваться на нашем сайте.

Закрыть