Как в фотошопе рисовать в векторе: Как сделать векторное изображение в Фотошопе

Как сделать векторное изображение в Фотошопе

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

Виды изображений

Векторное

Когда вы создадите новый документ в Photoshop, напишите на белом листе любое слово, подобрав удобный размер (использование функций «Текст» — значок с буквой «Т» на панели инструментов).

Увеличьте масштаб инструментом «Лупа» — вы увидите, что буквы состоят из пикселей. На самом деле вид задаётся формулами, только отображение в программе выполняется пикселями.

Возвращаем нормальный размер, кликнув дважды на значок с рукой. Уменьшаем размеры следующим образом: «Редактирование» — «Трансформирование» — «Масштабирование». При уменьшении размеров качество букв сохраняется. Таким же способом увеличиваем текст максимально, качество так же остаётся хорошим, так как формулы работают при любом масштабе хорошо.

Типичный пример векторного изображения

Растровое

Чтобы перевести векторное изображение в Фотошопе в растровое, уменьшим готовую картинку. Затем проходим на вкладку «Слои», там выбираем «Растрировать» — «Текст». У нас получились буквы, действительно состоящие из пикселей.

При увеличении растровой картинки/текста с помощью функций «Редактирование» — «Трансформирование» — «Масштабирование», качество сильно ухудшается. При повторениях процедуры качество каждый раз становится всё хуже — буквы становятся расплывчатыми.

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

При увеличении масштаба растровая картинка теряет в качестве

Создание векторной графики

Сделать рисунок можно с помощью любой фотографии. Если вы не знали, как перевести в вектор в Фотошопе фото, преобразовать его, следуйте следующему алгоритму действий:

1. Откройте фотографию/иллюстрацию. Создайте новый слой.
2. Инструментом «Перо» обведите контуры одного из элементов (например, лица). Чтобы не мешал фон, поставьте меньшую прозрачность, до 20–30%. Выберите цвет заливки и контура.
3. Далее таким же образом прорисуйте контуры других деталей, залейте их нужным цветом.
4. Для сложного наложения цвета на лице модели можно использовать «Фильтры». Зайдите в «Галерею фильтров», сделайте там «Постеризацию» на несколько уровней, удобно на 3 уровня. Photoshop вам подскажет, как накладываются тени, вам остаётся обрисовать их контуры. Можно дополнительно обесцветить, сделать фото чёрно-белым, настроить резкость, чтобы чётче видеть уровни. При заливке выбирайте всё более светлый/тёмный цвет для слоёв. У вас образуются переходы цветов.

Терпение, аккуратность, неторопливость — и ваша работа будет готова. При хорошем навыке вы будете изготавливать простые рисунки довольно быстро, А перевести любую картинку в вектор не составит проблемы.

Итогом кропотливой работы станет картинка «в кривых»

Как в Фотошопе сделать векторное изображение человека на основе его фотоснимка? На это вам понадобится много слоёв цвета, а значит, работа займёт довольно много времени. Но сам процесс не так сложен, как кажется, и при достаточном терпении вы вполне справитесь с задачей и получите приличный вектор.

Как нарисовать вектор в фотошопе

В этом уроке мы рассмотрим процесс создания векторного рисунка в Фотошопе.

Сложность: Средняя

Дата: 24.08.2013

Обновлено: 18.06.2015

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

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

Скетч кота, который я использовал в уроке.

Шаг 1

Начнем с создания фона. Нарисуем форму с помощью инструмента выделения Pen Tool («Перо» / Клавиша «P») (в режиме Shape Layers (Слой Фигура)). Настройки — Fill (Непрозрачность заливки) = 0%. Теперь используем наложение градиента: (Layer Style — Gradient Overlay (Стиль слоя — Наложение градиента)) для заполнения созданной фигуры. Все настройки по умолчанию, вам только нужно менять угол (я буду указывать степень) и градиент. Добавляем Stroke (Обводку) (Layer Style — Stroke (Стиль слоя — Обводка)). Используем все настройки по умолчанию, кроме ширины в 1 рх и цвета.

Итак. используем Pen Tool («Перо» / Клавиша «P»), в режиме Shape Layers (Слой Фигура). Выделяем весь холст, настройки Fill (Непрозрачность заливки) = 0%, и добавляем градиент (Layer Style — Gradient Overlay (Стиль слоя — Наложение градиента)).

Шаг 2

Раскрашиваем основные части кошачьего тела в синий цвет: нос с ушами, тело, передняя лапа и хвост. Добавляем Stroke (Обводку), чтобы сделать изображение более интенсивным. Используем цвета с #4f85c8 до #7ab2ee, угол — 50 deg (Градус) для Наложения градиента, и #2d72c5 — цвет Stroke (Обводка).

Шаг 3

Теперь уделим внимание основным элементам тела. Высветлим часть тела, используя тот же градиент, что и для всего тела, с углом 3 deg (Градус).

Шаг 4

Перейдем к деталям хвоста. Выделим весь хвост и заполним его градиентом (68 deg (Градус)). После этого выделим кончик хвоста (как показано на рисунке) и заполним тем же градиентом (75 deg (Градус)).

Шаг 5

Выделим нос, как показано на рисунке, и заполним градиентом (90 deg (Градус)).

Шаг 6

Осветлим кончик носа (-66 deg (Градус)). Используем более темные цвета, чтобы подчеркнуть границы носа.

Шаг 7

Пришло время поработать с общими контурами ушей. Используем угол градиента 66 deg (Градус) для нижнего и 4 deg (Градус) для верхнего уха.

Шаг 8

Придадим форму краю уха: используем угол градиента 16 deg (Градус) для нижнего уха и 34 deg (Градус) — для верхнего.

Шаг 9

Добавим деталей на лапах. Создадим овальную форму верхнего пальца (градиент с углом (35 deg (Градус)), затем для среднего пальца (68 deg (Градус)), и наконец для нижнего (58 deg (Градус)). Каждая последующая форма накладывается на предыдущую.

Шаг 10

Основной корпус готов. Теперь перейдем ко второй нижней лапе. Создадим новую форму (97 deg (Градус)), далее нажмем «Shift+Ctrl+[» (Send to Back (На задний план)), и добавим Stroke (Обводка) c цветом #1d62b5.

Шаг 11

Добавим три круга сверху донизу (25 deg (Градус), 68 deg (Градус), 83 deg (Градус)) для каждого пальца, как и в шаге 9.

Шаг 12

Проделаем все то же, что и с первой нижней лапой. Готово. Теперь обратимся к верхним лапам. Создадим форму для одной из верхних лап (58 deg (Градус)) и добавим Stroke (Обводку) с цветом #4172a5 (как и для всех внешних форм).

Шаг 13

На верхней лапе 4 пальца. Скроем один из них. Создадим форму (50 deg (Градус)).

Шаг 14

Создаем овальную форму для каждого пальца, как в шаге 9 (63 deg (Градус), 67 deg (Градус), 77 deg (Градус)). Добавляем Stroke (Обводка) с цветом #3367a6 для каждого из 3-х пальцев.

Шаг 15

Создадим новую форму для второй лапы (-61 deg (Градус)). Жмем (Ctrl+Shift+]) и добавляем Stroke (Обводка) #2d72c5.

Шаг 16

Для верхнего пальца создаем форму (135 deg (Градус)), затем то же самое проделываем и для остальных пальцев (сверху вниз) — как и в шаге 9 (99 deg (Градус), 83 deg (Градус), 67 deg (Градус)).

Шаг 17

Закончили с основной частью кошачьего тела. Теперь перейдем к мордочке. Начнем с глаз. Создадим новую форму для нижнего века (-168 deg (Градус)), а затем светло-голубую форму — белок глаза (-22 deg (Градус)).

Шаг 18

Теперь нарисуем овальную форму в середине головы (90 deg (Градус)) для радужки глаза, добавим Stroke (Обводка) #599c01. Нарисуем зрачок над радужкой (90 deg (Градус)). Затем создадим маленькую овальную форму для блика. Для градиента используем цвет #ebfcf9.

Шаг 19

Сделаем овальную форму век (94 deg (Градус)), затем форму для ресниц (-173 deg (Градус)). Расположим их по границе века. Нажимаем «Ctrl+[» (Send Backward (Переложить назад)).

Шаг 20

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

Шаг 21

Поработаем с зубами. Создадим новую форму (71 deg (Градус)) и добавим Stroke (Обводка) с цветом #336aaa.

Шаг 22

Создадим форму для нижнего зуба (-122 deg (Градус)). Далее создаем дубликаты слоя с зубом (Ctrl+J) и изменяем их размер, используя инструмент Path Selection Tool (Инструмент «Выделение контура» / Клавиша «A»).

Шаг 23

Создаем форму верхнего зуба (-135 deg (Градус)), и производим те же действия, что и в шаге 22.

Шаг 24

Кот практически готов. Добавим некоторые детали. Подготовим формы для роскошных кошачьих усов: (сверху вниз:-50 deg (Градус), 63 deg (Градус),-50 deg (Градус)).

Шаг 25

И еще 2 нижних уса:

Шаг 26

Теперь сделаем коту когти. Просто создаем небольшие формы в виде штрихов. в зависимости от направления когтя, указываем и угол наклона градиента, которым его заливаем. Градиент желательно выбрать: от темного к светло-голубому. Не бойтесь варьировать градиенты.

Шаг 27

Последний элемент — цветы в кошачьих лапах. Нарисуем форму стебелька цветка (173 deg (Градус)), как показано на скриншоте, жмем «Shift+Ctrl+[» (Send to Back (На задний план)). Далее создадим форму с лепестками (79 deg (Градус)).

Шаг 28

Создадим еще одну форму для лепестков (94 deg (Градус)), сделаем её чуть больше и разместим чуть выше исходной. Нарисуем сердцевину цветка (76 deg (Градус)), и еще такую же форму (99 deg (Градус)), сдвинув её вверх и вправо на 1 рх.

Вот и все. Наш Кот готов. Как видите, в Фотошопе можно создавать подобным образом векторные изображения чего угодно.

Финальный результат

Базовые векторные инструменты в Adobe Photoshop идентичны Illustrator-у. Но, отмечу, для рисования в чистом виде они не созданы. Почему? Во первых, для рисования в векторе есть отличные программы Illustrator или Corel Draw. Вот там присутствует весь необходимый для рисования функционал. Во вторых, скупость настроек в фотошопе для вектора. В Фотошопе имеются только инструменты рисования и некоторые примитивы. Что с одной стороны правильно. Вот отличная программа для растровой графики, а вот отличная программа для векторной. Да, в векторной бывает необходимо поработать с растром, а в растровой бывает нужен вектор. Так лучше связать их и продавать пакетом.

Из картинки видно — все контуры, из которых состоит фигура, остаются внутри слоя. Таким образом фигуру можно быстро и легко изменить. Хотя векторный Adobe Photoshop способен на куда большее. Например, данные эскизы для одного старого сайта я исполнял в векторе. Изображение я кистью с твердыми краями. Затем выделял слой и переводил выделение в контуры. Из контуров делал залитые слои с векторной маской. Таким образом я достигал отсутствующего в фотошопе сглаживания контура.

Инструмент Pen Tool

Первым у нас идет инструмент Pen Tool и его разновидности. Тот же самый набор можно найти в Illustrator-е. Это удобно при переходе из одной программы в другую, не надо переучиваться. Тем более что все векторные инструменты перекочевали в Photoshop прямо из Illustrator-а.

Pen Tool — перо Безье, модулировать им векторный контур проще простого, но для новичков может оказаться весьма сложным занятием. Подробные описания всех приемов управления с направляющими заняли бы отдельную статью или главу. Фактически это самый основной и головной инструмент модулирования фигур и контуров в векторе. И, что удобно, одинаковый во всех векторных программах.

Попробуем изобразить пару контуров. Выберите инструмент Pen Tool, и следите чтобы в настройках инструмента у вас стояла опция Path. Не то чтобы это было особенно важно, но если вместо Path там будет Shape Layer, то вы будете рисовать заливками с векторной маской, а не просто контурами. Подробнее об этих режимах я написал в статье Shape Layers, Path и Fill Pixel в Фотошопе.

Теперь кликните в любом месте. Когда вы кликнули, у вас появилась ключевая точка (якорь, ключик, штучка, название не имеет значения). Протяните мышь в любую сторону, продолжая зажимать кнопку. Если все правильно, вы увидите направляющие.

Кликните в любом другом месте. Вы увидите как от первой точки к второй протянулась линия. Начинайте отводить мышку, не отпуская клавишу. Ваш контур формируется в зависимости от того, как вы выставите направляющие ко второй ключевой точке.

Понять в какой зависимости от чего строятся линии в зависимости от направляющих пожалуй самое базовое понимание векторной графики. На панельке настроек векторных инструментов у Pen Tool есть одна интересная настройка — Auto Add/Delete. Это фактически автоматизированные Add и Delete Anchor Point Tools о которых речь пойдет дальше. Кликните по этой галочке и ваша кисть сможет прямо во время рисования добавлять точки на уже отрисованные контуры и удалять ненужные точки. Вы сможете делать это прямо во время рисования контура, а не после. И для этого не придется переключаться на бесполезные Add и Delete Anchor Point Tools

Freeform Pen Tool

Если для работы с Pen Tool необходимо понять принципы построения векторных кривых, то Freeform Pen Tool — инструмент, свободный от всяких правил и принципов. Просто кликайте по нему и рисуйте контур, так как вы рисовали бы обычной кистью. Идеальный круг или праздник геометрических форм им конечно не изобразить, а вот кляксу вполне. Этот инструмент подойдет для создания коллекций фигур в индустриальном стиле. Рисовать кляксы им самое то. Ну а если мастерство рисования доведено до совершенства, то… думаю лучше использовать программу Illustrator, если конечно вы не из тех, кто для развлечения ваяет шедевры в MS Paint (:

У инструмента Freeform Pen Tool пожалуй есть ещё одна интересная настройка. В панели настроек Freeform Pen Tool есть галочка Magnetic. Это спрятанный аналог инструмента Magnetic Lasso Tool. Работает точно так же. Просто включите эту галочку. Подведите курсор к какому-то четко выраженному объекту, с высококонтрастной кромкой и начинайте обводить. Конечно, идеальной геометрии ждать от этого инструмента не нужно.

Add Anchor Point Tool и Delete Anchor Point Tool

Add Anchor Point Tool — тот инструмент добавляет на уже отрисованный контур дополнительные точки, для изменения или коррекции формы контура. Просто нарисуйте контур, затем переключитесь на этот инструмент и поставьте не хватающие узелки в нужных вам местах. Для чего это нужно? Ну может вам необходимо поставить побольше точек, что бы контур был больше похож на то что вам нужно.

Delete Anchor Point Tool — соответственно данный инструмент удаляет лишние точки векторной кривой. Область применения этого инструмента та же что и у Add Anchor Point Tool, только в случае уменьшения точек линия контура становится по понятным причинам более ровной и мягкой.

Convert Point Tool

Этот инструмент помогает в редактировании направляющих точки кривой. При нажатии на точку инструмент сбрасывает направляющие. Удерживая кнопку мыши, отводим мышку в сторону. Так мы изменяем формы и направление направляющих, против их первоначального значения. А если зацепить инструментом Convert Point Tool одну из направляющих, можно придать ей независимое направление.

И ещё раз. Вы захватываетесь инструментом Convert Point Tool, за точку. От такой близости у точки сбрасываются направляющие. Не отпуская кнопку мыши, отводите мышь в сторону, выстраивая новые направляющие. А при желании, можете захватить за одну из направляющих и настроить её в индивидуальном порядке. А теперь обсудим детали.

Выпадающее меню векторных инструментов

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

Delete Anchor Point

Все очень просто. Кликаете по непонравившейся точке и удаляете её. Мне так даже проще чем инструментом Delete Anchor Point Tool. Тем более если такая точка всего одна. Эта опция меню сменная. Сейчас там Delete Anchor Point, потому что я подвел мышку ровно к точке. Если кликнуть мышкой по любому месту контура Delete сменится на Add Anchor Point, то есть речь идет о добавлении новой точки на контур.

Create Vector Mask

Является шорткатом на опцию Layer > Vector Mask > Current Path Что делает эта опция? Создает векторную маску конечно. Сейчас я покажу как это делается. Поместите на палитру какое-нибудь фото. Я например выбрал фотографию своего попугая Чучи. Контур должен быть виден. Сбрасывать его нельзя. Поместите фото прямо под контур или контур под фото. Или нарисуйте новый контур именно так, как вам хочется. Теперь нажимаем на Create Vector Mask и получаем результат! Векторный контур превратился в векторную маску. А попугай Чуча в кружок!

Delete Vector Mask

Название говорит само за себя. Попугай Чуча превращается в прямоугольную фотографию. Маска уходит в небытие. Контур становится обычным контуром.

Define Custom Shape

Контур превращается в векторную фигуру-заготовку. То есть, данная опция сохраняет контур, помещает его в специальную библиотеку, откуда его далее можно всегда достать и не хитро воспользоваться. Просто впишите название вашего контура.

И найдите его по адресу инструмента Custom Shape Tool в меню настроек инструмента среди других зверюшек и стрелочек.

Make Selection — Эта опция из вектора создает выделение. Разберем поподробнее что предлагает нам меню.

Feather Radius — радиус размытия. Если вы свое выделение далее зальете, края будут рызмытыми. Чем больше значение тем больше размытие. Внимание на экран:

Anti-aliased — смягчает края. Без функции Anti-aliased заливка будет залита попиксельно. Функция Anti-aliased создает на краях заливки полутона.

Fill Path

Дальний родственник опции Edit > Fill. Но в отличии от последней имеет пару апгрейдов. У него есть идентичная графа Content, что в целом значит, чем заливать то будем? Есть графа Blending, отвечающая за режимы наложения. А так же важная галочка Preserve transparency. При выставлении этой галочки заливка учитывает прозрачные места и не заливает их.

Stroke Path

Подчеркивает выделение. Причем подчеркивает чем угодно. В меню Stroke Path можно выбрать любой инструмент, хоть резинку, хоть блендер, хоть кисть. Чаще всего конечно нужна кисть. Stroke Path пользуется настройками инструмента, которые выставленны в данный момент. Например если последний раз вы рисовали твердой кистью 10 px, то подчеркиваться контур будет именно ею. Опция Simulate Pressure симулирует давление.

Clipping Path

Разновидность маскирования в фотошопе и не только. Наиболее часто Clipping Path применяют при отделении заднего фона от объекта. Не поверите, но на западе существуют целые студии занимающиеся этой работой, а работники маскировщики называются — специалисты по маскированию. Вот уж специалисты так специалисты! По сути, Clippping Path крепит контур к растровому изображению. Нарисуйте, например, контур на семейной фотографии, или выделите контуром объект. Сохраните в формате PDF и откройте в Illustratore. Ваше изображение помещено внутрь контура, точно так же как при векторной маске. По правде говоря этот Clipping Path является для меня черным пятном. Загадочность Clipping Path заставила меня подробным образом изучить эту опцию, о чем я и написал в своей статье Что такое Clipping Path

Free Transform Path

Изменяет форму контура или отдельной группы точек. Изменение формы объекта в представлении не нуждается. И без того интуитивно ясно как это делается. Квадратик крутится во все стороны, зажимая уголки меняется размер. А при зажатии клавиши Ctrl меняется перспектива фигуры.

Автор:

Дмитрий Веровски

Арт директор в Red Bear Agency. Мои социальные сети: Вконтакте Фейсбук Инстаграм

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

Создание векторного изображения в Photoshop

В качестве подопытного имеем вот такой логотип всем известной социальной сети:

Для создания векторного изображения нам вначале нужно создать рабочий контур, а потом из этого контура определить произвольную фигуру, которую можно будет растягивать как угодно без потери качества.

Для начала обведем логотип контуром при помощи инструмента «Перо».

Существует одно правило: чем меньше опорных точек в контуре, тем качественнее получится фигура.

Сейчас покажем, как этого добиться.

Берем Перо и ставим первую опорную точку. Ее желательно ставить в угол. Внутренний или внешний – неважно.

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

Далее зажимаем ALT и подводим курсор к той точке, за которую тянули (курсор при этом превратится в уголок) нажимаем кнопку мыши и тянем обратно. Луч должен полностью уйти в опорную точку. Того же результата можно добиться, просто кликнув по точке с зажатым

ALT.

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

Контур готов. Теперь нажимаем правой кнопкой мыши внутри контура и выбираем пункт «Определить произвольную фигуру».

В открывшемся окне даем какое-нибудь название новой фигуре и нажимаем ОК.

Векторная фигура готова, можно пользоваться. Найти ее можно в группе инструментов «Фигуры».

Набор, содержащий наш новый элемент, находится на верхней панели инструментов.

Решено было для проверки нарисовать огромную фигуру. Оцените четкость линий. Это часть клюва птички. Размеры изображения – на скриншоте.

Это был единственно верный способ создать векторное изображение в Фотошопе.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Как превратить рисунок в вектор в Photoshop (9 шагов)

Как некоторые дизайнеры так хорошо рисуют на цифре, что некоторые иллюстрации выглядят просто идеально? Что ж, правда, многие из них нарисованы на бумаге и переработаны в дизайнерских программах!

Мне всегда было трудно рисовать в цифровом формате, но, к счастью, я научился этому трюку достаточно быстро, чтобы сэкономить массу времени и энергии. Так в чем же хитрость?

В этой статье вы узнаете, как преобразовать ваш удивительный рисунок от руки в вектор в Photoshop и как сохранить его для будущего использования.

Хорошие новости для поклонников Adobe Illustrator! Любые векторные фигуры, созданные в Photoshop, можно копировать и вставлять в Illustrator, так что вы тоже можете использовать этот процесс!

Дополнительный бонус! Если вам нравятся значки из этого урока, вы можете скачать эти бесплатные нарисованные от руки значки , которые я создал и использовать их в своем дизайне!

Содержание

• Как превратить рисунок в вектор: пошаговое руководство
• Часто задаваемые вопросы
  • Где найти пользовательские формы в Photoshop?
  • Как изменить цвет пользовательских фигур в Photoshop?
  • Могу ли я заполнить линии в Photoshop?
• Заключение

Как превратить рисунок в вектор: пошаговое руководство шаги ниже.

Примечание. Скриншоты взяты из версии Adobe Photoshop CC 2021 для Mac. Windows или другие версии могут выглядеть немного иначе.

Шаг 1: Нарисуйте фигуры на бумаге. Чем больше, тем лучше. Если вы рисуете несколько фигур, хорошей идеей будет оставить между ними пустое пространство, потому что у вас еще есть работа в Photoshop.

Советы: лучше всего подойдут темные линии на светлой бумаге – черный на белом идеален!

Шаг 2: Отсканируйте свой прекрасный рисунок на компьютер. Если у вас нет сканера, сделайте хороший снимок. Откройте изображение в фотошопе.

Шаг 3: Выберите инструмент Perspective Crop Tool на панели инструментов, обычно он находится в подменю инструмента Crop Tool.

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

Ваше изображение выпрямится автоматически.

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

Шаг 4: Перейти в верхнее меню Изображение > Настройки > Яркость/Контрастность . Вы можете увеличить как яркость, так и контрастность, что помогает уменьшить желтое или неравномерное освещение фона и сделать значки более яркими.

Иногда недостаточно только регулировки яркости и контрастности. Если это ваш случай, используйте Уровни , чтобы осветлить белые и затемнить черные. Перейти к Изображение > Настройки > Уровни .

В окне настройки уровней вы можете выбрать инструмент «Пипетка» справа и щелкнуть белую область на холсте, чтобы установить белую точку, и переместить ползунок, чтобы настроить освещение рисунка.

Если ваш фон по-прежнему недостаточно белый, вы можете выбрать инструмент «Пипетка» слева и щелкнуть по темной точке, чтобы выбрать образец цвета, переместить ползунок, чтобы отрегулировать уровни.

Цель — сделать фон как можно более белым, а штрихи ваших иконок — видимыми.

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

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

Шаг 5: Выберите значки по отдельности и используйте инструмент Rectangular Marquee Tool , чтобы нарисовать вокруг значка. Например, я собираюсь выбрать эту стрелку.

Шаг 6: Скопируйте значок с помощью сочетаний клавиш Command + C и откройте новый документ, нажав Command + N . Поскольку вы только что скопировали что-то в Photoshop, новое окно будет создано с размером скопированного объекта.

Когда будет создан новый новый документ, нажмите Command + V , чтобы вставить только что скопированный значок.

Шаг 7: Выберите инструмент Magic Wand Tool , чтобы щелкнуть часть значка.

Установить допуск 9от 0012 до 100 . Настройки допусков можно найти на панели параметров в верхней части экрана (вы можете включать и выключать их в меню Windows).

Шаг 8: Откройте панель «Контуры». Перейдите к Window > Paths , щелкните значок раскрывающегося списка и выберите Make Work Path .

Установите допуск на 0,5 пикселей. 0,5 — это наименьшее значение, которое вы можете ввести здесь, при использовании этого параметра путь будет точно соответствовать исходным линиям вашего значка.

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

Шаг 9: Теперь вы можете превратить контур в пользовательскую форму с помощью главного меню: Редактировать > Определить пользовательскую форму . Дайте вашей новой форме имя, и все!

Часто задаваемые вопросы

Где найти пользовательские фигуры в Photoshop?

Вы можете найти созданный вами вектор или существующую пользовательскую форму, выбрав Custom Shape Tool на панели инструментов, обычно в подменю Rectangular Tool.

Если у вас выбран инструмент Custom Shape Tool, вы можете найти фигуры на верхней панели инструментов и применить их к своему дизайну.

Как изменить цвет пользовательских фигур в Photoshop?

Работает так же, как изменение цвета любых других фигур. Просто выделите фигуру и выберите цвет на панели «Образцы», или вы можете добавить наложение цвета к своему слою.

Могу ли я заполнить формы линий в Photoshop?

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

Когда вы обводите изображение с помощью инструмента «Перо», оно, скорее всего, потеряет ощущение нарисованного от руки.

Заключение 

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

О Джун

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

Как сделать векторные линии в Photoshop CS5 | Малый бизнес

Дэвид Видмарк

Векторные линии ведут себя иначе, чем другие линии в последней версии Photoshop CS5. Независимо от того, насколько далеко вы увеличиваете документ или насколько сильно расширяете векторную линию, линия остается неизменной. В отличие от других линий, ширина векторных линий не изменяется и не становится пиксельной. Это связано с тем, что векторы создаются с использованием математических уравнений, а не с использованием окрашенных пикселей, как в растровых или растровых изображениях. Используйте Photoshop Pen Tool или Freeform Pen Tool, чтобы рисовать векторные линии в Photoshop.

Прямые линии

1. Запустите Photoshop и создайте новый документ, нажав «Ctrl-N» на клавиатуре. Выберите «Перо» на панели инструментов.

2. Нарисуйте прямую линию, щелкнув в любом месте документа, чтобы создать опорную точку, затем переместите перо в другое место на документе и щелкните еще раз. Между двумя опорными точками образуется прямая линия.

3. При необходимости добавьте к линии дополнительные сегменты, щелкнув документ, чтобы добавить дополнительные опорные точки.

4. При необходимости закройте контур, наведя инструмент на первую опорную точку. Когда рядом с курсором появится «o», щелкните мышью. Теперь вы можете нарисовать новую линию с помощью инструмента «Перо», которая будет отделена от последней линии, которую вы нарисовали.

Изогнутые линии

1. Выберите инструмент «Перо» на панели инструментов. Поместите инструмент на документ, затем нажмите и удерживайте кнопку мыши. Перетащите мышь вниз, прежде чем отпустить кнопку мыши. Появится линия наклона, которая определяет направление и размер кривой, которая появится.

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

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

1. Выберите инструмент «Перо произвольной формы» на панели инструментов, чтобы рисовать векторы от руки. Перетащите инструмент по холсту, чтобы нарисовать линию. Когда вы отпустите кнопку мыши, линия остановится. Удерживайте кнопку мыши еще раз, чтобы начать новую строку.

2. Выберите «Инструмент «Добавить опорную точку» на панели инструментов, чтобы добавить опорные точки к любой линии, нарисованной с помощью инструмента «Перо» или «Перо произвольной формы». Щелкните в любом месте на линии, чтобы добавить опорную точку. Нажмите и перетащите инструмент, чтобы создать линию наклона в точке привязки.

3. Выберите «Инструмент «Удалить опорную точку» на панели инструментов, чтобы удалить опорные точки с векторных линий. Нажмите и удерживайте кнопку мыши над пустым местом на холсте, затем перетащите инструмент по линии, чтобы показать опорные точки. Щелкните опорную точку. Точка привязки удаляется, и линия автоматически перерисовывается.

Ссылки

• Adobe Design Center: Photoshop CS5 Tutorial: Raster & Vector
• Adobe: Photoshope CS5: рисование кривых с помощью инструмента «Перо»
• Adobe: Photoshop CS5: о рисовании
• Adobe: Photoshope CS5: добавление или удаление опорных точек

Writer Bio

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