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

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

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

Что такое растровое и векторное изображение и чем они отличаются

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

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

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

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

Еще больше о Photoshop — на курсах «Fotoshkola.net».

Простой пример, как растр перевести в вектор

Итак, вектор состоит из геометрических фигур. Photoshop обладает инструментами для создания контуров. Контур и есть геометрическая фигура. Чтобы сделать векторное изображение в Фотошопе, нужно создать контур изображения. Помогут нам в этом инструменты группы «Выделение»/Select: «Прямоугольное выделение»/Rectangular Marquee Tool, «Эллиптическое выделение»/Elliptical Select Tool,** «Волшебная палочка»/Magic Wand Tool, **«Быстрое выделение»/Quick Selection Tool и «Перо»/Pen tool.

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

Открываем растровое изображение в фотошопе (самый распространенный формат растрового изображения — JPG). Очень легко поддаются обработке логотипы, контурные рисунки, эскизы. Чтобы получить векторный эскиз портрета, сначала можно преобразовать портрет в эскиз с помощью «Галереи фильтров», либо использовать готовый поп-арт. О том, как работать с «Галереей фильтров» и быстро создавать поп-арт из фото, мы рассказывали в предыдущих статьях. Для этого примера мы возьмем готовый поп-арт-портрет. Умышленно мы подготовили его из фото не самого лучшего разрешения. Поэтому векторный вариант покажет нам заметную разницу.

Чтобы работать с контурами, вам нужно вызвать закладку «Контуры»/Path на палитру слоёв. Для этого зайдите в меню «Окно»/Window и отметьте пункт «Контуры»/Path. Закладка появится на палитре слоёв.

Изображение имеет 4 цвета (фон не считаем). Берём инструмент «Волшебная палочка»/Magic Wand Tool и выделяем первый цвет. Чтобы выделить все участки, рассредоточенные островками по изображению, удерживайте Shift.

Когда первый цвет выделен, выбираем инструмент «Лассо»/Lasso либо «Прямоугольная область»/Rectangular Marquee Tool и, не снимая выделения, щёлкаем правой клавишей мыши. В контекстном меню выбираем

«Образовать рабочий контур»/Make Work Path.

В диалоговом окне указываем максимальное сглаживание «Допуск»/Tolerance (от 1 до 10; чем ниже цифра, тем лучше повторятся контуры). Жмём Ok.

На закладке «Контур» появится первый контур. На изображении он будет заметен в виде кривых с точками. Их можно выровнять и подогнать с помощью инструмента «Выделение узла»/Direct Selection Tool. Этим инструментом выделяем точку и либо корректируем кривую, перемещая усик точки, либо подвигаем саму дугу.

На закладке «Контур» меняем название контура. Для этого щёлкаем по нему двойным щелчком и в диалоговом окне изменяем имя.

Проделываем все описанные шаги с остальными цветами. В итоге получаем четыре контура для каждого цвета.

Получив контуры, остаётся создать вектор. Переходим на закладку «Слои»/Layer на палитре слоёв, создаём новый слой Shift+Ctrl+N. Основной цвет задаём тот, в который окрасим первый контур.

Возвращаемся на закладку «Контур», становимся на первый контур. В главном меню в пункте «Слои»/Layers выбираем «Новый цвет заливка»/New Fill Layer — «Цвет»/Solid Color. В открывшемся окне жмём Ok.

Теперь, перейдя на закладку

«Слои»/Layers, вы увидите на новом слое первый векторный слой.

Проделаем эти шаги для каждого контура.

Так мы получили четыре фигуры, которые составили портрет. Теперь можно сохранить в файл с векторным расширением SVG (слой с исходной картинкой удаляем). Нажимаем Alt+Shift+Ctrl+W (экспортировать как). В диалоговом окне выбираем расширение файла SVG, жмём «Экспортировать всё»/Export All.

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

На этом всё. Способ достаточно простой.

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

Еще больше о Photoshop — на курсах «Fotoshkola.net».

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

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

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

Векторное

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

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

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

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

Растровое

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

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

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

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

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

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

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

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

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

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

Перевод графического изображения в векторный формат

Давайте разберемся, что такое растровое изображение и векторное.

Растровое — это изображение, в котором каждая точка изображения имеет свой цвет. Это для форматов типа BMP. Есть куча форматов, которые перед сохранением сжимают картинку по своему алгоритму. Но сути это не меняет. Поэтому качество картинки всегда конечно — оно упирается в эту точку. Имеено с этим и связано то, что в современные фотоаппараты пихают множество мегапикселей, все для того чтобы конечная картинка была четкой и её можно было увеличить. Преимущество растрового формата очевидны — их легко редактировать (делать обрезку, изменять цвета, изменять размер изображения и т.д. и т.п.).  Почти все изображения в интернете — растровые.

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

Так зачем переводить из растра в вектор? Допустим вы создаете логотип для большого уличного рекламного щита — лучший вариант накидать вариант в графическом редакторе, не у всех есть Corel Draw и умением им пользоваться. Поэтому просто рисуем в паинте или кто где привык. Сохраняем полученный файл на диске. Следующим этапом определяемся со способом перевода в вектор. В кратце — лучший вариант это potrace, но у него есть недостаток — он переводит только контур, поэтому изображение будет черно-белое. Если вам необходим цветной перевод — используйте autotrace, но качество перевода будет ниже (кривые будут не такие ровные). Я бы посоветовал воспользовать и тем и другим методом, и затем уже оценить результат самостоятельно. К примеру — переведя свое приложение на autotrace для того, чтобы пользователи могли оценить результат в цвете, сразу же получил письмо от пользователя с просьбой вернуть обратно черно-белое конвертирование, оно его полностью устраивало. В общем-то я это и выполнил.

Выбрав метод перевода — переходим к конвертированию:

• Переходим к конвертеру potrace или autotrace выбираем картинку и жмем конвертировать. В случае конвертирования в autotrace я бы рекомендовал не менять настройки (а также оставить выходной формат SVG), если вы не понимаете зачем они нужны. В любом случае — вы всегда сможете поэксперементировать!
• Далее сохраняем полученный результат на диск.
• Следующим этапом — нам нужно «допилить» полученное векторное изображение. Для этих целей — идем в онлайн редактор SVG, загружаем файл и производим необходимые манипуляции.
• После всего этого вы сможете увеличивать ваше изображение до бесконечности, оно будет обладать идеально ровными краями. Например, это будет неоценимо при печати больших баннеров, попробуйте нарисовать картинку 10000*10000 пикселей в паинте! А ведь это можно сделать и в размере 100*100 пикселей, а затем грамотно увеличить!
• И наконец — возможно вам понадобится вернуть изображение в растр для размещения — для этих целей потребуется еще 2 шага:

1. Преобразовать ваше изображение в формат WMF
2. Преобразовать полученное изображение в растровый формат, например JPEG.

Удачи в конвертировании!

бесплатные инструменты для создания векторной графики / Программное обеспечение

Компьютерная графика — очень широкое понятие. Кому-то при упоминании этого термина на ум придут трехмерные шедевры от студий Pixar и Dreamworks, другие подумают про цифровую фотографию, третьи решат, что речь идет об оформлении компьютерных игр. Но также обязательно найдется немало и тех, кто свяжет это словосочетание с векторной графикой. Несмотря на необычайную популярность векторной графики, многие пользователи совершенно незнакомы с особенностью векторных рисунков. Что же кроется за словами «векторная графика» и почему она так востребована?

Обычный растровый рисунок представляет собой некоторый массив точек. Этот массив может визуализироваться с максимальной точностью или приблизительной. В первом случае информация о точечном рисунке передается без потерь, но занимает много памяти. Во втором случае графическое изображение может быть передано с условной точностью. Напрашивается прямая аналогия со звуком, который сжимается «без ощутимых потерь» в формат MP3. Для графики схожий формат — JPG. При умеренной и не очень высокой степени сжатия исходный массив точек вполне угадывается. Алгоритмы визуализации растровой графики могут различаться, но суть их одинакова — картинка имеет жесткую привязку к пиксельной матрице.

Для визуализации векторного изображения используется совершенно иной подход. Каждый векторный рисунок создается при помощи геометрических фигур и кривых. Использование математики при описании рисунка дает огромное преимущество: при масштабировании векторных элементов исходная картинка нисколько не теряет в качестве. Растровый же рисунок при изменении размеров ведет себя иначе — линии объектов на изображении при увеличении обрастают заметной «гребенкой». Эти артефакты присутствуют на изображении изначально, поскольку растровый рисунок априори не может содержать непрерывных элементов — линий, геометрических форм и так далее. Все это в растре выглядит как матрица пикселей, которая тем заметнее, чем сильнее увеличен растровый рисунок.

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

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

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

⇡#«Рисунки Google» — самый простой векторный редактор, который всегда под рукой

Самый известный, простой и доступный онлайновый векторный редактор — это «Рисунки» в сервисе «Google Диск». Это веб-приложение входит в состав онлайнового офиса от Google и больше ориентировано на совместную работу и добавление графических элементов в офисные документы других типов, чем на создание векторной графики. Однако все же некоторые базовые средства для работы с ней тут имеются.

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

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

⇡#Autotracer — бесплатный конвертер растровых картинок в вектор

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

Соответствующие средства есть практически в любом векторном редакторе, но векторизация может быть еще более простой благодаря онлайновым инструментам. Можно найти не один веб-сервис, который предлагает подобные услуги. Например, очень удобен в работе бесплатный ресурс Autotracer. С его помощью можно преобразовать файлы PNG, BMP, JPEG и GIF в векторный формат и сохранить в формат SVG, EPS, PDF, DXF.

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

⇡#Vector Paint — векторный редактор в Chrome, который может работать и без браузера

Vector Paint — это веб-приложение для Google Chrome, созданное на HTML5, однако работать оно может и без браузера. Оно относится к новому поколению приложений, представленных в начале сентября нынешнего года. Запускать такие приложения можно прямо с рабочего стола — открытый браузер, равно как и доступ к Интернету, для их использования не нужны.

Vector Paint содержит достаточно большую коллекцию различных предустановленных форм, которые можно использовать в проектах: тут и часы, и тучки, и стрелочки, и животные, и нотки, и многое другое. Формы можно создавать и вручную, используя прямые и ломаные линии, инструмент для рисования произвольных форм, прямоугольник, эллипс. Для каждого элемента есть возможность выбрать цвет, толщину и тип обводки, а также цвет заливки, сделать его частично прозрачным, добавить один из множества эффектов (искажения, тени, текстуры, псевдо-3D и прочее). Предусмотрены и инструменты для управления элементами в проекте: их можно перемещать на передний план или переносить назад. Для более точной расстановки элементов имеются многочисленные средства для выравнивания, также можно включить отображение линейки.

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

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

Готовые проекты сохраняются в формате SVG, а также могут быть экспортированы в PNG и JPEG.

⇡#SVG-Edit — онлайновый векторный редактор

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

SVG-Edit полноценно работает с файлами SVG, давая возможность как сохранять проекты в этом формате, так и открывать такие файлы и вносить в них изменения. Кроме этого, файл SVG может быть импортирован в проект как отдельный элемент.

Для создания элементов векторной графики в SVG-Edit могут использоваться ломаные линии, прямоугольники, квадраты, эллипсы, круги, многоугольники, контуры, текст. Есть возможность выполнять заливку элементов цветом, а также использовать градиенты, в том числе и радиальные. Поддерживается работа со слоями, показ сетки и отображение элементов в виде каркаса. Есть средства для изменения расположения элементов (выше, ниже), для быстрого клонирования выделенных векторных форм, для их группировки. Многие команды доступны из контекстного меню (как в обычных редакторах для рабочего стола). Достаточно много внимания уделено инструментам для выравнивания на холсте: можно ровнять элементы по отношению к выделенным объектам, к самому большому или к самому маленькому объекту.

В программе большая библиотека готовых форм (та же самая, которая используется в Vector Paint), но, кроме этого, реализован доступ к огромной бесплатной библиотеке элементов векторной графики IAN Image Library. Для работы с ней потребуется регистрация, но затем можно прямо из редактора просматривать коллекции образцов векторной графики и сразу же добавлять их в текущий или в новый проект.

⇡#Chittram — простой онлайновый редактор

Chittram — это еще один векторный редактор, который может работать как веб-приложение. В отличие от SVG-Edit, он реализован как полноценный онлайновый сервис с возможностью сохранения проектов на сервере. Для просмотра и редактирования созданных ранее проектов используется учетная запись Google.

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

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

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

⇡#Inkscape — полноценная альтернатива коммерческим пакетам

Векторный редактор Inkscape имеет массу достоинств. Во-первых, он кроссплатформенный (может запускаться в среде Windows, Linux, Mac). Во-вторых, он поддерживает большое число популярных векторных форматов, в числе которых SVG, SVGZ, EMF, DXF, EPS, PostScript, WMF и другие.

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

Стоит обратить внимание на встроенные средства для векторизации растровых изображений. Чтобы при трассировке фотографий учитывались важные объекты на переднем плане, задействуется алгоритм SIOX (Simple Interactive Object Extraction), помогающий определить такие объекты автоматически.

⇡#ZebraTRACE — бесплатное создание гильошей

Любые денежные банкноты, а также документы государственной важности (дипломы, грамоты, удостоверения и так далее) легко узнать с первого взгляда. Эту «узнаваемость» дизайну документа придают тонкие повторяющиеся узоры, которые проходят по всему основному рисунку. Такие линии называются гильошем.

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

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

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

⇡#Заключение

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

Если Вы заметили ошибку — выделите ее мышью и нажмите CTRL+ENTER.

5 способов создать векторную картинку в Adobe Illustrator

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

---

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

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

Три картинки — три разных способа создания. Угадаете, где какой? 🙂

Это я все к тому, что меня тут как-то недавно спросили — а как удобнее обрисовывать картинку в Иллюстраторе?

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

Трейс / Image Trace

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

Трейс картинки осуществляется с помощью панели image trace (верхняя панель Window — Image Tace) — просто помещаете свой скетч на рабочую область, открываете панельку, в выпадающем меню выбираете один из пресетов (у всех разные настройки, выбрать лучший можно методом тыка) — например, sketch — и через минуту-другую ваш файл превращен в вектор. Потом нужно только не забыть удалить “мусор” — разные пустые пути, которые образуются в процессе. Для этого не снимая выделение с оттрейсенного объекта надо пойти в верхнее меню Object — Path — Clean Up.

Трейс готов! Как говорили на одной моей прошлой работе “нажал кнопку — и в кассу”. Но, увы, все не так просто.

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

Я делаю так: включаю видимость путей (cmd+H), выбираю контрастный цвет для них по отношению к обводке (двойной клик по названию слоя) — и, увеличив картинку до 200-300% проверяю аккуратность линий. В этом мне сильно помогают обычный карандаш — он мне нравится больше, чем сглаживающий — и плагин от Astute Graphics Smart Remove Brush Tool, которым можно удалять лишние точки, минимально изменяя линию.

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

Я на данный момент использую трейс только для цитат вроде такой:

Плюсы и минусы трейса: 

+ Можно относительно быстро превратить хороший скетч в векторную картинку с сохранением hand drawn эффекта

– Нужно потратить время, чтобы обработать
– Весь объект уже векторный, то есть труднее поменять толщину линий
– Линии не будут идеально ровными (это же и плюс)

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

Блоб браш / Blob Brush

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

У этого инструмента так много поклонников, что мне даже как-то неловко признаваться, что я его не люблю и практически совсем не использую. Это вызывает у людей примерно такие же эмоции, как когда я говорю, что мне не нравится “Мастер и Маргарита”. Но что есть — то есть 🙂 Примеры употребления блоб браша в моем портфолио можно найти только на очень-очень старых картинках, которые, скорее всего, будут удалены во время следующей чистки.

Одна из моих первых картинок, нарисованная блоб брашем

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

Плюсы и минусы блоб браша:

+ Облегчает художникам переход с растра на вектор
+ Имитирует “живое” рисование

– Нужен планшет, чтобы оценить всю прелесть (и умение рисовать тоже не помешает)
– Толщину линий можно задавать только перед рисованием, как только линия проведена — она по сути является векторным объектом с заливкой, — как и в случае с трейсом регулировать толщину постфактум сложно

Пентул / Pentool

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

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

Плюсы и минусы пентула: 

+ Чистые и аккуратные линии
+ Можно регулировать толщину нарисованных линий/картинки в любой момент за пару секунд, пока не сделан экспанд (который нужно делать перед отправкой на стоки, но лучше сохранять в рабочем файле неэкспанднутую копию)
+ Пентул — отличный способ создавать картинки на стоки для тех, кто не умеет рисовать в классическом понимании этого слова

– Все рисование сводится к расстановке точек и повороту ручек — многих креативных людей это напрягает
– Полезно также освоить инструмент Shape Builder Tool и панель Pathfinder, потому что обычный ластик удалить лишнее не поможет
– Чтобы научиться уверенно обращаться с пентулом, нужно освоить какое-то количество теории и много, много практиковаться, при этом первое время линии будут получаться кривоватыми и на отрисовку будет уходить много времени

Кисточка (обычная) /  Brush

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

Что на линию, проведенную кистью, что на “пентульную” можно “насадить” огромное количество самых разных кистей — из стандартной библиотеки (правда, официально на стоки их использовать нельзя), либо !! своих собственных, каждый раз получая новый результат. Потом нужно не забыть все это дело отэкспандить (то есть превратить в вектор с помощью команды Object — Expand).

Плюсы и минусы кисточки: 

+ Сохраняется возможность редактирования линий и можно рисовать руками (не точками)

– Нужен планшет
– Линии почти всегда получаются не такими, как хочется, — может у меня руки кривые, но по моим ощущениям тот же блоб браш позволяет точнее контролировать линию

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

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

Простые геометрические формы

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

Посмотрев курс Illustration for Designers: Create Your Own Geometric Animal (Иллюстрация для дизайнеров: Создайте свое собственное геометричное животное) на Skillshare я переосмыслила роль форм в картинках и мне стало интересно научиться видеть формы в объектах. Так родилась серия животных, которую я скоро планирую продолжить:

Плюсы и минусы рисования формами: 

+ Линии получаются идеальными, не нужно думать о том, куда поставить точку и как потянуть за ручку

– Перестроиться на «мышление формами» большинству людей очень сложно
– Все равно придется использовать дополнительные инструменты — пентул, панель пасфайндер или шейп билдер тул

Примерно 80% моих текущих картинок нарисованы плагином InkScribe — тот самый аналог пентула от Astute Graphics, о котором я уже говорила (я, кстати, планирую написать отдельный пост про астутовские плагины, как только меня перестанет пугать потенциальный размер этого поста).

Остальные 20% — это трейс, простые формы и иногда — Dynamic Sketch Tool. Это что-то вроде карандаша, только более аккуратный и с большим количеством настроек (опять же, астутовский).

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

Фото на обложке: ShutterStock

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

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

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

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

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

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

Читайте также: Инструмент Перо в Фотошопе — теория и практика

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

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

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

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

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

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

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

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

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

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

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

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

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

Помогла ли вам эта статья?

ДА НЕТ

Бесплатный онлайн конвертер векторной графики

Локальный файл Онлайн файл

#	Результат	Исходный файл

---

Чтобы выполнить конвертацию векторного формата, выполните несколько шагов:

• С помощью кнопок «Локальный файл» или «Онлайн файл» укажите каким образом загрузить изображение на сервер. Используете «локальный файл» если вам нужно сконвертировать файл с вашего компьютера, для того чтобы указать файл, находящийся в интернете выберите «Онлайн файл» и в появившемся поле вставьте ссылку на файл. Мы не устанавливаем никаких ограничений на размер изображения, но чем больше файл, тем больше времени будет занимать конвертация. Просто наберитесь терпения и все получится. Вы можете конвертировать файлы из форматов AI, CDR, CDT, CCX, CMX, SVG, FIG, CGM, AFF, WMF, SK, SK1, PLT, DXF, DST, PES, EXP, PCS.

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

• Выберите формат векторного изображения, в который вы хотите преобразовать ваш документ. Формат полученного изображения может быть AI, SVG, CGM, WMF, SK, SK1, PDF, PS, PLT.
• Для начала конвертации нажмите кнопку «Конвертировать» чтобы начать преобразование. В случае успешной конвертации файл будет доступен в разделе «Результаты конвертации». Если вам нужно просто скачать файл, то кликните на имя файла. Если вы хотите получить другие способы сохранения, то нажмите на значок чтобы сформировать QR-код для загрузки результата на ваш мобильный телефон или планшет, а также если вы хотите сохранить файл в одном из онлайн-сервисов хранения данных, таких как Google Drive или Dropbox.

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

форматов файлов — Vector Magic

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

Online Edition Поддерживаемые форматы файлов
Ввод:	JPG, PNG, BMP, GIF
Вывод:	SVG, EPS, PDF

Desktop Edition Поддерживаемые форматы файлов
Ввод:	JPG, PNG, BMP, GIF, TIFF
Вывод:	SVG, EPS, PDF, AI, DXF

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

Форматы файлов векторных изображений

EPS

Формат Adobe EPS (Encapsulated PostScript), пожалуй, самый распространенный формат векторных изображений. Это стандартный формат обмена в полиграфической отрасли. Он широко поддерживается в качестве формата экспорта, но из-за сложности спецификации полного формата не все программы, которые утверждают, что поддерживают EPS, могут импортировать все его варианты.Adobe Illustrator и последние версии CorelDRAW очень хорошо поддерживают чтение и запись в формате EPS. Ghostview может его очень хорошо читать, но не имеет возможности редактирования. Inkscape может только экспортировать его.

SVG

Стандартный формат векторных изображений W3C называется SVG (масштабируемая векторная графика). Inkscape и последние версии Adobe Illustrator и CorelDRAW имеют хорошую поддержку чтения и записи SVG.Дополнительную информацию о формате SVG можно найти на официальном сайте SVG.

PDF

Формат Adobe PDF (Portable Document Format) очень широко используется в качестве независимого от платформы формата документа общего назначения. И хотя он не используется исключительно как таковой, это также очень хороший формат векторных изображений. Adobe предоставляет программу для чтения PDF Acrobat, но продает инструменты, необходимые для создания файлов PDF. (сторонние инструменты, которые выполняют ту же задачу, также продаются).Эти инструменты работают с любой программой, которая может печатать. Поддержка чтения и редактирования файлов PDF гораздо более ограничена.

AI

Родным форматом Adobe Illustrator является формат AI (Adobe Illustrator Artwork), модифицированная версия старого формата EPS. Формат AI довольно широко поддерживается, но менее распространен, чем формат EPS, и большинство программ, которые читают AI, также могут читать EPS.

DXF

Формат обмена чертежами.Формат САПР от Autodesk, используемый инструментами САПР от многих различных поставщиков. Некоторые программы испытывают трудности с чтением файлов DXF со сплайнами (кривыми), поэтому Desktop Edition поддерживает режимы вывода «линия + сплайн», а также «только линия».

Существует множество других векторных форматов: CDR — это собственный формат CorelDRAW, а XAR — это собственный формат Xara Xtreme, чтобы назвать пару.

Форматы файлов растровых изображений

Существует большое количество различных форматов растровых изображений.Вот некоторые из наиболее распространенных: JPEG, PNG, GIF, BMP и TIFF. Вообще говоря, они делятся на две категории:

Форматы с потерями

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

JPEG / JPG

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

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

Форматы без потерь

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

PNG

Лучший из форматов изображений без потерь называется PNG (Portable Network Graphics). Этот формат широко поддерживается веб-браузерами и программами просмотра / редактирования изображений.

Vector Magic рекомендует использовать формат PNG при сохранении логотипов в виде растровых изображений.

BMP

На самом деле существует несколько форматов BMP (BitMaP). Windows и Macintosh имеют свои собственные форматы, оба из которых называются BMP.Большинство современных инструментов для редактирования изображений могут читать и то, и другое.

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

TIFF / TIF

Формат файла изображения с тегами используется для хранения необработанных растровых данных некоторыми программами и устройствами, такими как сканеры. Этот формат бывает сжатым и несжатым. Первый сравним с PNG, а второй больше похож на BMP.

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

Учебное пособие: отслеживание фотографий — Vector Magic

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

К каким изображениям относится это руководство?

Этот учебник применим к:

• Фотографии, особенно с высокой контрастностью, например силуэты

Он не распространяется на:

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

Что мне нужно, чтобы следовать этому руководству?

• В этом руководстве используется Vector Magic Desktop Edition. Вы можете скачать пробную версию со страницы настольного приложения.

• Online Edition очень похожа на полностью автоматический режим Desktop Edition. Пользовательский интерфейс выглядит немного иначе, и нет поддержки прозрачности. Помня об этих предостережениях, вы также можете использовать онлайн-версию, чтобы следовать этому руководству.

Фото vs.Логотипы

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

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

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

Векторизация высококонтрастных фотографий

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

Чайки в силуэте

Рассмотрим следующее исходное изображение (показано в уменьшенном размере, полноразмерное изображение доступно здесь):

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

Попробуйте настройки:

• Basic Wizard
• Логотип со смешанными краями (сглаживание)
• Низкое качество
• Фиксированные цвета (3 цвета)

Это приводит к следующему векторизованному результату (доступен в формате SVG здесь):

Этот результат резко контрастирует с результатом в фоторежиме (загрузите SVG здесь):

Sandhill Cranes в полете

Еще одна интересная фотография силуэтов птиц — это один из летящих журавлей Sandhill (полная версия доступна здесь):

Опять же, ограничивая палитру, мы можем добиться интересного визуального результата.Здесь настройки: Логотип со смешанными краями, Средний, 5 фиксированных цветов. SVG можно скачать здесь, а предварительный просмотр показан ниже:

Это можно сравнить с результатом при использовании режима фото (SVG доступен здесь):

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

Векторизация других фотографий

Также возможно добиться интересного визуального эффекта на других фотографиях. Рассмотрим эту фотографию заката над облаками (полная версия здесь):

При обработке в режиме низкой фотографии результат (доступен в формате SVG здесь):

Или вот эта фотография скульптуры Родена (полноразмерная версия здесь):

При обработке в режиме средней фотографии результат (доступен в формате SVG здесь):

Простое преобразование растровых изображений в векторные

Преимущества

Vector Magic превращает сложную и утомительную задачу по ручному отслеживанию растрового изображения в простой процесс щелчка мышью.Верните контроль над своими изображениями!

Если вы сравните результаты других инструментов, вы заметите, что Vector Magic создает векторы, более верные исходному растровому изображению. Это часто делает их пригодными для немедленного использования, а если требуется очистка, их гораздо меньше.

Благодаря высокой стоимости аутсорсинга и времени на отслеживание рук, Vector Magic окупается даже при минимальном использовании. А поскольку использование неограничено, всегда имеет смысл попробовать его на любом векторизованном изображении.

Зачем ждать, когда это не нужно? Vector Magic сразу же возвращает результаты, чтобы вы могли продолжить свой день и заняться тем, что действительно важно.

Какой вариант выбрать?

Чтобы помочь вам выбрать между онлайновой и настольной версиями, вот матрица функций:

Функция	Онлайн	Рабочий стол
Полностью автоматическая векторизация	да	Есть
Базовый режим векторизации с простыми настройками	да	Есть
Расширенный режим векторизации с точным управлением		Есть
Векторный вывод EPS, SVG и PDF	да	Есть
AI, векторный выход DXF		ПК
Векторный выход AI		Mac
Вывод растровых изображений PNG, GIF, BMP		Есть
JPG, вывод растрового изображения TIFF		ПК
Мощный предварительный просмотр для детального изучения результата	да	Есть
Возможности редактирования сегментации	да	Есть
Супер-удобный ввод для копирования и вставки	да	Есть
Очень удобный ввод перетаскиванием	да	Есть
Супер-удобный вывод перетаскивания		Есть
Векторизация очень больших изображений		Есть
Сгруппировать фигуры по цвету		Есть
Поддержка прозрачности		Есть
Пакетная обработка		Есть

Будет ли работать с моим программным обеспечением?

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

Какие у меня есть варианты оплаты?

Мы принимаем все основные кредитные карты и PayPal. Мы не принимаем заказы на покупку и не выставляем счета.

Предлагаете ли вы специальные цены для академических или некоммерческих пользователей?

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

Сведения о подписке

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

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

Абонентская плата не возвращается.

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

Доступ предоставляется сразу при подписке.

Подписки являются личными и не подлежат совместному использованию.

Безлимитное использование

Веб-приложение на основе браузера

449 руб. / Мес.

Оплата ежемесячно
Отменить в любое время

Неограниченное использование

Автономное настольное приложение

19 999 руб. / Лицензия

Одноразовая оплата

Vector Magic доступен как в виде услуги на этом веб-сайте (Online Edition), так и в виде отдельного настольного приложения (Desktop Edition).

Вы можете загружать, векторизовать и предварительно просматривать результат для любого количества изображений без каких-либо обязательств. Однако для загрузки результатов вам необходимо подписаться на онлайн-версию. Кроме того, вы можете купить Desktop Edition и использовать программное обеспечение в автономном режиме.

Лучшие уроки по векторной графике

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

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

Во всех этих руководствах используется программное обеспечение, такое как Illustrator CC, Affinity Designer или Sketch, чтобы продемонстрировать, как создать собственный векторный дизайн (наш список руководств по рисованию может помочь вам с дизайном).Требуется программное обеспечение? Вот лучшие скидки на Creative Cloud. Если вы предпочитаете использовать стоковый вектор или вам нужно вдохновение, ознакомьтесь с нашим списком веб-сайтов с лучшими бесплатными векторными изображениями.

Лучшие на сегодня предложения Adobe Creative Cloud

После того, как вы ознакомились с ними, почему бы не добавить еще несколько инструментов в свой набор инструментов и не попробовать наши руководства по Photoshop и Illustrator?

Что такое векторная графика?

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

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

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

01. Начните создавать иллюстрации

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

02. Создание и редактирование фигур

Продолжая предыдущее введение, в этом руководстве Adobe изложены основы создания и редактирования фигур в Adobe Illustrator CC, в том числе способы рисования комбинирования и обводки фигур.

03. Объяснение векторов! Учебное пособие по Affinity Designer

Adobe Illustrator — не единственный инструмент, доступный для создания векторной графики: все более популярной альтернативой является Affinity Designer.В этом руководстве по Affinity Designer объясняется, как векторы сравниваются с растровыми / растровыми изображениями, как создаются векторы, в каких приложениях используются векторы, почему вам нужно экспортировать свою работу, а также приведены лучшие советы по сохранению четкости и четкости окончательного дизайна.

04. Руководство для начинающих по векторам в Affinity Designer

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

05. Создание векторной иллюстрации от начала до конца

Pro иллюстратор и блогер Крис Спунер считает, что набор инструментов Illustrator для создания фигур можно использовать для создания классных векторных иллюстраций абсолютно чего угодно. Он демонстрирует это здесь, проходя через процесс создания простой иллюстрации водяного пистолета. Все это делается с помощью основных инструментов Illustrator, а затем используется инструмент Live Paint для добавления цвета.

06. Переход с Adobe Illustrator на Affinity Designer

Может быть, вы уже практиковались в создании векторной графики в Illustrator, но когда дело касается Affinity Designer, вы новичок? Чтобы помочь вам, Андрей Стефан проведет вас через процесс перехода с Adobe Illustrator на Affinity Designer, перечисляя ключевые препятствия, которые вам, возможно, придется преодолевать на этом пути.

07. Как сделать векторной надписи от руки

Хотите преобразовать рукописный текст в формат векторной графики? В этом видео Скотт Бирсак показывает, как именно это сделать в Adobe Illustrator.

08. Создание красочных векторных изображений персонажей

В этом уроке Illustrator от Digital Arts вы узнаете, как превратить нарисованный от руки эскиз в цветной цифровой векторный файл, с учетом корректировки цвета, глубины и композиции.Базовые навыки, которые вы здесь изучите, помогут вам снова и снова создавать масштабируемые векторы символов.

09. Как создать значок галочки

В этом уроке Андрей Стефан проведет вас через процесс создания простого векторного значка, галочки или галочки с помощью Adobe Illustrator от начала до конца.

Следующая страница: Уроки по векторной графике среднего уровня

Полное руководство по созданию векторных изображений

---

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

Есть несколько способов сделать векторное изображение.Первое, что нужно учитывать, — это цель изображения. Для чего ты это делаешь? Где изображение будет отображаться в качестве конечного продукта? Ответив на эти вопросы в первую очередь, вы сможете лучше понять процесс создания векторного изображения.

---

Необходимо загрузить CorelDRAW?

Загрузите бесплатную 15-дневную пробную версию прямо сейчас!

---

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

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

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

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

Создав нужный дизайн, вы можете экспортировать его из своего программного обеспечения в виде файла EPS, AI, CDR или аналогичного векторного файла и отправить его на принтер или просто сохранить в файле, чтобы при необходимости отредактировать его позже.

Можете ли вы преобразовать изображение в векторное?

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

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

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

Как векторизовать изображение в Adobe Illustrator

Цифровые изображения бывают двух типов: растровые и векторные.

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

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

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

Что такое векторное изображение?

Векторное изображение — это масштабируемое изображение, состоящее из значений, а не пикселей.

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

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

Как только вы узнаете, как преобразовать файл JPG в вектор в Adobe Illustrator, вы сможете масштабировать все, что найдете, до нужного размера без потери качества изображения.

Шаг 1. Выберите изображение для преобразования в вектор

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

Лучше редактировать один объект, чем пейзаж или что-то подобное. Предпочтительно изображение должно иметь белый или прозрачный фон и иметь относительно низкое разрешение. Он должен быть в формате JPG, GIF или PNG.

Мы будем использовать изображение Рю из серии Street Fighter выше.Он работает как прекрасный пример по множеству причин. Во-первых, это один предмет. Он также хорошо поддается формату векторного изображения, так как это узнаваемый персонаж. Формат векторного изображения обычно используется для логотипов или узнаваемых изображений.

Шаг 2. Выберите предустановку трассировки изображения

В Illustrator есть специальный инструмент, позволяющий векторизовать изображения. Он называется Image Trace и поставляется с рядом предустановок, которые выполняют большую часть работы автоматически.

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

Возможны следующие варианты:

• Фото High Fidelity и фото Low Fidelity . Они создают очень подробные и немного менее детализированные векторные изображения соответственно. Они идеально подходят для фотографий или сложных изображений, таких как изображение, которое мы используем.
• 3 цвета , 6 цветов и 16 цветов . Эти предустановки позволяют выводить векторные изображения с тремя, шестью или 16 цветами. Они идеально подходят для логотипов или иллюстраций с большим количеством однотонных цветов.
• Оттенки серого . Эта предустановка создает подробное изображение в оттенках серого.
• Черно-белый логотип .Таким образом создается простой логотип, состоящий из двух цветов — черного и белого.
• Наброски , Силуэты , Штриховые рисунки и Технический чертеж . Их лучше всего использовать для определенных типов изображений и создания черно-белых рисунков, преимущественно линейных.

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

Щелкните стрелку раскрывающегося списка рядом с Image Trace , чтобы выбрать предустановку . Мы будем использовать Low Fidelity Photo . Щелкните его, чтобы начать трассировку.

Шаг 3. Векторизация изображения с помощью Image Trace

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

Обратите внимание на пикселизацию. Вот изображение после процесса:

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

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

Вот наше изображение после редактирования:

Хотя в некоторых случаях верхнее изображение может казаться более резким, качество нашего векторизованного изображения по-прежнему впечатляет.

Шаг 4. Настройте отслеживаемое изображение

После того, как вы проследили изображение, откройте панель Image Trace из меню Window , чтобы точно настроить преобразование.

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

Если вас устраивают настройки и вы хотите использовать их повторно, нажмите кнопку «Управление предустановками» рядом с параметром «Предустановки».Теперь вы можете сохранить свои настройки как новый Preset .

Шаг 5: разгруппируйте цвета

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

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

На панели Layers вы увидите, что ваши цветовые группы были разделены на слои.

Шаг 6. Отредактируйте векторное изображение

После преобразования растрового изображения в векторное у вас есть свободный диапазон для редактирования изображения.

Начните с удаления желаемых цветовых групп. Вы можете выбрать целые группы цветов, щелкнув фигуру и выбрав Select> Same> Fill Color . Это выберет все группы того же цвета, что и группа, выбранная с помощью инструмента Direct Selection ( A ).

Затем нажмите Backspace на клавиатуре, чтобы удалить фигуры.Если вы хотите изменить или расширить определенную цветовую группу, вы также можете сделать это, выбрав слой с помощью инструмента Direct Selection . После того, как вы выбрали слой, заполните пустые места или добавьте дополнительные цвета в свой дизайн с помощью инструментов Pen или Brush .

Шаг 7. Сохраните изображение

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

Теперь мы готовы к последнему этапу преобразования изображения в вектор в Illustrator: сохранению изображения в векторном формате для сохранения его качества. На выбор предлагается множество форматов векторных изображений: PDF, AI, EPS, SVG и другие. Мы будем использовать формат SVG , который широко поддерживается всеми программами дизайна.

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

Вот и все. Теперь ваш масштабируемый векторный файл должен быть сохранен на вашем компьютере.

Не идите на компромисс, векторизуйте!

Теперь вы знаете, как преобразовать изображение в вектор в Illustrator. Вы можете масштабировать свое новое творение до любого размера без потери качества.

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

8 лучших бесплатных альтернатив Adobe Illustrator для браузера

Если Adobe Illustrator слишком дорог для вашего бюджета, вы можете попробовать множество бесплатных альтернатив Adobe Illustrator на основе браузера.

Читать далее

Об авторе Энди Беттс (Опубликована 221 статья)

Энди — бывший печатный журналист и редактор журнала, который пишет о технологиях уже 15 лет.За это время он внес вклад в бесчисленное количество публикаций и написал работы по копирайтингу для крупных технологических компаний. Он также предоставил экспертные комментарии для средств массовой информации и организовал панели на отраслевых мероприятиях.

Более От Энди Беттса

Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться

Создание векторной графики и работа с ней в Adobe Photoshop

Adobe Illustrator — это стандартное приложение для графического дизайна.Это лучший инструмент для работы с векторными файлами.

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

Что такое векторное изображение?

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

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

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

К каждому объекту можно применить два типа цвета:

• Штрих — это линия, которая следует за траекторией.
• Заливка добавляет сплошной цвет или узор в пространство, окруженное контуром.

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

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

Рисование векторных фигур и линий

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

• Инструмент «Прямоугольник»
• Инструмент «Прямоугольник со скругленными углами»
• Инструмент Эллипс
• Инструмент «Многоугольник»
• Инструмент линии
• Инструмент Custom Shape

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

Чтобы работать быстрее, рекомендуется изучить дополнительные сочетания клавиш Photoshop.

Рисование основных векторных фигур

Выберите инструмент для фигуры, которую вы хотите нарисовать, затем добавьте цвета Fill и Stroke .

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

Чтобы нарисовать треугольник, выберите инструмент Polygon Tool . Щелкните один раз на холсте, чтобы открыть окно настроек Create Polygon . Установите Количество сторон от до 3 .

Изменение и редактирование векторных фигур

При создании векторной графики в Photoshop вы не ограничены базовыми формами.Их можно очень быстро изменить.

Сначала выберите форму. Это выделит фигуру и покажет точки привязки на ее пути. Это точки, в которых фигура имеет углы или кривые.

Выберите Direct Selection Tool на панели инструментов (щелкните и удерживайте значок Path Selection Tool , чтобы найти его, или нажмите Shift + A ). Теперь щелкните одну из опорных точек и перетащите ее в любом направлении, чтобы деформировать форму.

Для более сложного редактирования перемещайте две или более точки привязки одновременно.

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

Слияние и объединение векторных фигур

Для еще более сложных форм вы можете использовать Path Operations .Это позволяет объединить несколько форм в одну новую.

Начните с рисования фигуры на холсте. Затем нажмите кнопку Path Operations на панели параметров в верхней части экрана. Обычно каждый новый путь или фигура располагается на отдельном слое. Измените это, нажав Объединить фигуры .

Теперь нарисуйте еще одну фигуру. Это будет на том же слое, что и ваша первая фигура.

Если вам нужно переместить объекты по отдельности, используйте инструмент Path Selection Tool .

Перетащите вторую фигуру так, чтобы она перекрывала первую. Два сливаются в единую фигуру, хотя остаются отдельными объектами. Щелкните Объединить компоненты формы в Операции с контурами , чтобы объединить их в один объект.

Используйте инструмент Path Selection Tool , чтобы выбрать вторую фигуру, которую вы нарисовали. Теперь в Path Operations выберите Subtract Front Shape .Фигура будет удалена вместе с областью, где она перекрывается с первой фигурой.

Выделите обе формы. В Path Operations выберите Intersect Shape Areas . Это удаляет обе формы, за исключением областей, где они перекрываются. Мы используем эту опцию для создания полукруга.

Наконец, выделите обе формы и выберите Исключить перекрывающиеся фигуры .Это удаляет область, где две формы перекрываются, и оставляет все остальное нетронутым.

Эти инструменты — эффективный способ создания новых форм, а также разделения или вырезания частей из существующих. Они также работают с инструментами Pen Tool и Text .

Нарисовать векторные линии

Есть два других инструмента, связанных с фигурой, о которых следует знать. Во-первых, это инструмент Line Tool .

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

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

Рисование нестандартных векторных фигур

Наконец, инструмент Custom Shape Tool .Задайте цвета заливки и обводки, затем щелкните параметр Форма на панели параметров. Здесь вы можете выбрать одну из бесчисленных предустановленных пользовательских форм, которые предоставляет Photoshop.

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

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

Если у вас есть опыт работы с Illustrator, вы знаете, что используете Paintbrush Tool для рисования от руки. В Photoshop есть инструмент «Кисть», который выполняет аналогичную работу. Но в Photoshop этот инструмент не является векторным, поэтому не стоит использовать его для рисования. Вместо этого вам следует использовать Pen Tool .

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

Начало работы с инструментом «Перо»

Инструмент «Перо» работает, рисуя путь между опорными точками, которые вы создаете при нажатии на холст. Добавьте обводку к контуру, и вы сможете нарисовать контур; добавьте заливку, и вы сможете нарисовать сплошной объект.

Вот краткое руководство для начала:

1. Выберите инструмент «Перо» (P) . Щелкните холст изображения, чтобы поставить точку привязки.
2. Переместите курсор на несколько дюймов и щелкните еще раз, чтобы опустить еще одну точку привязки. Будет создан путь для их соединения. Установите обводку на 5 пикселей, черный цвет, чтобы вам было лучше видно.
3. Щелкните еще несколько раз, чтобы развернуть путь. Щелкните и перетащите, чтобы создать изогнутый путь. Это также добавит рули к точке привязки. Перетащите их, чтобы контролировать угол и глубину кривой.
4. Щелкните Введите , чтобы создать открытый контур (линию), или щелкните первую точку привязки, чтобы создать замкнутый контур (форму).

Инструмент «Перо» так полезен тем, что вы можете вернуться и отредактировать форму в любое время:

• Возьмите инструмент прямого выбора (A) .Выберите опорную точку на пути и перетащите ее в новое положение. Используйте этот инструмент с ручками опорной точки, чтобы редактировать кривую.
• Выберите инструмент Добавить опорную точку , нажав и удерживая инструмент «Перо». Щелкните где-нибудь на пути, чтобы вручную добавить новую точку привязки, затем перетащите ее на место. Это позволяет вам точно настроить свою форму.

Инструменты с тремя ручками

Photoshop предлагает три разных ручки для рисования:

• Инструмент «Перо» «Перо» используется по умолчанию и является наиболее гибким вариантом.Новичкам мы рекомендуем использовать это в первую очередь для рисования прямых линий. По мере того, как вы станете более продвинутыми, вы, возможно, обнаружите, что используете его для всего.
• Инструмент «Перо произвольной формы» позволяет рисовать от руки, аналогично инструменту «Кисть». Он по-прежнему создает путь, который вы можете настроить и отредактировать позже. Точки привязки генерируются автоматически по мере рисования. Это отличный инструмент, если вы используете графический планшет.
• Инструмент «Перо кривизны» позволяет легко рисовать кривые без необходимости играть с рулем, как с основным инструментом «Перо».

Трассировка изображения как вектора в Photoshop

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

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

Если объект, который вы отслеживаете, находится на простом фоне, попробуйте инструмент Freeform Pen Tool с опцией Magnetic , активированной на панели параметров. Это привяжет ваш путь к краю объекта.

Работа с векторным текстом в Photoshop

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

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

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

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

Управление векторными объектами

Чтобы создать произведение искусства, вам нужно, чтобы все эти объекты были в правильном положении и в нужном размере.Вот как это сделать:

• Переместите объекты , выделив их с помощью инструмента Path Selection Tool (A) и перетащив на место.
• Измените размер объектов , выбрав их с помощью инструмента выбора пути , затем нажав Ctrl + T в Windows или Cmd + T на Mac. Это показывает рамку вокруг объекта. Возьмите руль за край и потяните внутрь или наружу, чтобы изменить размер.Удерживайте клавишу Shift , чтобы сохранить исходное соотношение сторон.
• Поверните объект , удерживая указатель мыши за пределами одного из рулей, пока курсор не превратится в значок поворота. Теперь щелкните и перетащите.
• Измените порядок объектов , щелкнув слой и перетащив его выше или ниже другого слоя.
• Выровняйте объекты , выделив их все с помощью инструмента Move Tool (V) (или удерживая Shift и щелкнув несколько слоев), а затем используя элементы управления выравниванием на панели параметров.

Векторная графика в Photoshop: соединяем все вместе

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

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

Adobe Illustrator vs.Photoshop: в чем разница?

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

Читать далее

Об авторе Энди Беттс (Опубликована 221 статья)

Энди — бывший печатный журналист и редактор журнала, который пишет о технологиях уже 15 лет.За это время он внес вклад в бесчисленное количество публикаций и написал работы по копирайтингу для крупных технологических компаний. Он также предоставил экспертные комментарии для средств массовой информации и организовал панели на отраслевых мероприятиях.

Более От Энди Беттса

Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться

.

No related posts.