В сегодняшнем photoshop уроке мы займёмся созданием стильной кнопки для сайта. Урок будет полезен в первую очередь начинающим вебмастерам. Впрочем, обычные пользователи Photoshop тоже смогут почерпнуть для себя что-то новое.
Создание стильной кнопки: делаем заготовку
1. Создайте новый документ размером 1000x500px. Зачем так много? Такой размер документа даст возможность проработать все детали.
2. Возьмите инструмент Rounded Rectangle Tool (U), выставьте значение Radius в верхней панели 3px. Сделайте основной цвет чёрным (#000000). Ну а теперь нарисуйте заготовку для нашей будущей кнопки:
3. Сейчас перейдите к стилю слоя (двойной щелчок по нему в панели слоёв) и установите такие настройки:
4. Растеризуйте слой (Правая кнопка мыши по слою -> Rasterize Layer).
Сейчас ваша заготовка для стильной кнопки должна выглядеть как-то так:
Создание стильной кнопки: украшение
5. Создайте новый слой. На нём жёсткой кистью с размером 13px и цветом #ffd2cb нарисуйте линию в нижней части кнопки:
6. Теперь в стиле слоя выставляем следующие параметры:
Наш результат теперь выглядит примерно так:
7. Теперь надо пройти в Layer (Слой) ->Layer Mask (Маска слоя) ->Reveal All (Показать все), взять инструмент градиента
И выполнить заливку следующим образом:
Получаем нечто похожее:
8. Теперь возьмите Pen Tool (Перо) и нарисуйте с его помощью такую фигуру:
9. Затем Filter ->Blur -> Gaussian Blur с параметром Radius 2px:
10. Ctrl + клик на слое с базовой формой кнопки, чтобы получить выделение. Потом Shift + Ctrl + I для инверсии выделения. И Delete на слое с фигурой:
Не забудьте снять выделение (Ctrl + D)
11. Клонируйте слой (Правая кнопка мыши по слою -> Duplicate layer (Дубликат слоя)). Теперь Edit (Редактирование) -> Transform (Трансформирование) -> Flip Horizontal (Отразить по горизонтали) и переместите слой на другую сторону кнопки:
12. Создайте новый слой над слоем Shape 1, Ctrl + клик по слою Shape 1 для выделения. Теперь Edit (Редактирование) -> Stroke (Обводка) с параметром Width (Ширина) 2px, белым цветом и Location Inside (Расположение – внутри). Opacity (непрозрачность) слоя на 80%.
Создание стильной кнопки: текст
13. Займёмся теперь текстом. Напишите произвольную надпись посередине кнопки любым шрифтом, и настройте стиль слоя:
14. Наша стильная кнопка готова. Теперь сохраните ваш psd файл, удалите слой Background, выполните Image (Изображение) ->Trim (Обрезка), и сохраните вашу кнопку как .png. А сейчас внесите изменения во внешний вид полоски (поэкспериментируйте со стилем слоя), можете изменить цвет или силу внешнего свечения. Можете также изменить силу свечения вокруг текста. И сохраните файл опять же как .png, но под другим именем. Ну а теперь можете открыть оба .png файла и уменьшить размер до нужного вам.
Таким образом, мы получили кнопку в 2х вариантах. Первый стандартный, а второй (с усиленным свечением) пригодится, когда пользователь будет наводить на кнопку. Таким образом, она “оживёт” и свечение усилится.
