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

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

.

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

.

Любой дизайнер интерфейсов должен в своем арсенале иметь набор готовых 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% и залочить его.

.

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

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

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

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

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

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

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

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

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

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

До встречи!

Итак, в чём самое крутое преимущество Илюстратора перед остальными (Корелом)? Об этом, почему-то, никто никогда не упоминает в холиварах. Когда как я, считаю это самым важным изобретением Adobe.
Это преимущество выглядит вот так:



Еще его можно назвать двойной клик.
В чём, собственно, суть и крутизна?

В том, что при двойном клике мы проникаем внутрь любой группы без разгрупировывания. Делаем нужные изменения и «выходим» из группы. Фича действует с любой вложенностью групп. Можно забраться в глубь самой групированной группы сдвинуть на пиксель и вернуться. Это просто сказачно. Как корельщики живут без этого, непонятно.

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

Корел нервно курит в сторонке.