Итак, мы начинаем серию уроков по фотошопу. И в первом уроке мы научимся делать стильные кнопки для меню сайта.
Вот, что должно у нас получиться.
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.
Желаю удачи!
Вот это отличный урок, все ясно и понятно, вся информация представлена пошагово с иллюстрациями. Большое Вам спасибо, жду следующих уроков.
Спасибо. Рад стараться. Скоро будут новые уроки.