Фотошоп для фотографа 2013

Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

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

Очередной урок в программе Adobe Photoshop, который поможет Вам научиться делать красивые элементы своего Веб-сайта. В данном уроке будем рисовать интересную кнопку.


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

Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

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


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

Ну, думаю с вступительной демагогией можно подвязывать. Быстренько открываем наш любимый Фотошоп и приступаем к делу.


1. Создаем новый документ (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")). Задаем ему фон нужного цвета, в моем примере это #0c425d.


2. Выбираем инструмент Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U").


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

С радиусом округления 7px.


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

И удерживая Shift, чтобы фигура получилась равносторонней, создаем такую вот форму. ↓


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

3. А теперь к этой форме применяем стили слоя с настройками как на изображениях ниже. ↓


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

В итоге получаем форму вот такого вида.


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

4. Внутри формы рисуем необходимое изображение и применяем к нему эффект тени.


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

5. Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")). Берем Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B") и мягкой кистью цвета #7acce0 зарисовываем на нем нижние «углы».


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

Вот как выглядит этот слой сам по себе: ↓


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

6. Удерживая Ctrl кликаем на слой с фигурой, которую создали первой, чтобы выделить ее контуры. Создаем новый слой поверх всех остальных и заливаем выделенную область белым цветом → Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G").


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

7. С помощью инструмента Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M").


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

Выделяем зону, как показано на рисунке ниже: ↓


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

Жмем клавишу Delete, дабы удалить ненужную часть, которая находится внутри выделенной зоны. Непрозрачность (Opacity) уменьшаем до 30%. Результат: ↓


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

8. Как и в шаге №6, выделяем первую фигуру, создаем новый слой, заливаем выделенную зону градиентом Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп [G] от белого к прозрачному. Непрозрачность (Opacity) уменьшаем до 80%. На рисунке показано, как выглядит эта заливка сама по себе и в целом на кнопке.


Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

9. В довершение я поставил пару бликов мягкой кистью небольшого диаметра и все, наша кнопка в мечтательном стиле готова.


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

Рисуем кнопку для сайта в мечтательном стиле используя Фотошоп

Автор: Найкрис Кроули.
Текст доработан командой сайта PhotoshopPro.ru