Реклама

Создаем оранжевую кнопку с блеском используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Низкая

В данном уроке Фотошопа мы рассмотрим процесс создания простой оранжевой кнопки с блеском для сайта.


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

Создаем оранжевую кнопку с блеском используя Фотошоп

Приступаем к уроку Фотошопа


Шаг 1.


Создаем новое изображение размером - 200х50 и залейте его фон каким-нибудь цветом (я взяла серый) (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")). Теперь создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и при помощи инструмента Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") создайте на нем выделение, как показано на рисунке ниже, и залейте его любым цветом отличным от фона (у меня оранжевый) (Инструмент - Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")).


Создаем оранжевую кнопку с блеском используя Фотошоп

Шаг 2.


Теперь снимем выделение (CTRL+D) и идем Filter > Render > Lighting effects (Фильтр > Рендеринг > Эффекты освещения) и выставляем такие настройки (вы должны находиться на слое с прямоугольной формой): ↓


Создаем оранжевую кнопку с блеском используя Фотошоп

Вот, что должно получиться: ↓

Создаем оранжевую кнопку с блеском используя Фотошоп

Шаг 3.


Откроем окно Layers Style (Стиль слоя) / Blending Options (Параметры наложения) (двойной щелчок на палитре слоев по слою с прямоугольной формой рядом с его названием) и добавим внутреннюю тень: ↓


Inner Shadow (Внутренняя тень): ↓

Создаем оранжевую кнопку с блеском используя Фотошоп

Получиться что-то в роде этого: ↓

Создаем оранжевую кнопку с блеском используя Фотошоп

Шаг 4.


Возьмите простую круглую кисть размером 1px (Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B")) и на новом слое нарисуйте линии (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), как показано на моем рисунке (чтобы линии были идеально ровными, рисуя их, удерживайте нажатой кнопку Shift).


(Примечание: цвет для линий лучше взять какой-нибудь светлый, например, светло-серый или что-то в этом духе, а чтобы было удобнее, масштаб изображения можно увеличить (Zoom Tool Инструмент - Лупа (Инструмент Лупа / Клавиша "Z")). Если вылезете за края кнопки – не страшно, это легко поправить: остаемся на слое с линиями, удерживая Ctrl, щелкаем один раз по слою с нашей кнопкой на палитре слоев – загрузилось выделение, а мы все еще на слое с линиями, там и остаемся, теперь нажимаем Shift+Ctrl+I, т.е. инвертируем выделение, и жмем Delete. Не забудем снять выделение (Ctrl+D.))


Создаем оранжевую кнопку с блеском используя Фотошоп

Теперь для слоя с линиями установите режим смешивания (Blending mode) на Осветление основы (Color Dodge), а непрозрачность (Opacity) на 70%.


Создаем оранжевую кнопку с блеском используя Фотошоп

Шаг 5.


Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), а на нем прямоугольное выделение (Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M")), так чтобы оно закрывало верхнюю половину вашей кнопки, и залейте его белым цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")). (Излишки можно убрать так же, как показано в примечании немного выше). Установите непрозрачность слоя (Opacity) на 12%.


Создаем оранжевую кнопку с блеском используя Фотошоп

Создаем оранжевую кнопку с блеском используя Фотошоп

Также можно добавить к этом слою тень, для этого открываем окно Blending Options (Параметры наложения) и выставляем следующие настройки в разделе Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Создаем оранжевую кнопку с блеском используя Фотошоп

Шаг 6.


Теперь добавим текст белого цвета (Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T")) и для контрастности добавим Drop Shadow (Тень) с такими настройками: Opacity (Непрозрачность) = 100%, цвет тени сделайте чуть темнее цвета кнопки, Distance (Смещение) = 1, Choke (Стягивание) = 0, Size (Размер) = 1.


Вот и все. Готово!


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

Создаем оранжевую кнопку с блеском используя Фотошоп

Альтернативный результат

Создаем оранжевую кнопку с блеском используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru