Блог: статьи

Растрирование в Adobe Illustrator 10 и CS

Егор ГилёвАвтор: Егор Гилёв
4 ноября 2004

Много камней преткновения попадается на пути терпеливого дизайнера пиктограмм. Некоторые удается обойти, некоторые столкнуть, но обо что-то все равно придется споткнуться. И вопрос «как из большой красивой картинки сделать маленькую красивую картинку — пиктограмму?» находится где-то в верхних строчках хит-парада проблем. Иными словами, как превратить векторную картинку в растровую пиктограмму, не потеряв при этом четкость и различимость изображения?

Радикальное решение проблемы — сразу рисовать в требуемом пиксельном размере, стараясь делать так, чтобы границы объектов по большей части совпадали с границами пикселей. Это нетрудно контролировать, используя режим Pixel Preview в Adobe Illustrator.

Но как же быть, спросите вы, если нужно сделать пиктограмму сразу в нескольких размерах, например 32×32, 24×24 и 16×16? Я обычно начинаю с самого крупного размера, а потом уменьшаю картинку в векторном редакторе и снова подгоняю точки, опять же глядя в Pixel Preview. И так для каждого размера.

Иконка в трех размерах

А никто и не говорил, что будет легко.

Также бывает полезно вокруг всех объектов нарисовать рамку ровно по пиксельной сетке (например X:10,5px Y:10,5px W:500px H:500px Weight:1px). Тогда при растрировании картинка не сместится, и выверенные в Pixel Preview границы не будут размыты.

Но наиболее наблюдательные и привередливые экспериментаторы заметят, что результат экспорта в растровый файл (например в PSD) не совсем совпадает с картинкой в Pixel Preview.

Pixel Preview и экспорт в PSD

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

Дело в том, что в Adobe Illustrator заложены два алгоритма анти-алиасинга:

  • Art Optimized — оптимизированный для иллюстраций без текста;
  • Type Optimized — оптимизированный для текста.

По непостижимым мне причинам при экспорте в растровый файл всегда используется первый алгоритм, а при отображении картинки в рабочем окне — второй. Увы, с механизмом предварительного просмотра мы ничего поделать не можем. Но все таки есть способ получить растровый файл, в точности соответствующий картинке в Pixel Preview. Для этого нужно перед экспортом принудительно растрировать все объекты, используя эффект Rasterize, и выбрав в диалоге настройки алгоритм анти-алиасинга Type Optimized.

Rasterize

Только после этого можно экспортировать картинку в PSD, добавить чуть-чуть Sharpen или Unsharp Mask (по вкусу) и, наконец, слегка наклонив голову вправо, долго наслаждаться полученным результатом.

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

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

Комментарии

ок, спасибо за совет.

кстати, printscreen, а затем paste в photoshop – это альтернатива или глупость?

Ответить ColdG, 4 мая 2006

printscreen — не вариант, когда надо получить картинку с прозрачным фоном и анти-алиасингом.

Ответить yegor, 4 мая 2006

Спасибо за объяснения, многое стало понятно. Более подробного описания еще не встречал.

Ответить Святослав, 19 мая 2006

А не проще-ли экспортировать изображение в PNG с прозрачностью (24, который)? Лично я только так и поступаю. Даёт 100% совпадающий с pixel preview результат. Или я невнимателен?

Ответить Михаил Квривишвили, 21 июля 2006

Михаил, как показал мой эксперимент, вы невнимательны. Экспорт в PNG без предварительной растеризации дает такой же результат, как и экспорт в PSD (отличие от Pixel Preview показано на иллюстрации в статье). Таким образом, формат файла роли не играет. Экспортируйте куда вам удобнее, но если хотите получить результат, на 100% совпадающий с Pixel Preview, примените сперва эффект Rasterize, как это описано выше.

Ответить yegor, 21 июля 2006

Егор, добрый день.

А как вы переводите пиктограммы в ico формат?

Не могу не заметить, что читал сегодня(!) статью Дмитрия Жукова про использование Illustrator’а для рисования пиктограмм, и хотел к ней написать этот вопрос… И вот уже минут 15 не могу её найти, в разделе Illustrator её нет, в Мастер-Классэе тоже нет, а общего списка записей нет.

PS Нет, нет, юзетикс не занялся пиктограммами, это я для себя.

Ответить Золотов Андрей, 20 июля 2007

Андрей, наверное, искомая статья заблудилась в разделе «инструментарий». Беда с этой классификацией!

А для создания ico-файлов рекомендую вот эти два варианта: Axialis IconWorkshop, IconBuilder.

Ответить yegor, 20 июля 2007

Скажите, а как можно уменьшить эффект ступенчатости граней при растеризации?
Вот пример: http://pics.livejournal.com/look_this/pic/0000341r
Верхняя грань имеет 3 слишком явных ступеньки. В векторе, естественно, перепадов нет.

Ответить look_this, 20 июня 2008

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

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

Connect with Facebook

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

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

Закрыть