Создаем простенькую кнопку для сайта используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим процесс создания простенькой кнопки для сайта.


Финальный результат

Создаем простенькую кнопку для сайта используя Фотошоп

Приступаем к уроку Фотошопа


Создаём новый документ 400х400 (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")) создаём новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и выставляем цвет переднего плана foreground Основной цвет в Фотошопе (Основной цвет) → черный, берём инструмент Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") создаем закругленный прямоугольник как показанно ниже: ↓


Создаем простенькую кнопку для сайта используя Фотошоп

Теперь идём в Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента) нашей Кнопки и делаем всё как указанно ниже: ↓


Gradient Overlay (Наложение градиента): ↓

Создаем простенькую кнопку для сайта используя Фотошоп

Потом идём в поле Stroke: ↓


Stroke (Обводка): ↓

Создаем простенькую кнопку для сайта используя Фотошоп

Дальше Inner Glow (Внутреннее свечение): ↓


Inner Glow (Внутреннее свечение): ↓

Создаем простенькую кнопку для сайта используя Фотошоп

Также Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Создаем простенькую кнопку для сайта используя Фотошоп

У вас должно получится вот это: ↓


Создаем простенькую кнопку для сайта используя Фотошоп

Берём Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") и делаем выделение как на картинке, потом заливаем белым цветом: ↓


Создаем простенькую кнопку для сайта используя Фотошоп

Потом мы возьмём Smudge Tool Инструмент - Палец (Инструмент Палец / Клавиша "R") и размер кисти 15 смазываем как на картинке: ↓


Создаем простенькую кнопку для сайта используя Фотошоп

Ставим прозрачность 30 процентов (на слой с белым).


И наша кнопочка готова.


Финальный результат

Создаем простенькую кнопку для сайта используя Фотошоп

Альтернативный результат

Создаем простенькую кнопку для сайта используя Фотошоп

Альтернативный результат

Создаем простенькую кнопку для сайта используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru