Векторные рисунки все чаще и чаще используют в различных печатных инструментах, для создания красивых рисунков из дерева, пластика, метала, бумаги и прочих материалов. Сегодня, мы разберемся, как можно сделать векторный рисунок своими руками, используя программу фотошоп. Затратив совсем немного времени, мы получим качественный векторный рисунок, и сможем без всяких проблем использовать его в дальнейшем.
Как рисунок перевести в векторный?
Прежде всего, следует заметить, что перевести рисунок в векторный формат можно только рисунки, которые изображены на белом фоне. Если же фон не белый, то для начала нужно убрать все лишнее и очистить фон.
1. С помощью инструментов выделения, выбираем лишь той элемент, который мы желаем перевести в векторный рисунок, и копируем его на новый слой, под названием «фигура». После чего создаем ещё один слой и полностью заливаем его белым цветом, этот слой можно назвать «фон». Теперь, слой «фон» перемещаем под слой «фигура» и объединяем их. Полученную картинку, называем «Основа». Копируем слой «Основа» дважды и называем их «Основа_1» и «Основа_2». Отключаем их видимость.
2. Начнем наши операции по переводу рисунка в векторный формат. Первым же делом, применим для слоя «Основа», коррекцию «Изогелия», дабы получить рисунок в черно-белом формате. Не всегда при первой коррекции получается нужный нам рисунок, поэтому можем сделать несколько копий слоев и делать коррекцию с разными значениями, пока не получим то что нужно.
Вот мы и получили самый нормальный эффект.
3. Далее мы применяем к полученной картинке фильтр «Диффузия», чтобы убрать зубчатые края. Путь к включению фильтра: «Фильтр - Стилизация - Диффузия» (Filter-Stylize-Difuse). В открывшемся окне выбираем «Anisotropic».
4. Следующим шагом будет сглаживание краев, чтобы они стали более чёткими, для этого нажимаем «Изображение - Коррекция - Уровни» (Image-Adjustment-Levels). В открытом окне перемещаем левый и правый ползунок ближе к центру. Для того чтобы увидеть результат коррекции, лучше всего увеличить рисунок до 300% перед тем как открывать уровни.
5. Повторяем пункты 3 и 4 в той же очередности.
6. Отключаем видимость нашего основного слоя и включаем слой «Основа_1». Выполняем действие «Изображение - Коррекция - Изогелия» (Image-Adjustment-Threshold). Параметр устанавливаем на уровне 138.
7. Проделываем с этим слоем операции указанные в пункте 3,4 и 5.
8. Создаем новый слой и заливаем его черным цветом. Называем его «Фон». Устанавливаем его ниже слоя «Основа». В слое «Основа_1» меняем режим на «Разница» (Difference).
Вот что у нас получается:
9. Получилась картинка немного страшная, но мы это сейчас поправим. Слой «Основа» делаем активным, и добавляем слой-маску. После чего с помощью ластика можем убрать лишние участки на лице и теле девушки.
10. Вот мы и получили рисунок, теперь его нужно перевести в векторный. Используем «Волшебную палочку», выделяем всю черную область рисунка, и на изображении нажимаем правую клавишу мыши, в открывшемся меню выбираем «Образовать рабочий контур». Устанавливаем значение 1,0.
В этом уроке Photoshop мы превратим обычную фотографию девушки в векторный рисунок.
Это достаточно сложный урок, который займет у вас много времени, но он того стоит! Благодаря этому уроку вы поймете, как рисуются векторные изображения людей.
Здесь мы не используем ни один фильтр, только инструмент Перо. Если вы не знаете, как пользоваться инструментом Перо, то смотрите .
Найдите фото, которые вы хотите переделать в векторный рисунок.
Дублируйте его и перейдите в меню Image>Adjustments>Posterize (Изображение - Коррекция - Постеризовать) и выберите там нужное количество уровней. Чем больше уровней, тем детальнее будет ваше векторное изображение.
Выделите лицо и шею девушки (открытые участки кожи) с помощью Воспользуйтесь пипеткой , чтобы выбрать цвет кожи с фото. Залейте выделение этим цветом.
Снова с обведите волосы, залейте черным цветом и разместите этот слой под слоем с лицом.
Так как мы потеряли некоторые участки волос на висках и на лбу, то нужно их дорисовать. Делаем это на новом слое над слоем с лицом.
Обведите края одежды. Помните, что каждая деталь должна быть однотонной. Тени мы будем рисовать позже...
А теперь опираясь на вашу постеризованную основу и оригинал изображения определитесь с новым уровнем, который будете вырисовывать, и с его цветом.
НИ В КОЕМ СЛУЧАЕ НЕ БЕРИТЕ ЦВЕТ С ПОСТЕРИЗОВАННОГО СЛОЯ! ЦВЕТА НА НЕМ НЕПРАВИЛЬНЫЕ, ОН НУЖЕН ВАМ ТОЛЬКО ДЛЯ ВЫРИСОВЫВАНИЯ УРОВНЯ.
Продолжайте вырисовывать оттенки на коже. Слои с тенями должны накладываться друг на друга по следующему принципу: светлые слои - внизу, темные - наверху.
Когда с кожей вы закончите, объедините все эти слои.
Так как у нас два слоя с волосами, сделайте новый слой на самом верху и нарисуйте на нем светлые прядки.
Если на вашем фото волосы темные, то это легко будет сделать, а если светлые, то вам придется точнее вырисовывать полученные при постеризации оттенки.
Сделайте тоже самое с одеждой.
Если вы посмотрите на оригинальное фото, то заметите, что в рисунке не хватает ожерелья. Ничего страшного, пусть будет так.
Если человек на фото немного полный или на нем есть какая-то деталь, которая не нравится вам, то просто уберите ее!
Подредактируйте все оставшиеся детали...
Теперь поработайте с глазами. Сначала на новом слое нарисуйте форму глаза. Затем создайте еще слой и нарисуйте ресницы. После слейте оба слоя вместе.
Поверх черной формы глаза нарисуйте белую чуть меньше размером. А внутри белой несколько кружков, из который получится зрачок.
Вырисовываем губы. Сначала нарисуйте форму и залейте основным цветом.
Нарисуйте тени и блики на губах, а также во рту (если есть необходимость).
Здесь как видите нарисована подложка для зубов - это основа десен и тень от зубов.
И в конце нарисуйте сами зубы и блики на них.
Помните, что все тени и блики нужно группировать с основным цветом.
И после нескольких часов работы над этим фото, посмотрите теперь на результат! Мы искренне надеемся, что вам самим нравится то, что вы нарисовали.
В этом уроке вы будете работать с подобранными изображениями, и создавать симпатичную иллюстрацию. Идея этой иллюстрации была создана вследствие войны между растровым и векторным искусством. Я попытался сделать изображение простым, но, в то же время, эффектным. Надеюсь, что вы извлечете пользу из этого урока и примените его к своим собственным работам.
Предпросмотр итогового изображения:
Материалы для урока:
Шаг 1. Для начала создадим новый документ 1100х1500 px с разрешением 300 px. Для этой работы мы будем использовать текстуру, которая мне очень нравится. Очень хочу поблагодарить автора этой текстуры Принцессу теней (la Princesa de sombras). Поместите текстуру в свой документ.
Шаг 2.
В продолжение нам нужно выбрать иллюстрации, которые мы будем использовать для этого рисунка. Я купил три подходящих изображения, ссылка в архие.
Начнем с изображения , воспользуемся инструментом Pen
tool
(Перо) (P
)
, он нам нужен для создания контура вокруг танцора.
Шаг 3. Закончив с созданием контура с помощью пера, давайте установим параметры кисти (brush tool ), размер 1 px и жесткость 100%. Создадим новый слой и назовем его «Контур 1». Продолжая использовать инструмент Pen tool (Перо) (P ) кликните правой кнопкой мыши и в контекстном меню выберите Stroke Path (Выполнить обводку контура), выберите в выпадающем меню инструмент Brush (Кисть) и убедитесь, что не поставлена галочка напротив опции Simulate pressure (Имитировать нажим). Кроме того, вам необходимо использовать штрих черного цвета.
Шаг 4. Только что мы создали контур, но не нужно удалять получившийся эскиз. Сейчас нажмите сочетание клавиш Ctrl + Enter , чтобы преобразовать эскиз в область выделения, также нужно выделить маску слоя. Это действие скроет задний фон вокруг танцора (прим. перед созданием маски слоя убедитесь, что активным является слой с танцором, а не его контур). В итоге у вас должны быть слой с танцором и слой с его контуром.
Шаг 5. Выделите слой «Контур 1» и используйте инструмент Pen tool (Перо) , вам нужно нарисовать несколько контуров на танцоре. Вы можете создать эти контуры из теней цветного фото или обвести линии одежды с помощью Stroke Path (Выполнить обводку контура) с кистью размером 1 px черного цвета. Линии, которые получились, называют векторными или контурными.
Шаг 6. Создайте новый слой ниже слоя «Контур 1» и назовите его «Цвет 1». Теперь зажмите клавишу Ctrl и кликните левой кнопкой мыши по слою с танцором, чтобы создать выделение. Залейте слой «Цвет 1» этим цветом: #f7eedd. Кроме того, слейте эти слои в один для того, чтобы можно было передвигать их вместе без разделения.
Шаг 7. Вам нужно сделать векторные изображения для каждого танцора, который входит в вашу композицию. Повторите шаги 1-6 для всех танцоров.
Шаг 8. Если вы все делали точно согласно описаниям, у вас должны быть такие же слои:
Шаг 9. Теперь у вас есть векторные изображения всех танцоров, необходимо замаскировать некоторые части танцоров, чтобы добиться эффекта трансформации. Выделите маску слоя танцора и с помощью инструмента Brush tool (Кисть) черного цвета закрасьте те части, которые вы хотите скрыть.
Шаг 10. Теперь дублируйте всех танцоров (прим. нужно дублировать слои с векторными и растровыми изображениями (слои вместе с масками).
Совет: При создании дубликатов для каждого слоя, удобно расположить их в группы, так например, в группе Dancer 1 у вас будут дубликат слоя Танцор 1 и дубликат слоя с растровым изображением, причем, слой Танцор 1 будет расположен НАД слоем с растровым изображением. Такие группы можно сделать для каждого танцора, тогда, возможно, вы не запутаетесь.
Измените размер дубликатов и подвиньте их на то место, которое вам нравится, но при этом всегда держите в уме ту композицию, которую вы хотите реализовать. В моем случае, вы видите шесть танцоров. Кроме того, я замаскировал оригиналы танцоров, для того чтобы видимыми были только векторные изображения. Я сделал это для того, чтобы потом закрасить только отдельные участки.
Шаг 11. Первое, что вам нужно сделать, чтобы придать жизнь векторному изображению - выделить интересующую нас область.
Шаг 12. Теперь воспользуемся кистью Splatter (Брызги). Вы можете использовать и другие полезные кисти на сайте. Используя данную кисть черного цвета на маске слоя, начните раскрашивать отдельные участки танцора. Кроме того снижайте на некоторых участках прозрачность кисти до 20%. Таким образом, у нас получится очень интересный эффект градации.
Шаг 13. Повторите 11 и 12 шаги для каждого танцора. Беспрестанно проверяйте результат своей работы, не бойтесь, если что-то не получается, стирайте неполучившиеся, на ваш взгляд, участки и переделывайте до тех пор, пока результат вас не удовлетворит… Экспериментируйте!
Шаг 14. К этому шагу у вас должна получиться четкая композиция с хорошей динамикой.
Шаг 15.
Давайте добавим воронов к нашему изображению. Я использовал две картинки с воронами.
Теперь, когда у нас есть эти изображения, применим к ним тот же самый эффект, что и к танцорам (прим. предварительно необходимо вырезать воронов). Это означает, что вам нужно создать векторное изображение воронов и раскрасить их кистями Splatter (Брызги).
Шаг 16.
Работая с воронами, создавайте группы для каждого (прим. так же, как рекомендовано в шаге 10), так ваша работа будет более организованной.
Давайте воспользуемся еще одним изображением. Дублируйте это перо столько раз, сколько сочтете нужным, для придания лучшего визуального эффекта нашей композиции. Как вы видите, я добавил не много перьев, совсем чуть-чуть, только лишь, чтобы они придали нашей композиции динамики.
Шаг 17. Создайте группу над всеми слоями и назовите ее «Круги». Также создайте в этой группе новый слой и используйте настройки Brush (Кисти) , которые указаны ниже, используйте тот же цвет, что и для векторных изображений (#f8efde).
Теперь, когда вы создали кисть, нарисуйте несколько кругов на композиции. Будьте осторожны, не переборщите.
Шаг 18. Создайте новый слой над слоем с кругами. Удерживая клавишу Ctrl кликните левой кнопкой мыши по слою с кругами, чтобы загрузить выделение. Выделите слой, который вы создали. Используйте инструмент Lasso (Лассо) и кликните правой кнопкой мыши по выделенной области, чтобы выбрать в контекстном меню Stroke (Выполнить обводку). Установите ширину на 1 px, в качестве цвета выберите черный, и создайте обводку на новом слое, назовите его «Центровка» (прим. названия можете придумывать на свое усмотрение, чтобы вам самим легче было ориентироваться).
Повторите этот шаг несколько раз, чтобы у вас получилось больше кругов без заливки.
Шаг 19. Создадим еще один слой чтобы сделать больше кружков, но теперь с другими настройками и другим цветом (#8bb687).
Шаг 20. Повторите шаг 19 , но на этот раз с другим цветом (#99a3b4), размещая круги в противоположной стороне от других.
Шаг 21. Теперь к слоям, которые мы сделали в шагах 18 и 19 применим Blend Mode (Параметры смешивания) Color Burn (Затемнение основы).
Заключение.
Для завершения работы, вы можете добавить еще немного пятен, также можете добавить свой логотип и готово! Можете посмотреть мой окончательный результат .
Финальный результат 
Как известно, векторные иллюстрации в настоящее время очень популярны в веб-графике. Профессиональные дизайнеры могут создавать такие иллюстрации за считанные часы. Если Вы новичок или любитель, уроки веб-графики, безусловно, будут крайне полезны для Вас. Цель данного урока - пролить свет на процесс создания выбранного изображения. Шаг за шагом я продемонстрирую весь процесс и с помощью моих комментариев поясню все этапы.
Чтобы создать действительно классное изображение, Вы должны выбрать нужную программу и следовать определенным правилам. Если Вы хотите нарисовать векторную иллюстрацию, то должны иметь в виду, что для этого используются такие редакторы как Adobe Illustrator или CorelDraw . Вместе с тем, Photoshop располагает достаточными средствами для разработки векторных иллюстраций. Я наглядно покажу это в своем уроке, как перевести рисунок в вектор. Я выбрал скетч кота как основу для иллюстрации. Я решил изобразить синего кота с розовыми цветами в лапах.
Шаг 1
Начнем с создания фона. Нарисуем форму с помощью инструмента выделения () (в режиме Shape Layers (Слой Фигура)). Настройки - (Непрозрачность заливки) = 0% . Теперь используем наложение градиента: ( (Стиль слоя - Наложение градиента)) для заполнения созданной фигуры. Все настройки по умолчанию, вам только нужно менять угол (я буду указывать степень) и градиент. Добавляем Stroke (Обводку) ( (Стиль слоя - Обводка)). Используем все настройки по умолчанию, кроме ширины в 1 рх и цвета.
