Встретимся на пляже!

Фотошоп, конечно, очень хорош. Я это неоднократно повторял. Но рисовать в нем сайты с текстом это большое извращение и пытка. И поэтому попытки дизайнеров делать эту работу в других программах (Fireworks, Illustartor, Indesign) вполне объяснимы.
.
Так как я в своих статейках ведаю вам про илюстратор, то глобальным минусом было то, что он не особо хорошо относился к привязке к пикселям. Её попросту там не было. И вот долгожданное свершилось. Выходит обновленная линейка Adobe CS5, где эта проблема решена.
.

.
Теперь можно выскабливать свои работы с точностью до пикселя.

На чём мы остановились? Ах, да! Я вам рассказывал о преимуществах работы над дизайном сайтов или интерфейсов с использованием илюстратора.
.
Так вот. Еще одной хорошей особенностью илюстратора является многостраничность. Вы можете построить все экраны сайта в одном документе (если он, конечно, не совсем уж большой).

Вот, примерно так может выглядеть ваш файл:
↓

.
В связи с этим, есть еще несколько советов с настройкой первоначального шаблона для ваших будущих работ.
.
Если вы отдалите документ до конца (zoom tool 5%) то увидите следующую картину:
↓

.
Видите? Ваш лист находиться в середине рабочего поля илюстратора, что, как мне кажется  не очень удобно. Поэтому советую его перенести в верхний левый угол. Делается это с помощью инструмента Artboard tool (shift+O). Должно получиться так:
↓

.
Помните, чтобы координаты листа оставались всегда целыми значениями, без всяких десятых:
↓

.
Основные приготовления закончены.
Теперь займемся чисткой файла. Так как по умолчанию, в новом созданном документе будет куча ненужного мусора, который нам совсем не нужен.
.
Весь этот мусор находиться в палитрах: Swatches, Symbols, Brushes, Graphic styles.
↓

.
Всё это  нам совсем не нужно и будет только мешать. Смело удаляем.
↓

.
Крайне рекомендую настроить расположение всех палитр под свою руку и обязательно записать: Window → workspace → save workspace…
.
Так же можно выставить все умолчания. Например, толщину обводки, заливку объектов, шрифт по умолчанию и так далее.
.
И ещё одна очень полезная вещь — это модульная сетка. Сайты сделанные по модульной сетке будут радовать глаз — это факт! Тут, конечно, изобретать велосипед не надо. Есть признанный лидер пропагандирования модульной сетки → http://960.gs/ На данном сайте вы можете скачать подходящий для себя шаблон под любую программу. Но, если честно создать свой — дело 5 минут. Я выбрал сетку в 12 колонок.
.
И так, начнем. Напомню еще раз, что начало координат у нас стоит строго в левом верхнем углу листа.
Берем инструмент Rectangle tool (M) и тыкаем в любое место листа. В появившемся окошке выбиваем 60 x 800. Жмем ок. Появился прямоугольник. Задаем ему координаты X=10, Y=0. Теперь выбираем инструмент Line segment tool (\) — опять кликаем в любое место листа. В диалоговом окне вбиваем длину в 800 px и угол 270°. Жмем ок. Пишем нашей линии координаты X=80, Y=0. Группируем оба созданных объекта. Не снимая выделения идем в меню Effect → Distort & Transform → Transform… Идём в секцию Move и вбиваем в поле Horizontal значение 80, а в поле copy — 11.
↓

Жмем ок.
У нас должно получиться что-то вроде этого:

↓

.
Наш шаблон почти готов. Выделите наши объекты. Зайдите в меню: Object  → Expand appearance…  Потом не снимая выделения в меню: View → Guides → Make guides (ctrl+5) — превратив тем самым объекты в направляющие.
.
Вот и всё. Наш шаблон можно сохранить под названием 12_col_template.ait.
Важно сохранить его именно в формате illustrator template AIT.
.
Всё! Мы готовы к самому интересному! В следующем посте будем творить необыкновенные чудеса, которые фотошопу даже и не снились.

Если в фотошопе, можно создать новый документ и сразу начать работу, то комфортная работа над дизайном сайта в илюстраторе  требует некоторых подготовок, настроек и имеет особенности. Всё это мы и рассмотрим в сегодняшнем посте.
.
Лучше всего создать для себя некий шаблон в котором у вас уже будет всё настроено. Будут присутствовать нужные GUI элементы в библиотеке символов и стили для текста и графики… но обо всём по порядку.

.
Итак, начнем. Создаем новый документ.
.

.

1. Задаем наиболее любимый для себя размер, с которого мы начинаем творить. Его всегда можно быстро изменить в процессе работы.
.
2. Работаем в пикселях и только в пикселях.

3. Режим RGB.

4. Разрешение картинки 72 dpi

5. Режим просмотра. Если с первыми четырьмя пунктами всё понятно, то этот следует немного пояснить. Дело в том, что илюстратор все таки векторный пакет, и при многократном увеличении макета или его приближении вы никаких пиксельных квадратиков не увидите. Режим просмотра pixel позволит вам их увидеть. И более адекватно оценить ситуацию… в работе я часто переключаюсь с этого режима или использую сразу два режима, но об этом позже.

Всё жмём ок.

Вот перед нами чистый лист. Нажмите ctrl+1 дабы наблюдать макет в 100% виде. То есть так, как его потом увидит пользователь. Это одна из самых частых комбинаций используемых мной.

Настройка шаблона на этом не закончена.

Основной проблемой векторных изображений, это то, что они плевали на пиксели. И у вас могут быть кнопки с размером 200,5 х 25,456 px и иметь координаты x=0,015 и y=145,45. Это недопустимо. Все числа у нас должны быть ровными. Для этого нам надо настроить сетку.

Идём в меню Edit → Preferences → Guides & Grid.

В секции Grid мы можем:

1. Выбрать любимый цвет для сетки. Лучше всего подходит тот, который стоит по умолчанию.

2. Выбрать стиль сетки: точками или решеткой. Для меня понятней решеткой.

3. Расстояние между основными линиями. Ставим 10

4. И промежуточные линии. Снова 10.

Жмём ок.
Нажимая сочетание клавиш ctrl+Э мы можем скрывать и показывать эту сетку.

И предпоследний штрих. В меню View нам надо выставить галочки напротив Snap to point, и Snap to grid.
Теперь рисуя любой объект, он будет стоять на ровных координатах и будет иметь точные размеры в целых пикселях.

Последнее. По умолчанию в илюстраторе начало координат находиться в левом нижнем углу. Я не могу понять почему так повелось. (наверное чертежное наследие) но в работе это не очень удобно. Поэтому для начала нам нужно показать линейки ctrl+R.  И схватившись за угол начала линеек перетащить его на левый верхний угол документа:

Вот первоначальная подготовка и готова. В следующем продолжении всё будет гораздо интереснее.

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

Так для чего же нужен илюстратор?

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

Самое глобальное преимущество илюстратора перед фотошопом это стили и символы. Что я имею ввиду. Например, мы придумали некий стиль отображения ссылок на сайте.  Банальная ссылка с подчеркиванием синего цвета. Расставили мы эти ссылки по всему макету и их получилось достаточное множество — хотя бы 20 штук. Теперь необходимо их всех перекрасить в зеленый (такое часто бывает). В фотошопе надо будет лазить по всем слоям и красить, красить, красить… в общем пробежка по 20 слоям обеспечена. А когда слоенка достаточно большая то это уже настоящий кошмар. В илюстраторе мы просто обновим стиль наших ссылок и они все сами станут зелеными.

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

Еще одним мега преимуществом я считаю, то что не надо вообще бегать по слоям. Любые движения блоков просты. Группировка, разгруппировка, выравнивание…  просто выделил нужное и потащил. Это очень ускоряет процесс разработки интерфейса.

Еще.
Вы можете нарисовать любую часть сайта в фотошопе и вставить её в макет. Например шапку сайта с красивой графикой. Илюстратор идеально поддерживает формат PSD. Кликая с альтом по нашей шапке автоматически загрузится фотошоп и откроется наша слоенка. Вы её редактируете, например, изменяете телефон, сохраняете… и вуаля! В илюстраторе она обновляется автоматом.

Используя в своей работе фотошоп + илюстратор  — Вы становитесь властелином макета. Работая только в фотошопе вы скованы по рукам и ногам.

Внимание. Всё ко времени и месту. Если вы делаете промо-сайт с насыщенный графикой на сложном фоне, со всевозможными перетеканиями, то лучше весь сайт сделать в шопе. Ну, а если вы делаете редизайн портала Lenta.ru, то илюстратор просто необходим. В общем, к любой задаче нужно подходить гибко, и тогда нас всех ждёт успех.

До встречи!

Всем привет!
Этим постом я открываю цикл статей про использования Adobe Illustrator в веб-дизайне. А именно в использовании его при работе над интерфейсами. Статьи постараюсь выстраивать в виде пособия — сначала будет информативная часть, некие рассуждения на тему преимуществ и недостатков. Потом будет рассмотрена подготовка рабочего пространства. Ну а затем пойдут практические занятия и примеры. Попытаюсь быть максимально точным и не скупится на иллюстративный материал — прикладывать понятные скриншотики и т.д.

Буду рад комментариям по делу. Именно касающихся практической стороны дела. Холивара не надо.
За сим прощаюсь. Ждем первый пост о том как в Илюстраторе все круто и удобно.
Пока.