В этом уроке по работе с фотошопом я покажу как можно создать красивую объёмную кнопку для сайта.

Один из вариантов создания похожей кнопки я уже рассматривал в уроке под названием: "Создание круглой кнопки для Вашего сайта".

Наверх

Откроем новый документ: "Файл - Новый" или просто нажмём Ctrl+N.

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

Установим цвет переднего плана чёрный. Для этого достаточно нажать клавишу D.

Выберем инструмент "Заливка" (G).

Щёлкнем по нашему документу и он окрасится в чёрный цвет.

Создадим новый слой. Для этого щёлкнем по второй справа иконке в палитре "Слои".

Выберем инструмент "Овальная область" (M).

Нажмём и удерживаем клавиши Alt и Shift, наведём курсор на центр нашего слоя, щёлкнем левой кнопкой мыши и создадим круглое выделение, расположенное по центру нашего изображения.

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

Выбираем инструмент "Заливка" (G) и щёлкаем им по нашему выделению. Оно окрасится в зелёный цвет.

Придадим верхнему слою некоторые стили. Для этого щёлкаем по второй слева иконке fx в палитре "Слои" и в раскрывшемся списке выбираем "Внутренняя тень".

В окне "Стиль слоя" я поставил значения, которые Вы видите на рисунке. Вы конечно можете выбрать свои параметры.

Переходим к параметру "Внутренне свечение". Я установил вот такие значения. Вы, как всегда, вольны выбрать то, что Вам нравится.

Выбираем "Глянец" и устанавливаем такие параметры, чтобы кнопка выглядела объёмной. Нажимаем "Да".

Придадим ещё большую объёмность нашей кнопке. Для этого идём по такому пути. Создаём новый слой - Ctrl+N.

Устанавливаем цвет перднего плана белый. Для этого вначале нажимаем D (цвета переднего и изаднего плана установились по умолчанию, т.е. цвет перднего плана чёрный, а заднего - белый), а затем X (цвета переденго и заднего цветов поменялись местами). Выбираем инструмент "Градиент" (G).

Щёлкнув по окошку градиента, выбираем градиент от цвета переднего плана к прозрачности, градиент - линейный.

Проводим нашим градиентом сверху вниз.

Вот что у нас получилось.

Снимаем выделение - Ctrl+D. Применяем инструмент трансформирования - Ctrl+T.

Нижний центральный маркер двигаем вверх.

Левый и правый центральные маркеры двигаем вправо и влево соответственно.

Поворачиваем рамку трансформации по часовой стрелке.

Перемещаем рамку в верхний правый угол.

Нажимаем Enter.

Дублируем верхний слой, просто перетащив его на вторую справа иконку "Создать новый слой" палитры "Слои".

Идём в "Редактирование - Трансформирование - Отразить по горизонтали".

Точно также отражаем по вертикали и перетаскиваем с помощью инструмента "Перемещение" (V) наш блик в нижний левый противоположный угол.

У нас остался активным верхний слой. Нажимаем сочетание клавиш Ctrl+E и наши два слоя с бликами объединятся.

Выбираем "Фильтр - Размытие - Размытие по Гауссу".

В окне фильтра примерно устанавливаем такой радиус размытия.

Переходим на слой с зелёной кнопкой и устанавливаем параметр "Заливка" для этого слоя равным нулю.

Переходим на верхний слой и создаём новый слой - Ctrl+N.

Выбираем, к примеру, синий цвет и заливаем им, с помощью инструмента "Заливка" (G) наш верхний слой. Всё точно также, как и описывалось выше.

Выберем инструмент "Горизонтальный текст" и что-нибудь напишем.

Объединим текстовый слой и "Слой 3" - Ctrl+E.

Перетащим наш объединённый слой под слой с кнопкой и инструментом "Перемещение" (V), разместим нашу надпись по центру кнопки.

При нажатой кнопке Ctrl щёлкнем левой кнопкой мыши по зелёной кнопке (Слой 1) и наша кнопка выделится.

Нажмём сочетание клавиш Shift+Ctrl+I и наше выделение инвертируется.

Нажимаем кнопку Delete и снимаем выделение - Ctrl+D. Наша кнопка готова!

Наверх