Как картинку перевести в вектор в фотошопе: Как перевести растр в вектор за 1 секунду?

Содержание

Перевод из растра в вектор в Фотошопе

Пока моя заметка о масках в Фотошопе не остыла, срочно хочу осветить вопрос перевода растра в вектор. Два дня назад, я зашел в свой хронофагский Google Analytic и что же я увидел. Оказывается некоторые попадают на мой сайт по запросу «растр в вектор», а между тем, на моем сайте нет ни одной толковой заметки на данную тему. Люди же мучают Google на перевод растра в вектор в Corel Draw, Illustrator и даже Adobe Photoshop. Начнем с Фотошопа.

Из растра в вектор. Зачем это нужно?

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

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

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

Усаживаться с тремя томами по Иллюстратору на пару недель для этого вовсе необязательно.

Перевод растра в вектор в Фотошопе

Что именно способен перевести в вектор Фотошоп? Что угодно, если вы заранее выделите этот объект инструментами группы Select. Фотошоп конвертирует в контур любое выделение. Об инструментах выделения можно прочесть в статье Примитивах выделения в Фотошопе. Приведу рабочий пример. Много лет назад ко мне обратился очень непростой заказчик, затребовавший непростой сайт. Для сайта необходимо было выполнить различный арт, и я решил нарисовать его в фотошопе. В ходе рисования я перевел его в вектор, и сейчас я расскажу как. Вот одно из подобных изображений, которое я рисовал кистью с твердыми краями на планшете. Я обвел оригинального Витрувианского человека, видоизменил его и нарисовал свое, отличное от оригинала, лицо. Идея векторизировать арт пришла случайно. Но реализовав её, я получил возможность как угодно масштабировать человека. Более того, ранее рваные края и неровности после векторизации сгладились.

Находим изображение для трассирования

Я подыскал в Google Картинки бабочку. Её мы и переведем в вектор. Учтите, что чем больше изображение, тем ровнее получится наш векторный объект. Это справедливо и для Фотошопа и для Иллюстратора. Под большим изображением я понимаю картинку от 1000 пикселей в ширину и больше. Моя бабочка к примеру от 2000 пикселей.

Выделяем объект

Выберите из меню Tool самую обычную волшебную палочку Magic Wand Tool и кликните по белой области. Так мы создали область выделения, но выделить нужно бабочку.

Зайдите в Select > Inverse или кликните по рабочей области и из появившегося меню выберите

Select Inverse. Смысл в том, что созданное выделение надо инвертировать чтобы выделить бабочку. Честно говоря мне совершенно все равно как вы будете создавать ваше выделение. Хоть вручную обводите лассо, это не имеет никакого значения.

Создаем векторный контур

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

Work Path и сохраните контур отдельно.

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

Инструменты для работы с контурами в фотошопе — Path Selection Tool и Direct Selection Tool. У нас есть контур, но нет объекта. Если вы читали серию моих заметок о векторе в фотошопе вы уже знаете, что вектор в фотошопе представлен в виде векторной маски для какого-то эффекта или графики. Еще вектор может присутствовать в виде умного слоя, ссылающегося на импортированный фаил Иллюстратора, но это оставим для другой заметки. Выделите контур инструментом

Path Selection Tool или в палитре контуров Path. Нажмите Layer > New Fill Layer > Solid Color Мы создали слой заливки, которому сразу присваивается векторная маска в виде нашего контура.

Доработка векторного контура

Пользуясь материалами, которые я описал в статьях Векторные инструменты рисования в Фотошопе и Add, Subtract, Intersect и Exlude в Фотошопе усложним рисунок.

Я взял инструмент Pen Tool, выделил маску слоя заливки. В настройках Pen Tool выставил Subtract и дорисовал некоторые элементы нашей бабочке. Вырезал узоры на крыльях, а ножки и усики сделал толще.

Создание произвольной фигуры Custom Shapes

Вы всегда можете сохранить полученный объект в произвольные фигуры Custom Shapes. Некоторое время назад я упоминал о том как это можно сделать в статье Custom Shape Tool в Фотошопе. Выделите слой с бабочкой и нажмите Edit > Define Custom Shape Наша бабочка появилась в фигурах инструмента Custom Shapes Tool.

А вот то, что у нас получилось в итоге:

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

Перевод из растра в вектор фотографии в фотошопе

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

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

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

Итого, вся фотография преобразована в векторные области.

Последнюю белую область мы не будем преобразовывать в вектор. Просто нарисуйте большой белый квадрат инструментом Rectangle Tool и поместите его под все слои. После легкой чистки и доработки контуров фотография выглядит так, как на картинке ниже. И ещё раз, подобная работа не предназначена для Фотошопа и является скорее извращением. Но, это можно сделать, и в различных ситуациях подобные приемы могут пригодиться. Обработка фотографии заняла у меня 10 минут, так что подобная работа не отнимает массу времени. И помните, чем большего размера фотографию вы разложите таким образом на слои, тем лучше и эластичнее контур сможет обогнуть области выделения. Тем менее угловатой и грубой получится наш вектор в Фотошопе. Различные настройки Toleranse при создании контура тоже дадут разный результат. Удачных экспериментов!

Автор:

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

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

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

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

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

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

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

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

Перо

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

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

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

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

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

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

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

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

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

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

Из растра в вектор. Зачем это нужно?

Перевод растра в вектор в Фотошопе

Находим изображение для трассирования

Выделяем объект

Зайдите в Select > Inverse или кликните по рабочей области и из появившегося меню выберите Select Inverse. Смысл в том, что созданное выделение надо инвертировать чтобы выделить бабочку. Честно говоря мне совершенно все равно как вы будете создавать ваше выделение. Хоть вручную обводите лассо, это не имеет никакого значения.

Создаем векторный контур

У нас есть выделенная область, теперь конвертируем её в векторный контур path. Выберите любой инструмент выделения вроде Lasso Tool, Rectangular Marquee Tool или Magic Wand Tool. Кликните по области выделения правой кнопкой мыши и в появившемся меню выберите Make Work Path. В появившемся меню установите степень сглаживания Tolerance по вкусу. Зависимость простая. Чем выше цифра, тем выше сглаживание. Чем ниже цифра, тем ниже сглаживание. Высокое сглаживание означает более низкое количество векторных узелков и более неточное следование растровому контуру. В случае с моим Витрувианским человеком именно такого эффекта я и добивался.

Итак, в палитре Path у нас появился рабочий контур. Если у вас нет палитры Path откройте её Windows > Path Рабочая область палитры Path похожа на десктоп или временное пристанище. На ней могут появляться разные контуры, но если вы позаботитесь о последовательном сохранении, со временем они исчезнут. Сделайте двойной клик по контуру Work Path и сохраните контур отдельно. Контуры в области Path работают так же как слои в палитре Layers. Если контур выделен, значит он активен и с ним можно работать.

Доработка векторного контура

Пользуясь материалами, которые я описал в статьях Векторные инструменты рисования в Фотошопе и Add, Subtract, Intersect и Exlude в Фотошопе усложним рисунок. Я взял инструмент Pen Tool, выделил маску слоя заливки. В настройках Pen Tool выставил Subtract и дорисовал некоторые элементы нашей бабочке. Вырезал узоры на крыльях, а ножки и усики сделал толще.

Создание произвольной фигуры Custom Shapes

А вот то, что у нас получилось в итоге:

Перевод из растра в вектор фотографии в фотошопе

Итого, вся фотография преобразована в векторные области. Последнюю белую область мы не будем преобразовывать в вектор. Просто нарисуйте большой белый квадрат инструментом Rectangle Tool и поместите его под все слои. После легкой чистки и доработки контуров фотография выглядит так, как на картинке ниже. И ещё раз, подобная работа не предназначена для Фотошопа и является скорее извращением. Но, это можно сделать, и в различных ситуациях подобные приемы могут пригодиться. Обработка фотографии заняла у меня 10 минут, так что подобная работа не отнимает массу времени. И помните, чем большего размера фотографию вы разложите таким образом на слои, тем лучше и эластичнее контур сможет обогнуть области выделения. Тем менее угловатой и грубой получится наш вектор в Фотошопе. Различные настройки Toleranse при создании контура тоже дадут разный результат. Удачных экспериментов!

Автор:

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

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

Главная » Photoshop: Как преобразовать растр в вектор

Photoshop: Как преобразовать растр в вектор

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

В данном уроке рассмотрим следующие действия:

Создание документа и рисование объекта

Сначала создадим новый документ любого размера и слой.

Теперь нарисуем любое изображение. Возьмите инструмент кисть (Brush) с неразмытыми краями и с полной непрозрачностью. Давайте нарисуем какую-нибудь несложную геометрическую фигуру, например, как показано на изображении.

Выделение растрового объекта

Для перевода растрового изображения нужно сначала выделить его любым инструментом типа Select. Теперь выделим нарисованный объект либо при помощи инструмента Wand Tool, либо нажмем на слой левой кнопкой мыши зажав клавишу Ctrl.

Преобразование выделенного объекта в векторный путь (Path)

При помощи любого инструмента типа Select вызовем контекстное меню. Для этого нужно навести инструмент на выделенный объект, и нажать правую кнопку мыши. В появившемся меню выбрать «Make Work Path…» .

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

Создание векторной маски для слоя из векторного пути

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

Два раза нажмите на него, чтобы дать имя.

Затем в главном меню выберите «Layer -> New Fill Layer -> Solid Color…» . Можете как-нибудь назвать новый слой, затем нажать «ok» . Выберите цвет для будущей формы в диалоге выбора цвета.

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

Как сохранить векторный объект в библиотеку векторных фигур в Photoshop

Если хотите сохранить векторный объект в библиотеку векторных фигур, то зайдите в главное меню Edit -> Define Custom Shape…

Затем вам будет предложено поименовать новый векторный объект. Нажмите «ok» , после чего проверьте новый объект в библиотеке, используя инструмент Custom Shapes Tool.

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

Комментировать

Отмена

Дорогие любители программирования, дизайна и рисования!

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

Внесите вклад в развитие сайта. Перечислите любую (пусть даже незначительную) сумму на один из кошельков: webmoney R295964384890 yandex-деньги 41001797494168

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы работать с контурами, вам нужно вызвать закладку «Контуры»/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».

Источник: https://Prophotos.ru/lessons/19647-kak-perevesti-rastrovoe-izobrazhenie-v-vektornoe-v-fotoshope

Создаем векторный рисунок в фотошопе

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

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

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

Если Вы хотите нарисовать векторную иллюстрацию, то должны иметь в виду, что для этого используются такие редакторы как 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 рх.

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

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

Перевод: Bagirrra;

Источник: https://photoshoplessons.ru/grafika/sozdaem-vektornyiy-risunok

Как логотип перевести в вектор в Фотошопе

На просторах рунета я нашел изображение логотипа. Можно ли перевести её из растра в вектор в Фотошопе, причем автоматически? Нет, нельзя. Увы, пока тенденции вектора в Фотошопе таковы, все что в этом направлении было сделано, осталось неизменно ещё 5 версий назад. С тех пор оно не трогалось, не изменялось и ничего нового в векторе не добавлялось. Вам нужны были векторные инструменты в фотошопе? Вот они, хотите больше? Что вообще вы забыли в Фотошопе, осваивайте Иллюстратор. Примерно такой ход мысли двигал разработчиками, внедрявшими самые простые векторные операции в Фотошоп. А теперь перейдем к делу.

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

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

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

Особо отмечу, чтобы перевод в вектор получился качественный, сама картинка должна быть большого размера. Это справедливо в случае трассировки в Иллюстраторе, а для Фотошопа это ещё важнее. Мое изображение имеет 1500 пикселей в ширину, когда мы закончим перевод в вектор, я покажу, как Фотошоп переводит маленький изображения и мы сравним результаты.

Выбирайте инструмент Magic Wand Tool

Настройте в опциях Tolerance 20 или 30.

Там же кликните по иконке Add to Selection. Подробно о их работе я писал в статье Add, Subtract, Intersect и Exlude в Фотошопе где речь шла об инструментах вектора, но в выделении эти опции работают так же.

При желании можете использовать быстрые клавиши. Зажатая клавиша SHIFT наделит Magic Wand Tool свойством Add to Selection, а на курсоре появится плюсик.

Мне честно говоря все равно как вы выделите логотип, хоть в ручную лассо, хоть через Color Range. Просто в данной ситуации, конкретно на этом изображении проще всего это сделать инструментом Magic Wand Tool.

Не переключайтесь с инструмента Magic Wand Tool.

Правой кнопкой мыши кликните по области выделения.

Из появившегося меню выберите Make Work Path.

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

На нижеприведенной иллюстрации я выбрал инструмент Path Selection Tool и выделил контур, что бы он был вам виден.

Эта операция не обязательна, но желательна.

Переключитесь на палитру Path. Если вы не можете её найти нажмите Window > Path
Кликните дважды по контуру в палитре.
В появившемся окне введите имя и нажмите ОК.

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

Убедитесь, что ваш конур выделен в палитре Path
Выберите из меню Layer > New Fill Layer > Solid Color
В появившемся окне выберите цвет и кликните ОК

Вот и все. Точнее было бы все если бы это не был hronofag.ru Помните я говорил вам, что чем меньше изображение, тем хуже оно переведется.

Готов поспорить на руках у вас какой-то грязный скан засунутый в Ворд, который заказчик требует перевести в вектор? Я угадал? При этом изображение пережато JPG сжатием, уменьшено, потом увеличено, затем опять уменьшено до размеров аватарки, и ещё на него пролили кетчуп. Можно ли качественно перевести в Фотошопе в вектор такую картинку?

Для начала посмотрите на наш логотип. Не смотря на отличное разрешение, четкие края Фотошоп не сумел создать хорошие и ровные контуры. Иллюстратор делает это в 100 раз лучше, но статья не про иллюстратор. Как видите контуры не везде ровные, даже в прямоугольных частях логотипа. А окружности совсем косые.

Теперь я уменьшу изображение в 2 раза, затем еще в 2 раза и покажу вам результат перевода в вектор.

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

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

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

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

Единственный рабочий вариант — отрисовать логотип с нуля в Фотошопе.

Источник: http://hronofag.ru

Источник: http://uvw-architecture.blogspot.com/2013/09/blog-post_10.html

Векторная графика в фотошопе

Галина Соколова. 20 февраля 2016. Категория: Уроки рисования в фотошопе.

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

Итак, приступим к работе и откроем контурный рисунок в фотошопе:

Начнём рисовать с носа собачки, для этого создадим новыйпустой слой CTRL+SHIFT+ALT+N, затем активизируем инструмент Эллипс и выберем цвет для первого эллипса. Удерживая клавишу SHIFT, нарисуем круг, который будет перекрывать нос и уменьшим непрозрачность слоя до 70% чтобы были видны линия рисунка.

Теперь активизируем инструмент Выделение контура и щёлкнем инструментом по кругу, в результате появится контур с узловыми точками. Затем нужно активизировать инструмент Перо и поставить дополнительную точку на контуре и удерживая клавишу клавишу CTRL, понянуть за узловую точку к линии рисунка:
Теперь щёлкнем по пустому полю в окне Контуры, чтобы контур завершился :
Теперь создадим новый слой, активизируем инструмент Эллипс и повторим все вышеописанные операции для следующего круга на рисунке, изменив цвет заливки, а так же непрозрачность слоя, чтобы видны были линии рисунка:
Таким же образом поступим и с третьим кругом, для котороготоже создадим новый слой и подберём цвет:
Теперь вернём непрорачность 100% для каждого слоя:

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

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

Теперь нужно удерживая клавишу ALT, нажать на точку, чтобы один усик направляющей пропал :
Далее ставим и выравниваем точки до окончания линии уха изатем возьмём жёсткую кисть чёрного цвета и вызовем её настройки, нажав на клавишу F5, где установим галочку в Динамике формы Нажим Пера.
После настройки кисти перейдём к инструменту Перо и в окне Контур щёлкнем правой кнопкой мышки по синей полоске и в выпадающем окне выберем Выполнить обводку контура, где установим галочкуИмитировать нажим пера:
Таким же образом сделаем обводку для всего контура собачки:

Теперь разукрасим собачку. Для этого перейдём на слой Фон исоздадим новый слой Цвет1, на котором будем делать контуры охватывающие оранжевый цвет. Выберем инструмент перо и обведем 1-ый участок с цветом:

Перейдём в окно Контуры, где нужно щёлкнуть по контуруправой кнопкой мышки и выбрать Выполнить заливку контура, где выберем оранжевыйцвет:
Таким же образом зальём оранжевым цветом и другие участки на рисунке:
Теперь уменьшим непрозрачность слоя Цвет 1 и создадим новый слой Цвет 2 и таким же способом создадим контуры для коричневого цвета, затем зальём их цветом:
Теперь создадим новый слой Цвет 3 и сделаем контур в виде полосочки на лбу, затем зальём контур жёлтым цветом.
Теперь создадим новый слой и назовём его Усы, на этом слоенарисуем маленькие жёлтые кружочки на мордочке собачки, которые будут имитировать усы.
Кружочек будем рисовать с помощью инструмента Эллипс таким же образом, как рисовали глаза, затем создадим дубликаты слоя Усы и вызвав трансформацию изменим размеры кружочков и расположим их в нужных местах. Все слои с дубликатами кружочков выделим и образуем Группу Усы CTRL+G:
Теперь перейдём на слой Фон и создадим новый слой, которыйзальём белым цветом:
На этом урок «Векторная графика в фотошопе» окончен.

Если Вы не хотите пропустить интересные уроки по работе с изображениями в фотошопе и другие полезные материалы — подпишитесь на рассылку. Форма для подписки находится ниже.

Печать

Источник: https://www.photoshopsunduchok.ru/dizayn-/3303-vektornaya-grafika-v-fotoshope

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

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

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

Выберите фотографию и откройте её в фотошопе.

Сделайте копию слоя. Обзовите один слой Girl 1 Layer, а второй Girl 2 Layer.

Примените функцию Image — Adjustments — Thresholds (Изображение — Коррекция — Изогелия) для слоя Girl 1 Layer.

Установите цвета белый и черный, в панели инструментов.

Примените фильтр Filter — Sketch — Photocopy (Фильтр — Скетч — Фотокопия) для слоя Girl 2 Layer.

Режим смешивания у слоя Girl 2 Layer установите Multiply (Умножение)и объедините слои.

Примените еще раз функцию Threshold (Изогелия)

Теперь необходимо сгладить края, для этого примените фильтр Stylize — Difusse (Стилизация — Диффузия)

Векторное изображение готово.

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

Для заливки цветом используйте Paint Bucket Tool (Заливка). Это не составит для вас проблемы.

Автор перевода Всеволод (специально для Pixelbox.ru)

Источник: https://pixelbox.ru/kak-sdelat-vektornyj-risunok-iz-fotografii

Photoshop: Как преобразовать растр в вектор

В этом уроке поговорим о том, как перевести растровое изображение в векторную форму в Фотошопе.

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

В данном уроке рассмотрим следующие действия:

Создание документа и рисование объекта

Сначала создадим новый документ любого размера и слой.

Выделение растрового объекта

Преобразование выделенного объекта в векторный путь (Path)

Создание векторной маски для слоя из векторного пути

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

Два раза нажмите на него, чтобы дать имя.

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

Как сохранить векторный объект в библиотеку векторных фигур в Photoshop

Jean Winters

Источник: https://jwinters.ru/photoshop-cs/photoshop-rastr-to-vector/

Вектор в фотошопе: инструкция (описание, видео, пример)

Главная / Советы дизайнерам / Вектор в фотошопе

Инструменты для работы с вектором в Photoshop появились достаточно давно, но использовать их в работе начали сравнительно недавно. Это связанно с тем, что очень долгое время они были “сырыми” и т.к. вектор в фотошопе не является профильным инструментом для работы, его и не дорабатывали. Но все поменялось с выходом Photoshop CC.

Зачем нужен вектор в фотошопе

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

е. прежде чем стать сайтом, интерфейсом, приложением макет попадет верстальщику. Большинство верстальщиков в совершенстве владеют Photoshop, но очень поверхностно знакомы с Illustrator. Поэтому желание “запихнуть” все в один файл вполне логично.

Здорово когда верстальщик получает один PSD в котором содержится полный макет да еще и с возможностью редактирования элементов.

Поменять цвет кнопки, изменить радиус формы меню, увеличить или уменьшить блок без потери качества — за 2 клика и 1 минуту! Вектор в фотошопе позволяет сделать это без особых навыков.

Особенности работы с вектором в фотошопе

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

Что бы легко редактировать вектор в фотошопе необходимо каждую фигуру располагать в отдельном слое. 2. Операции по “слиянию”, “вычитанию”, “наложению” лучше применять к не более чем двум объектам. 3.

После операции “слияния”, “вычитания”, “наложения” контуры исходных объектов остаются доступными к редактированию. 4. Ко всем векторным объектам можно легко применять растровые стили. Это очень удобно. 5.

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

7. Подписывайте каждый слой и группируйте слои — это сэкономит массу времени.

Основные примитивы

Как и в любом векторном редакторе, вектор в фотошопе имеет готовые примитивы. Основные примитивы: “Прямоугольник”, “Прямоугольник со кругленными углами ”, “Эллипс”, “Многоугольник”, “Линия”, “Произвольная фигура”.

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

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

Основные инструменты

4. Как править контур произвольной векторной фигуры

Основные операции с вектором в фотошопе

Всего доступно 4 операции: “Объединение фигур”, “Вычесть переднюю фигуру”, “Объединить фигуры в наложении”, “Вычесть фигуры в наложении”. Все эти операции доступны через основное верхнее меню Слои > Объединить фигуры, либо через панель инструментов “Свойства” (верхнее меню Окно > Свойства).

Внимание! Прежде чем начать какие-то операции по объединению векторных фигур убедитесь что слои этих фигур выделены в панели инструментов “Слои” (включить ее F7 или Окно > Слои). Краткое видео иллюстрирующее основные операции “объединения фигур” в фотошопе.

Меняем цвет, размер и применяем стили

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

Для этого выберете нужные слои в панели инструментов “слои”, нажмите Ctrl+T (или Command+T если у вас MAC) и перетаскивая маркеры выделенного контура мышкой отрегулируйте размер. Что бы размер менялся пропорционально необходимо зажимать клавишу Shift.

Краткое видео: 1. Изменяем размер векторной фигуры 2. Изменяем цвет заливки векторной фигуры

3. Добавляем стиль к векторной фигуре

Скачать пример PSD (бесплатно)

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

Задать вопрос

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

Источник: https://site2max.ru/tips-for-designers/vektor-v-fotoshope/

Как выполнить растрирование изображения в Photoshop

Photoshop – это программа для работы с графикой, преимущественно растровой. У неподготовленных пользователей могут возникать некоторые «непонятки» в принципе работы программы и необходимости перевода одного вида изображений в другой (из вектора в растр и наоборот).

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

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

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

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

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

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

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

Как вырезать объект в Фотошопе (Photoshop) «Пером» — инструкция Как изменить размер изображения в Фотошопе Два способа выделить один цвет в Adobe Photoshop Три способа выполнить поворот изображения в Photoshop

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

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

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

Итак, у нас есть какое-то векторное изображение. Вы могли нарисовать его самостоятельно в Фотошопе или экспортировать из других графических редакторов. Быстрый экспорт в Photoshop, например, поддерживает программа Adobe Illustrator.
Выделите слой с векторным изображением в панели со слоями, что по умолчанию расположена в правом нижнем углу интерфейса программы.
Кликните правой кнопкой мыши по этому слою. Из контекстного меню нажмите на пункт «Растрировать». В зависимости от типа векторного изображения, здесь может быть какая-нибудь приписка, например, «Растрировать текст».

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

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

Источник: https://public-pc.com/rastriruem-izobrazhenie-v-adobe-photoshop/

Как перевести картинку, логотип в вектор

Главная

→

Дизайн

→

Adobe Illustrator

→

Как перевести картинку, логотип в вектор

Скачать материалы урока

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

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

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

1. Подготавливаем изображение в фотошопе

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

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

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

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

Берем слой с надписью (названием логотипа), выбираем в верхнем меню «Изображение» — «Коррекция» — «Уровни», либо нажимаем комбинацию клавишь «Ctrl + L» и в появившемся окне настроек выставляем ползунок выходных значений в крайнее левое положение.

Данное действие перекрасит изображение в черный цвет. После этого просто сохраняем получившуюся картинку в формате jpg («Файл» — «Экспортировать» — «Сохранить для web»). Таким образом необходимо поступить со всеми слоями логотипа, кроме надписи под логотипом. В итоге получаем набор изображений в формате jpg, как на картинке ниже, только каждый элемент должен быть отдельной картинкой.

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

2. Переводим изображения в вектор и собираем логотип

Открываем Adobe Illustrator и создаем холст размером, соответствующим сохраненным изображениям, в данном случае у меня получился размер 500×229 пикселей.

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

Далее в верхнем меню выбираем «Объект» — «Растрировать», при этом слой изображения должен быть выделен.

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

Теперь в верхнем меню выбираем «Объект» — «Разобрать» и в открывшемся окне ставим обе галочки, после чего нажимаем «Ок».

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

Переводим обычную картинку в вектор

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

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

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

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

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

Источник: http://1024pixels.ru/web-dizain/illustratoror/perevesti-v-vector

Как перевести растр в вектор в программе Adobe Illustrator, Photoshop и онлайн

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

в программе Adobe Illustrator;
с помощью Photoshop;
бесплатной автоматической онлайн трассировкой на сайтах.

Внимание! Версия графических редакторов Adobe Illustrator и Photoshop значения не имеет. Можно использовать любую.

Способ подойдет для jpeg, png и других типов файлов.

Как перевести растр в вектор в Иллюстраторе

Открываем растровое изображение в Adobe Illustrator. Для этого можно кликнуть на рисунке правой кнопкой мыши и выбрать из выпадающего меню Открыть с помощью… — Adobe Illustrator или запустить программу и перетащить рисунок на рабочую область.

Исходное растровое изображение

На панели инструментов активируем «Выделение» (черная стрелочка) и ей щелкаем по изображению. При этом картинка должна выделиться в рамку. Чтобы проверить это, можете попробовать немного переместить её, зажав левую кнопку мыши, когда курсор находится над изображением (по принципу drag-and-drop).

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

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

Дальше есть два пути:

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

Предпочитаю второй способ: так быстрее и проще запоминается. Изменяем параметр. Смотрим, на что влияет (визуально). Комбинируем несколько значений. И так до достижения более-менее приемлемого результата.

Полученное векторное изображение.

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

Если полученный результат не устраивает, его можно доработать. Для этого с помощью инструмента «Выделение» необходимо выбрать все созданные кривые (нажать левую кнопку мыши и, удерживая ее, обвести изображение целиком). Идем в пункт меню «Объект» — «Трансформирование» — «Масштабирование» и меняем размер изображения таким образом, чтобы оно было достаточно большим для удобства редактирования. Затем выбираем инструмент «Прямое выделение» (белая стрелочка). Ей поочередно кликаем в каждый узел и выравниваем сплайны: при выделении вершины рядом появляются усы, потянув за которые можно изменять кривизну линий.

Результат преобразования растрового изображения в вектор в режиме сетки

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

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

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

Чтобы перевести растр в вектор в Фотошопе, открываем в нём изображение и выбираем в меню File — Save as (сочетание горячих клавиш Ctrl + Shift + S). Появится список возможных вариантов, как сохранить файл. Подходят 3 формата: svg, tiff и pdf. Можно поочередно сохранить во всех трёх и далее уже работать с тем, где лучше качество.

Перевод растра в вектор онлайн бесплатно

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

Пример: https://online-converting.ru/autotrace/

Сервис поддерживает разные форматы входных и получаемых файлов. Настройка включает в себя около 10 параметров.

Принцип работы следующий:

Загружаем файл с локального диска (можно указать ссылку на картинку в интернете и работать с ней).
Выставляем желаемые параметры и качество в DPI (количество пикселей на дюйм, чем больше, тем лучше, но и файл будет весомее).
Нажимаем на синюю кнопку «Конвертировать».
Чуть ниже в табличке скачиваем результат.
Проверяем на всякий случай антивирусом, оцениваем качество. Если хочется сделать лучше, меняем параметры и прогоняем трассировку до тех пор, пока не будет достигнут желаемый результат.

Оцените, насколько понравился материал статьи:

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

Из растра в вектор. Зачем это нужно?

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

Перевод растра в вектор в Фотошопе

Что именно способен перевести в вектор Фотошоп? Что угодно, если вы заранее выделите этот объект инструментами группы Select . Фотошоп конвертирует в контур любое выделение. Об инструментах выделения можно прочесть в статье Примитивах выделения в Фотошопе . Приведу рабочий пример. Много лет назад ко мне обратился очень непростой заказчик, затребовавший непростой сайт. Для сайта необходимо было выполнить различный арт, и я решил нарисовать его в фотошопе. В ходе рисования я перевел его в вектор, и сейчас я расскажу как. Вот одно из подобных изображений, которое я рисовал кистью с твердыми краями на планшете. Я обвел оригинального Витрувианского человека, видоизменил его и нарисовал свое, отличное от оригинала, лицо. Идея векторизировать арт пришла случайно. Но реализовав её, я получил возможность как угодно масштабировать человека. Более того, ранее рваные края и неровности после векторизации сгладились.

Находим изображение для трассирования

Выделяем объект

Зайдите в Select > Inverse или кликните по рабочей области и из появившегося меню выберите Select Inverse . Смысл в том, что созданное выделение надо инвертировать чтобы выделить бабочку. Честно говоря мне совершенно все равно как вы будете создавать ваше выделение. Хоть вручную обводите лассо, это не имеет никакого значения.

Создаем векторный контур

У нас есть выделенная область, теперь конвертируем её в векторный контур path . Выберите любой инструмент выделения вроде Lasso Tool, Rectangular Marquee Tool или Magic Wand Tool . Кликните по области выделения правой кнопкой мыши и в появившемся меню выберите Make Work Path . В появившемся меню установите степень сглаживания Tolerance по вкусу. Зависимость простая. Чем выше цифра, тем выше сглаживание. Чем ниже цифра, тем ниже сглаживание. Высокое сглаживание означает более низкое количество векторных узелков и более неточное следование растровому контуру. В случае с моим Витрувианским человеком именно такого эффекта я и добивался.

Итак, в палитре Path у нас появился рабочий контур. Если у вас нет палитры Path откройте её Windows > Path Рабочая область палитры Path похожа на десктоп или временное пристанище. На ней могут появляться разные контуры, но если вы позаботитесь о последовательном сохранении, со временем они исчезнут. Сделайте двойной клик по контуру Work Path и сохраните контур отдельно. Контуры в области Path работают так же как слои в палитре Layers . Если контур выделен, значит он активен и с ним можно работать.

Инструменты для работы с контурами в фотошопе — Path Selection Tool и Direct Selection Tool . У нас есть контур, но нет объекта. Если вы читали серию моих заметок о векторе в фотошопе вы уже знаете, что вектор в фотошопе представлен в виде векторной маски для какого-то эффекта или графики. Еще вектор может присутствовать в виде умного слоя, ссылающегося на импортированный фаил Иллюстратора, но это оставим для другой заметки. Выделите контур инструментом Path Selection Tool или в палитре контуров Path . Нажмите Layer > New Fill Layer > Solid Color Мы создали слой заливки, которому сразу присваивается векторная маска в виде нашего контура.

Доработка векторного контура

Пользуясь материалами, которые я описал в статьях Векторные инструменты рисования в Фотошопе и Add, Subtract, Intersect и Exlude в Фотошопе усложним рисунок. Я взял инструмент Pen Tool , выделил маску слоя заливки. В настройках Pen Tool выставил Subtract и дорисовал некоторые элементы нашей бабочке. Вырезал узоры на крыльях, а ножки и усики сделал толще.

Создание произвольной фигуры Custom Shapes

Вы всегда можете сохранить полученный объект в произвольные фигуры Custom Shapes . Некоторое время назад я упоминал о том как это можно сделать в статье Custom Shape Tool в Фотошопе . Выделите слой с бабочкой и нажмите Edit > Define Custom Shape Наша бабочка появилась в фигурах инструмента Custom Shapes Tool .

А вот то, что у нас получилось в итоге:

Перевод из растра в вектор фотографии в фотошопе

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

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

Для чего используется перевод из растрового объекта в контурный

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

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

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

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

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

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

Картинки для трассирования

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

Выделение объекта

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

Затем нужно выделить бабочку при помощи набора Select — Select Inverse. В данной процедуре происходит инвертирование для того, чтобы выделить изображение. Однако стоит заметить, что этот или другой вариант не влияет на конечный результат, главное, чтобы был выделен необходимый объект.

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

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

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

После того как вы выбрали область, произведите ее конвертацию в векторный контур. Для этого можно воспользоваться инструментами выделения, такими как Lasso Tool, Rectangular Marquee Tool, Magic Wand Tool и др. Дальше правой клавишей мыши нажмите на область выделения, после чего появится меню, в котором следует выбрать Make Work Path. Следом будет меню, в котором устанавливается степень сглаживания Tolerance. Чем больше сглаживание, тем меньше количество векторных узлов и менее точное повторение растрового контура.

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

Затем выделите контур при помощи Path Selection Tool или палитры Path. Необходимо нажать кнопку Layer, после чего в открывшейся вкладке выбрать New Fill Layer, а уже в ней Solid Color. Таким образом вы создадите слой заливки, которому сразу присваивается векторная маска в виде вашего контура.

Окончание работы

Для доработки изображения можно использовать Pen Tool — для выделения маски слоя заливки. Затем — настроить Pen Tool, а именно выставить Subtract. При помощи этого можно нарисовать на изображении дополнительные элементы и узоры.

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

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

2. Процесс. Для начала — правый клик мыши и выполните одно из двух: а) Copy [Копировать]. Затем в Photoshop»е Edit — Paste [Редактирование — Вставить]. В этом методе Photoshop оставляет заблокированный слой фона и вставляет изображение на новый слой Layer 1 над фоном. Два раза кликните на слове Layer 1, чтобы выделить текст и назвать слой более приемлемо. Например, «theimage».

б) Save Picture As [Сохранить рисунок как] на винт. Затем в Photoshop File — Open [Файл — Открыть] и найдите, куда вы сохранили картинку. Может быть, на рабочий стол?.. Обратите внимание, в палитре слоев иконка изображения показывает, что изображение «индексное» [короче говоря, это gif]. Заметьте также, оно заблокировано. Чтобы это исправить просто идем в Image — Mode — RGB color [Изображение — Модель — RGB] и переводим тем самым заблокированный слой в слой фона. Двойной клик на слое фона переведет его в редактируемый слой. [Переименуйте Layer 0 в более дружественный… Например, «theimage».]

Теперь создадим дубликат слоя theimage. Если вы используете Photoshop 7 или CS, создайте новый набор слоев, чтобы сохранить все индивидуальные объекты. Просто нажмите на иконке папки внизу палитры слоев, двойной клик на Set 1 и назовите его как у меня .

3. Могущественный инструмент перо. Давайте начнем с создания обводки по периметру всей машины. Установите foreground color при помощи пипетки, взяв цвет с самого темного места изображения. В данном случае, очень близко к черному. Теперь выберете инструмент перо на панели инструментов. Убедитесь, что опция Shape Layers включена [вверху на панели опций], я обвел ее оранжевым цветом.

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

4. Соединение точек привязки. После создания пути вокруг автомобиля, соедините с первой точкой привязки, чтобы создать твердую форму. Теперь скройте слой theimage copy, чтобы увидеть, что получилось [Как я сделал на рисунке ниже.] Теперь начнем манипулировать с точками привязки для придания более стройной формы нашему авто.

Вот как теперь выглядит палитра слоев с новым слоем Vector Shape [Векторная форма], выделенным синим цветом. Также если вы кликните на вкладке Paths [Пути] палитры слоев, вы увидите «путейную» версию этого слоя.

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

Убедитесь, что выбран слой Shape 2.
Конвертирование точек я начал с колеса. Клик на точке привязки и переместил в направлении черной стрелки [см. рис.] до тех пор, пока путь не стал повторять контуры колеса.

Совет: Инструмент конвертирования создает 2 точки Безье для регулирования кривизны.

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

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

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

Далее я сделал копию слоя Shape 2 и манипулировал точками для отрисовки доминирующего цвета [синего, в данном случае] автомобиля. Клик на иконке этого слоя, возьмите пипетку и измените черный цвет на синий #3672BD.

Вот как теперь выглядит машина.

Теперь давайте поработаем над окнами.
Снова включите слой theimage copy [черный] и скройте слой Shape 2 copy [синий].
Возьмите инструмент перо и на панели опций включите опцию Subtract from area shape [я обвел ее оранжевым цветом].

Скройте слой Shape 2 copy. Выберете слой Shape 2. Начнем с трассировки окон с противоположной стороны авто.

Отключите видимость слоя theimage copy, посмотрите на результат.
Вычитание из черной формы создало иллюзию прозрачности.

Чтобы применить этот эффект к другим двум окнам без добавления нового слоя просто удерживайте Ctrl+Alt, кликайте и перемещайте этот вычитающий путь для копирования. [Сделайте это дважды.] Теперь поместите дубликаты на свои места. Используйте инструмент конвертирования опорных точек опять для сглаживания углов и точного формирования.

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

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

Теперь при помощи инструмента эллипс на панели инструментов нарисуйте центр заднего колеса, затем, удерживая Shift, сделайте то же самое для переднего колеса.
Для точного позиционирования, Ctrl плюс клик на новом эллипсе, затем правый клик на простом эллипсе и выберете Free Transform Path [Свободная трансформация пути]. Снова правый клик и выберете Distort [Искажение]. Я также начал работать над фарами [на новом слое], используя ту же методику: Эллипс — Свободная трансформация — Искажение — установка на позицию.

С тех пор, как были добавлены новые слои, они могли накапливаться, разумно назвать их корректно. [Я думал, возможно использование как можно меньшего числа слоев, но…]

Далее я добавил бампер. Снова, использую инструмент перо для трассировки, инструмент конвертирования опорных точек для сглаживания углов и точного формирования относительно оригинала. [Все это — давно заведенная и принятая практика трассировки, честно!]

Затем я применил стиль слоя к бамперу для придания ему эффекта хрома. Правый клик на слое bumper и применяйте следующие установки.

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

Теперь установите активный цвет черный [или просто нажмите D], нажмите клавишу B, чтобы выбрать инструмент кисть, теперь на панели опций установите Brush Preset Picker и выберете маленькую, с мягкими краями кисть размером примерно 3. Но измените диаметр на 2 пикселя [попробуйте даже 1], так как даже 3 может быть много.

Для повторного выбора пера нажмите Р, активизируйте слой Lines, правый клик и выбор опции Stroke Path.

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

Я изменил прозрачность слоя Lines до 54%, чтобы смягчить его.

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

Для таких структур как подсветка, используйте полигональное лассо [L] для трассировки вокруг таких областей, правый клик и — «Заливка» мягким синим цветом [я использовал #86A9D7].

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

В данном уроке рассмотрим следующие действия:

Создание документа и рисование объекта

Сначала создадим новый документ любого размера и слой.

Выделение растрового объекта

Преобразование выделенного объекта в векторный путь (Path)

Создание векторной маски для слоя из векторного пути

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

Два раза нажмите на него, чтобы дать имя.

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

Как сохранить векторный объект в библиотеку векторных фигур в Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

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

Как перевести растровое изображение в векторное быстрым способом в Adobe Illustrator.

Главная

→

Дизайн

→

Adobe Illustrator

→

Как перевести картинку, логотип в вектор

Создание документа и рисование объекта

Сначала создадим новый документ любого размера и слой.

Приёмы работы с пером при создании линий

Не отпуская кнопку мышки при создании новой точки можно добиваться сглаживания линии.
Точки лучше ставить в местах, где у линии должен быть изгиб.
Зажав клавишу Ctrl на клавиатуре можно перемещать контрольные точки линий.
Зажав клавишу Alt можно регулировать степень закругления линии возле точки и её искажение
Векторные девушки в стиле аниме меня вдохновили испытать фотошоп на его пригодность в плане рисования линий. Рисовать линии в фотошопе сложней, чем в его векторных аналогах и некоторых растровых редакторах – такое впечатление у меня сложилось после ознакомления с инструментами в Paint Tool Sai, Illustrator, Inkscape и других, которые имеют более удобные и гибкие инструменты создания красивых линейных форм.
https://macroart.ru/wp-content/uploads/2011/08/lines.swf,600,490
Записал небольшое демонстрационное видео о том, как рисовать линии в фотошопе и добиться правильной их формы в результате.
Что интересно, видео идёт полторы минуты и весит 2 кб – это очень удивительно Видео записано на BB FlashBack Pro
Однако не всё так плохо. Поизучав специфику работы с инструментом Перо, обнаружились некоторые фишки, которые облегчают рисование линий и делают дизайнерскую работу более свободной.
Не отпуская кнопку мышки при создании новой точки можно добиваться сглаживания линии.

Точки лучше ставить в местах, где у линии должен быть изгиб.

Зажав клавишу Ctrl на клавиатуре можно перемещать контрольные точки линий.
Зажав клавишу Alt можно регулировать степень закругления линии возле точки и её искажение .

Первые два правила знают многие, а вот 3 и 4 для меня стали открытием.

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

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

Преобразование выделенного объекта в векторный путь (Path)

Подготавливаем изображение в фотошопе

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

Создание векторной маски для слоя из векторного пути

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

Два раза нажмите на него, чтобы дать имя.

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

Переводим обычную картинку в вектор

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

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

Комментарии ()

Полное объединение компонентов фигур

И в списке осталась ещё одна команда — «Объединить компоненты фигур» (Merge Shape Components). Команда не зря отстоит особняком от других, т.к. она приводит к необратимым действиям — объединению образующих контуров. Если ранее мы просто переключались между командами, то после применения этой команды, переключиться уже будет нельзя.

Если мы нажмём на эту строку, то появится сообщение с предупреждением «Эта операция превратит фигуру в обычный контур. Продолжить?» (This operation will turn a live shape into a regular path. Continue?), после нажатия ОК контуры будут объединены, все внутренние линии пересекающихся контуров будут удалены, и две или несколько векторных фигур будут преобразованы в один контур, это показано на рисунке, объединение компонентов фигур при: 1. Объединить фигуры (Add to Shape Area) 2. Вычесть переднюю фигуру (Subtract from Shape Area) 3. Область пересечения фигур (Intersect Shape Areas)

Объединение компонентов фигур при различных состояниях операций с контурами

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

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

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

Автоматическая трассировка

Хоть большинством ручная трассировка почему-то считается удобной, — на практике то же большинство пользуется автоматической. И это понятно: одно дело — рассуждать о работе, а другое дело — её выполнять. Для этого есть несколько приложений.

CorelTrace

Сначала растровый рисунок выделяется, на панели свойств выбирается команда Trace Bitmap. Тогда отдельно запущенное окно приложения CorelTrace предоставит возможность для дальнейшей обработки указанного рисунка.

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

Поиграйтесь величиной значения в ячейке Accuracy, передвигая ползунок. Этой величиной определяется чёткость трассировки. Учтите, что увеличение её приведёт к созданию большего количества векторных объектов (иногда до нескольких тысяч). А это потребует дополнительной мощности процессора, памяти (и/или времени).

Есть возможность выбора методов трассировки кнопками в левой секции меню рабочего листа:

Например, при нажатии Scetch и последующей активации Outline (вверху) будет создан набросок из обилия перекрещивающихся линий.
При выборе Advansed Outline вы попадёте в расширенные настройки трассирования. Тогда вверху отразятся дополнительные поля для совершенствования регулировок.

После окончания работы с векторным рисунком для возврата в CorelDraw нужно выйти из CorelTrace по команде File/Exit. Работа трассировщика будет завершена, а векторный результат будет передан в Корел и размещён над растровым. Чтобы снова его (растровый) увидеть, нужно сдвинуть в сторонку вновь созданный рисунок.

PowerTrace

Если утилита CorelTrace существовала как отдельное приложение, то PowerTrace уже встроена в CorelDraw X5.

Здесь уже результат автотрассировки получается вполне приличного качества.

В ней представлены такие виды (выбор в наборе Type of image):

для чёрно-белых набросков — Line art;
эмблемы, знаки с минимумом деталей и цветов — Logo;
эмблемы, знаки с глубокой детализацией — Detailed logo;
наброски с переменной детализацией — Clipart;
для фото с незначительными деталями — Low quality image;
фото с важными деталями — High quality image.

Список выбора Предварительного просмотра (Preview) позволяет избрать наиболее удобный вариант рабочего окна. Вариант До и после (Before anf After) покажет одновременно оба рисунка для оценки различий. Численность точек (узлов) и смягчение изогнутых линий управляется ползунком Smoothing, детализация — Detail. Цветовая гамма для рисунка определяется вкладкой Colors и набором Color Mode, а их численность в ячейке Numbers of colors.

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

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

Как превратить картинку в вектор в фотошопе — Вокруг-Дом

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

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

Подготовка изображения в фотошопе

Шаг 1

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

Шаг 2

Отрегулируйте контрастность изображения до +28. Чтобы открыть редактор контрастности, выберите «Изображение», затем «Регулировки», затем «Яркость / Контрастность».

Шаг 3

Примените «Фильтр фотокопии», выбрав «Фильтры», «Эскиз», затем «Фотокопия» и установив параметры для «Детализация» на 12 и «Темнота» на 14.

Шаг 4

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

Шаг 5

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

Преобразование в вектор с помощью Illustrator

Шаг 1

Откройте новый файл Illustrator и поместите изображение из Раздела 1, выбрав «Файл», затем «Поместить» и выбрав сохраненное изображение из Раздела 1.

Шаг 2

Выполните трассировку объекта, чтобы преобразовать его в векторное изображение, выбрав «Объект», затем «Live Trace» и «Параметры трассировки». Установите порог 200 до завершения трассировки. Вам не нужно будет вручную отслеживать элемент, компьютер будет обрабатывать его для вас.

Шаг 3

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

Шаг 4

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

Шаг 5

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

Как векторизовать изображение в фотошопе? | автор: John Negoita

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Image To Vector Photoshop Action

уникальный Photoshop action для создания векторной графики одним щелчком мыши
Создание векторных фигур, векторных силуэтов, векторных изображений, векторной графики из любого изображения
300 dpi отлично подходит для печати ( Футболки, кофейные чашки, журналы, книги, листовки и т. Д.)
Протестировано и работает с Photoshop CS и CC, все языковые версии
Требования: цвет RGB, 8 бит, 72–300 точек на дюйм
Простота использования Редактировать и настраивать
Полностью настраиваемый
Требуются небольшие навыки работы с Photoshop

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

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

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

Шаг 1

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

Шаг 2

Перейдите в Фильтр> Стилизация> Рассеивание. В окне Diffuse выберите Anisotropic Mode и нажмите OK.

Шаг 3

Снова перейдите в Filter> Stilyze> Diffuse. В окне Diffuse выберите Anisotropic Mode и нажмите OK.

Шаг 4

Перейдите в Layer> Duplicate Layer.Назовите этот слой «High Pass» и нажмите OK.

Шаг 5

Выбрав слой «High Pass», перейдите в Filter> Other> High Pass. Установите значение 3 и нажмите ОК.

Шаг 6

На панели слоев установите режим наложения слоя «High Pass» на Vivid Light.

Шаг 7

Перейдите в Layer> New Adjustment Layer> Threshold. Назовите этот слой «Порог» и нажмите «ОК».

Шаг 8

Настройте пороговый уровень в соответствии с используемым изображением.В этом случае значение 138 будет работать нормально.

Шаг 9

Когда вы будете довольны результатом с порогом, перейдите в Layer> Merge Visible.

Шаг 10

На этом этапе вы можете удалить все ненужные детали, используя Brush Tool (B) с черным и белым цветами.

Шаг 11

Выделив объединенный слой, перейдите в меню «Фильтр»> «Размытие»> «Размытие по Гауссу». Установите значение 0,5 пикселя и нажмите ОК.

Шаг 12

Перейдите к Select> Color Range.В раскрывающемся меню выберите «Тени» и настройте «Нечеткость» и «Диапазон» по своему вкусу. В этом случае я установлю Fuzziness на 100%, а Range на 150. Когда вы будете довольны выбором, нажмите OK.

Шаг 13

При активном выделении выберите инструмент Rectangular Marquee Tool (M) и щелкните правой кнопкой мыши по выделению. В раскрывающемся меню выберите «Создать рабочий путь».

Шаг 14

В окне «Создать рабочий контур» установите «Допуск» на 1 или 1,5 пикселя и нажмите «ОК».

Шаг 15

На панели слоев щелкните значок «Создать новый слой».

Шаг 16

Перейдите в Слой> Новый слой заливки> Сплошной цвет. Назовите этот слой «Вектор» и нажмите «ОК».

Шаг 17

В окне «Палитра цветов» выберите любой желаемый цвет и нажмите «ОК».

Некоторые заключительные примечания

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

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

Adobe Photoshop не является редактором векторных изображений. Adobe Illustrator умело справится с этой задачей. Но что, если вы пользуетесь одним из основных планов членства в Adobe Creative Cloud? Или у вас есть подписка только на Photoshop?

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

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

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

Для преобразования растрового изображения на основе пикселей в векторное изображение:

Выберите пиксели.
Преобразуйте их в пути.
Раскрасьте их и сохраните как векторное изображение.

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

Скриншоты взяты из Adobe Photoshop CC (21.2.0). Но вы должны уметь следовать этому простому руководству с большинством последних версий Photoshop.

1. Откройте растровое изображение в Photoshop

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

2. Сделайте выделение вокруг изображения

Существуют различные методы выделения в Photoshop. Выбранный вами метод будет зависеть от характера изображения. Например, если у изображения прямые края, вы можете выбрать инструмент Rectangular Marquee . Если вы хотите выбирать по цвету, можно использовать инструмент Magic Wand или Quick Selection .

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

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

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

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

3. Создание порогового эффекта

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

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

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

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

В этом уроке Photoshop мы хотим использовать команду Color Range , чтобы выделить все белые и черные тональные области.

Перейдите к Select> Color Range .

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

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

5. Преобразуйте выделенный фрагмент в контур

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

Выберите инструмент Marquee или любой другой инструмент выделения.Щелкните изображение правой кнопкой мыши и выберите Make Work Path из контекстного меню.

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

6. Задайте значение допуска для траектории

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

Значение Tolerance определяет, насколько близко путь должен «придерживаться» контуров изображения.Чем ниже значение, тем точнее выбор соответствует вашему пути. Более высокие значения уменьшат количество точек привязки и сделают путь более плавным. Правило большого пальца — чем проще объект, тем выше допуск.

Но поэкспериментируйте с этим значением в зависимости от сложности вашего изображения.

7. Создайте новый сплошной цветовой слой

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

Затем выберите в меню Solid Color . Вы можете выбрать любой цвет.

На этом этапе создается слой векторной формы поверх слоя Threshold.

Этот слой заливки сплошным цветом можно настроить на любой цвет по вашему выбору. На следующем шаге экспортируйте этот слой как изображение SVG.

8. Сохраните векторное изображение как файл SVG

Щелкните слой правой кнопкой мыши и выберите Экспортировать как . Вы также можете сохранить векторное изображение, выбрав «Файл »> «Экспортировать как ».

В диалоговом окне Export As выберите SVG из File Settings и нажмите Export .

Теперь вы можете открыть векторный файл в Adobe Illustrator или любом другом редакторе векторных изображений.

Кроме того, вы также можете экспортировать векторные контуры из Photoshop в Illustrator. Щелкните Файл > Экспорт> Пути к Illustrator . Это экспортирует Solid Color Fill Path в Illustrator, если он у вас установлен.

Есть другие способы векторизации изображения в Photoshop

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

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

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

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

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

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

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

Откройте изображение, которое вы хотите векторизовать.
Щелкните значок выбора в левом меню и выберите все изображение.
В верхнем меню щелкните стрелку раскрывающегося списка справа от кнопки «Трассировка изображения», чтобы открыть меню.
Выберите вариант из предоставленного выбора для векторизации изображения. Чем большее количество вариантов цвета вы используете, тем больше будет использовано векторных цветов. Например, 16 цветов будут векторизовать изображение в 16 отдельных цветов.
Вы можете отменить свой выбор, используя сочетание клавиш Ctrl + z.Прокручивайте варианты, пока не найдете тот, который сохраняет желаемое качество изображения.
Снова выберите изображение, затем нажмите «Развернуть» в верхнем меню.
Щелкните правой кнопкой мыши часть изображения и выберите «Разгруппировать».
Выберите фон изображения, затем нажмите клавишу возврата или щелкните правой кнопкой мыши и удалите. Повторяйте процесс до тех пор, пока не будет удален весь фон.
Снова выберите все изображение, затем нажмите «Группировать».
Теперь ваше изображение должно быть векторизовано, и его размер можно изменять без потери качества.Сохраните изображение.

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

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

Откройте выбранное изображение в Photoshop.
Убедитесь, что выбран слой изображения, которое вы хотите преобразовать.
В верхнем меню нажмите «Окно» и убедитесь, что установлен флажок «Библиотеки». Если нет, щелкните его, чтобы включить.
На вкладке «Библиотеки» щелкните маленький значок «+» в нижнем левом углу.
Во всплывающем меню нажмите «Создать из изображения».
На вкладках вверху справа щелкните Фигуры.
Отрегулируйте ползунок «Детали», пока не удовлетворитесь выбранным изображением.
Щелкните «Сохранить в библиотеках CC» в правом нижнем углу окна.
После сохранения вы можете закрыть окно. Если вы посмотрите на вкладку «Библиотеки», вы увидите, что там была сохранена векторная копия вашего изображения.

Как преобразовать изображение в векторное в InDesign

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

Как преобразовать изображение в векторное в CorelDraw

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

Откройте изображение в CorelDraw.
В верхнем меню нажмите «Растровые изображения», затем наведите указатель мыши на «Контурная трассировка».
Выберите настройку в зависимости от чувствительности трассировки, которую вы хотите использовать.
Во всплывающем окне настройте параметры в правом меню, пока не найдете наиболее подходящие параметры.
Вы можете удалить исходное изображение, выбрав соответствующий переключатель. Когда вы закончите редактирование, нажмите OK.
Сохраните векторизованное изображение.

Как преобразовать изображение в векторное в GIMP

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

Как преобразовать изображение в векторное в Inkscape

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

500 Откройте изображение в Inkscape, затем выберите все изображение.
Если у вас нет прозрачного фона, удалите фон, используя инструмент «Перо», чтобы выбрать детали фона, а затем нажав клавишу возврата. Кроме того, вы можете использовать другое программное обеспечение для редактирования изображений, чтобы легко удалить фон, а затем открыть их в Inkscape.
Выделив изображение, нажмите «Путь» в верхнем меню.
Щелкните Trace Bitmap.
Отрегулируйте контрастность, отредактировав параметры в левом меню. Это в значительной степени зависит от того, как вы хотите, чтобы изображение выглядело. Если вы редактируете параметр, нажмите кнопку «Обновить» в нижнем левом углу изображения, чтобы увидеть, как это будет выглядеть.
1. Вы можете нажать «Вернуть» в правом нижнем углу, чтобы отменить изменения. Обратите внимание, что выбор «Автосопровождение» для параметров «Одно сканирование» или «Множественное сканирование» значительно замедлит работу вашего компьютера.
2. Если вам нужно цветное векторное изображение, выберите вкладку «Несколько сканирований» и выберите «Цвета» в раскрывающемся меню. Изменение количества используемых цветов повысит детализацию вашего изображения.
По завершении нажмите OK.
Ваше изображение преобразовано. Сохраните изображение.

Как преобразовать изображение в векторное на Mac

Если вы используете Mac для редактирования изображений, то преобразование изображения в векторное означает использование программного обеспечения для редактирования изображений.Adobe Illustrator — отличный инструмент для всестороннего редактирования изображений и преобразования векторных изображений. Gimp и Inkscape также доступны для Mac и могут использоваться в качестве бесплатной альтернативы, если вы не хотите покупать Illustrator или исчерпали бесплатный пробный период.

Как преобразовать изображение в векторное на ПК

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

Как преобразовать изображение в векторное на iPhone

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

Adobe Illustrator Draw

Практически лучший выбор, когда дело доходит до редактирования изображений, даже на мобильном телефоне, Adobe Illustrator должен легко справляться со своей работой.Он указан как бесплатный для покупок в приложении в Apple App Store.

Imaengine Vector

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

Vector Illustration Draw Pro

Программа для создания векторных изображений с очень высокой оценкой. Он указан как бесплатный, но его премиум-функции будут стоить вам. Многие пользователи говорят, что это практически Adobe Illustrator на iPhone, так что это хороший выбор.Его основные функции бесплатны, так что попробовать его можно.

The Vector Converter

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

Как преобразовать изображение в векторное на устройстве Android

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

Adobe Illustrator Draw

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

Omberlite

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

Skedio

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

Как преобразовать изображение в векторное на Chromebook

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

Google Play Store

Если на вашем Chromebook включен Google Play Store, вы можете установить любое из приложений, указанных в разделе Android выше, и использовать их для преобразования изображений.Чтобы включить Google Play Store:

Откройте меню быстрых настроек, щелкнув значок быстрых настроек в правом нижнем углу экрана.
Щелкните значок шестеренки в правом верхнем углу меню.
Прокрутите вниз, пока не найдете вкладку Google Play Store.
Нажмите «Включить».
Примите условия использования.

Онлайн-конвертеры изображений

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

Vector Magic
Vectorizer
Free Online Vector Converter

Better Image Dimension Control

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Закрывать

Изображение 1 из 3

Изображение 2 из 3

Изображение 3 из 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вас устраивают ваши настройки и вы хотите использовать их повторно, нажмите кнопку Manage Presets рядом с опцией Presets.Теперь вы можете сохранить свои настройки как новый Preset .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

Как создать SVG из PNG или JPG в Photoshop

Пару лет назад Adobe решила добавить в Photoshop функцию «Экспорт в SVG». Это означает, что теперь вы можете экспортировать SVG-изображение прямо из Photoshop без использования Illustrator. В этом уроке мы покажем вам, как преобразовать изображение PNG или JPG в SVG с помощью Photoshop. Давай проверим!

Растр VS Вектор

SVG или масштабируемая векторная графика — это, как сказано в названии, векторная графика .Другие форматы, такие как PNG, GIF, JPG, BMP, — это растровая графика. Основное различие между этими двумя векторами состоит в том, что векторы состоят из путей, которые делают их масштабируемыми, в то время как растры состоят из жестких данных пикселей, поэтому масштабирование невозможно. (Когда мы изменяем размер растрового изображения, мы просто экстраполируем текущие пиксельные данные, которые у нас есть. Вектор, с другой стороны, пересчитывает путь в целевой размер)

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

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

Начнем!

1) Откройте изображение в Photoshop и с помощью инструмента быстрого выделения выделите всю черную область

2) После выбора щелкните правой кнопкой мыши и выберите « Make Work Path… »

3) Затем в меню слоя нажмите « New Fill Layer » и « Solid Color »

4) Выбрать черный цвет

5) Теперь у вас появится новый слой с черной областью.Но это векторный слой-фигура.

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

7) Когда у вас есть слой-фигура для каждого цвета, выберите Файл> Экспорт> Экспортировать как…

8) В верхнем правом раскрывающемся списке выберите SVG в качестве формата. Затем проверьте изображение предварительного просмотра, если все в порядке, и нажмите Экспортировать все

И все! Теперь у вас есть SVG-версия изображения PNG, которая масштабируется и имеет гораздо меньший размер файла.

Написано

ТЗ Инженер, веб-разработчик, бывший разработчик программного обеспечения для паевых инвестиционных фондов. Он основал Red Stapler в 2015 году, чтобы делиться полезными ресурсами для всех, кто интересуется веб-дизайном, веб-разработкой и программированием. Подпишитесь на его канал YouTube или страницу в Facebook, чтобы получать еженедельные советы и руководства.

Как преобразовать PNG в вектор с помощью Adobe Illustrator — логотипы Ника

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

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

Растровые и векторные форматы

При работе со статическими цифровыми изображениями есть два типа графики — векторная и растровая. Разница между ними значительна.

Растровая графика

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

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

Следующие типы файлов являются примерами растровых форматов…

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

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

Векторная графика

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

Векторная графика может масштабироваться бесконечно без потери качества

Следующие типы файлов являются примерами векторных форматов…

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

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

Преобразование PNG в векторный

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

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

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

Преобразование PNG в вектор с помощью Adobe Illustrator

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

Автоматическая трассировка: В зависимости от того, насколько прост ваш дизайн, вы можете использовать встроенную функцию, которая использует AI для автоматического создания векторной трассировки вашего дизайна PNG.
Ручная трассировка: Если ваш дизайн немного сложнее, вам придется вручную нарисовать трассировку, используя основные формы и инструменты рисования.

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

Автоматическое отслеживание

Первый способ конвертировать PNG в вектор с помощью Adobe Illustrator — использовать функцию Image Trace .

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

Недавно я сделал обширное руководство о том, как использовать функцию Image Trace, если вы хотите узнать больше о том, как она работает.

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

Как автоматически отследить ваш файл PNG

Чтобы создать векторную трассировку вашего файла PNG, сначала откройте новый документ, затем импортируйте файл PNG в Illustrator, выбрав «Файл »> «Поместить » и разместив файл на диске.

Импортируйте файл в Illustrator, выбрав «Файл»> «Поместить».

Выберите файл с помощью Select Tool , затем откройте меню Image Trace , перейдя в меню Window> Image Trace .

Меню Image Trace, которое позволяет создать векторную трассировку любого изображения.

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

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

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

Если вас устраивает точность трассировки, нажмите Trace , чтобы сгенерировать ее.

Функция Image Trace позволяет быстро создать векторную трассировку вашего файла PNG.

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

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

Ручное отслеживание

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

Как вручную отследить ваш файл PNG

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

Квадраты и прямоугольники
Круг и эллипсы
Треугольники
Полигоны
звёзд

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

Определение общих форм в вашем дизайне может сэкономить вам много времени.

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

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

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

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

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

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

Pen Tool: Pen Tool идеально подходит для обводки прямых линий. Вы можете ознакомиться с моим руководством по использованию инструмента «Перо» в Illustrator, чтобы узнать больше о том, как он работает.
Инструмент «Кривизна»: Инструмент «Кривизна» идеально подходит для обводки волнистых и изогнутых линий. Он автоматически создает изогнутые линии в зависимости от того, где вы размещаете точки привязки.

Когда вы закончите обводку фигур поверх изображения PNG, вы можете использовать Shape Modes , чтобы создать негативное пространство там, где оно должно быть.

Готовая трассировка — это настоящее векторное преобразование вашего файла PNG.

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

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

Заключение

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