В этом уроке мы научимся создавать набор кнопок для веба при помощи 3D Effects в Adobe Illustrator. Почему именно 3D Effects? Дело в том, что таким образом мы cможем добрую часть работы над тенями и бликами доверить 3D-эффекту. Это удобно и довольно интересно в процессе работы.

Финальный результат:

Шаг 1. Форма кнопки

Начнем с создания базовой формы для нашей кнопки. Выберите инструмент Rounded Rectangle Tool и кликните в любой части монтажной области. В появившемся окне введите цифры, как на картинке ниже. В качестве заливки используйте светло-серый цвет.

Шаг 2. 3D настройки

Не снимая выделения с созданного прямоугольника, зайдите в меню Effect и выберите 3D > Extrude & Bevel. Введите параметры, как на картинке ниже: измените угол наклона и выберите в графе Bevel параметр Tall-Round. Это поможет нам с бликами и тенями.

Если вы хотите сделать внутреннюю округлую рамку толще, увеличьте значение Height.

В окне настроек Extrude & Bevel Options нажмите кнопку More Options, чтобы открыть диалоговое окно и посмотрите в его нижнюю часть. Если вы хотите осветлить верхний левый угол, переместите точку света влево, как показано на картинке ниже. Если правый нижний — вправо.

Шаг 3. Раскрашиваем кнопку

Убедитесь что кнопка выделена, зайдите в меню Object > Expand Appearance. Теперь, используя инструмент Direct Selection Tool (A), выделите внутренний прямоугольник с округленными краями и залейте его линейным градиентом, как показано ниже. Смените угол заливки на 90 градусов. Оставляя выделенной фигуру, нажмите дважды на Contents в палитре Appearance (фигура сгруппирована с другими), чтобы видеть ее атрибуты. Теперь зайдите в меню Effect > Stylize и примените эффект Inner Glow, используя настройки, как на картинке ниже.

Шаг 4. Добавляем блик

Оставляя выделенной фигуру из предыдущего шага, зайдите в палитру Appearance, нажмите на кнопку Duplicate Selected Item, чтобы продублировать прямоугольник. Смените градиент на черно-белый, как показано ниже, и укажите угол градиента в 50 градусов. Смените режим наложения на Screen (черный становится прозрачным) и снизьте непрозрачность до 75%.

Дублируйте эту вторую фигуру, как дублировали первую. Сохраните градиент того же цвета, только угол наклона укажите в 140 градусов. Также повысьте непрозрачность с 75% до 90%.

Шаг 5. Используем объектную кисть

Теперь, используя инструмент Direct Selection Tool (A), выделите внутренний прямоугольник. В палитре Layers перетащите слой нового прямоугольника из группы кнопки. Удалите все атрибуты и задайте черную обводку. Оставьте фигуру выделенной и зайдите в меню Object > Path > Add Anchor Points два раза, чтобы добавить дополнительные точки. Теперь возьмите инструмент Scissors Tool ©, нажмите на две точки указанные на картинке снизу, после чего удалите нижнюю часть контура.

Теперь нам понадобится объектная кисть (Art brush). Способ ее создания вы можете найти в этом уроке в девятом шаге. Единственная разница в том, что на этот раз используйте овал размером в 100 x 3 px вместо 200 x 5 px. После того, как вы переместите кисть в палитру Brushes Panel, примените кисть к контуру, который мы создали в предыдущем шаге, указав толщину в 2 pt.

Шаг 6. Добавляем тени

Снова копируйте и вставьте на передний план внутренний прямоугольник. Переместите его слой вверх из группы в палитре Layers. Удалите все существующее оформление и залейте его черным цветом (1). Теперь скопируйте и вставьте на передний план черный прямоугольник и залейте его другим цветом, неважно каким, лишь бы его было легко различить (в примере красный). Переместите красный прямоугольник вверх, два раза нажав кнопку вверх на клавиатуре (2). Параметр Keyboard Increment должен быть в 1 px (Edit menu > Preferences > General).

Выделите оба прямоугольника и в палитре Pathfinder выберите Subtract, затем нажмите Expand. Полученная в результате фигура должна иметь черную заливку (3). Смените режим наложения на Multiply и снизьте непрозрачность до 20% (4).

Шаг 7. Глянец

Теперь, используя инструмент Pen Tool (P), нарисуйте контур поверх кнопки, как показано на картинке ниже. Копируйте и вставьте на передний план внутренний прямоугольник, удалите все оформление, задайте только черную обводку. Выделите этот прямоугольник и ранее нарисованный контур и в палитре Pathfinder нажмите на кнопку Divide. В меню Object выберите Ungroup, затем удалите получившуюся нижнюю фигуру, оставив верхнюю.

Залейте полученную фигуру линейным градиентом от белого к черному и укажите угол наклона градиента в -90 градусов. Смените режим наложения на Screen и снизьте непрозрачность до 30%.

Шаг 8. Текст

Продолжим работу с текстом. Выберите инструмент Type Tool (T) и введите текст (в примере «TRY NOW»). Выберите шрифт Anja Eliane, размер 35 pt. Шрифт вы можете скачать здесь. В меню Object выберите Expand, затем залейте текст линейным градиентом, как показано ниже. Угол наклона градиента установите в 45 градусов. Теперь в меню выберите Effect > Stylize и примените эффект Drop Shadow с настройками, как на картинке ниже.

Теперь введите нижний текст («30 DAY TRIAL»), используя шрифт Arial Bold размера 15 pt. Выберите Expand в меню Object. Залейте текст белым цветом, затем примените эффект Drop Shadow с настройками, как показано ниже.

Шаг 9. Стрелки

В палитре Symbols (Window menu > Symbols) откройте меню Symbol Libraries и выберите категорию Arrows. Там найдите стрелки «Arrow 24». Перетащите их в монтажную область и нажмите кнопку Break Link to Symbol в нижней части палитры. Разгруппируйте их дважды и в меню выберите Effect > Stylize > Round Corners, указав радиус в 3 px (1). Залейте стрелки линейным градиентом, как показано ниже. Затем укажите им обводку в 0.5 pt указанного цвета (2).

Переместите стрелку на кнопку, затем зайдите в меню Effect > Stylize и выберите эффект Drop Shadow.

Оставьте стрелку выделенной и в меню выберите Object > Expand Appearance, чтобы разобрать эффекты, которые мы применили. Затем в меню выберите Object > Transform > Scale, введите 80% и поставьте галочку на Copy. У вас получится стрелочка поменьше. Расположите стрелки, как показано на картинке ниже (убедитесь, что они выравнены по горизонтали). Выделите обе стрелки, зайдите в меню и выберите Object > Transform > Reflect. Выберите вариант Vertical и поставьте галочку на Copy. Полученную вторую пару стрелок расположите, как указано ниже.

Шаг 10. Тень

Все, что нам осталось — тень под кнопкой. Выберите инструмент Ellipse Tool (L), нарисуйте овал под кнопкой и укажите заливку черного цвета (1). Разместите слой овала под слоем кнопки, затем в меню выберите Object > Path > Offset Path и укажите -7 px в параметре Offset. У вас получится маленький овал посредине (2). Укажите большому овалу 0% непрозрачности, выделите оба овала и в меню найдите Object > Blend > Blend Options. Укажите 25 Specified Steps и вернитесь в меню: Object > Blend > Make (3). Снизьте непрозрачность до 75% и, если вы размещаете кнопку на какой-нибудь фон, смените режим наложения на Multiply.

Вот как выглядит готовая кнопка:

Также попробуйте другие цвета:

Финальный результат:

Автор урока - Diana Toma.

Перевод — Дежурка.

Смотрите также:

• Уроки по созданию кнопок и панелей навигации
• Создаем иконку «24h» в Adobe Illustrator.