QuickTUTS.ru - УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

Для начала создадим новый документ.

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

Для начала, щелкните два раза мышью по слою с фоном, чтобы разблокировать его. Теперь еще раз щелкните два раза, чтобы открыть настройки стиля слоя и примените стиль Gradient Overlay (наложение градиента) со следующими настройками:

Затем создайте новый слой и залейте его 50% серого (Shift+F5):

И примените фильтр Filter > Texture > Grain с настройками Intensity: 90, Contrast: 50, Grain Type: Sprinkles.

Измените режим наложения Blend Mode на Multiply.

Симпатично, правда? Продолжим. Создайте еще один слой и залейте его любым цветом. Потом измените параметр слоя Fill (Заливка) до 0, чтобы он стал абсолютно прозрачным. И примените стиль слоя Gradient Overlay:

Вот, что должно в итоге получиться:

Вернемся к кнопке. Кстати, несколько вариантов создания кнопок для сайта уже публиковались на сайте. Например, этот урок или этот. Выберите инструмент Rounded Rectangle Tool и создайте основу кнопки с радиусом угла 7px.

Нажмите правой клавишей по слою с кнопкой и выберите Rasterize Layer. Теперь щелкните два раза по слою, чтобы перейти к стилям и добавьте следующие стили:

В итоге, у Вас должно получиться вот так:

Удерживая клавишу Ctrl, щелкните по слою с кнопкой, чтобы создать область выделения. Создайте новый слой. И залейте область выделения черным цветом. Нажмите Ctrl+D, чтобы убрать область выделения.

Примените фильтр Filter > Noise > Add Noise с параметрами Amount: 33%, Distribution: Uniform.

Измените режим наложения Blend Mode слоя на Screen и уменьшите Непрозрачность Opacity до 15%. Получится следующее:

Теперь аналогично создайте новый слой, залейте его белым цветом и создайте область выделения, как на рисунке:

Нажмите Del, чтобы удалить лишнее и уменьшите непрозрачность до 7%.

Выберите инструмент Type Tool, шрифт Arial Bold и белым цветом добавьте текст:

Создайте дубликат слоя с текстом и расположите его ниже первого слоя с текстом. Измените цвет текста на более темный (#234838) и, активировав инструмент Move Tool, стрелками на клавиатуре переместите дубликат на 1px влево и на 1 px вверх.

Затем, используя инструмент Custom Shape Tool, добавьте изображение лупы (для примера). И также, как и в предыдущем шаге, добавьте дубликат слоя.

Как и раньше создайте область выделения вокруг кнопки. Создайте новый слой и выберите инструмент Brush Tool с мягкой кистью белого цвета. Щелкните один раз в указанном месте. Удалите область выделения.

Измените режим наложения Blend Mode на Overlay.

Окончательный результат

P. S.

Скоро обязательно появится продолжение этого поста, где будет рассказано о создании других кнопок для сайта.