() translation by (you can also view the original English article)
В этом уроке мы создадим кнопку в стиле hi-tech, которую можно использовать в заставках, приложениях или презентациях PowerPoint. Мы будем использовать иллюстратор, чтобы создать более сложную часть в векторном формате и Photoshop, чтобы добавить реалистичные эффекты.
Шаг 1
Используя Иллюстратор, мы создадим прямоугольник, с размером, показанным ниже. Выбрав инструмент Прямоугольник, щелкаем по рабочей области и появится окно, в котором мы можем задать размеры объекта. Я рекомендую в Иллюстраторе в параметрах документа задать пиксели, в качестве единиц измерения.
Шаг 2
Мы разместим направляющую, в качестве референса для горизонтального выравнивания. Используя инструмент Перо+ (Pen Plus) (чтобы добавить опорную точку к объекту), мы добавим дополнительную опорную точку в верхней части прямоугольника.
Шаг 3
Теперь мы выбираем эту новую опорную точку и поднимаем ее выше, линии на которой она находится, и так же удаляем нижние опорные точки друг от друга, чтобы получить форму как на рисунке.
Шаг 4
С помощью направляющих опорной точки мы создаем гладкую кривую, для которой опорная точка будет центром симетрии.
Шаг 5
Теперь мы сделаем еще два таких объекта, что бы создать "трех-точечный" объект. Мы повернем созданную фигуру, используя нижнюю центральную точку, как центр вращения. Чтобы начать, выберите инструмент Поворот (Rotation) и щелкните по нижней части. Вы увидите, что курсор изменился на черную маленькую стрелочку.
Шаг 6
Нажмите кнопу Alt (она используется чтобы дублировать объекты - вы увидите белую стрелочку вместе с черной), и потяните объект. Мы используем информационное окно, чтобы повернуть объект на определенный угол. Если мы решили, что у нас трехточечный объект (три одинаковых объекта с осевой симметрией), мы должны разделить 360 градусов на число 3, поэтому наша копия, должна быть повернута на угол 120 градусов. Поворачивайте, пока вы не увидите в информационном окне эту величину.
Шаг 7
Нажав на Ctrl+D, мы повторим последнее действие. То есть этот объект еще раз скопируется и повернется на 120 градусов.
Шаг 8
Мы объединим эти объекты в один. В панели Обработка Контуров (Pathfinder) мы используем команду Соединение (Unite): щелкните по кнопке Соединение и затем по кнопке Разобрать, что бы создать из группы объектов - один объект.
Шаг 9
Теперь сделаем скругление углов для объекта. Зайдите в Эффект > Стилизация > Скругленные углы (Filter > Stylize > Round Corner).
Шаг 10
Задайте Радиус 10 рх и посмотрите на результат, отметив галочкой чекбокс Просмотр. Радиус зависит от "вылета" элементов главного объекта. В режиме Просмотр вы сможете оценить на сколько заданный радиус корректно скругляет углы: если радиус будет слишком большой, форма будет выглядеть искаженной, а не слегка скругленной.
Шаг 11
Теперь давайте применим оформление к объекту. Зайдите в Объект > Разобрать Оформление (Object > Expand Appearance) и получите конечный результат.
Шаг 12
Вот результат нашей работы с вектором в Иллюстраторе. Это достаточно сложный объект, чтобы делать его вручную, вот почему мы использовали некоторые техники, чтобы получить симметричный и удобный в использовании вектор.
Шаг 13
Так как наша кнопка будет иметь внутренний элемент, на передней панели, мы повторим предыдущие шаги, но на этот раз с более маленьким и коротким объектом.
Шаг 14
Буквально следуя предыдущим Шагам с 1 по 12, мы создали этот новый объект. Остальная часть вектора может быть создана вручную или автоматически без каких либо сложностей.
Шаг 15
Мы создадим только половинку нового объекта и затем сделаем его зеркальное отражение. Аккуратно следуйте по шагам, которые приводятся на рисунке.
Шаг 16
Используя инструмент Зеркальное Отражение (Reflect tool) мы дублируем объект удерживая нажатыми кнопки Shift+Alt.
Шаг 17
Теперь мы объединим обе половинки используя инструмент Обработка Контуров (Pathfinder). Вы можете удалить оставшиеся опорные точки этого соединения с помощью инструмента Перо-.
Шаг 18
Мы используем тот же метод для копирования, описанный выше, повернем объект на 120 градусов и получим 3 одинаковых, симметрично расположенных фигуры.
Шаг 19
И наконец, мы создадим простой круг, векторный объект, который мы будем использовать как светодиодную подсветку, которая будет освещать кнопку в режиме ожидания. Мы завершим редактирование в Фотошопе, используя техники работы со слоями-фигурами.
Шаг 20
Теперь мы выделяем все вектора и жмем Ctrl+C, чтобы скопировать их в буфер обмена.
Шаг 21
Мы закрываем Иллюстратор и открываем Фотошоп. Создаем PSD файл размером 1024 х 768 пикселей, со следующей конфигурацией.
Шаг 22
Закрасим первоначальный слой черным. Затем мы применим стиль к слою, чтобы создать градиент для фона.
Шаг 23
Используя темно-серый и черный цвета, мы создаем Радиальный Градиент и делаем для него максимальный Масштаб (Scale) (130-150%). Помните, что работая с этим окном, вы можете взять и потянуть центр градиента, чтобы разместить на его на экране, где вам захочется.
Шаг 24
Теперь мы вставим вектор как Слой-Фигуру (Shape Layers). Ctrl+V или Редактирование > Вставить.
Шаг 25
У нас есть вектора в одном Фигура-Слое и мы должны разнести их по разным слоям. Давайте создадим столько слоев, сколько у нас есть элементов - 4, в нашем случае, и удалим ненужные объекты в каждом слое, оставив только то, что нам нужно.
Шаг 26
Порядок слоев такой, как вы видите на картинке и не забудьте дать название каждому слою, для лучшей организации рабочего процесса. Некоторые слои будут еще созданы здесь, исключительно в Фотошопе. Мы добавим слои со стилями для нашей кнопки.
Шаг 27
Дважды щелкнув по слою в главном окне, мы открываем окно для редактирования Стиля Слоя (Layer Style). В Параметрах Наложения мы устанавливаем непрозрачность слоя на ноль, для того, чтобы были видны только наши эффекты. Мы начнем с добавления кругового градиента, используя те же цвета фона #333333 (темно серый) and #000000 (черны). Убедитесь, что градиент плавный от центра к краям, увеличив его размер на 120%.
Шаг 28
Используя Внутреннюю тень (Inner Shadow) и отключив Глобальное Освещение (Global Light) (мы Всегда будем использовать 90 градусов), мы повернем эту тень, установив значение для угла -90 градусов. Это поможет нам усилить тень в нижней части.
Шаг 29
Мы завершили первую часть процесса редактирования кнопки. Теперь мы готовы заняться ее поверхностью, которая пока представляет из себя темное тело, мы добавим для нее блеска и эффект 3D выдавливания.
Шаг 30
Давайте создадим хромированную обводку вокруг кнопки. Добавьте 3х пиксельную Обводку (Stroke) с Градиентной заливкой. Мы добавим больше деталей для градиента внутри обводки. Мы пытаемся изобразить хромированную металлическую поверхность, которая отражает горизонт и небо.
Шаг 31
Мы применяем Зеркальный (Reflected) стиль для градиента, чтобы увеличить количество рефлексов от металлической поверхности. Изменяя угол для градиента,мы можем расположить более светлые участки на наше усмотрение. В этом случае максимальная яркость должна быть в верней части обводки.
Шаг 32
Теперь мы сделаем металлическую поверхность еще более детализированной добавив бликов и теней. С помощью параметров наложения Тиснение (With Bevel & Emboss) и Глянец (Gloss Contour) мы добавим больше деталей для нашей поверхности.
Шаг 33
С помощью Внутреннего Свечения (Inner Glow) мы сделаем для кнопки скос, как если бы это было 3D, и постараемся сделать более резкий переход об объекта к фону.
Шаг 34
Теперь нам понадобится выделение, чтобы нарисовать некоторые детали на кнопке вручную. Первым делом необходимо открыть слой с формой кнопки и создать выделение, которое мы будем использовать в качестве маски при закрашивании. Зайдите в окно Контуры (Path) и выберите слой с кнопкой, чтобы создать выделение такой же формы.
Шаг 35
Теперь мы сожмем это выделение: Выделение - Модификация - Сжать (Select - Modify - Contract ). Используйте 10 пикселей в качестве величины сжатия.
Шаг 36
Теперь немного смягчим выделение. Зайдите в Выделение > Модификация > Растушевка или Alt + Ctrl + D (Windows). Задайте значение 1 рх для растушевки и нажмите кнопку ОК.
Шаг 37
Скроем выделение использовав Ctrl+H, что бы лучше видеть, что мы уже сделали. С помощью инструмента Кисть, используя кисть размером 35 рх и 10% нажимом, мы добавим внутри слоя несколько легких бликов на кнопке, используя белый цвет. Так как свет в нашей сцене идет сверху, мы сделаем верхнюю часть более яркой и добавим несколько светлых пятен в более темной нижней части нашей кнопки.
Шаг 38
Все еще работая с нашим выделением (которое сделаем опять видимым используя Ctrl+H) мы уменьшим его на несколько пикселей, чтобы удалить небольшую часть нашей работы кистью, чтобы получился более привлекательный эффект. В этот раз сожмем выделение на 3 рх.
Шаг 39
Опять скроем выделение используя Ctrl+H и, нажав кнопку Удалить, мы удалим часть наших мазков кисти. Это позволит нам проделать ручную работу и затем доработать ее, создав область со скошенными краями, чтобы увеличить 3D эффект для нашей кнопки и придать поверхности пластиковую текстуру.
Шаг 40
Мы закончили с основной формой кнопки. Теперь нам нужно добавить выключатель в центре. Первым делом, нужно убрать непрозрачность для слоя-фигуры до нуля (0%).
Шаг 41
Давайте создадим новую Внутреннюю Тень ( Inner Shadow) с инвертированным углом, как мы сделали раньше с основной частью кнопки. Введите величины показанные на картинке.
Шаг 42
Теперь добавим небольшую Обводку, которой обозначим границу между двумя объектами.
Шаг 43
Следующий шаг это использование Тени (Drop Shadow) для осветления с Режимом наложения Экран (Blend Mode Screen) и белым цветом. Размер должен быть 2 рх, чтобы сделать ее резкой, что создаст вид, что свет попадает сверху, так как у кнопки скошенные края.
Шаг 44
Наконец, используя Внутреннее Свечение мы создадим эффект скошенного края для внутренней кнопки. Это создаст для зрителя эффект, что это выпуклый элемент, который вдавливается внутрь основной кнопки.
Шаг 45
Мы сделали с основные элементы кнопки. На самом деле это не кнопка на фоне: с помощью дополнительных эффектов мы сделаем так, как будто это вставка на поверхности, с металлической обводкой, которая содержит кнопку внутри, которую можно нажать.
Шаг 46
Теперь мы создадим иконку "Power" на кнопке . Скачайте этот бесплатный шрифт: https://www.dafont.com/guifx-v2-transports.font. Вы сможете создать этот объект, используя клавишу «q» и размер шрифта 48 пукнтов.
Шаг 47
На этой картинке вы можете видеть, как добавить скошенные края для иконки, используя обводку в 3 рх того же цвета, что и поверхность кнопки, а затем добавив эффект Тиснения для обводки с предложенными величинами.
Шаг 48
Обводящее Тиснение (Stroke Emboss), как способ создания скошенных краев, позволит нам отделить иконку от фона.
Шаг 49
И наконец, мы добавим металлическую текстуру для иконки, используя градиент так, как вы видите на картинке.
Шаг 50
Теперь мы создадим 3 светодиода - лампочки, которые будут подсвечивать кнопку. Первым делом задайте Слою-Фигуре цвет #06B9FB, дважды щелкнув по нему, чтобы задать цвет.
Шаг 51
Используя Слой-Фигуру для главной кнопки, создадим выделение.
Шаг 52
Мы расширим границы выделения, для этого зайдите в Выделение - Модификация - Расширить (Select > Modify > Expan).
Шаг 53
Задайте значение для расширения - 8рх, и нажмите ОК.
Шаг 54
Инвертируйте выделение с помощью Выделение > Инвертировать (Select > Inverse).
Шаг 55
С помощью этого инвертированного выделения мы создадим маску, что бы получить окончательную форму и размер светодиодных лампочек вокруг кнопки.
Шаг 56
С Обводкой того же цвета, как и поверхность кнопки (используйте пипетку, чтобы взять цвет) мы создадим легкую фаску вокруг лампочек.. Это создаст вид объектов заглубленных в поверхность на заднем плане.
Шаг 57
С помощью эффекта Тиснение (Bevel and Emboss) мы создадим затененный верх, и освтеленный низ для нашей Обводки (как будто свет отражается от скошенных кромок).
Шаг 58
С инвертированной Внутренней Тенью и наложением Умножение (Multiply) мы создадим акриловые рефлексы по верхней части наших лампочек.
Шаг 59
Завершим редактирование этого объекта, добавив Тень, выбрав эту опцию, из создав затененную область позади лампочек, тем самым показав, что эти элементы влияют (отбрасывают тень) на поверхность, которая находится за ними.
Шаг 60
Вот как наша кнопка выглядит теперь, но еще кое-чего не хватает.
Шаг 61
Мы дублируем предыдущий слой со светодиодами, и закрасим этот новый слой-фигуру белым. Мы создадим эффект свечения лампочек используя Внешнее Свечение (Outer Glow) c этими величинами.
Шаг 62
Мы добавили свечения в районе лампочек используя Тень с режимом наложения Экран (или Осветление).
Шаг 63
Основная часть кнопки готова. Теперь, используя выделение с Растушевкой (Feather) радиусом в 20 пикселей внутри нового слоя создайте задний фон, который имеет выступающую форму, как будто он выступает в центре создавая эффект 3D сферы, освещаемой светом сверху.
Шаг 64
Мы закрасили этот элемент белым, предварительно сделав растушевку с радиусом в 20 рх. Вы можете использовать инструмент Заливка или сочетание клавиш Alt+Backspace, что бы злить слой цветом, который вы использовали в качестве основного.
Шаг 65
Мы установили непрозрачность этой сферы на ноль (0%) в панели Стиль Слоев.
Шаг 66
Теперь используя градиент с 50% прозрачностью и режимом наложения Перекрытие (Overlay) (используя черный и белый цвета, которые стоят по умолчанию в градиенте) мы добьемся ощущения формы сферы, позади кнопки.
Шаг 67
Теперь мы закончили с кнопкой и со всеми ее элементами. Нам лишь осталось создать фасочные кромки на заднем плане, используя симметричные векторные элементы, которые мы создали в Иллюстраторе.
Шаг 68
Как обычно мы ставим непрозрачность на ноль.
Шаг 69
Используя Обводку и эти Объекты мы создаем рельеф из этих скосов на заднем фоне.
Шаг 70
Используя Тень и режим наложения Экран, мы создаем освещенную часть этих скосов.
Шаг 71
И наконец мы скрываем часть этих скосов по мягкой маской - 20 рх. Они как бы будут мягко сливаться с фоном и исчезать по наклонной поверхности.
Заключение
Это был долгий путь, но результат того стоит. Последним штрихом будут несколько бликов над верхней частью хромированного края кнопки. Всегда сохраняйте файлы в формате .PSD, с элементами которые позволяют придать вашей работе реалистичный вид. Результат работы вы можете видеть ниже или посмотреть здесь версию большего размера.
