Веб-кнопки для сайта в Иллюстраторе

Как создать простые веб кнопки через панель Appearance? Представляю вашему вниманию ещё один перевод отличного урока по Иллюстратору. Автор урока  Andrei Marius, а ещё больше уроков можно найти на его личном сайте о работе с вектором.

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

Рисуем прямоугольник в Иллюстраторе

Выберите инструмент Rectangle Tool (M) и кликните по рабочей области. В появившемся диалоговом окне введите 93 на 32px. Прямоугольник залейте цчетом R=0 G=182 B=241

Перемещайтесь в Effect > Stylize > Rounded Corners. В окне эффекта выберите 17px радиуса и кликайте ОК.

Теперь ваша фигура должна выглядеть как на картинке ниже. Выделите её и нажмите Ctrl+C. Затем Ctrl+F Так вы добавите копию фигуры в то же самое место.

Взгляните на панель слоев Layer (Window > Layers). Убедитесь что у вас действительно две фигуры.

Удаляем живые эффекты

Выделите копию прямоугольника и идите в Object > Expand Appearance. Выделите получившуюся фигуру и примените Object > Path > Offset Path В диалоговом окне -1px смещения и Ок.Получившуюся фигуру залейте белым цветом. А предыдущую, к которой применяли Expand удалите. Наша веб кнопка обретает первые очертания.

Создаем блики для веб кнопки

Зайдите в Edit > Preferences > General  и введите 0.5px в окно смещения (Keyboard Increment box)

Выделите белую фигуру и сделайте ещё одну копию над ней Control + C > Control + F Выберите новую копию и сместите её вниз стрелочкой на клавиатуре (down arrow) Смещение произойдет ровно на 0.5px

Теперь выделите обе фигуры и кликните по кнопке Minus Front из панели Pathfinder. Подробно о ней мы говорили в уроке Панель Pathfinder в Иллюстраторе. Получившаяся фигура должна выглядеть как на картинке ниже.

 

Задаем градиент в Иллюстраторе

Вернемся к голубой фигуре. Для начала измените голубой цвет на линейный градиент и добавьте 1px обводки. Подробно о градиенте можно прочитать в статье Инструмент Gradient Tool в Иллюстраторе.

Окантовку привяжите к внутренней стороне (inside). Цвет R=0 G=149 B=218. Убедитесь что эффект Rounded Corners effect находится выше обводки и заливки, на панели Appearance

Добавляем шум веб кнопки

Снова выберите овальный прямоугольник и отправляйтесь в панель Appearance. Кликните по иконке на дне панели Add New Fill. Залейте новый цвет черным. Измените невидимость на 2%. Это можно сделать в другой панели Windows > Transparency.

Теперь добавьте эффект шума Effect > Artistic > Film Grain. Нажмите ОК.

Ступенчатый градиент в Иллюстраторе

Добавьте третью заливку для овального прямоугольника. Это можно сделать в той же панели Appearance. Невидимость уберите до 10%. Затем используйте линейный градиент так, как показано на картинке ниже.

Желтыми цифрами на картинке отмечен уровень невидимости цвета. Белым его метонахождение. То есть вам нужно выбрать каждый ползунок градиента и корректировать его метонахождение и невидимость так как показно ниже. Обратите особое внимание на центр градиента. В нем спрятаны два практически пересекающихся ползунка с цветом. У одного невидимость 0% и локация 50% У другого невидимость 100% и локажия 50% За счет этого получается контрастная линия.

Добавляем эффект Тени

Снова выделите овальный объект и перейдите в панель Appearance. Выделите самую нижнюю заливку, ту что с линейным градиентом. И включите эффект тени. Effect > Stylize > Drop Shadow. Введите данные как на картинке ниже и нажмите OK.

Наконец добавьте немного текста. Шрифт Calibri, размер 15px. К тексту примените эффетк Effect > Stylize > Drop Shadow. Введите информацию показанную на картинке и кликните ОК. Для нажатой версии кнопки присвойте тексту значение Bold.

Разрешение растровых эффектов

Если вам не нравится пикселизированный вид тени, вот как вы можете подправить её. Откройте Effect > Document Raster Effect Settings. По дефолту резолюция стоит на 72 ppi. Исправьте на 300 ppi.

Цветовые градации веб-кнопок

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

Создаем задний фон для демонстрации

Наконец, вы можете создать задний фон с паттерном для демонстрации всех кнопок. Выберите инструмент Rectangle Tool (M), нарисуйте прямоугольник и залейте его R=241 G=242 B=242

Убедитесь что именно эта фигура выделена, затем идите в панель Appearance и добавьте вторую заливку. Для неё вам нужно построить паттерн. Можно найти готовые из выпадающего меню на панели Swatches. Просто откройте Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures

Появится новое окно с паттернами. Выберите тот, что называется Diamond. Выберите вторую заливку и залейте её этим паттерном с невидимостью до 7%. Теперь примените эффект Effect > Artistic > Film Grain и введите данные с картинки.

Снова выберите прямоугольники и добавьте новую заливку.  Кликните по ней на палени Appearance, измените её режим смешивания (blending mode) на Multiply  и примените радиальный градиент, как показано на картинке ниже.

Заключение

Кнопки готовы. Вот наш итоговый результат. Надеюсь вам понравился урок.

Скачать фаил

В фаиле находятся все кнопки, как на картинке, с живыми эффектами из панели Appearance, так что все можно покрутить и посмотреть.

Скачать фаил