Рисование иконки Contact Me

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:

Изменить

Шаг 1
Создайте новый документ размером 200х200 пикселей с белым фоном и разрешением 72dpi. Активируйте Линейки (Ctrl+R) и отведите направляющие к краям холста.

Изменить

Перейдите в меню Размер холста (Ctrl+Alt+C) и настройте так:

Изменить

Вы получите результат, показанный ниже. Я изменил цвет фона на серый.

Изменить

Шаг 2
Инструментом Градиент (Gradient Tool) сделайте заливку фонового слоя линейным градиентом цветами, показанными ниже:

Изменить

Создайте новый слой (Create New Layer) и назовите его “backlight”, большой мягкой кистью кликните в верхней части холста белым цветом, потом выберите маленькую кисть и кликните в середине.

Изменить

Измените этот слой инструментом Свободное трансформирование (Free Transform):

Изменить

Шаг 3
Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей создайте фигуру, как показано ниже. Назовите этот слой “button bg”.

Изменить

Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

Отбрасывание тени (Режим – Умножение):

Изменить

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Изменить

Обводка (Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет):

Изменить

Шаг 4
Создайте новый слой (Create New Layer) под слоем “button bg” и инструментом Прямоугольная область (Rectangular Marquee Tool) создайте прямоугольник, как показано ниже:

Изменить

Назовите этот слой “shadow” и примените фильтр Размытие по гауссу (Gaussian Blur Filter):

Изменить

Немного измените тень и установите Непрозрачность слоя – 30%.

Изменить

Создайте новый слой (Create New Layer) “highlight” над слоем с кнопкой и установите его Режим наложения – Перекрытие (Blending Mode – Overlay). Выберите белую мягкую кисть и кликните один раз:

Изменить

Сделайте копию слоя с пятном и установите её Режим наложения – Нормальный (Blending Mode – Normal). Сожмите её, как показано ниже и расположите на верхнем крае кнопки.

Изменить

Шаг 5
Теперь перейдём к рисованию конверта. Создайте новый слой (Create New Layer) и инструментом Прямоугольник (Rectangle Tool) нарисуйте белую фигуру. Назовите этот слой “envelope”.

Изменить

Примените к нему следующие стили:

Отбрасывание тени (Режим – Нормальный):

Изменить

Внешнее свечение (Режим – Осветление, Метод – Мягкий):

Изменить

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Изменить

Шаг 6
Создайте новый слой “envelope top” и выберите инструмент Многоугольник (Polygon Tool). Настройте его так:

Изменить

Нарисуйте треугольник и инструментом Свободное трансформирование (Free Transform) расположите его внутри белого прямоугольника:

Изменить

Примените к слою с треугольником такие стили:

Отбрасывание тени (Режим – Умножение):

Изменить

Внутренняя тень (Режим – Умножение):

Изменить

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Изменить

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Изменить

Сделайте копию слоя с треугольником и назовите её “envelope bottom”. Примените Отражение по вертикали (Transform – Flip Vertical):

Изменить

Сохраните все стили слоя кроме обводки и расположите, как показано ниже:

Изменить

Создайте новый слой между этими двумя треугольниками и инструментом Кисть (Brush Tool) с мягкими краями чёрным цветом нарисуйте небольшую точку.

Изменить

Шаг 7
Используя этот шрифт напишите напишите “Contact Me”:

Изменить

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

Внутренняя тень (Режим – Умножение):

Изменить

Наложение градиента (Режим – Нормальный):

Изменить

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Изменить

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

Изменить

Ссылка на источник урока

Создан: 15 апреля 2010