Рисуем кнопки для веб-сайта в Фотошоп

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

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

01-9101858

Шаг 1

Создайте новый документ (Ctrl + N) размером 1280 x 1024 пикселов.

02-5912921

Шаг 2

Залейте фон цветом #CCBCC и кистью brush-2520747 (Brush Tool) (В) большого размера белого цвета кликните один раз в центре фона, чтобы создать световое пятно. Теперь фон похож на радиальный градиент.03

03-7827356

Шаг 3

Инструментом Прямоугольник со скругленными углами (round_rectangle-8249988 Rounded Rectangle Tool) (U) нарисуйте фигуру с радиусом скругления 180 пикселов:

04-6590674

Шаг 4

К фигуре примените стиль слоя Наложение градиента (Gradient Overlay). Используйте параметры, которые показаны на скриншоте:

05-1750732

Шаг 5

Инструментом Овальная область выделения elliptical20marquee-5202925 (Elliptical Marquee tool) (M) нарисуйте круглое выделение и залейте его черным цветом. Расположите его на предыдущей фигуре:

06-4508778

Шаг 6

Скопируйте стили со слоя с прямоугольной фигуры (кликните правой кнопкой мыши в палитре Слои по стилям слоя и выберите пункт Скопировать стили слоя. Теперь перейдите на слой с черным кругом, кликните по нему в палитре Слои правой кнопкой мыши и выберите пункт Вклеить стили слоя).

07-7140677

Шаг 7

Также, к слою с кругом примените стиль Тень (Drop shadow):

08-4975419

Шаг 8

Инструментом Овальная область выделения elliptical20marquee-5202925 (Elliptical Marquee tool) (M) нарисуйте круглое выделение и залейте его белым цветом.

09-3755715

Шаг 9

Выберите инструмент Произвольная фигура shape-5901535 (CustomShapeTool) и нарисуйте фигуру конверта в режиме слой-фигуры.

10-3788194

Шаг 10

На слой с конвертом вклейте те стили слоя, которые ранее копировали:

11-4102743

Шаг 11

При помощи инструмента Текст t-9486554 (Text Type Tool) (T) напишите текст на кнопке:

12-3310985

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

01-9101858

Автор: webdesign

Перевод: Слуцкая Светлана

728x90-9821392

photoshop4you