Как создается детализированная кнопка Power в стиле Hi-Tech

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

1 Шаг

В Illustrator создаем прямоугольник с размерами, показанными на рисунке (кликаем по Rectangle Tool, затем по рабочей области и выставляем размеры).

2 Шаг

Нанесем на рисунок вертикальную направляющую для удобства. Используя Plus Pen Tool, добавим еще одну узловую точку посередине верхней линии прямоугольника по направляющей.

3 Шаг

Здесь мы перетягиваем нашу точку чуть выше по вертикали, а также растягиваем нижние две по ширине, чтобы получилась фигура, как на иллюстрации ниже.

4 Шаг

Сделаем из верхней линии плавную кривую, перетягивая стрелки узловой точки в нужное положение.

5 Шаг

Сейчас нам нужно создать еще два аналогичных объекта и объединить их в треугольную фигуру. Повернем текущий объект, взяв за ось вращения центр нижней части: выбираем Rotation Tool, кликаем по центру нижней линии фигуры. Сейчас наш курсор превратился в небольшую черную стрелку.

6 Шаг

Нажав Alt (это нужно для создания дубля текущего объекта), начнем поворачивать объект. Для поворота используем диалоговое окно, чтобы повернуть фигуру на нужное количество градусов. Имея в виду, что нам нужна треугольная составная фигура, поделим 360° на три, получим значение 120°. Поворачиваем объект, пока не увидим приблизительно это значение в диалоговом окне.

7 Шаг

Нажав Ctrl + D, мы автоматически копируем то, что было сделано. Поэтому фигура дублируется еще раз и будет повернута на 120°.

8 Шаг

Объединим фигуры в одну. В окне Pathfinder жмем Unite для выбранных объектов, и кнопку Expand для преобразования группы в один цельный объект.

9 Шаг

Скруглим углы фигуры. Откроем Effect > Stylize > Round Corners.

10 Шаг

Зададим радиус 10px и выберем опцию Preview, поставив соответствующую галочку. Радиус зависит от амплитуды кривых, которую вы задали на предыдущих шагах. С помощью Preview можно правильно подобрать радиус закругления углов, чтобы объект выглядел целостно и естественно.

11 Шаг

Теперь выделим контур нашего объекта с помощью команды Object > Expand Appearance — получим финальный объект.

12 Шаг

Вот результат нашей работы с векторами в Illustrator. Это сложный, комплексный объект, для создания которого нам понадобились вспомогательные техники, чтобы получить симметричный, красивый результат.

13 Шаг

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

14 Шаг

Следуя в точности шагам 1-12, мы получили новый объект. Следующие контуры уже будем создавать в реальном времени без подобной сложности.

15 Шаг

Создадим первую половину очередной детали, а затем симметрично ее отобразим. Здесь следует внимательно и по шагам выполнить изложенное на рисунке.

16 Шаг

Используя Reflect Tool, дублируем объект, зажав Shift + Alt.

17 Шаг

Объединяем обе половины инструментом Pathfinder. Также можете убрать оставшиеся узловые точки инструментом Minus Pen Tool.

18 Шаг

На этом шаге будем работать со способом дублирования, изложенным ранее. Поворачиваем объект на 120°, чтобы распределить деталь по трем направлениям.

19 Шаг

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

20 Шаг

Выделяем все объекты и копируем их в буфер обмена (Ctrl + C).

21 Шаг

Закройте Illustrator, откройте Photoshop. Создайте новый документ, размерами 1024×768px.

22 Шаг

Залейте фон черным цветом. Теперь применим стиль для этого слоя, чтобы создать фоновый градиент.

23 Шаг

Используя темно-серый и черный цвета, создаем радиальный градиент с максимальными параметрами Scale (130%-150%). Помните, что с помощью этого окна можно перетаскивать градиент, нужным образом позиционируя его центр.

24 Шаг

Теперь вставляем наши векторные объекты, как Shape Layers (Ctrl + V, или Edit > Paste).

25 Шаг

Теперь мы имеем несколько векторных объектов на одном слое, и нам нужно отделить их друг от друга. Дублируйте данный слой столько раз, сколько нужно для того, чтобы поместить каждую деталь на новый слой (в нашем случае их 4), а затем оставьте на каждом — одну, удаляя лишние.

26 Шаг

Расположите слои в порядке, как показано на рисунке. Не забудьте также назвать каждый слой, чтобы лучше организовать свою работу.

27 Шаг

Добавим стилей к слою "main button". Выполняем по слою двойной щелчок, в опциях "Blending Options: Default" обнуляем параметр Opacity, чтобы видеть только эффекты слоя. Начнем с добавления радиального градиента, используя те же самые цвета фона: #333333 (темный серый) и #000000 (черный). Увеличьте Scale до 120%.

28 Шаг

В меню Inner Shadow кликаем на чекбокс Use Global Light и инвертируем угол, задав ему значение -90°. Это нам поможет усилить нижнюю часть кнопки.

29 Шаг

С первой частью работы над изображением мы справились. Сейчас перед нами довольно темный объект, над которым еще придется потрудиться, чтобы появился блеск и трехмерные детали.

30 Шаг

Теперь создадим хромированный обвод вокруг кнопки. Добавляем еще один стиль — Stroke, размером в 3px и градиентной заливкой. Воспроизведем хромированную отражающую поверхность. Параметры стиля приведены ниже.

31 Шаг

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

32 Шаг

Сейчас более детализируем хромированную поверхность, добавив бликов и теней на рисунок. Этого можно добиться, применив стиль Bevel & Emboss и задав необходимый Gloss Contour.

33 Шаг

Применяем также Inner Glow, делая контур еще реалистичней.

34 Шаг

Теперь нам нужно загрузить выделение, чтобы нанести на изображение некоторые детали. Первое что нужно сделать — открыть палитру Path, выбрать там контур вашей главной кнопки и создать выделение по нему.

35 Шаг

Сейчас мы должны сузить выделенную область, воспользовавшись командой Select > Modify > Contract. Сузим выделение на 10px.

36 Шаг

На этом шаге выделение нужно сгладить, поэтому вызовите Modify > Feather, примените сглаживание на 1px.

37 Шаг

Спрячем выделение нажатием Ctrl + H, чтобы лучше видеть результаты работы. Теперь кистью (Brush Tool) в 35px и 10% Flow наносим на внутреннюю часть кнопки световые блики белого цвета. Поскольку свет падает сверху — больше работаем в верхней части, меньше — в нижней.

38 Шаг

Вернем обратно выделенную область (Ctrl + H), уменьшим ее еще немного, а затем уберем лишние пиксели, оставшиеся после предыдущей работы, чтобы достичь более сложного эффекта. Сужаем сейчас эту выделенную область на 3px.

39 Шаг

Спрячем выделение еще раз (Ctrl + H) и нажатием Delete уберем лишнюю часть бликов. Этот прием позволил нам вручную нанести нужные блики, а затем отшлифовать работу, создав скошенную кромку, усиливающую объем кнопки, придавая пластиковой текстуры поверхности.

40 Шаг

С фактурой кнопки мы закончили. Теперь разберемся со вставкой в центре. Первый шаг — понизить непрозрачность (Opacity) до нуля.

41 Шаг

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

42 Шаг

Теперь добавим небольшой контур Stroke, который мягко разделит два объекта.

43 Шаг

Следующий шаг это стиль Drop Shadow, который нужен для создания блика снизу вставки. Используем режим наложения Screen и белый цвет тени. Размер — 2px.

44 Шаг

В конце концов, добавляем Inner Glow к кромке внутренней вставки. Так наш внутренний объект будет выглядеть как небольшая пластиковая панель сверху кнопки.

45 Шаг

Все, с формами закончили. По сути это еще не кнопка, размещенная на плоскости. С помощью нескольких эффектов мы сделаем так, чтобы она выглядела встроенной в поверхность фона.

46 Шаг

Сейчас поместим на кнопку иконку "Power". Скачайте этот шрифт. Получить нужную пиктограммку можно, набрав "q" этим шрифтом, размером 48pt.

47 Шаг

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

48 Шаг

Здесь добавим к пиктограммке стиль Bevel and Emboss. При помощи Stroke Emboss создается аккуратный край по контуру иконки.

49 Шаг

Завершающим штрихом будет создание металлической текстуры для иконки при помощи градиента. Результат видим на рисунке ниже.

50 Шаг

Сейчас создадим 3 светодиода, которые будут загораться при наведении на кнопку курсора мыши. Для начала задайте слою "Lamps" цвет #06B9FB, два раза кликнув по нему.

51 Шаг

Используя контурный слой (Shape Layer) главной кнопки, создаем выделение.

52 Шаг

Расширим выделенную область, используя команду Select > Modify > Expand.

53 Шаг

Применим значение 8px и нажимаем OK.

54 Шаг

Инвертируем выделение, выбрав Select > Inverse.

55 Шаг

При помощи полученной выделенной области создаем маску, чтобы получить окончательную форму наших диодов вокруг кнопки.

56 Шаг

Теперь создайте тонкие обводы вокруг этих индикаторов. Используйте стиль Stroke и цвет основной поверхности кнопки (определите его инструментом Color Picker).

57 Шаг

При помощи стиля Bevel and Emboss задаем обводам затемнения в верхней части и добавляем света в нижней (так рельеф будет выглядеть реалистичней).

58 Шаг

При помощи Inner Shadow, развернутой на -90° и режима смешивания Multiply создаем специальные отражения в верхних частях наших индикаторов.

59 Шаг

Завершаем редактирование данных объектов добавлением Drop Shadow, что создаст видимость того, что индикаторы влияют на рельеф поверхности, формируя вокруг себя тени.

60 Шаг

Сейчас наша кнопка выглядит следующим образом, но за нами остались еще пара эффектов.

61 Шаг

Продублируем слой с текущими индикаторами и обратим объект в белый цвет. Начнем изображать подсветку со стиля Outer Glow, применив к нему следующие значения.

62 Шаг

Освещение областей с индикаторами создадим при помощи Drop Shadow и режима наложения Blend Mode.

63 Шаг

Эффект свечения готов. Теперь, используя эллиптическое выделение, смягченное на 20px, нам нужно создать выпуклость на новом фоне позади кнопки. Как будто кнопка расположена точно по ее центру.

64 Шаг

Зальем выделение белым (помним, что мы к нему применили Feather со значением 20px). Для заливки используем либо Paint Tool, либо Alt + Backspace (заливает слой цветом, выбранным как основной в палитре цветов).

65 Шаг

Задаем Fill Opacity слою равным 0% в окне Layer Style.

66 Шаг

Теперь, применив полупрозрачный (50% Opacity) градиент и наложение Overlay, мы получим эффект рельефности нашей фоновой сферической поверхности. Цвета градиента — от черного к белому.

67 Шаг

Мы закончили работу с кнопкой и ее деталями. Сейчас осталось создать рельефный узор на поверхности фона, используя для этого наши оставшиеся векторные объекты.

68 Шаг

Как обычно — переводим Opacity в 0%.

69 Шаг

Применяем к слою стиль Stroke и, таким образом, наводим контур темным цветом.

70 Шаг

Задаем еще один стиль узорам — Drop Shadow белого цвета, с режимом смешения Screen. Узор стал объемным.

71 Шаг

В итоге спрячем лишние края узора под мягкой (20px Feather) маской. Идея в том, чтобы создать видимость плавного растворения линий в фоне по краям изображения.

Что ж, работы было много, но результат стоил того. Я еще добавил небольшой отблеск на верхнем крае кнопки. Итог вы видите ниже. Спасибо за упорство и внимание! Следите за обновлениями.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.