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

Радикальное решение проблемы — сразу рисовать в требуемом пиксельном размере, стараясь делать так, чтобы границы объектов по большей части совпадали с границами пикселей. Это нетрудно контролировать, используя режим 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.

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

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

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

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