IxStep.ru Все о дизайне и его хистростях!

Поиск по сайту
Навигация
Наш опрос
Нужен ли нам форум?
Да, конечно!
Нет. не надо.
Без понятия.
Хм... А что это?

Веселушки
Удача улыбается смелым... А потом долго ржет над ними!!!

Популярные новости
Рамка "Love"
Рамка \

| PSD | 2500 x 1875 | (rar) - 10.1 Mb. | ...
Casino / Black Jack
Casino / Black Jack

КазиноCasino / Black Jack - 20 HQ JPG (u ...
Dotted swirl brushes by creativesplash - ...
Dotted swirl brushes by creativesplash - кисти фотошоп

Dotted swirl brushes by creativesplash - ...
DAJ - Abstract Backgrounds
DAJ - Abstract Backgrounds

DAJ - Abstract Backgrounds100 JPEG | 520 ...
Набор для Scrapbookinga - Christmas Tree ...
Набор для Scrapbookinga - Christmas Tree

Набор для Scrapbookinga - Christmas Tree ...
Stock Photo MIX
Stock Photo MIX

Stock Photo MIX20 jpg | Up to 5491*4594 ...
Leather textures - текстуры кожи
Leather textures - текстуры кожи

Leather textures - текстуры кожи 7 JPG ...
Deco Elements - Декоративные кисти
Deco Elements - Декоративные кисти

Deco Elements-Декоративные кистиНабор оч ...
Лимоны
Лимоны

Lemons8 jpg | 1920x1280px | 12,1 Mb
Fireworks - Corel Photo Library
Fireworks - Corel Photo Library

Фотоклипарт, фейерверк 100 Images | 3000 ...

PhotoshopКак создать органичную иллюстрацию с типографикой

 

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

Введение

Мне нравится создавать типографические иллюстрации. Я начал с подбора декоративного шрифта для будущей работы:
Внимание! У вас нет прав для просмотра скрытого текста.
. Я использовал этот шрифт раньше в своих иллюстрациях, но на этот раз я хочу сделать его более плоским. Шрифт довольно органический на вид, поэтому я решил подобрать узор с большим количеством завитушек и мелких деталей. И нашел подходящий вариант на
Внимание! У вас нет прав для просмотра скрытого текста.
.

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

Шаг 1

Первое с чего мы начнем - это создадим большую древесную текстуру. Возможно, создание будет несколько затруднительным, но все же попытайтесь воссоздать максимально приближенную картинку древесины. Для этого создайте новый документ в Фотошоп размером 6000х6000px (300ppi).

Установите цвета для переднего плана темно-коричневый (#48403a) и для фона по-светлее (#ac9f92). Залейте холст цветом переднего плана (#48403a), далее Filter > Render > Fibers. Выставьте следующие значения: Variance в 12.0 и Strength в 34.0. Поиграйте с настройками, покликайте на кнопочку Randomize пока не получите приемлемый результат.

 

 

Шаг 2

Добавим текстуре глубины и затемним слегка. Идем в Layer > New Adjustment Layer > Gradient Map (от черного к #2b1919). После этого смените режим наложения слоя Blending Mode на Overlay и понизьте уровень прозрачности слоя Opacity до 50%.

 


Шаг 3

Теперь создайте новый слой и залейте его цветом #633a1c. Смените режим наложения слоя Blending Mode на Multiply.

 

 

Шаг 4

И, наконец, выберите инструмент Gradient (G), установите цвет переднего плана белый, тип градиента Линейный от белого к прозрачному и сделайте "растяжку" сверху вниз на новом слое (чтобы градиент был четко вертикальным, зажмите Shift). Прозрачность слоя Opacity установите в 10%. Сделайте полное выделение через Ctrl+A и скопируйте все видимые слои в буфер обмена (Shift+Ctrl+C).

 

 

Шаг 5

Создайте новый документ в Photoshop холст размером с лист А4 (29,7 x 21cm с 300ppi). Формат я выбрал CMYK, т.к. этот формат наиболее пригоден для печати. Убедитесь, что при создании нового документа у вас выбрана цветовая схема CMYK, а не RGB.

Вставьте из буфера обмена текстуру дерева. Скачайте бесплатный шрифт

Внимание! У вас нет прав для просмотра скрытого текста.
и создайте надпись (каждую букву на отдельном слое), цвет текста в данный момент не важен, т.к. будет заменен текстурой. Я использовал различные оттенки зеленого, дабы видеть порядок наложения слоев.

 

 

Шаг 6

Сделайте двойной клик по слою с буквой "T" и добавьте нижеприведенные эффекты.
Перечень используемых цветов:
Drop Shadow: #000000;
Outer Glow: #476454;
Bevel and Emboss - Highlight: #f09629 и Shadow: #45293c;
Stroke: #466454.

 


 

В итоге ваше изображение должно выглядеть вот так:

 

 

Шаг 7

Скопируйте стиль слоя (клик правой кнопкой мыши по слою (ПКМ) > Copy Layer Style) и примените его ко всем оставшимся буквам (ПКМ по слою > Paste Layer Style). После создайте большой амперсанд (&) позади букв.

 

Шаг 8

Создайте новый слой над слоем с буквой "T" и сделайте Clipping mask (Alt + клик между этими двумя слоями). Вставьте на созданный слой тестуру дерева.

 

 

Шаг 9

Создайте еще один слой в Cliping mask над текущим с текстурой. Сделайте выделение "T" (Ctrl + клик по иконке слоя с буквой "T") и сделайте Contract выделения в (7pxSelect > Modify > Contract).

 

Шаг 10

Залейте выделение белым цветом и размойте по гауссу (Filter > Blur > Gaussian Blur).

 

Шаг 11

Понизьте прозрачность слоя Opacity до 40%, выберите инструмент ластик Eraser Tool (E). Возьмите мягкую кисть Hardness 80% и сотрите нижнюю часть белой заливки, как показано на скриншоте.

 

Шаг 12

Скачайте

Внимание! У вас нет прав для просмотра скрытого текста.
и
Внимание! У вас нет прав для просмотра скрытого текста.
шурупы. Вырежьте их при помощью Pen Tool (P) и десатурируйте (Ctrl + Shift + U). Первый шуруп мы будем использовать как большой, второй, соответсвенно, как маленький. Разместите первый большой щуруп в центре буквы "T" и примените к нему следующие настройки.

 


Создастся впечатление, будто "T" прикручена этим шурупом.

 

Шаг 13

Проделайте эти операции со всеми буквами и разместите шурупы в различных местах.

 

Шаг 14

Теперь нам понадобятся

Внимание! У вас нет прав для просмотра скрытого текста.
. Откройте их в Adobe Illustrator, используя Direct Selection Tool (A) выделите белый участок с узором. Смените цвет на #486554, скопируйте в буфер (Ctrl + C) и вставьте (Ctrl + V) в Photoshop как Smart Object.

 

Шаг 15

Теперь добавьте такие настойки стиля для слоя:

 


Выглядит весьма странно, но не волнуйтесь, будет лучше, как только мы добавим второй цвет.

 

Шаг 16

Создайте новый пустой слой как Cliping mask (Alt + тык между слоями) и при помощи мягкой кисточки (#74cdd8) добавьте деталей.

 

Шаг 17

Сгруппируйте слои (Ctrl + G) и продублируйте группу и спозиционируйте на Ваше усмотрение.

 

Шаг 18

Расположите один большой узор снизу.

 

Шаг 19

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

 

Шаг 20

И на последок еще парочку.

 

Шаг 21

Далее добавим немного других оттенков и цветов в иллюстрацию и поднимем контраст. Для начала идем в Layer > New Adjustment Layer > Gradient Map. Градиент от темно-фиолетового #62184b к насыщенному желтому #f6ed22. Промежуточный на Color Stop #ed2025. Режим наложения корректировочного слоя меняем на Linear Burn и устанавливаем прозрачность Opacity в 30%.

 

Шаг 22

Добавьте Selective Color Adjustment Layer (Layer > New Adjustment Layer > Selective Color...) и в выпадающем меню перейдите к Черному цвету.

 

Шаг 23

Я подумал, что надо привнести в работу дополнительный цвет - желто-оранжевый. Скопируйте один узор и сделайте его меньше (Ctrl+T). Удалите голубую часть в середине и закрасьте ее цветом #f7db58.

 

Шаг 24

И еще несколько экземпляров.

 

Шаг 25

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

 

Шаг 26

Вернемся к файлу Go Media в Adobe Illustrator, сделайте двойной клик по орнаменту. Выделите белую часть и сделайте ее черной. Скопируйте ее (Ctrl+C) и вернитесь в Фотошоп. Создайте новый документ, размеры изображения оставьте неизменными, они будут соответсвовать размерам изображения в буфере обмена. Вставьте узор (Ctrl+V). Скройте подложку в документе (клик по глазу у фонового слоя), так, чтобы узор был на прозрачном слое и идем в Edit > Define Pattern.

 

Шаг 27

Создайте новый слой над слоем с древесной текстурой в нашей иллюстрации. Возьмите инструмент Paint Bucket Tool (B), в верхней части меню этого инструмента смените тип заливки в выпадающем меню с Foreground на Pattern. Рядом выберите ново-созданный узор и залейте им холст. Далее добавьте такие стили для слоя, как показано на скриншоте.

 


Вот так это будет выглядеть при 100%.

 

Шаг 28

Создайте новый слой в Clipping mask (Alt+клик между слоями), возьмите очень большую мягкую белую кисть, уменьшите прозрачность кисточки и легко пройдитесь по центру иллюстрации, не переусердствуйте.

 

Шаг 29

Смените цвет кисточки на оранжевый, который мы использовали ранее и сделайте несколько мазков, подсветив отдельные области.

 

Заключение

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

Кликните по изображению, чтобы увидеть его в большом формате.

 

Источник:

Внимание! У вас нет прав для просмотра скрытого текста.



-Нельзя стать хорошим солдатом без некоторой доли глупости. (Флоренс Найтингейл)

Опубликовал Kotek, 19 октября 2009 | Комментировать (0) | Печать
 (голосов: 0)

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.