Главная » 2016 » Июнь » 03 » Стильная кнопка для сайта
18:09
Стильная кнопка для сайта

Стильная кнопка для сайта

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

Шаг 1. Создайте новый документ Ctrl+N шириной 640 рх и высотой 480 рх, залейте получившийся слой «Задний план» черным цветом.

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

Теперь добавьте новый слой, выше слоя «Задний план» и назовите его «Освещение фона», выберите большую, мягкую, круглую кисть (B) серого цвета и сделайте один клик в положении, указанном ниже:

Стильная кнопка для сайта

Шаг 2. Теперь выберите инструмент Прямоугольник со скругленными углами Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U) (Rounded Rectangle Tool) и поставьте настройки, как показано:

Стильная кнопка для сайта

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

Стильная кнопка для сайта

К этому слою примените следующие «Стили слоя», сделать это вы сможете, нажав на иконку Добавить стиль слоя Добавить стиль слоя (Add a layer style) Add a layer style на панели слоев:

Тень:

Стильная кнопка для сайта

Внутренняя тень:

Стильная кнопка для сайта

Наложение градиента:

Стильная кнопка для сайта

У вас должен получиться следующий результат:

Стильная кнопка для сайта

Шаг 3. Теперь загрузим выделение, получившегося прямоугольника, для этого нажмите на миниатюру слоя с прямоугольником, удерживая клавишу Ctrl.

Создайте новый слой над слоем с прямоугольником, выберите мягкую круглую Кисть Кисть (Brush Tool) (B) (Brush Tool) белого цвета и сделайте одиночный клик в месте, показанном ниже:

Стильная кнопка для сайта

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

Стильная кнопка для сайта

К этому слою примените следующие стили слоя:

Тень:

Стильная кнопка для сайта

Тиснение:

Стильная кнопка для сайта

Наложение градиента:

Стильная кнопка для сайта

У вас должен получиться следующий эффект:

Стильная кнопка для сайта

По вашему желанию, вы можете продублировать этот слой, чтобы получить более яркий и сочный цвет.

Шаг 4. Теперь продублируйте этот слой еще раз и поместите его выше всех остальных слоев. Теперь примените Редактирование > Трансформирование > Отразить по вертикали (Edit > Transform > Flip Vertical).

Переместите этот слой при помощи инструмента Перемещение Перемещение (Move Tool) (V) (Move Tool) немного вниз, чтобы внизу прямоугольника получилась такая же яркая линия края как и сверху.

Стильная кнопка для сайта

Шаг 5. Теперь напечатаем текст на нашей кнопке. Выбор шрифта здесь очень важен, потому что мы хотим сделать нашу кнопку максимально «привлекательной».

Стильная кнопка для сайта

К слою с текстом примените следующие стили слоя:

Тень:

Стильная кнопка для сайта

Тиснение:

Стильная кнопка для сайта

Наложение градиента:

Стильная кнопка для сайта

У вас должен получиться следующий результат:

Стильная кнопка для сайта

Если хотите чтобы кнопка была более насыщенной, просто продублируйте слой с текстом и у вас получится стильная и яркая кнопка:

Стильная кнопка для сайта

Категория: Графика для сайта | Просмотров: 294 | Добавил: Эва_Лорд | Теги: Лого, Уроки фотошоп бесплатно, Дизайн сайта, шапка, кнопка для сайта | Рейтинг: 5.0/1
Всего комментариев: 0
Имя *:
Email *:
Код *: