Макет сайта в Illustrator. Можно, но осторожно

Технологическим стандартом де-факто для создания графических макетов сайтов стал Adobe Photoshop. Такой макет будет принят любым верстальщиком, если выполнить минимальный набор требований, да и все входы-выходы давно описаны. Поэтому я не буду их описывать, а дам несколько рекомендаций по созданию графических макетов в Adobe Illustrator.

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

Есть достаточно большое количество ситуаций, в которых работать с растровым редактором нерентабельно. Если на макете нет и не придвидится необходимости в слоевых масках, а есть только прямоугольники, линии, несколько картинок и текст — создать такой макет в Illustrator будет намного проще и быстрее. А уж если у нас не просто прямоугольники, а прямоугольники с круглыми уголками, то нас просто-таки спасёт Effect > Stylize > Round Corners… (хотя и в Photoshop можно создавать уголки с легко изменяемым радиусом, но об этом в другой раз). Средние и большие пиктограммы тоже удобнее рисовать в векторе.

Где больной?

В теории всё просто замечательно и радужно, но почему что же на практике? На практике мы имеем неизбежное преобразование векторного изображения в растровое. И вот на этом этапе заложена мина. Мина под названием «сглаживание». При работе над макетом в Illustrator нужно соблюдать хирургическую точность. Как только координаты точки перестают быть целыми числами мы теряем чистоту линий. Появляется грязь.

Проблема номер раз заключается в том, что в режиме отображения, установленном по умолчанию, мы видим картинку в максимальном качестве пригодном для полиграфии, а у монитора оно намного ниже. Для того, что бы видеть, как всё будет выглядеть после растеризации — включаем режим Pixel Preview (View > Pixel Preview). Если у вас есть второй монитор, или если есть один, но очень широкий — создаём копию окна (Window > New Window) и задаём разные режимы просмтотра для них.

Я уже упоминал про хирургическую точность — открываем палитру Transform и проверяем, что бы у нас всегда были целые значения для координат объекта и его размеров. Но это ещё не всё. Предположим, что мы создали прямоугольник размером 15х25 пикселов и расположили его в точку 150:200. Будут ли при этом чистота на границе? В состоянии по умолчанию — нет, потому что у нас нечётные значения ширины и высоты. Поэтому переводим точку привязки координат из центра в левый верхний угол. Вот теперь полный порядок.

upd: кроме того, необходимо включить привязку к пикселам (View > Snap to Grid) и задать особые настройки в Edit > Preferences:

  • Категория General: Keyboard Increment > 0.5px
  • Категория Units & Display Performance: Units > General > Pixels.

Это позволит точно позиционировать объекты с помощью кнопок клавиатуры, что, несомненно, быстрее и удобнее работы с палитрой Transform.

Линий нет, даёшь объекты

Следующая проблема — контуры толщиной в один пиксел почти всегда получаются «грязными». Причина кроется в том, что по умолчанию обводка рисуется в обе стороны от контура объекта. Выходов два: в Illustrator CS3 и выше задаём параметру Align Stroke значение «outside», либо вообще не пользуемся обводкой и создаём контуры через Оbject > Path > Offset Path. Второй способ лучше, потому что в этом случае мы получаем новый объект, у которого можем легко двигать опорные точки. Но теряем возможность быстро поменять толщину линии.

Иногда у Illustrator ломается внутренний калькулятор и в этом случае точно выставленные линии начинают двоить. Лекарство простое и неудобное — увеличиваем масштаб, ставим рядом два окна, одно со стандартным режимом просмотра, второй — Pixel Preview. В первом аккуратно двигаем опорные точки, а по второму контролируем процесс.

Итак, дорогие дизайнеры! Создавая захыватывающие дух макеты, не забывайте о том, что потом ваш макет будут мучать и резать. Что бы макет не изуродавали, подготовьте его ко взрослой жизни — проверьте все детали при большом увеличении в режиме Pixel Preview. При необходимости внесите коррективы.

Таки всё плохо, что делать?

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

Для исправления ситуации прежде всего избавляемся от обводок, нам нужны только объекты. Для этого делаем так: Object > Expand. После чего выравниваем всё с точностью до пиксела.

Итого

Делать макеты в Issustrator можно. Но очень важно уметь правильно их готовить. Как в изысканой кухне — прежде всего нужно соблюдать чистоту и точность.

Так же рекомендую к прочтению:

6 thoughts on “Макет сайта в Illustrator. Можно, но осторожно

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

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