Делаем кнопку для меню сайта в стиле хай-тек

Итак, мы начинаем серию уроков по фотошопу. И в первом уроке мы научимся делать стильные кнопки для меню сайта.

Вот, что должно у нас получиться.

1. Создаем новый документ размером 300×100 пикселей.

2. Заливаем фоновый слой темно-серым цветом #343434.

3. Создаем новый слой , рисуем в нем прямоугольное выделение  меньшего размера и заливаем его еще более темным цветом #080808.

4. Добавим для этого слоя стили. Для этого на палитре слоев в нижней части нажимаем на кнопку «Добавить стиль слоя»  и добавляем стили со следующими параметрами:

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

После применения всех этих стилей у Вас должно получиться вот так:

5. В новом слое рисуем две белые линии толщиной 1 пиксель по границам предыдущего слоя.

6. Устанавливаем непрозрачность этого слоя 17%.

7. В новом слое под белыми линиями рисуем черные линии толшиной 1 пиксель.

Итак, с фоном мы закончили. переходим к рисованию самой кнопки.

8. Создаем новый слой. Выбираем инструмент «Прямоугольник со скругленными углами» . Выставляем для него параметры:

И рисуем форму кнопки

9. Применяем для этого слоя следующие стили:

Должно получиться следующее:

10. Далее делаем следующее. Нам нужно внутри этой фигуры нарисовать такую же, но немного меньше. Для этого применим следующий прием. С зажатой клавишей Ctrl, щелкаем мышкой по миниатюре векторной маски в палитре слоев:

В основном окне появилось выделенная область

Заходим в меню Выделение -> Модификация -> Сжать. Указываем размер сжатия 1 пиксел и нажимаем ОК.

11. Создаем новый слой и заливаем полученное выделение серым цветом #343434.

12. Применяем для этого слоя стили:

Получаем такой результат:

13. Создаем новый слой. C зажатой клавишей Ctrl щелкаем мышью по миниатюре предыдущего слоя. Затем выбираем инструмент «Прямоугольное выделение» и с зажатой клавишей Alt отсекаем нижнюю половину выделенной области. Должно получиться такое выделение:

Заливаем это выделение белым цветом и устанавливаем непрозрачность слоя 11%.

14. Выбираем инструмент «Текст»  и темно-зеленым цветом пишем необходимую надпись. Затем для слоя с текстом устанавливаем свойство слоя «Обводка» толщиной 1 пиксель светло-зеленым цветом. Получаем результат:

Наша кнопка готова. При желании (или необходимости) делаем еще кнопки с другим текстом.

Можно поэкспериментировать с цветами.

Этот урок был довольно подробным. Следующие уроки я пранирую делать менее подробными, но со ссылкой на статьи по работе с необходимыми инструментами. Ждите в ближайшее время статьи и новые уроки.

Чтобы не пропустить выход новых статей и уроков, рекомендую подписаться на обновления и получать новые статьи и уроки на e-mail.

Желаю удачи!