Реклама


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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


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

Часть 1. Создание основы для кнопки

Приступим к работе. Создайте новый документ в формате PSD и размером 1024 х 768 px со следующими настройками:

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Главная кнопка «Main button»

Шаг 1.

С помощью инструмента Прямоугольник Как создать кнопку с тщательной проработкой деталей в стиле hi-tech (Rectangle tool) (в течение всего урока следите за тем, чтобы при работе с данным инструментом на панели параметров была активна кнопка Cлой фигура (Shape Layers)), нарисуйте прямоугольник 100 х 120 px.

Шаг 2.

Установите вертикальную направляющую по центру фигуры. В данном случае, направляющая сама «прилипнет» к прямоугольнику в нужном вам месте.

Теперь при помощи инструмента Как создать кнопку с тщательной проработкой деталей в стиле hi-tech "Перо+" Добавьте опорную точку (Add Anchior Point Tool) поставьте точку на пересечении направляющей и верхней границы прямоугольника.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 3.

Теперь, удерживая клавишу Ctrl, потяните точку вдоль направляющей вверх – прямая превратится в дугу.

Используя инструмент Непосредственное выделение (Direct Selection Tool )(A), активируйте правую опорную точку и, наберите на клавиатуре Shift + стрелка вправо. Затем, то же самое проделайте с левой точкой основания фигуры (Shift + стрелка влево)

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 4.

Теперь продублируем получившийся объект. Для этого при активном инструменте Выделение контура (Path Selection Tool) (A), кликните по нему левой кнопкой мыши, а затем при помощи сочетания клавиш Ctrl+C скопируйте его и вставьте, набрав Ctrl+V. Далее выполните команду Свободная трансформация контура (Free Transform Path). Переместите центр фигуры в точку пересечения его основания и вертикальной направляющей. И выполните поворот созданной копии объекта на -120°, путем ввода соответствующего значения в окошко поворота меню свободной трансформации. И, набрав на клавиатуре Ctrl+Shift+Alt+T, создайте третий объект с поворотом на 120°

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 5.

Инструментом Выделение контура (Path Selection Tool) (A), удерживая клавишу Shift, выделите все объекты и нажмите кнопку Объединить (Combine) в меню инструмента. Теперь надо сделать нашу объединенную фигуру более округлой. Это не так легко, как в случае с векторной графикой. Но есть один способ. Удерживая клавишу Ctrl, кликните по миниатюре маски – в результате будет выделен весь объект. Теперь округлим края фигуры,пройдя через главное меню Выделение - Модификация Сглаживание (Select - Modify – Smooth). В окне Сгладить выделенную область (Smooth Selection) введите 10 px и нажмите ок. В нижней части палитры Контуры (Paths)кликните по иконке Сделать из выделенной области рабочий контур (Make work path from selection). Теперь переименуйте контур в Главная кнопка «main button», кликнув два раза по его миниатюре.

Фаска кнопки «button bevel»

Шаг 6.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Рельеф поверхности «background bevels».

Шаг 7.

Надеюсь, у вас не возникло сложностей на предыдущем этапе. Переходим к следующему.

Мы нарисуем половину фигуры, а затем, скопировав и отразив эту часть, составим целую из двух половинок. Выберите инструмент Перо Как создать кнопку с тщательной проработкой деталей в стиле hi-tech (Pen Tool ) (P) и последовательно выполните шаги, описанные на приложенном рисунке.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


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

Как продублировать объекты и развернуть их на необходимый нам угол мы разбирали в шаге 4. Проделайте все эти действия с вновь созданным объектом до получения следующего результата:

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Подсветка « lamps».

Шаг 8.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Посмотрите, как должны располагаться слои в вашем документе:

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


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

Часть 2.

Шаг 9.

Если предыдущие шаги вы делали в Adobe Photoshop, то сразу переходите к следующему шагу. Эта часть для пользователей, которые рисовали фигуры для кнопки в Adobe Illustrator.

Для дальнейшей работы вам необходимо перенести заготовку для кнопки в Adobe Photoshop. Выделив все объекты и при помощи сочетания клавиш Ctrl+C поместите их в Буфер обмена. Редактор векторной графики теперь можно закрыть и приступить к работе в Photoshop. Создайте новый документ в формате PSD. Размер документа – 1024 x 768 px. Ниже приведены установки для вашего документа:

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 10.

Самый нижний слой документа залейте черным цветом. Если над основой для кнопки вы трудились в Photoshop, то удобнее будет временно скрыть уже созданные слои для работы над фоном.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 11.

Перейдите к шагу 14, если первоначально вы работали в Photoshop

Продолжим. Вызовите диалоговое окно Стиль слоя (Layer Style) двойным щелчком в поле слоя рядом с его названием. Перейдите в раздел Наложение градиента (Gradient Overlay) и создайте градиент от темно-серого к черному, с размером не превышающим 130-150%. Имейте ввиду, что центр градиента вы можете переместить в любую точку рабочей области.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 12.

Теперь мы можем вставить векторные изображения как Слой-фигуру (Shape Layer), используя сочетание клавиш Ctrl+V или посредством команд Редактировать (Edit) и Вклеить (Paste)

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 13.

Наши векторные фигуры вставлены в программу одним Слоем-фигурой (Shape Layer). Теперь нам предстоит разбить ее на отдельные части. Продублируйте полученный слой столько раз, сколько фигур вы хотите получить. По моим подсчетам, их в итоге должно быть четыре.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


В каждом слое оставляем одну фигуру, удаляя все ненужные. Для этого мы воспользуемся инструментом Выделение контура (Path Selection Tool) (A). При работе с каждым отдельным слоем выделите весь объект, кликнув по миниатюре маски. Следите, чтобы маска, а не только рабочий слой, была активна в процессе обработки фигур. Затем перейдите в рабочую область и выделяйте каждый объект, нажимая на его контур, и просто удаляйте его при помощи клавиши Удалить (Delet).

Шаг 14.

В ходе работы будут добавляться новые слои. Поэтому, чтобы облегчить себе работу, давайте каждому индивидуальное название. Порядок расположения слоев в документе приведен ниже. А теперь мы обработаем слой Главная кнопка (main button) при помощи диалогового окна Стиль слоя (Layer Style).

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 15.

Чтобы открыть диалоговое окно Стиль слоя (Layer Style), сделайте двойной щелчок по слою Главная кнопка (main button). В разделе Параметры смешивания: По умолчанию (Blending Options: Default) установите бегунок параметра Непрозрачность (Opacity) на 0%, чтобы были видны только эффекты, которые мы будем применять к данному слою. Теперь сделаем градиентную заливку теми же цветами, что и для фона – темно-серый (#333333) и черный #000000 (черный). Чтобы обеспечить плавный переход от одного цвета к другому, увеличьте параметр Размер (Scale) до 120%.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 16.

Чтобы усилить тени воспользуемся вкладкой Внутренняя тень (Inner Shadow) раздела Параметры смешивания (Blending Options). Отключите опцию Глобальное освещение (Use Global Light), и установите значение Angle (Угол) на - 90° (мы всегда использовали 90°). Тем самым мы инвертируем тень.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 17.

Первая часть работы над кнопкой завершена. Мы оформили ее переднюю часть, но нам предстоит добавить в наше изображение свечение и объем.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 18.

Теперь подошло время украсить нашу кнопку хромированной обводкой. Наша цель создать эффект металлической поверхности, отражающей окружающую обстановку. Для этого снова обратимся к диалоговому окну Стиль слоя (Leyer Style), раздел Параметры смешивания (Blending Options), вкладка Обводка (Stroke). Заливка будет содержать несколько переходов цвета. Параметры настроек показаны на приложенном изображении.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 19.

В окне параметра Cтиль (Style) выберите Отраженный (Reflected), это поможет передать эффект гладкой и блестящей поверхности металла. Поэкспериментируйте с параметром Угол (Angle). На мой взгляд, максимально освещенной лучше сделать верхнюю часть обводки.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 20.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 21.

При помощи вкладки Внутреннее свечение (Inner Glow) добавим объема нашей кнопке за счет прорисовки внутренних граней. Постарайтесь, чтобы границы между ними и гладкой поверхностью получились как можно контрастнее.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 22.

Теперь необходимо выделить поверхность кнопки, чтобы вручную нарисовать на ней несколько деталей. Она послужит нам в качестве маски. Теперь на панели Контуры (Paths) выберите слой с кнопкой, чтобы создать выделение с очертаниями этой фигуры.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 23.

Уменьшите размер выделенной области: Выделение - Модификация Сжать (Select - Modify – Contract). Уменьшите выделение на 10 px относительно ее первоначального размера.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 24.

Сделаем края выделения более размытыми. В главном меню перейдите: Выделение - Модификация Растушевка (Select - Modify – Feather). Радиус растушевки (Feather Radius) – 1 px.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 25.

Создайте новый слой, на нем и будем работать. Рекомендую скрыть выделение при помощи сочетания клавиш Ctrl+H, чтобы процесс редактирования был лучше виден. Начнем рисовать блики на поверхности кнопки. Для этого нам нужен инструмент Кисть Как создать кнопку с тщательной проработкой деталей в стиле hi-tech (Brush Tool ) (B), Диаметр (Master Diameter) - 35 px, Нажим (Flow) сделайте равным 10%, цвет используйте белый. Поскольку, по нашему замыслу, источник света расположен над кнопкой, то ее верхняя часть должна быть освещена лучше, а в нижней части мы нарисуем только маленькие еле заметные пятнышки.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 26.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 27.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 28.

Основа для кнопки готова. Перейдем к созданию выключателя, который будет располагаться по центру. В первую очередь снизим Непрозрачность слоя –фигуры до 0 (0%)

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 29.

К этому слою примените эффект Внутренняя тень (Inner Shadow ) используя диалоговое окно Стиль слоя (Layer Style), раздел Параметры смешивания (Blending Options). Измените значение для параметра Угол (Angle) c 90° на -90°, как в шаге 16. Убедитесь, что все параметры вы выставили верно.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 30.

Теперь добавьте к данному элементу тонкую обводку: Параметры смешивания (Blending Options) – Обводка ( Stroke). Это поможет выделить один объект на фоне другого.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 31.

Следующим шагом применим к слою эффект Тень (Drop Shadow), Режим смешивания (Blend Mode) – Осветление (Screen), цвет выбираем белый. Размер устанавливаем 2 px, чтобы сделать эффект максимально явным, так, как будто на грани кнопки падает свет.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 32.

Теперь перейдите на вкладку Inner Glow (Внутреннее свечение) и установите параметры как на приложенном изображении. Применение этого эффекта позволит восстановить грани внутренней кнопки. Зрителю должно казаться, что перед ним маленькая панель с выпуклыми краями, которая вставлена в главную кнопку.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 33.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 34.

Теперь поработаем над значком для выключателя. Скачайте шрифт с нашего сайта по этой ссылке [ b] . Значок будем делать из буквы «q», размер шрифта – 48 px.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 35.

На следующем примере видно, как можно добиться эффекта вдавленного рисунка. Для этого воспользуемся возможностями вкладки Обводка (Stroke). Бегунок параметра Размер (Size) установите на 3 px, для выставления параметра Цвет (Color) используйте цвет кнопки. Затем перейдите на вкладку Тиснение (Bevel and Emboss), параметр Стиль (Style) измените на Контурное тиснение (Stroke Emboss). Остальные параметры установите, как на приложенном изображении.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 36.

Применение Контурного тиснения (Stroke Emboss) позволит создать эффект иконки вдавленной в поверхность кнопки.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 37.

И чтобы завершить работу над значком выключателя, сделаем его металлическим.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 38.

На этом этапе нам предстоит создать светодиодную подсветку, загорающуюся при наведении курсора на кнопку. Сначала присвоим соответствующему слою-фигуре цвет #06B9FB, дважды кликнув на его миниатюре.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 39.

Далее создайте выделение на основе слоя-фигуры Главная кнопка «main button».

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 40.

Теперь мы увеличим выделенную область через Выделение - Модификация Увеличить (Select - Modify – Expand)

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 41.

В окне Увеличить выделенную область (Expend Selection) введите 8 px и нажмите ОК

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 42.

Вызовите пункт главного меню Выделение Инверсия (Select – Inverse), чтобы инвертировать область выделения.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 43.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 44.

Используйте эффект Обводка (Stroke) с тем же самым цветом, что взят для кнопки. Чтобы получить его, воспользуйтесь инструментом Пипетка (Eyedropper Tool) или введите номер цвета, указанный на приведенном ниже изображении. Созданная таким образом обводка, окружающая светодиоды, позволит создать эффект объекта встроенного в поверхность.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 45.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 46.

Теперь перейдите на вкладку Внутренняя тень (Inner Shadow), Режим смешивания (Blend Mode) измените на Умножение (Multiply), инвертируйте значение параметра Угол (Angle). Остальные настройки выставляйте, как показано на приложенном изображении. В результате мы получим эффект отражения пластиковой поверхности кнопки на светодиодах.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 47.

Чтобы завершить работу над этим элементом кнопки перейдите на вкладку Тень (Drop Shadow). Применение этого эффекта позволяет передать идею того, что светодиоды при нажатой кнопке изменяют вид задней поверхности, отбрасывая на нее тень.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 48.

Вот так выглядит наша кнопка сейчас. Осталось наложить всего несколько эффектов.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 49.

Продублируйте слой со светодиодами. Выполните заливку нового слоя белым цветом. Теперь нам предстоит создать эффект горящих светодиодов. Для этого откройте диалоговое окно Стиль слоя (Layer Style), перейдите на вкладку Внешнее свечение (Outer Glow) раздела Параметры смешивания (Blending Options). Настройки как на приложенном изображении.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 50.

Перейдите на вкладку Тень (Drop Shadow), измените Режим смешивания (Blend Mode) на Осветление (Screen). После установки параметров как на нижнем изображении, вокруг светодиодов появится эффект свечения.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 51.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 52.

Теперь выполните заливку этой области с растушевкой в 20 px белым цветом. Для этого можно воспользоваться инструментом Заливка (Paint Bucket Tool) или горячими клавишами Alt+Backspace, который позволят залить слой цветом фона.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 53.

Теперь в диалоговом окне Стиль слоя (Leyer Style) уменьшите параметр Непрозрачность заливки (Fill Opacity) до 0%

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 54.

Теперь перейдите на вкладку Наложение градиента (Gradient Overlay ), измените Режим смешивания (Blend Mode) на Перекрытие (Overlay). Непрозрачность (Opacity) установите 50%. Так мы достигнем эффекта сферической поверхности позади кнопки.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 55.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 56.

Как обычно снизьте Непрозрачность (Opacity) до 0%.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 57.

С помощью приведенных ниже настроек вкладки Обводка (Stroke) создайте рельеф поверхности.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 58.

Теперь воспользуемся вкладкой Тень (Drop Shadow). Режим смешивания (Blend Mode) измените на Осветление (Screen) цвет выберите белый. Применение данного эффекта позволит изобразить освещенные участки рельефной поверхности.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Шаг 59.

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

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Без сомнения, мы не зря проделали такую сложную и кропотливую работу. А теперь финальный аккорд – небольшой блик в верхней части хромированной окантовки. Советую сохранять свои творения в формате PSD, это позволит вернуться к ним при необходимости. Ниже – результат нашей сегодняшней плодотворной работы.

Как создать кнопку с тщательной проработкой деталей в стиле hi-tech


Источник: psd.tutsplus.com
Переведено специально для 8ART.RU


  • 9 января 2012 15:30
  • Комментов: 0
  • Чак
  • Группа: Гости

Белисимо!!!! Превосходный урок
  • 29 июля 2012 17:25
  • Комментов: 0

огромнейшее спасибо!
Информация
Комментировать статьи на нашем сайте возможно только в течении 10 дней со дня публикации.