PhotoShop-Manja

Уроки фотошоп

Раздел: Графика для сайта

"Главная кнопка"

В данном уроке мы будем учиться рисовать оригинальную веб-кнопку.
Шаг 1.
Создайте новый документ размером 800x750 пикселей и заполните его цветом с показателем: #3E3E3E.
Активизируйте инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами), радиус скругления угла - 10 пикселей, и создайте форму, похожую на рисунок, приведенный ниже. Прямоугольную форму рисуйте на новом слое, в режиме слой-фигуры, и этот слой назовите «Основа».

Шаг 2.
Кликните правой кнопкой мыши в нарисованном прямоугольнике, и выберите пункт: Растрировать слой. Теперь активизируйте инструмент Ellipse Tool (Инструмент Эллипс) и создайте овальную форму любого цвета (в данном уроке использован зеленый цвет):

Шаг 3.
Растрируйте слой с фигурой эллипса, и, удерживая клавишу <Ctrl>, кликните по миниатюре слоя в палитре «Слои» для того, чтобы загрузить выделение данного эллипса. После того, как выделение загружено, перейдите на слой с прямоугольной формой и нажмите клавишу <Delete> для того, чтобы из прямоугольника вырезать овальную часть. Слой с овальной формой удалите – она больше не нужна.

Шаг 4.
Теперь нужно «сгладить» слой под названием «Основа», и сделаем мы это при помощи альфа - каналов. Далее, удерживая клавишу <Ctrl>, кликните по миниатюре слоя «Основа» для того, чтобы загрузить его выделение, и выполните следующие действия: Редактирование – Скопировать совмещенные данные и удалите слой «Основа».
Перейдите в палитру Channels (Каналы), создайте в ней новый канал, и нажмите "Ctrl + V" для того, чтобы вставить скопированную фигуру. Теперь нажмите "Ctrl + D" для того, чтобы снять выделение.
Войдите в меню Filter > Blur > Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу), радиус размытия: 4 пикс. Нажмите комбинацию клавиш < Ctrl + L> для того, чтобы вызвать диалоговое окно levels (Уровни). Установите параметры уровней, как показано на рисунке и нажмите ОК.

Шаг 5.
Теперь прямоугольная форма будет выглядеть сглаженной. Нажмите <Ctrl> и кликните на слое с прямоугольной формой, и нажмите комбинацию клавиш < Shift + Ctrl + C>, чтобы скопировать данные прямоугольной формы. Удалите созданный Вами альфа – канал из палитры Channels (Каналы). Щелкните на вкладке слоев в палитре Слои и нажмите <Ctrl + V>, для того, чтобы вклеить фигуру обратно. Переименуйте этот слой в «Основа».
Теперь примените стили слоя с установками, приведенными ниже:

Шаг 6.
Примените Inner Glow (Внутреннее свечение):

Шаг 7.
Теперь Bevel & Emboss (Тиснение):

Шаг 8.
Gradient Overlay (Наложение градиента):

Шаг 9.
Все примененные стили слоя создадут металлический эффект для слоя «Основа». Продолжим. Удерживайте клавишу <Ctrl>и кликните по миниатюре слоя «Основа» для того, чтобы загрузить его выделение. Войдите в меню Select > Modify > Contract (Выделение – Модификация – Сжать) и сожмите созданное выделение на 15 пикселов. Не снимая выделения, создайте новый слой и назовите его «Скос» и заполните его черным цветом. Снимите выделение (<Ctrl+D>). Примените к слою «Скос» Bevel & Emboss (Тиснение).

Шаг 10.
Как можно увидеть из получившегося результата, тиснение выглядит несколько «холодно».

Шаг 11.
Удерживая клавишу <Ctrl>, кликните по иконке слоя «Скос», чтобы загрузить выделение этого слоя. Теперь войдите в меню Select > Modify > Contract (Выделение – Модификация – Сжать) и сожмите выделение на 3 пиксела. Не снимая выделения, создайте новый слой и назовите его «Зеленый градиент». Заполните выделение черным цветом и снимите выделение.
Примените стиль слоя Inner Shadow (Внутренняя тень) со следующими параметрами:

Шаг 12.
Теперь примените Gradient Overlay (Наложение градиента):

Шаг 13.
Теперь Ваше изображение будет вот таким:

Шаг 14.
Придадим зеленому градиенту еще большее сияние. Удерживая клавишу <Ctrl>, кликните по иконке слоя «Зеленый градиент», и войдите в меню select > modify > contract (Выделение – Модификация – Сжать) и сожмите выделение на 3 пиксела. Создайте новый слой, назовите его «Сияние» и не снимайте выделение.
Активизируйте инструмент Gradient Tool (Градиент) от основного к прозрачному, и протяните градиент сверху вниз. Измените режим наложения на «Перекрытие».

Шаг 15.
Активизируйте инструмент Elliptical Marquee Tool (Овальная область выделения) и создайте фигуру, как показано на рисунке:

Шаг 16.
Удалите верхнюю часть овальной формы:

Шаг 17.
Установите opacity (непрозрачность) для овальной фигуры 43 % и режим наложения - Soft light (Мягкий свет). Переименуйте слой с овальной фигурой в «Верхнее сияние». Наш заголовок получается очень красивым. Давайте теперь добавим некоторые детали. Создайте новый слой , назовите его «Середина» и при помощи инструмента Elliptical Marquee Tool (Овальная область выделения) создайте фигуру, как показано на рисунке:

Шаг 18.
Заполните выделение черным цветом, снимите выделение и нажмите комбинацию клавиш Shift + Ctrl + [ , что позволит переместить слой на задний план.
Примените к фигуре с черным овалом стиль слоя: Inner Shadow (Внутренняя тень):

Шаг 19.
Inner Glow (Внутреннее свечение):

Шаг 20.
Bevel & Emboss (Тиснение):

Шаг 21.
Color Overlay (Наложение цвета):

Шаг 22.
Удерживая клавишу <Ctrl>, кликните по миниатюре слоя с названием «Середина», создайте новый слой и назовите его «Функция блеска». При активном выделении активизируйте инструмент Gradient Tool (Градиент) и создайте градиент от основного к прозрачному. Протяните градиент сверху вниз, и смените режим наложения на «Перекрытие». Найдите подходящее для Вашей кнопки изображение и перенесите его на кнопку. Слой с изображением должен находиться над всеми остальными слоями.

Шаг 23.
Удерживая клавишу <Ctrl>, кликните по миниатюре слоя с названием «Середина», для того, чтобы загрузить выделение, войдите в меню Select > Modify Expand (Выделение – Модификация – Расширить) и расширьте выделение на 1 пиксел.
Создайте новый слой, заполните его черным цветом и нажмите комбинацию клавиш Shift + Ctrl + [, что позволит переместить слой на задний план.
Примените Bevel & Emboss (Тиснение):

Шаг 24.
Назовите этот слой «Середина функции блеска». Удерживая клавишу <Ctrl>, кликните по миниатюре слоя с названием «Функция блеска», войдите в меню Select > Modify Expand (Выделение – Модификация – Расширить) и расширьте выделение на 16 пикселов.
Создайте новый слой, заполните его черным цветом нажмите комбинацию клавиш Shift + Ctrl + [, что позволит переместить слой на задний план. Назовите этот слой «Средняя граница блеска».
Теперь правой кнопкой мыши кликните на слое «Основа» и в контекстном меню выберите команду copy layer style (Копировать стиль слоя). Вернитесь на слой «Средняя граница блеска», кликните на нем правой кнопкой мыши, и в контекстном меню выберите команду paste layer style (Вклеить стиль слоя)
У Вас должен получиться вот такой результат:

Шаг 25.
Удерживая клавишу <Ctrl>, кликните по миниатюре слоя с названием «Середина функции блеска», для того, чтобы загрузить выделение, войдите в меню select > modify > contract (Выделение – Модификация – Сжать), и сожмите выделение на 4 пиксела.
Создайте новый слой, заполните его белым цветом и нажмите комбинацию клавиш Shift + Ctrl + [, что позволит переместить слой на задний план. Измените opacity (Непрозрачность) на 12 %.

Шаг 26.
На этом урок закончен. Вы можете к кнопке добавить необходимый текст, эмблему, и многое другое – на Ваше усмотрение.
А это – окончательный результат нашей работы: