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

В этой статье я расскажу, а вернее будет сказать покажу, как нарисовать вот такую штучку:

.

— Ну и что такого?  — спросите вы.  Ключевое слово здесь «растягивающееся».

.

Любой дизайнер интерфейсов должен в своем арсенале иметь набор готовых GUI-элементов, с помощью которых он легко может накидывать экраны. А для дизайнеров айфоновых и айпадовых приложений сам бог велел.

Немного лирики:

Фотошоп уже давно сдает свои позиции на рынке программ для рисования интерфейсов. Первая проблема это слои-слои-слои. Вторая это скругленные углы. На самом деле проблем гораздо больше и когда-то я уже описывал их.

Возвращаемся к нашему уроку.

.

Первое, что мы должны сделать это нарисовать подходящий прямоугольник.

Видите панельку Appearence? Она не спроста тут показана. В этой панельке мы будем делать практически все действия.

И так закругляем углы, применяя соответствующий фильтр.

Теперь мы должны применить к белой заливке (именно к заливке) фильтр трансформацию — сдвиг на пискель вниз.  И сделать ей прозрачность в 60-70%. Это будет белый блик нижней грани нашего поля.

Теперь начинается магия. Добавляем поверх нашей белой заливки новую, с заранее выбранным цветом. Цвет должен быть добавлен в Swatches и обязательно с галочкой Global — это избавит нас потом от рутинных процессов и позволит менять цветовые гаммы во всем макете прямо на лету. (Фотошоп соси!) Это будет цвет нашей кромки поля.

Нам нужна еще одна заливка, которая будет выкаршена 50% -ый цвет нашей кромки. К этой заливки нужно применить фильтр Offset path в -1 пиксель.

Это уменьшит внутрь нашу заливку ровно на пиксель внутрь.

.

А теперь еще одна заливка (да сколько можно?!?) Её цвет 30% от кромочной. У нее уже два фильтра Offset path в -2 пикселя и Transform со сдвигом по вертикали на 1.

А теперь самый крутняк. Нам надо подготовить маленький паттерн для заливки следующей заливки (простите за тавтологию) . А выглядит он вот так:

Это сильное увеличение как видно объект состоит из четырех прямоугольников шириной почему-то в 6 пикселей. На самом деле можно сделать и в один и в 100, разницы нет — ведь это паттерн. Для меня это почему-то 6 — видимо мне так удобней. Самый нижний прямоугольник высотой в 1 пиксель и белым цветом. Второй тоже в 1 пиксель и сереньким цветом. (не забывайте про Swatches и Global!) Третий на половину светлей второго. И последний, четвертый, самый важный, высотой в 44 пикселя — по сути это высота вашей строки ввода в нашем поле. Цвет для нее следуют выбрать немного серенький? Почти белый, но не белый :-)

.

Теперь эту нашу конструкцию надо засунуть в Swatches, тем самым превратить её в паттерн. Как это сделать можно глянуть здесь.

.

Возвращаемся к нашему супер объекту. Остался один маленький шаг. Это добавление еще одной заливки! (о ужас).  К этой последней заливочке мы применяем наш паттерн:

Паттерн встает не так как нам нужно. Исправить это занимает 5 секунд. Выделяем наш объект, идем в панельку Transform, а там в дополнительное меню. (см. рисунок ниже). Выставляем галку Transform pattern only и сдвигаем по вертикале наш паттерн внутри объекта.

Не забудьте потом галочку в панеле поставить на Transform object only. Вот и всё! Наше резиновое поле готово! Его можно трансформировать как угодно, тянуть за любой край, делать любой высоты и ширины. Вот вам три сразу:

Вы спросите зачем такие долгие мучения, ради такой простой штучки? Ответ прост: эта штуковина делается не на раз, а на много последующих проектов. Этим же способом можно делать разные ниспадающие меню и еще кучу всего. А еще делается это очень быстро, я трачу на создание такого поля минуту.

.

Продолжаем усовершенствовать шаблон для рисования сайтов в Илюстраторе. В предыдущем шаблоне не было вертикального ритма, поэтому было решено использовать модульную сетку от cherenkevich.

.

Моя сетка выглядит так:

Чтобы наш вектор не тормозил и илюстратор не просчитывал большое количество объектов, сетку лучше всего сделать патерном. Рисуем такой кусочек:

и перетаскиваем его в палитру Swatches.

.

Теперь самое грандиозное.

Надо нарисовать прямоугольник размером на всю доступную область в илюстраторе,

.

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

.

Вот и всё. Мы готовы к работе.

Фотошоп, конечно, очень хорош. Я это неоднократно повторял. Но рисовать в нем сайты с текстом это большое извращение и пытка. И поэтому попытки дизайнеров делать эту работу в других программах (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 в веб-дизайне. А именно в использовании его при работе над интерфейсами. Статьи постараюсь выстраивать в виде пособия — сначала будет информативная часть, некие рассуждения на тему преимуществ и недостатков. Потом будет рассмотрена подготовка рабочего пространства. Ну а затем пойдут практические занятия и примеры. Попытаюсь быть максимально точным и не скупится на иллюстративный материал — прикладывать понятные скриншотики и т.д.

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