Пиксельная графика в Illustrator

Я уже немного писал про создание макетов сайтов в Adobe® Illustrator. А сегодня случайно набрёл на простой способ создания пиксельной графики.

Что нам собственно нужно?

  • Привязка линий строго по пиксельной сетке;
  • Отсутствие сглаживания

Решение как всегда пришло конца. У меня на маке не оказалось достойного кириллического пиксельного шрифта. А те, что на скорую руку нашлись в интернете отображались в Illustrator просто отвратительно. Кроме того, в Illustrator, в отличие от Photoshop, никак нельзя управлять сглаживанием шрифта. В результате набрёл на такую настройку: Preferences > General; снимаем галку «Anti-aliased Artwork», далее работаем в режиме Pixel Preview (View > Pixel Preview).

Снимок экрана 3.png

В итоге получаем шрифты без антиалиасинга, что почти то, что мне хотелось.

Снимок экрана 6.png

И тут открылся побочный эффект — все линии начали привязываться по сетке. И совершенно не важно, как они располагаются в векторном представлении — растр будет чётко по линеечке.

shots-200.png

shots-3200.png

Есть и ложка дёгтя. Пока что не удалось получить такой же результат при выполнении команды File > Save for web — картинка растеризуется так, как будто никто и не отключал антиалиасинг у Artboard. При этом при выполнении команды File > Export всё пучком.

Этот неприятный минус, а так «квадратные» края у кривых, не позволяют использовать этот метод как основной в разработке макетов. Однако для создания схем и графиков, а так же черновых набросков — самый сок.

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

P.S.: В статье использована картинка в к учебному пособию по курсу «Профессиональная вёрстка сайтов».

2 thoughts on “Пиксельная графика в Illustrator

  1. Перед тем как «сохранить для веб» надо картинку растировать с параметром сглаживания (лучшее качество текста).

  2. Проще всего для того, чтобы увидеть текст без антиалиасинга — применить фильтр «Растерировать» (Rasterize) тыкнуть «ок» и получить желаемый рузультат ;-) удачи)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *