Содержание

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

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

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

Дата: 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.


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


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


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

ОК.

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

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

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

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

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

Векторные инструменты рисования в Фотошопе

Статьи Теория

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

Базовые векторные инструменты в 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 меняется перспектива фигуры.

WRITTEN BY

TAGS

Adobe Photoshop вектор в Фотошопе инструменты

Photoshop: основные сведения об изображениях

Руководство пользователя Отмена

Поиск

  1. Руководство пользователя Photoshop
  2. Введение в Photoshop
    1. Мечтайте об этом. Сделайте это.
    2. Новые возможности Photoshop
    3. Редактирование первой фотографии
    4. Создание документов
    5. Photoshop | Часто задаваемые вопросы
    6. Системные требования Photoshop
    7. Перенос наборов настроек, операций и настроек
    8. Знакомство с Photoshop
  3. Photoshop и другие продукты и услуги Adobe
    1. Работа с графическим объектом Illustrator в Photoshop
    2. Работа с файлами Photoshop в InDesign
    3. Материалы Substance 3D для Photoshop
    4. Photoshop и Adobe Stock
    5. Работа со встроенным расширением Capture в Photoshop
    6. Библиотеки Creative Cloud Libraries
    7. Библиотеки Creative Cloud в Photoshop
    8. Работа в Photoshop с использованием Touch Bar
    9. Сетка и направляющие
    10. Создание операций
    11. Отмена и история операций
  4. Photoshop на iPad
    1. Photoshop на iPad | Общие вопросы
    2. Знакомство с рабочей средой
    3. Системные требования | Photoshop на iPad
    4. Создание, открытие и экспорт документов
    5. Добавление фотографий
    6. Работа со слоями
    7. Рисование и раскрашивание кистями
    8. Выделение участков и добавление масок
    9. Ретуширование композиций
    10. Работа с корректирующими слоями
    11. Настройка тональности композиции с помощью слоя «Кривые»
    12. Применение операций трансформирования
    13. Обрезка и поворот композиций
    14. Поворот, панорамирование, масштабирование и восстановление холста
    15. Работа с текстовыми слоями
    16. Работа с Photoshop и Lightroom
    17. Получение отсутствующих шрифтов в Photoshop на iPad
    18. Японский текст в Photoshop на iPad
    19. Управление параметрами приложения
    20. Сенсорные ярлыки и жесты
    21. Комбинации клавиш
    22. Изменение размера изображения
    23. Прямая трансляция творческого процесса в Photoshop на iPad
    24. Исправление недостатков с помощью восстанавливающей кисти
    25. Создание кистей в Capture и их использование в Photoshop
    26. Работа с файлами Camera Raw
    27. Создание и использование смарт-объектов
    28. Коррекция экспозиции изображений с помощью инструментов «Осветлитель» и «Затемнитель»
  5. Бета-версия веб-приложения Photoshop
    1. Часто задаваемые вопросы | Бета-версия веб-приложения Photoshop 
    2. Общие сведения о рабочей среде
    3. Системные требования | Бета-версия веб-приложения Photoshop
    4. Комбинации клавиш | Бета-версия веб-приложения Photoshop
    5. Поддерживаемые форматы файлов | Бета-вервия веб-приложения Photoshop
    6. Открытие облачных документов и работа с ними
    7. Совместная работа с заинтересованными сторонами
    8. Ограниченные возможности редактирования облачных документов
  6. Облачные документы
    1. Облачные документы Photoshop | Часто задаваемые вопросы
    2. Облачные документы Photoshop | Вопросы о рабочем процессе
    3. Работа с облачными документами и управление ими в Photoshop
    4. Обновление облачного хранилища для Photoshop
    5. Не удается создать или сохранить облачный документ
    6. Устранение ошибок с облачными документами Photoshop
    7. Сбор журналов синхронизации облачных документов
    8. Общий доступ к облачным документам и их редактирование
    9. Общий доступ к файлам и комментирование в приложении
  7. Рабочая среда
    1. Основные сведения о рабочей среде
    2. Более быстрое обучение благодаря панели «Новые возможности» в Photoshop
    3. Создание документов
    4. Работа в Photoshop с использованием Touch Bar
    5. Галерея инструментов
    6. Установки производительности
    7. Использование инструментов
    8. Сенсорные жесты
    9. Возможности работы с сенсорными жестами и настраиваемые рабочие среды
    10. Обзорные версии технологии
    11. Метаданные и комментарии
    12. Комбинации клавиш по умолчанию
    13. Возможности работы с сенсорными жестами и настраиваемые рабочие среды
    14. Помещение изображений Photoshop в другие приложения
    15. Установки
    16. Комбинации клавиш по умолчанию
    17. Линейки
    18. Отображение или скрытие непечатных вспомогательных элементов
    19. Указание колонок для изображения
    20. Отмена и история операций
    21. Панели и меню
    22. Помещение файлов
    23. Позиционирование элементов с привязкой
    24. Позиционирование с помощью инструмента «Линейка»
    25. Наборы настроек
    26. Настройка комбинаций клавиш
    27. Сетка и направляющие
  8. Разработка содержимого для Интернета, экрана и приложений
    1. Photoshop для дизайна
    2. Монтажные области
    3. Просмотр на устройстве
    4. Копирование CSS из слоев
    5. Разделение веб-страниц на фрагменты
    6. Параметры HTML для фрагментов
    7. Изменение компоновки фрагментов
    8. Работа с веб-графикой
    9. Создание веб-фотогалерей
  9. Основные сведения об изображениях и работе с цветом
    1. Изменение размера изображений
    2. Работа с растровыми и векторными изображениями
    3. Размер и разрешение изображения
    4. Импорт изображений из камер и сканеров
    5. Создание, открытие и импорт изображений
    6. Просмотр изображений
    7. Ошибка «Недопустимый маркер JPEG» | Открытие изображений
    8. Просмотр нескольких изображений
    9. Настройка палитр цветов и образцов цвета
    10. HDR-изображения
    11. Подбор цветов на изображении
    12. Преобразование между цветовыми режимами
    13. Цветовые режимы
    14. Стирание фрагментов изображения
    15. Режимы наложения
    16. Выбор цветов
    17. Внесение изменений в таблицы индексированных цветов
    18. Информация об изображениях
    19. Фильтры искажения недоступны
    20. Сведения о цвете
    21. Цветные и монохромные коррекции с помощью каналов
    22. Выбор цветов на панелях «Цвет» и «Образцы»
    23. Образец
    24. Цветовой режим (или режим изображения)
    25. Цветовой оттенок
    26. Добавление изменения цветового режима в операцию
    27. Добавление образцов из CSS- и SVG-файлов HTML
    28. Битовая глубина и установки
  10. Слои
    1. Основные сведения о слоях
    2. Обратимое редактирование
    3. Создание слоев и групп и управление ими
    4. Выделение, группировка и связывание слоев
    5. Помещение изображений в кадры
    6. Непрозрачность и наложение слоев
    7. Слои-маски
    8. Применение смарт-фильтров
    9. Композиции слоев
    10. Перемещение, упорядочение и блокировка слоев
    11. Маскирование слоев при помощи векторных масок
    12. Управление слоями и группами
    13. Эффекты и стили слоев
    14. Редактирование слоев-масок
    15. Извлечение ресурсов
    16. Отображение слоев с помощью обтравочных масок
    17. Формирование графических ресурсов из слоев
    18. Работа со смарт-объектами
    19. Режимы наложения
    20. Объединение нескольких фрагментов в одно изображение
    21. Объединение изображений с помощью функции «Автоналожение слоев»
    22. Выравнивание и распределение слоев
    23. Копирование CSS из слоев
    24. Загрузка выделенных областей на основе границ слоя или слоя-маски
    25. Просвечивание для отображения содержимого других слоев
    26. Слой
    27. Сведение
    28. Совмещенные изображения
    29. Фон
  11. Выделения
    1. Рабочая среда «Выделение и маска»
    2. Быстрое выделение областей
    3. Начало работы с выделениями
    4. Выделение при помощи группы инструментов «Область»
    5. Выделение при помощи инструментов группы «Лассо»
    6. Выбор цветового диапазона в изображении
    7. Настройка выделения пикселей
    8. Преобразование между контурами и границами выделенной области
    9. Основы работы с каналами
    10. Перемещение, копирование и удаление выделенных пикселей
    11. Создание временной быстрой маски
    12. Сохранение выделенных областей и масок альфа-каналов
    13. Выбор областей фокусировки в изображении
    14. Дублирование, разделение и объединение каналов
    15. Вычисление каналов
    16. Выделение
    17. Ограничительная рамка
  12. Коррекции изображений
    1. Деформация перспективы
    2. Уменьшение размытия в результате движения камеры
    3. Примеры использования инструмента «Восстанавливающая кисть»
    4. Экспорт таблиц поиска цвета
    5. Корректировка резкости и размытия изображения
    6. Общие сведения о цветокоррекции
    7. Применение настройки «Яркость/Контрастность»
    8. Коррекция деталей в тенях и на светлых участках
    9. Корректировка «Уровни»
    10. Коррекция тона и насыщенности
    11. Коррекция сочности
    12. Настройка насыщенности цвета в областях изображения
    13. Быстрая коррекция тона
    14. Применение специальных цветовых эффектов к изображениям
    15. Улучшение изображения при помощи корректировки цветового баланса
    16. HDR-изображения
    17. Просмотр гистограмм и значений пикселей
    18. Подбор цветов на изображении
    19. Кадрирование и выпрямление фотографий
    20. Преобразование цветного изображения в черно-белое
    21. Корректирующие слои и слои-заливки
    22. Корректировка «Кривые»
    23. Режимы наложения
    24. Целевая подготовка изображений для печатной машины
    25. Коррекция цвета и тона с помощью пипеток «Уровни» и «Кривые»
    26. Коррекция экспозиции и тонирования HDR
    27. Фильтр
    28. Размытие
    29. Осветление или затемнение областей изображения
    30. Избирательная корректировка цвета
    31. Замена цветов объекта
  13. Adobe Camera Raw
    1. Системные требования Camera Raw
    2. Новые возможности Camera Raw
    3. Введение в Camera Raw
    4. Создание панорам
    5. Поддерживаемые объективы
    6. Виньетирование, зернистость и удаление дымки в Camera Raw
    7. Комбинации клавиш по умолчанию
    8. Автоматическая коррекция перспективы в Camera Raw
    9. Обратимое редактирование в Camera Raw
    10. Инструмент «Радиальный фильтр» в Camera Raw
    11. Управление настройками Camera Raw
    12. Обработка, сохранение и открытие изображений в Camera Raw
    13. Совершенствование изображений с улучшенным инструментом «Удаление точек» в Camera Raw
    14. Поворот, обрезка и изменение изображений
    15. Корректировка цветопередачи в Camera Raw
    16. Краткий обзор функций | Adobe Camera Raw | Выпуски за 2018 г.
    17. Обзор новых возможностей
    18. Версии обработки в Camera Raw
    19. Внесение локальных корректировок в Camera Raw
  14. Исправление и восстановление изображений
    1. Удаление объектов с фотографий с помощью функции «Заливка с учетом содержимого»
    2. Заплатка и перемещение с учетом содержимого
    3. Ретуширование и исправление фотографий
    4. Коррекция искажений изображения и шума
    5. Основные этапы устранения неполадок для решения большинства проблем
  15. Преобразование изображений
    1. Трансформирование объектов
    2. Настройка кадрирования, поворотов и холста
    3. Кадрирование и выпрямление фотографий
    4. Создание и редактирование панорамных изображений
    5. Деформация изображений, фигур и контуров
    6. Перспектива
    7. Использование фильтра «Пластика»
    8. Масштаб с учетом содержимого
    9. Трансформирование изображений, фигур и контуров
    10. Деформация
    11. Трансформирование
    12. Панорама
  16. Рисование и живопись
    1. Рисование симметричных орнаментов
    2. Варианты рисования прямоугольника и изменения обводки
    3. Сведения о рисовании
    4. Рисование и редактирование фигур
    5. Инструменты рисования красками
    6. Создание и изменение кистей
    7. Режимы наложения
    8. Добавление цвета в контуры
    9. Редактирование контуров
    10. Рисование с помощью микс-кисти
    11. Наборы настроек кистей
    12. Градиенты
    13. Градиентная интерполяция
    14. Заливка и обводка выделенных областей, слоев и контуров
    15. Рисование с помощью группы инструментов «Перо»
    16. Создание узоров
    17. Создание узора с помощью фильтра «Конструктор узоров»
    18. Управление контурами
    19. Управление библиотеками узоров и наборами настроек
    20. Рисование при помощи графического планшета
    21. Создание текстурированных кистей
    22. Добавление динамических элементов к кистям
    23. Градиент
    24. Рисование стилизованных обводок с помощью архивной художественной кисти
    25. Рисование с помощью узора
    26. Синхронизация наборов настроек на нескольких устройствах
  17. Текст
    1. Добавление и редактирование текста
    2. Универсальный текстовый редактор
    3. Работа со шрифтами OpenType SVG
    4. Форматирование символов
    5. Форматирование абзацев
    6. Создание эффектов текста
    7. Редактирование текста
    8. Интерлиньяж и межбуквенные интервалы
    9. Шрифт для арабского языка и иврита
    10. Шрифты
    11. Поиск и устранение неполадок, связанных со шрифтами
    12. Азиатский текст
    13. Создание текста
    14. Ошибка Text Engine при использовании инструмента «Текст» в Photoshop | Windows 8
  18. Видео и анимация
    1. Видеомонтаж в Photoshop
    2. Редактирование слоев видео и анимации
    3. Общие сведения о видео и анимации
    4. Предварительный просмотр видео и анимации
    5. Рисование кадров в видеослоях
    6. Импорт видеофайлов и последовательностей изображений
    7. Создание анимации кадров
    8. 3D-анимация Creative Cloud (предварительная версия)
    9. Создание анимаций по временной шкале
    10. Создание изображений для видео
  19. Фильтры и эффекты
    1. Использование фильтра «Пластика»
    2. Использование эффектов группы «Галерея размытия»
    3. Основные сведения о фильтрах
    4. Справочник по эффектам фильтров
    5. Добавление эффектов освещения
    6. Использование фильтра «Адаптивный широкий угол»
    7. Фильтр «Масляная краска»
    8. Эффекты и стили слоев
    9. Применение определенных фильтров
    10. Растушевка областей изображения
  20. Сохранение и экспорт
    1. Сохранение файлов в Photoshop
    2. Экспорт файлов в Photoshop
    3. Поддерживаемые форматы файлов
    4. Сохранение файлов в других графических форматах
    5. Перемещение проектов между Photoshop и Illustrator
    6. Сохранение и экспорт видео и анимации
    7. Сохранение файлов PDF
    8. Защита авторских прав Digimarc
  21. Печать
    1. Печать 3D-объектов
    2. Печать через Photoshop
    3. Печать и управление цветом
    4. Контрольные листы и PDF-презентации
    5. Печать фотографий в новом макете раскладки изображений
    6. Печать плашечных цветов
    7. Дуплексы
    8. Печать изображений на печатной машине
    9. Улучшение цветной печати в Photoshop
    10. Устранение неполадок при печати | Photoshop
  22. Автоматизация
    1. Создание операций
    2. Создание изображений, управляемых данными
    3. Сценарии
    4. Обработка пакета файлов
    5. Воспроизведение операций и управление ими
    6. Добавление условных операций
    7. Сведения об операциях и панели «Операции»
    8. Запись инструментов в операциях
    9. Добавление изменения цветового режима в операцию
    10. Набор средств разработки пользовательского интерфейса Photoshop для внешних модулей и сценариев
  23. Управление цветом
    1. Основные сведения об управлении цветом
    2. Обеспечение точной цветопередачи
    3. Настройки цвета
    4. Работа с цветовыми профилями
    5. Управление цветом документов для просмотра в Интернете
    6. Управление цветом при печати документов
    7. Управление цветом импортированных изображений
    8. Выполнение цветопробы
  24. Подлинность контента
    1. Подробнее об учетных данных для содержимого
    2. Идентичность и происхождение токенов NFT
    3. Подключение учетных записей для творческой атрибуции
  25. 3D-объекты и технические изображения
    1. 3D в Photoshop | Распространенные вопросы об упраздненных 3D-функциях
    2. 3D-анимация Creative Cloud (предварительная версия)
    3. Печать 3D-объектов
    4. 3D-рисование
    5. Усовершенствование панели «3D» | Photoshop
    6. Основные понятия и инструменты для работы с 3D-графикой
    7. Рендеринг и сохранение 3D-объектов
    8. Создание 3D-объектов и анимаций
    9. Стеки изображений
    10. Процесс работы с 3D-графикой
    11. Измерения
    12. Файлы формата DICOM
    13. Photoshop и MATLAB
    14. Подсчет объектов на изображении
    15. Объединение и преобразование 3D-объектов
    16. Редактирование 3D-текстур
    17. Коррекция экспозиции и тонирования HDR
    18. Настройки панели «3D»

Узнайте о различиях растровых и векторных изображений и стандартных вариантах их использования.

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

Растровые изображения

Векторные изображения

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

Дополнительные сведения о добавлении векторных элементов дизайна в композицию см. в статье Работа с инструментами «Фигура».

Факторы качества, влияющие на сочетание растровых и векторных элементов

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

На качество итогового изображения влияют следующие факторы.

  • Прозрачность. Многочисленные эффекты реализуются в изображениях с помощью частично прозрачных пикселей. Если изображение содержит прозрачные области, перед экспортом или печатью Photoshop выполняет процесс под названиемсведение. Как правило, процесс сведения по умолчанию работает превосходно. Но если изображение содержит сложные пересекающиеся области и должно быть выведено с высоким разрешением, то может потребоваться контрольный просмотр результатов сведения.
  • Разрешение изображения. Количество пикселей на дюйм (PPI) в растровом изображении. Использование слишком низкого разрешения при подготовке изображения для печати приводит к созданию черновика — изображения с крупными, похожими на пятна пикселями. Использование слишком высокого разрешения (когда размер пикселей меньше минимального размера точки, которая может быть воспроизведена устройством вывода) увеличивает размер файла без повышения качества итогового изображения и замедляет процесс печати.
  • Разрешение принтера и линиатура растра. Число точек на дюйм (DPI) и число линий на дюйм (LPI) в полутоновом растре. Соотношение между разрешением изображения, разрешением принтера и линиатурой растра определяет качество детализации отпечатанного изображения.

Похожие темы

  • Растровые и векторные изображения
  • Цветовые режимы
  • Основы работы с каналами
  • Битовая глубина и установки
  • Сведения о HDR-изображениях

Вход в учетную запись

Войти

Управление учетной записью

Как создать векторную графику в Photoshop?

Примечание. Этот ответ был первоначально написан еще в 2013 году, когда SVG был «более новым» вариантом в Photoshop и до того, как Photoshop имел возможность «экспортировать активы». Поддержка SVG выросла за последнее десятилетие. Хотя я по-прежнему считаю, что Photoshop , а не , является подходящим инструментом, если вам нужно что-то большее, чем плоские значки в векторной форме, можно экспортировать файлы SVG, которые на 100% являются векторами из Photoshop — см. Приложение в конце ответа. Я бы посоветовал пользователям попробовать экспортировать векторные конструкции различной сложности в SVG, чтобы посмотреть, что может быть сохранено, а что нет при экспорте, если формат SVG вообще подходит для их рабочего процесса (что может быть не так).


TL;DR: За исключением элементарного экспорта SVG *(см. приложение ниже)…. Photoshop не может создать истинных, 100% независимых от разрешения, векторных файлов в любых любых другой формат.

Это очень распространенное заблуждение.


Думайте об этом как о машине. — Можно ли ездить на Toyota Prius на четырех колесах? Конечно, вы можете ! Будет ли он делать все то, что может Jeep Wrangler? Черт возьми нет. есть причина вам нужно , чтобы использовать полноприводный автомобиль, чтобы ездить на 4 колесах, точно так же, как есть причина , вам нужно , чтобы использовать векторное приложение для создания векторных файлов.


*(За исключением SVG — см. приложение ниже)

Независимо от того, как вы создаете файл и сохраняете его, Photoshop всегда сохраняет как векторную, так и растровую информацию. Файлы Photoshop всегда являются растровыми файлами , которые могут также содержать или не содержать встроенные векторные данные. их никогда векторных файлов.

Истинный векторный файл содержит нуль растровых данных и на 100% не зависит от разрешения. Это означает, что файл не привязан ни к одному параметру PPI/DPI .

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

Такие приложения, как Illustrator, Inkscape, CorelDraw, Xara, Sketch и т. д., фактически могут создавать файлы, содержащие только векторные данные, не зависящие от разрешения на 100 %. Дело не в том, что «люди предпочитают» использовать векторное приложение. требуется , если вы хотите получить настоящий векторный файл в конце.


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

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

Когда вы увеличиваете или преобразуете векторный контейнер в Photoshop, Photoshop интерполирует внутренние растровые данные в соответствии с преобразованием. Эта интерполяция не происходит вне Photoshop. Таким образом, после экспорта/сохранения, если кто-то масштабирует что-то вроде Photoshop EPS в InDesign, векторные края будут масштабироваться и оставаться четкими, потому что они векторные, но интерполяция внутренних растровых данных делает , а не происходят вне Photoshop. Таким образом, «битые пиксели» полностью возможны с Photoshop EPS, даже если вы использовали векторные инструменты.

Эта проблема возникает, когда вы сохраняете файл или экспортируете файл Photoshop во все векторные форматы — PDF, EPS, PSD — Photoshop создает растровый файл со встроенными векторными данными . Photoshop , а не создает векторный файл. Это совершенно не похоже на фактическое векторных приложений.


Для производственных целей эта разница может быть в значительной степени несущественной, если вы уже работаете в Photoshop с высоким значением ppi. Но пользователь должен знать, что простое использование векторных инструментов Photoshop и сохранение в формате EPS/PDF не создает векторных файлов с использованием какой-либо доступной в настоящее время версии Photoshop (CC2022 на момент написания этой статьи).


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

  • Связанный: Является ли EPS-файл Photoshop векторным форматом?

* Дополнение относительно SVG:

Были некоторые комментарии относительно SVG от Photoshop. Это возможно экспортировать независимый вектор SVG со 100% разрешением из Photoshop , если конструкция файла верна. Общая конструкция любого такого SVG обычно должна быть довольно рудиментарной и без каких-либо стилей слоев, фильтров, размытия и т. д. SVG работает только , если файлы настолько «базовые», насколько они могут быть, содержащие только плоские заливки/штрихи и без сложных взаимодействий формы или маскирования. Кроме того, может быть другим вопросом, является ли SVG подходящим форматом для любого конкретного метода воспроизведения. Однако, если вы хотите создать что-то, например, плоские, одноцветные, векторные значки, Photoshop может подойти , если при экспорте используется формат SVG. Тем не менее, все еще существуют некоторые серьезные ограничения в отношении того, что может быть создано для жизнеспособного экспорта векторов.

Однако я хотел бы предостеречь… если цель состоит в том, чтобы генерировать настоящие векторные файлы, один на самом деле должен использовать истинное векторное приложение. При этом я люблю Фотошоп и с его помощью конечно можно создать много-много вещей. Это не все для всего. Photoshop также может экспортировать видео… но его возможности меркнут по сравнению со специализированными видеоприложениями, так же как они меркнут по сравнению с векторными приложениями. Если вам нужно надежное, сложно отредактированное и созданное видео, то Photoshop не будет инструментом, который можно использовать вместо чего-то вроде Adobe Premiere. Вы бы использовали Premiere для чего-то большего, чем очень простое редактирование видео, точно так же, как вы должны использовать Illustrator, если вам нужны более надежные векторные файлы.

Как рисовать векторные фигуры в Photoshop?

Photoshop — это в основном программное обеспечение для редактирования растровых изображений, разработанное и опубликованное Adobe Inc., но в Photoshop мы также можем редактировать векторные изображения. Итак, в этой статье мы узнаем, как рисовать различные типы векторных фигур, такие как прямоугольники, круги, квадраты, эллипсы и т. д. Мы также узнаем, как рисовать нашу пользовательскую форму и как использовать форму Pre-Build, предоставленную Photoshop, а затем мы узнаем о некоторых интересных свойствах и настройке векторных фигур.

Векторные инструменты

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

Итак, чтобы использовать этот инструмент, мы должны активировать этот инструмент в Photoshop, нажав U на клавиатуре, или вы можете выбрать параметр векторных фигур на панели инструментов Photoshop. После выбора инструмента, если вы перетащите мышь на холст, удерживая кнопку Левая кнопка мыши затем вы увидите, что форма будет создана. По умолчанию выбрана прямоугольная форма, но вы также можете изменить это. Если вы неоднократно нажимаете shift + U на клавиатуре, вы можете переключаться между различными типами векторных фигур, или если вы нажмете и удержите значок векторных фигур на панели инструментов, откроется небольшое всплывающее окно, в котором вы можете увидеть список различных типов векторных фигур, просто выберите их для использования.

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

  1. Прямоугольные и квадратные формы
  2. Закругленные прямоугольные и квадратные формы
  3. Эллиптические и круглые формы
  4. Однопиксельная линия
  5. Многоугольные формы
  6. Пользовательские формы и библиотека предопределенных векторных форм.

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

Квадратная форма: Квадратная форма представляет собой подформу прямоугольной векторной формы. Если при создании прямоугольной формы удерживать нажатой кнопку shift на клавиатуре, то вы увидите, что вместо прямоугольной формы будет сформирована квадратная форма, как показано на рисунке ниже: Квадратные формы: Скругленная прямоугольная форма — это форма, углы которой не острые, а имеют форму плавной кривой, поэтому она называется скругленной прямоугольной формой. Нажав shift + U повторно вы можете выбрать эту форму. На изображении ниже вы можете увидеть пример закругленной прямоугольной векторной формы:

Закругленная квадратная форма: Закругленная квадратная форма — еще один вариант закругленной прямоугольной формы. Если вы будете удерживать нажатой кнопку shift на клавиатуре при создании закругленной прямоугольной формы, вы увидите, что вместо закругленной прямоугольной формы будет сформирована закругленная квадратная форма, как показано на рисунке ниже:

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

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

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

Линия одиночного пикселя: Эта опция просто создаст линию из одного пикселя, которая будет прямой и линейной. Если вы нажмете Shift при создании формы линии, вы можете создать линию с углом 0°, 45°, 90°, 135°, 180°, 225°, 270° и 315° градусов от исходной точки формы. Например, как показано на изображении ниже:

Многоугольники: В этом варианте мы можем создавать многоугольники, такие как звезда, пятиугольник и различные формы, как показано на рисунке ниже:

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

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

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

Для создания пользовательских векторных фигур вам необходимо иметь некоторое представление об инструменте «Перо» в Photoshop. Инструмент «Перо» — самый важный инструмент в Photoshop, с помощью инструмента «Перо» вы можете создавать выделение, контур и формы в Photoshop. Итак, прежде всего, выберите инструмент «Перо», нажав P на клавиатуре, или выберите инструмент «Перо» на панели инструментов и установите инструмент «Перо» на путь к форме.

и нарисуйте желаемую форму на холсте. После создания формы с помощью инструмента «Перо» щелкните правой кнопкой мыши на холсте и выберите параметр Определить пользовательскую форму в окне параметров. пользовательскую форму и сохраните ее.

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

Параметры векторных фигур

Как и другие инструменты, в Photoshop инструмент векторных фигур также имеет различные типы параметров/свойств, таких как цвет фигуры, размер фигуры, непрозрачность и т. д. Ниже приводится подробное объяснение. вариантов/свойств векторных фигур.

1. Типы

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

2. Цвет заливки

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

3. Обводка и цвет обводки

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

В приведенном ниже примере показано, как выбрать цвет обводки:

4. Ширина штриха

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

5. Тип обводки

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

Пример:

6. Высота и ширина фигуры

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

7. Сложение, вычитание, пересечение , и вытягивание перекрывающихся фигур

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

Давайте поговорим обо всех параметрах один за другим:

  • Добавление фигур: После выбора этой опции вы можете добавить две или более фигур вместе. Если вы хотите добавить прямоугольную форму к круглой форме, вам следует использовать эту опцию. Работа этой опции показана ниже:

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

  • Пересечение фигур: Если вы хотите пересечь одну фигуру с другой, используйте эту опцию. После выбора этой опции, если вы нарисуете новую фигуру на другой фигуре, останется общая или перекрывающаяся область двух фигур, а дополнительная область двух фигур, которая не перекрывается, будет удалена. Ниже приведена простая иллюстрация этой операции:

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

8. Выравнивание

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

9. Порядок фигур  

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

  • Переместить фигуру на передний план: После выбора этой опции слой с выбранной фигурой окажется наверху стопки слоев.
  • Переместить форму вперед:  После выбора этой опции слой выбранной формы окажется поверх слоя над ним.
  • Отправить фигуру назад:  После выбора этого параметра слой выбранной фигуры помещается под слой под ним.
  • Отправить фигуру на задний план:  После выбора этого параметра слой выбранной фигуры перемещается в конец стека слоев.

Как векторизовать изображение в Photoshop? | Джон Негоита

В этом уроке я покажу вам как преобразовать изображение JPG в векторные фигуры Photoshop всего за несколько шагов. Учебное пособие является ремейком оригинального учебного пособия Image To Vector Photoshop , просто чтобы показать, как оно будет работать на другом изображении.

Как векторизовать изображение в Photoshop?

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

Сначала просмотрите это видео, чтобы быстро пройти этапы преобразования растрового изображения в векторные файлы SVG, а затем прочтите полное пошаговое руководство по Photoshop.

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

Мы можем легко удалить фон изображения с помощью Photoshop Wand Tool и получить вырезанное изображение, подобное этому:

Это не идеальное вырезание, но для нашего векторного эффекта оно подойдет.

Дублируйте этот слой и назовите слои Girl 1 Layer и Girl 2 Layer . Вы также можете сохранить копию исходного слоя. Перейти к Изображение > Настройки и используйте настройку Threshold для Girl 1 Layer . Установите уровень в зависимости от размера фотографии, деталей и т. д.

Установите черный цвет переднего плана и белый цвет фона . Перейдите к Filter > Sketch и используйте фильтр Photocopy для Girl 2 Layer .

Установите режим наложения слоя Girl 2 на Multiply и объедините два слоя.

Используйте снова Настройка порога для нового созданного слоя.

Для получения сглаженных краев вы можете перейти к Filter > Stylize и выбрать Diffuse

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

Теперь давайте преобразуем изображение в векторную форму.

Есть много способов сделать это, но я покажу вам самый простой. Сейчас у нас есть изображение с черными и белыми областями. Давайте выберем черные области, перейдя к Выберите > Color Range… и выберите Shadows со следующими значениями:

Это создаст выделение черных областей. Щелкните инструмент Marquee Selection Tool прямо под Move Tool , а затем щелкните правой кнопкой мыши выделение. Выберите параметр Make Work Path , Tolerance из 1px в порядке. Чем выше допуск, тем плавнее кривые векторной формы, но и менее детализированы.

Мы можем преобразовать текущий рабочий контур в векторную фигуру, выбрав Layer > New Fill Layer… > Solid Color . Выберите черный цвет и введите имя для нового слоя, например, Girl Vector Shape Black .

Этот новый созданный слой на самом деле является векторной фигурой. Чтобы убедиться, что векторная фигура представляет собой одну единую фигуру, перейдите к инструменту Shape Selection Tool (под Text Tool) ) и выберите всю фигуру, затем объедините все части векторной фигуры.

Например, для печати векторной фигуры на футболке достаточно слоя Girl Vector Shape Black . Но, если вы хотите получить полное векторное изображение, нам нужно создать аналогичный слой для белых областей. Для этого проделайте те же самые шаги на начальном черно-белом слое из . Выберите > Color Range… , но на этот раз выберите Highlights .

Назовите получившийся слой Girl Vector Shape White выбрав белый цвет для сплошной цвет заливочный слой.

Итак, мы преобразовали наше изображение в вектор с помощью инструментов Photoshop. Что теперь?

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

Вот как вы можете преобразовать изображение в векторный эффект . Теперь вы можете использовать кисть Paint Brush черного цвета, чтобы закрыть пробелы и использовать Paint Bucket Tool , если вы хотите добавить цвет. Я также добавил векторных солнечных лучей , используя эти бесплатные кисти солнечных лучей, чтобы создать фон векторного комикса. Подобную технику я использовал в одном из своих старых уроков о том, как создать эффект комикса в Photoshop .

В этом учебном пособии вы узнаете, как превратить векторный эффект Photoshop в фактическое векторное изображение, размер которого можно изменить без потери качества и экспортировать в Illustrator.

Этот набор содержит 1 многослойный PSD-файл, который позволит вам создать векторный силуэт из любой фотографии/графики/изображения . Пакет также содержит экшен Photoshop, который можно использовать для создания пользовательских фигур .

Экшен Photoshop «Изображение в вектор»

Вы также можете попробовать этот экшен Photoshop, который превращает любое изображение JPG в вектор с помощью Photoshop. Результатом является сложное векторное изображение с цветами, а не просто силуэт векторной формы.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *