Turbomilk

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

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