Читать


Главная » 2014 » Декабрь » 1 » Урок 2. Рисуем ленту
00:59
Урок 2. Рисуем ленту
В этом уроке мы создадим довольно часто используемый в веб-дизайне графический элемент - ленту. Чаще всего лента или её фрагмент используется для акцентирования важной информации вроде скидок на товары или праздничных акций. В блогах можно увидеть ленту в качестве подложки для даты или заголовка постов.

Итак, нарисуем ленту, загнутую за лист бумаги. И для начала нарисуем бумагу. Обычной фигурой "Прямоугольник" с белой заливкой.



Перейдём в стили данного слоя (двойным кликом по нему) и откроем вкладку "Тень". Настройки для данного стиля можно выставить как на изображении:



Теперь перейдём к ленте. Тем же прямоугольником рисуем бОльшую часть ленты. Выберем инструмент "Перо", а именно "Перо+", с помощью которого добавим опорную точку посередине правой грани.



Теперь в ассортименте этого же инструмента выберем "Угол" и кликнем по добавленной нами точке.



Теперь, выбрав инструмент"Стрелка" (клавиша A), подвинем эту точку влево так, чтобы правая часть ленты стала похожа на раздвоенный язычок.



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



Этот второй конец ленты нам нужно разместить под слоем с бумагой и развернуть его по горизонтали (Редактирование - Трансформация - Отразить по горизонтали), после чего подвинуть в нужное место:



Добавим реалистичности. Откроем стили слоя и наложим градиент:



Вернёмся к верхней части ленты и добавим ей тень для большего объёма: вновь откроем стили слоя и выставим следующие настройки:



Осталось добавить текст и простой вариант ленты готов!



Можно сделать ленту ещё интересней, добавив непосредственно переходную её часть, что загибается за бумагу. Для этого подвинем немного верхнюю часть ленты влево, а под левым нижним углом создадим прямоугольник, касающийся нижней гранью меньшего фрагмента ленты (цвет - тёмный оттенок цвета ленты).



Теперь инструментом "Стрелка" выделим точку, находящуюся в левом нижнем углу нового прямоугольника и удалим её (Delete). Готово!



Файл запакован в архив весом 219КБ
Скачать


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

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


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