Читать


Главная » 2014 » Декабрь » 1 » Урок 5. Рисуем конверт
01:04
Урок 5. Рисуем конверт
В очередном уроке веб-графики мы создадим конверт! Частенько можно встретить на сайтах раздел "Контактов", представленных в виде конверта, на котором расположены контактные данные, либо форма Обратной связи.

Рисуется данный графический элемент довольно просто! Смотрите сами!

Для начала нужно выбрать фон для конверта - так как он светлый фон лучше выбирать контрастный тёмный. Я залил фон полотна цветом: #344d5b. Затем нарисовал прямоугольник. Цвет ему подобрал едва заметный серый: #f7f7f7.

Урок по созданию конверта в photoshop

Дублируем слой с прямоугольником (Ctrl+J) и выделяя точки граней, двигаем стрелами с клавишей Shift, по одному клику внутрь фигуры - таким образом, уменьшаем прямоугольник. Убираем его видимость (пока он нам не нужен).

Урок по созданию конверта в photoshop

Переходим на слой с первым прямоугольником и создаём новый слой (Shift+Ctrl+N). Рисуем прямоугольник во всю высоту полотна (даже больше). После этого трансформируем его (Ctrl+T), повернув на 45 градусов. Жмём Enter.

Урок по созданию конверта в photoshop

Теперь дублируем полученный наклонный прямоугольник (Ctrl+J) и двигаем его стрелкой вправо, удерживая Shift, 10 кликов.

Урок по созданию конверта в photoshop

Продублируйте слой ещё несколько раз и раздвиньте прямоугольники на равное расстояние в две стороны.

Урок по созданию конверта в photoshop

Теперь (при выделенном самом верхнем слое с прямоугольником) зажмите Shift и кликните на нижний слой с первым прямоугольником. Правой кнопкой кликните на любом из выделившихся слоёв и выберите "Дубликат слоев..." Получившиеся дубликаты подвиньте знакомым способом уже на 5 кликов стрелки при зажатом Shift.

Урок по созданию конверта в photoshop

Теперь раскрасим полосы в два цвета через один. Слои у нас сейчас идут так, что красить их можно подряд - первую половину прямоугольников в красный, вторую - в синий. Я выбрал следующие цвета: красный: #a42020  и синий: #388db1

Урок по созданию конверта в photoshop

Затем выделяем все наши цветные прямоугольники и нажимаем Ctrl+Alt+G. Таким образом, мы создали обтравочную маску. То есть, цветные прямоугольники заполнили собой площадь лежащей под ними фигуры.

Урок по созданию конверта в photoshop

Осталось включить невидимый слой с верхним прямоугольником, отключённым в самом начале и добавить его число слоёв, облепивших исходный прямоугольник (Ctrl+Alt+G), и конверт уже почти готов.

Урок по созданию конверта в photoshop

Осталось добавить лишь тень. Заходим в стили слоя самого первого исходного  прямоугольника и ставим галочки во вкладках "Наложение градиента" (непрозрачность: 10)и "Тень" с настройками:

Урок по созданию конверта в photoshop

Вот и всё! Содержимое конверта, думаю, уже добавляется исходя из потребностей. Удачи!

Урок по созданию конверта в photoshop


И по традиции исходник запакован в архив (17КБ)
Скачать


Категория: Уроки | Просмотров: 388 | Добавил: M-Wizard | Теги: фотошоп, Веб-дизайн, конверт, уроки | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА