Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Гирлянда из вымпелов в Adobe Photoshop

12 июля 2014 | Опубликовано в Уроки | Нет комментариев »

Сегодня мы будем рисовать гирлянду из вымпелов в Adobe Photoshop. Примечателен этот урок тем, что здесь описано создание дизайна как иллюстрации для веба, так и создание вымпелов для печати. Вы сможете их распечатать и склеить из них настоящую гирлянду для поздравления и украшения дома.

 

Результат

Pennant Banner Text Effect

Исходники

(Откройте каждый файл в Photoshop, затем в меню выберите Edit > Define Pattern/Редактировать>Определить узор).

Шаг 1

Создайте документ размером 10″ x 11″, разрешением (Resolution) в 300, в цветовом режиме (Color Mode) CMYK.

Активируйте линейки: View > Rulers/Вид>Линейки (Ctrl/Cmd + R), затем View > Snap To > Guides/Вид>Привязка>Направляющие.

Кликните правой кнопкой мыши по любой из линеек и выберите Inches/Дюймы.

Кликните по горизонтальной линейке и потяните направляющую на один дюйм от верхнего края документа. Сделайте то же  в нижней части документа и по бокам (везде оставляя по одному дюйму расстояния). Затем перетяните еще одну вертикальную направляющую в центр документа.

Pennant Banner Text Effect step 1

Возьмите инструмент Polygon/Многоугольник, в панели настроек укажите число сторон равное трем. Зажмите Shift и потяните для создания треугольника в центре документа.

Pennant Banner Text Effect step 1

Возьмите инструмент Direct Selection/Прямое выделение растяните выделение так, чтобы в него попали две верхние точки треугольника.

Pennant Banner Text Effect step 1

Перетяните точки так, чтобы они прилипли к верхней направляющей. Затем перетяните каждую точку в верхние углы направляющих.

Pennant Banner Text Effect step 1

Выделите нижнюю точку и переместите ее к нижней направляющие в самый центр (именно там пересекаются две направляющие).

Pennant Banner Text Effect step 1

Шаг 2

Кликните дважды по иконке треугольника в палитре Layers/Слои, чтобы применить к нему стиль слоя/Layer Style Pattern Overlay/Перекрытие узора. Примените узор, который вам нравится.

Вы можете использовать узор Free Digital Paper Pack #1 из исходников.

Настройте параметры стиля слоя как показано ниже.

Pennant Banner Text Effect step 2

Вы можете редактировать положение паттерна. Если вы не используете паттерн, можете взять любую картинку и просто сделать Обтравочную Маску/Clipping Mask из треугольника.

Pennant Banner Text Effect step 2

Возьмите инструмент Ellipse/Эллипс, кликните по иконке Geometry Settings/Геометрические параметры в панели настроек и включите режим From Center/Из центра.

Разместите курсор в верхней части центральной направляющей, зажмите Shift, затем кликните и потяните чтобы создать круг почти до низа треугольника. Выберите размер как вам нравится и помните, что вы можете изменить его в любой момент.

Pennant Banner Text Effect step 2

В панели настроек укажите кругу Fill/Заливку цвета #fef5e0, Stroke/Обводку цвета #59c2aa, Stroke Size/Толщину обводки в 3, и Align/Выравнивание Outside/Во вне.

Если вы используете другой узор или текстуру, смело меняйте цвет обвдоки и заливки.

Pennant Banner Text Effect step 2

Дублируйте слой с кругом, затем в меню выберите Edit > Transform Path > Scale/Редактировать>Трансформировать контур>Масштабировать. Зажмите Shift и Alt/Option, затем потяните внутрь копии круга. Так можно менять размер круга, сохраняя выравнивание по центру. После того как вы будете довольны размером круга, нажмите Enter/Return.

Pennant Banner Text Effect step 2

Выберите пунктирную линию в Stroke Options/Параметры обводки и выберите Align/Выравнивание Center/В центре. Вы можете поэкспериментировать с этими параметрами, чтобы добиться результата, который вам понравится.

Pennant Banner Text Effect step 2

Шаг 3

Дублируйте слой с треугольником.

Pennant Banner Text Effect step 3

В меню выберите Edit > Free Transform/Редактировать>Свободное трансформирование, затем смените параметр Reference point location/Положение центра преобразования в панели настроек на top-center/верх-центр.

Pennant Banner Text Effect step 3

В меню выберите Edit > Transform > Flip Vertical/Редактировать>Трансформировать>Отразить по вертикали. Нажмите Enter/Return чтобы принять изменения.

Pennant Banner Text Effect step 3

Возьмите инструмент Rectangle/Прямоугольник, выберите режим Subtract Front Shape/Вычесть переднюю фигуру в панели настроек. Нарисуйте прямоугольник, которые перекроет верхнюю часть треугольника, оставив лишь небольшую часть базы.

Pennant Banner Text Effect step 3

Кликните по иконе Path operations/Операции с контуром и выберите Merge Shape Components/Объединить компоненты фигуры.

Pennant Banner Text Effect step 3

Возьмите инструмент Direct Selection/Прямое выделение (A) и выделите две верхние точки фигуры, затем в меню выберите Edit > Transform Points > Scale/Редактировать>Трансформировать точки>Масштабировать, зажмите Shift и Alt/Option, затем немного потяните слайдеры немного внутрь. Нажмите Enter/Return, чтобы принять изменения.

Pennant Banner Text Effect step 3

Укажите фигуре отсутствие заливки и настройте обводку как показано ниже.

Так вы создадите верхнюю часть вымпела, которую сможете вырезать и склеить сзади треугольника, после того как пропустите веревку. Тогда вам не придется делать отверстия в вымпеле.

Pennant Banner Text Effect step 3

Шаг 4

Теперь нам нужно разместить текст внутри треугольника. В примере использован шрифт Sofia, размера 150 pt и цвета #399782.

Pennant Banner Text Effect step 4

Сгруппируйте все слои, составляющие вымпел и дублируйте их для создания остальных букв, которые хотите разместить на гирлянде. Экспериментируйте с цветами, узорами и шрифтами.

Pennant Banner Text Effect step 4

Это все, если вы хотите сделать настоящую гирлянду, то есть распечатать составляющие. Дальше мы разберем как составить из этого композицию для иллюстрации.

Шаг 5

Откройте деревянный фон WoodPlanksFences0031, и инструментом Crop/Кадрирование вырежьте ту часть изображения, которую хотите использовать для иллюстрации.

Pennant Banner Text Effect step 5

В меню выберите Image > Adjustments > Levels/Изображение>Коррекция>Уровни, настройте их как показано ниже.

Pennant Banner Text Effect step 5

Возьмите инструмент Pen/Перо, выберите опцию Path/Контур и нарисуйте кривую, пересекающую документ. Используйте инструмент Direct Selection/Прямое выделение (A) чтобы подправить кривую при необходимости.

Pennant Banner Text Effect step 5

Возьмите инструмент Brush/Кисть, выберите круглую нерастушеванную кисть размером в 3 px цвета #f0f0ee. Создайте новый слой над слоем фона, назовите его string, затем выберите инструмент Direct Selection/Прямое выделение (A).

Кликните по контуру правой кнопкой мыши и выберите Stroke Path/Обводка контура, затем выберите Brush/Кисть в выпадающем меню Tool/Инструменты и нажмите OK. Нажмите Enter/Return чтобы избавиться от рабочего контура.

Pennant Banner Text Effect step 5

Теперь нам нужно разместить на веревке вымпелы.

Для этого вернитесь в документ, в котором вы редактировали вымпелы, дублируйте его и объедините слои, составляющие каждый вымпел. Для этого выделите каждую группу и в меню выберите Layer > Merge Group/Слой>Объединить группу (Ctrl/Cmd + E).

Переместите вымпелы в документ с деревянным фоном, масштабируйте их до нужного размера и вращайте, чтобы расположить на веревке так, как вам этого хочется. Используйте для этого функцию Edit > Free Transform/Редактировать>Свободное трансформирование (Ctrl/Cmd + T).

Pennant Banner Text Effect step 5

Шаг 6

Кликните дважды по одному из слоев вымпела, чтобы применить к нему следующие Стили Слоя/Layer Style:

– Inner Glow/Внутреннее свечение

Pennant Banner Text Effect step 6

– Drop Shadow/Тень

Pennant Banner Text Effect step 6

Так мы добавим простую тень и немного подчеркнем края.

Pennant Banner Text Effect step 6

Кликните правой кнопкой по слою с вымпелом и выберите Copy Layer Style/Копировать стиль слоя, затем выделите все остальные слои с вымпелами, кликните по одному из них и выберите Paste Layer Style/Вставить стиль слоя.

Pennant Banner Text Effect step 6

Примените также тот же стиль слоя Drop Shadow/Тень к слою с веревкой.

Pennant Banner Text Effect step 6

Сгруппируйте все слои с вымпелами в папку Pennants.

Pennant Banner Text Effect step 6

Шаг 7

Кликните по иконке Create new fill or adjustment layer/Создать новый корректирующий слой или слой-заливку в палитре Layers/Слои и выберите Gradient Map/Карта градиента.

Pennant Banner Text Effect step 7

Используйте переход цветов от #bbb07d к #ffffff, затем смените Blend Mode/Режим наложения на Multiply/Умножение и снизьте Opacity/Непрозрачность до 20%.

Pennant Banner Text Effect step 7

Вновь создайте новый корректирующий слой, на этот раз типа Gradient/Градиент. Используйте градиент от прозрачного к непрозрачному цветов #a7a297 и #b3a78c. Смените тип градиента на радиальный и настройте как показано ниже.

Pennant Banner Text Effect step 7

Смените для этого корректирующего слоя Blend Mode/Режим наложения на Linear Burn/Линейный затемнитель и снизьте Opacity/Непрозрачность до 20%.

Pennant Banner Text Effect step 7

Шаг 8

Удерживая Ctrl/Cmd, кликните по иконке одного из вымпелов, чтобы создать выделение по его контуру.

Pennant Banner Text Effect step 8

Удерживая Shift и Ctrl/Cmd кликайте по остальным слоя вымпелов.

Pennant Banner Text Effect step 8

Кликните по всем слоям и вы создадите выделение всех вымпелов.

Pennant Banner Text Effect step 8

Создайте новый слой внутри группы с вымпелами и назовите его Texture Overlay. Поместите этот слой над слоями с вымпелами. Кликните по иконке Add vector mask/Создать векторную маску в нижней части палитры Layers/Слои.

Pennant Banner Text Effect step 8

Поместите бумажную текстуру PaperCrumpled0002 внутри группы с маской и при необходимости масштабируйте текстуру, чтобы она покрыла все вымпелы. Смените для этого слоя Blend Mode/Режим наложения на Lighten/Замена светлым и снизьте Opacity/Непрозрачность до 50%.

Pennant Banner Text Effect step 8

Создайте новый корректирующий слой типа Levels/Уровние.

Pennant Banner Text Effect step 8

Настройте уровни как показано ниже. Теперь у наших вымпелов есть легкая бумажная текстура.

Pennant Banner Text Effect step 8

Следующие действия опциональны. Вы можете выделить фоновый слой, взять инструмент Spot Healing Brush/Точечная лечащая кисть, выбрать нерастушеванную круглую кисть размером 30 px и затереть некоторые нежелательные места.

Pennant Banner Text Effect step 8

Результат

Pennant Banner Text Effect

Автор урока textuts

Перевод — Дежурка

Смотрите также:




Коментарии запрещены.