Рубрика: Photoshop Уроки | Урок прочитали: 1097
 (голосов: 5)

Стильная кнопка контактов в Фотошоп

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

Ресурсы урока:

Шрифт

Финальное изображение:

Шаг 1

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

Включите линейки (Ctrl + R), вытяните из них две направляющие и разместите их по краям документа.

Примените к документу режим Размер холста (Ctrl + Alt + C) (Resize Canvas ) и в открывшемся окне установите такие значения:

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

Шаг 2

Выберите инструмент Градиент (Gradient Tool) и залейте фоновый слой светло-серым градиентом (номера цветов показаны на скриншоте).

Создайте новый слой и назовите его «backlight». Выберите мягкую кисть, и чередуя размеры (большой - маленький), кликните в верхней части документа и в центральной.

Уменьшите слой с белыми пятнами (Ctrl + T) и поместите его, как на скриншоте:

Шаг 3

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangular Tool) с растушевкой в 10 пикселей и, ориентируясь на направляющие, нарисуйте белый квадрат.

Слой с квадратом назовите «button bg» и примените к нему стили слоя.
Тень (Drop shadow):

Результат:

Шаг 4

Теперь добавим свет и тень на фон. Создайте новый слой под слоем «button bg» и инструментом Прямоугольная область выделения (rectangular marquee tool) нарисуйте вот такую фигуру:

Назовите этот слой «shadow» и примените к нему фильтр Размытие по Гауссу  (Gaussian Blur).

Уменьшите слой с тенью (Ctrl + T)  и снизьте непрозрачность до 30%.

Создайте новый слой с названием «Highlight» и поместите его над слоем «button bg». Измените режим наложения на Перекрытие (Overlay) и мягкой кистью белого цвета кликните один раз на кнопке:

Дублируйте слой с белой точкой один раз (Ctrl + J) и измените режим наложения дубликата на Нормальный (Normal). Сожмите верхний слой с белой точкой и поместите его на верхнем крае слоя «button bg».

Результат:

Шаг 5

Теперь нарисуем конверт на кнопке. Создайте новый слой поверх всех слоев и инструментом Прямоугольник (Rectanglar tool) нарисуйте фигуру, как на скриншоте:

Назовите этот слой «envelope» и примените к нему стили слоя.
Тень (Drop Shadow).

Результат:

Шаг 6

Теперь добавим к конверту несколько деталей. Создайте новый слой и назовите его «envelope top». Из панели инструментов выберите инструментом Многоугольник (Polygon Tool).

На панели свойств установите для этого инструмента 3 стороны.

Примените к этому слою стили слоя.

Тень (Drop shadow):

Внутренняя тень (Inner Shadow):

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

Результат:

Дублируйте этот слой один раз (Ctrl + J) и назовите его «envelope bottom». Отразите этот слой по вертикали (нажмите Сtrl + T, кликните правой кнопкой мыши внутри ограничительной рамки и выберите пункт Отразить по вертикали).

Добавьте те же стили слоя, что и к слою «envelope top», за исключением стиля слоя Обводка.

Создайте новый слой между верхним и нижним слоями с конвертом и мягкой круглой кистью черного цвета кликните один раз в центре документа:

Результат:

Шаг 7

Установите шрифт и напишите слово «Contact Me». Для текста используйте цвет, указанный на скриншоте:

Для более интересного результата я использую для текста цвет, который немного темнее цвета фона. К слою с текстом примените стили слоя.

При добавлении обводки, выбирайте цвет, который немного светлее фона. Этот метод позволит придать тексту эффект тиснения.

           

Похожие файлы и публикации:

Стильная кнопка контактов в Фотошоп
Вот такой домик получится после данного урока
Стильная кнопка контактов в Фотошоп
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Стильная кнопка контактов в Фотошоп
В этом уроке я покажу Вам, как создать дизайн для приложения записной книжки.
Стильная кнопка контактов в Фотошоп
В этом уроке мы с помощью программы Фотошоп создадим танец красок!
Стильная кнопка контактов в Фотошоп
Здравствуйте, в этом уроке мы будем создавать чистую и яркую кнопку для вашего сайта/блога.
Стильная кнопка контактов в Фотошоп
В этом уроке я покажу, как нарисовать красную сумку для покупок. В этом уроке будут приведены основные приёмы рисования, такие как создание фигур, затемнение, и добавление теней.
Стильная кнопка контактов в Фотошоп
Сегодня мы поработаем над созданием интересного эффекта – лицо, распадающееся на кусочки.
Стильная кнопка контактов в Фотошоп
Сегодня мы с помощью программы Фотошоп создадим волшебное дерево с золотыми яблоками.
Стильная кнопка контактов в Фотошоп
Приближается самый волшебный праздник – Новый год! Пора начинать подготовку, в этом уроке мы создадим простую новогоднюю открытку.
Стильная кнопка контактов в Фотошоп
Шаг 1. Создайте новый документ размером 900 на 790 px (пикселей) и залейте фон черным цветом. Создайте новый слой и назовите его "Создание формы". Выберите инструмент  Ellipse Tool (Эллипс) (U) на панели инструментов:
Стильная кнопка контактов в Фотошоп
Сегодня мы будем рисовать вот такой карандаш.
Стильная кнопка контактов в Фотошоп
31 октября состоится страшный праздник "Halloween"! Какой же праздник без тыквы?
Стильная кнопка контактов в Фотошоп
В этом уроке  Вы научитесь создавать интересный огненный эффект с помощью программы  Фотошоп  и  использовать  его  для художественного оформления своих  работ.
Стильная кнопка контактов в Фотошоп
В этом уроке Вы научитесь создавать эффект волшебного освещения. В конце урока у Вас получится вот такая работа.
Стильная кнопка контактов в Фотошоп
Шаг 1. Откройте изображение, напоминающее лист фотоальбома или лист старой книги. Убедитесь, что на нем будет хорошо виден текст и изображение.