Как в фотошопе сделать изображение векторным: можно ли сделать векторное изображение? — Хабр Q&A

Содержание

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

Всем, кто работает с графическими редакторами порой приходится иметь дело и с векторной, и с растровой графикой.

Что, если нам понадобилось добавить векторному файлу каких-нибудь Photoshop’овских спецэффектов. Сегодня я покажу как правильно работать с векторными файлами в Photoshop’е.

1) Просто перетаскиваем AI или EPS файл в PHOTOSHOP. Мы видим:

2) Здесь очень важен размер — ведь в Photoshop изображение станет растровым, и увеличить размер без потери качества будет сложновато. Поэтому лучше всего брать большой размер сразу.

3) Когда мы открыли -таки наш файл, все изображения оказались на одном слое. Для того, чтобы отдельно работать с каждым их них, придётся использовать выделение, например, Rectangular Marquee Tool, а затем вырезать на новый слой.

4) Так как мы не уверены, с каким размеров у изображения придётся работать, переконвертируем его в smart object. Просто нажав на нём правой кнопкой мыши и выбрав соответствующий пункт. Получается, что объект по характеристикам стал похож на векторный, и его можно увеличивать как угодно.

5) На этом примере я скопировал один из черепов, а затем превратил его в smart object, и растянул оба объекта. Пока разницы никакой не видно

6) Но давайте приблизим изображение. Разница очевидна!

7) Всё, что осталось сделать, это разместить всё как надо). Можно использовать свойства слоя (Image>Adjustments) и параметры наложения (Правый клик>Blending options).

И всё же почему лучше открывать векторные изображения в векторных редакторах?

Потому что тут вы можете изменять не только размеры, подправлять линии, цвета, что в Photoshop не всегда легко, особенно для новичка.
Наконец, вы должны знать, что в Photoshop можно вставлять изображение прямо из Illustrator — просто выделите нужное изображение в illustrator’е, Сtrl+C, а затем Ctrl+V в Photodhop.
Далее процедура идентична описанной выше.

link

Naikom » Дизайн » Уроки Illustrator

Как сделать вектор в фотошопе. Вектор в фотошопе

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

Векторное

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

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

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

Растровое

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

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

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

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

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

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

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

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

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

Шаг 1

Начнем с создания фона. Нарисуем форму с помощью инструмента выделения () (в режиме Shape Layers (Слой Фигура)). Настройки — (Непрозрачность заливки) = 0% . Теперь используем наложение градиента: ( (Стиль слоя — Наложение градиента)) для заполнения созданной фигуры. Все настройки по умолчанию, вам только нужно менять угол (я буду указывать степень) и градиент. Добавляем Stroke (Обводку) ( (Стиль слоя — Обводка)). Используем все настройки по умолчанию, кроме ширины в 1 рх и цвета.

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

Google на перевод растра в вектор в Corel Draw, Illustrator и даже Adobe Photoshop . Начнем с Фотошопа.

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

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

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

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

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

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

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

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

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

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

Зайдите в 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 Мы создали слой заливки, которому сразу присваивается векторная маска в виде нашего контура.

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

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

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

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

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

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

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

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

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

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

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

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

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

Выделение логотипа

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

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

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

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

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

Переводим выделение в векторный контур

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

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

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

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

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

Сохранение контура в палитре Path

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

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

Кликните дважды по контуру в палитре.

В появившемся окне введите имя и нажмите ОК.

Создание векторной маски

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

Убедитесь, что ваш конур выделен в палитре Path

Выберите из меню Layer > New Fill Layer > Solid Color

В появившемся окне выберите цвет и кликните ОК

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

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

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

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

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

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

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

Как рисунок перевести в векторный?

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

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

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

Вот мы и получили самый нормальный эффект.

3. Далее мы применяем к полученной картинке фильтр «Диффузия», чтобы убрать зубчатые края. Путь к включению фильтра: «Фильтр — Стилизация — Диффузия» (Filter-Stylize-Difuse). В открывшемся окне выбираем «Anisotropic».

4. Следующим шагом будет сглаживание краев, чтобы они стали более чёткими, для этого нажимаем «Изображение — Коррекция — Уровни» (Image-Adjustment-Levels). В открытом окне перемещаем левый и правый ползунок ближе к центру. Для того чтобы увидеть результат коррекции, лучше всего увеличить рисунок до 300% перед тем как открывать уровни.

5. Повторяем пункты 3 и 4 в той же очередности.

6. Отключаем видимость нашего основного слоя и включаем слой «Основа_1». Выполняем действие «Изображение — Коррекция — Изогелия» (Image-Adjustment-Threshold). Параметр устанавливаем на уровне 138.

7. Проделываем с этим слоем операции указанные в пункте 3,4 и 5.

8. Создаем новый слой и заливаем его черным цветом. Называем его «Фон». Устанавливаем его ниже слоя «Основа». В слое «Основа_1» меняем режим на «Разница» (Difference).

Вот что у нас получается:

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

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

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

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

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

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

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

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

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

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

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

Перо

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

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

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

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

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

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

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

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

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

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

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

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

Векторное

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

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

Растровое

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

Совсем недавно я написала статью о том, какие ошибки вас могут ожидать при создании Action в Photoshop . Сегодня я рада с вами поделиться бесплатным Action для Photoshop, который преобразует фото в симуляцию векторного рисунка или, как можно называть, вексельный рисунок. Этот Action носит название Vexel Art with color stylization. Его я разработала сама и распространяю бесплатно для личного и коммерческого использования. Описание Action и ссылка на скачивание находится в статье.

Vexel Art with color stylization — позволит в 2 клика преобразовать ваше фото в стильный векторный рисунок. Результат будет фантастическим.

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

Результат будет лучше если исходное изображение будет разрешением 2500 — 3500 px

Режим должен быть RGB 8 bit

Лучше если фото будет без лишних изъянов и мелких деталей. Проблемную кожу лучше будет отретушировать заранее

Вы должны убедиться, что у вас активна функция OpenCL в Photoshop. Если это не так — некоторые функции работать не будут и результат вас не впечатлит. Как это проверить, вы сможете узнать в моих дальнейших статьях или поискать на официальном сайте adobe.com

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

Предположим, у вас есть фото

Action состоит из двух частей. Запуская Action Vexel art, фото преобразуется в векторный вид (вексельный)

Запуская Action Vexel art stylization, происходит цветовая стилизация векторного фото

Вы можете изменять цветовые настройки, изменяя свойства слоя Color

Видео инструкция по использованию бесплатного Action Photoshop — Vexel Art with color stylization, который преобразует фото в симуляцию векторного рисунка.

Растрируем изображение в Adobe Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

05.04.2014 59959

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

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

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

Например, в векторном редакторе Adobe Illustrator для этих целей предусмотрена отдельная опция. Чтобы перевести картинку в вектор открываем её в редакторе, выделяем её мышкой, после чего в верхнем меню выбираем «Окно» -> «Трассировка изображения» .

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

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

Векторное

Растровое

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

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

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

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

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

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

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

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

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

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

Freeform Pen Tool

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

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

Add Anchor Point Tool и Delete Anchor Point Tool

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

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

Convert Point Tool

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

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

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

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

Delete Anchor Point

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

Create Vector Mask

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

Delete Vector Mask

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

Define Custom Shape

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

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

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

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

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

Fill Path

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

Stroke Path

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

Clipping Path

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

Free Transform Path

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

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

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

Сначала хочу рассказать почему я использую вектор в фотошопе. Есть множество зарекомендовавших себя векторных редакторов. Самые распространенные это Illustrator, CorelDraw, Xara. Чаще всего я занимаюсь веб дизайном, а значит моя работа не является конечным результатом. Т.е. прежде чем стать сайтом, интерфейсом, приложением макет попадет верстальщику. Большинство верстальщиков в совершенстве владеют Photoshop, но очень поверхностно знакомы с Illustrator. Поэтому желание “запихнуть” все в один файл вполне логично. Здорово когда верстальщик получает один PSD в котором содержится полный макет да еще и с возможностью редактирования элементов. Поменять цвет кнопки, изменить радиус формы меню, увеличить или уменьшить блок без потери качества — за 2 клика и 1 минуту! Вектор в фотошопе позволяет сделать это без особых навыков.

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

Если вы раньше работали в любом векторном редакторе, то многое покажется знакомым. Но ко многому придется привыкать. Вся работа в фотошопе строится со слоями, это коснулось и всех векторных инструментов.
1. Что бы легко редактировать вектор в фотошопе необходимо каждую фигуру располагать в отдельном слое.
2. Операции по “слиянию”, “вычитанию”, “наложению” лучше применять к не более чем двум объектам.
3. После операции “слияния”, “вычитания”, “наложения” контуры исходных объектов остаются доступными к редактированию.
4. Ко всем векторным объектам можно легко применять растровые стили. Это очень удобно.
5. К векторным объектам можно применять прозрачность и накладывать на них фильтры.
6. Отдельные слои и группы слоев с векторными объектами можно легко клонировать внутри документа или копировать в другой документ PSD.
7. Подписывайте каждый слой и группируйте слои — это сэкономит массу времени.

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

Как и в любом векторном редакторе, вектор в фотошопе имеет готовые примитивы. Основные примитивы:
“Прямоугольник”, “Прямоугольник со кругленными углами ”, “Эллипс”, “Многоугольник”, “Линия”, “Произвольная фигура”. У каждой фигуры (в любой момент времени) можно задать толщину/тип/цвет обводку и заливку. Для специфических примитивов доступны дополнительные свойства. Например у многоугольника можно задать количество углов, а у прямоугольника со кругленными углами можно задать радиус скругления.

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

Что бы нарисовать произвольный вектор или редактировать существующий (в т.ч. и контур примитивов) необходимо использовать инструменты “Перо” (рисуем произвольный контур), “Перо+” (добавляем новые опорные точки в готовый контур), “Перо-“ (удаляем опорные точки из готового контура), “Свободное перо” (рисуем произвольный контур от руки), “Угол” (меняем изгибы кривых контура, задаем типы соединений между опорных точек).

Для иллюстрации процесса краткое видео из которого вы узнаете:
1. Как создать примитив
2. Как нарисовать произвольную векторную фигуру
3. Как править контур примитива
4. Как править контур произвольной векторной фигуры

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

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

Краткое видео иллюстрирующее основные операции “объединения фигур” в фотошопе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выделение логотипа

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

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

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

Переводим выделение в векторный контур

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

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

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

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

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

Сохранение контура в палитре Path

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

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

Кликните дважды по контуру в палитре.

В появившемся окне введите имя и нажмите ОК.

Создание векторной маски

Убедитесь, что ваш конур выделен в палитре Path

Выберите из меню Layer > New Fill Layer > Solid Color

В появившемся окне выберите цвет и кликните ОК

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Инструмент Pen tool может работать в двух режимах — создание кривых и создание так называемых форм — замкнутых векторных областей.Переключение между этими режимами осуществляется кнопками — режим создания контура, — режим создание формы. Если вы работаете в режиме создания форм, то создаваемый вами контур будет считаться всегда замкнутым и, как следствие, залитым выбранным вами цветом. Физически в палитре Layers создаётся слой-маска на основе векторного рисунка. Сам слой заливается выбранным вами цветом (цвет выбираете на палитре свойств).

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

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

Векторные рисунки удобны тем, что в любой момент очень удобно можно изменить форму кривых этого рисунка. Для этого существует ряд инструментов. Например инструмент (добавление ключевых точек — узлов) — добавляет ключевые точки на кривой в том месте где вы щёлкните. Инструмент может удалять лишние точки на контуре при щелчке на удаляемой точке. На самом деле переключатся на эти инструменты совсем не обязательно. Обратите внимание на переключатель Auto Add/Delete на палитре свойств. В случае если этот режим включен (установлен флажок), то инструмент Pen Tool автоматически будет переключатся на инструмент добавления точки (когда вы его поместите над контуром) и инструмент удаления точки (когда вы его поместите над уже существующей точкой). Если режим отключить, то удаление и добавление точек будет возможно только при использовании соответствующих инструментов.

Управление изгибом кривых осуществляется через контрольные точки. Для выбора контрольной точки используется инструмент Direct Selection Tool . Выбрав узел для редактирования (щелчёк этим инструментом по редактируемому узлу). Затем двигая контрольные точки вы влияете на изгиб кривой в области выбранного узла. Также при помощи этого инструмента вы можете перемещать выбранные узлы. Инструмент Path Selectional Tool предназначен для работы с кривой в целом, как с объектом — для перемещения и трансформации. Для векторных объектов применяется режим Free Transform, точно такой же как и для растровых областей.

Важным инструментом работы с ключевыми узлами является инструмент под названием Convert Point Tool . Смысл этого инструмента заключается в преобразовании типа узла . В векторной графике Photoshop различают два типа ключевых узлов — сглаженные (smooth) и угловые (corner) . Смысл сглаженных ключевых узлов заключается в том, что контрольные точки двух кривых, сходящихся в одном узле Всегда находятся на одной виртуальной линии .

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

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

Начали мы с того, что выделили два режима работы инструмента Pen Tool. Первый — режим созданияя форм, а второй — ржим создания контуров. Остановимся подробнее на режиме работы с контурами.

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

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

До сих пор мы задумывались для чего в таком абсолютно растровом редакторе как Photoshop нужны эти векторные инструменты. Простой пример использования векторов в Photoshop — это опять таки работа с выделениями. Как вы видите из рисунка, ряд пиктограмм палитры Path предназначен для преобразования контура (пути) в контур выделения и наоборот. На сам деле после получения некоторых навыков работы с контурами вы поймёте, что намного легче бывает подстроить векторный контур под форму выделяемой области чем, даже воспользоваться достаточно гибкой быстрой маской. Поэтому если вы хотите подредактировать выделение вы всегда можете преобразовать его в путь (контур), затем подредактировать его и опять преобразовать в выделение. Если вы хотите применить традиционные для контуров выделения операции типа Stroke и Fill то они тоже в вашем распоряжении.

Логические операции работают несколько неожиданно. Вы можете создавать пути в любом из логических режимов, будь то сложение или вычитание. На этом этапе вы никаких действий не заметите. Но не обольщайтесь тем, что вы нашли баг в практически безупречной программе. На самом деле Photoshop запоминает в каком режиме вы создавали контур (контора пишет…) и как только вы прикажете программе создать контур выделения из вашей мешанины путей, то Photoshop всё припомнит и произведёт все операции которые вы ему прописали при создании путей. Диалоговое окно создания контура выделения из пути позволяет задать самые важные настройки касающиеся контуров выделения (но это только в том случае, если вы воспользуетесь командой Make Selection меню палитры Path).

Обратите внимание, что вы можете задать радиус растушовки (Feather), включить или отключить сглаживание Anti-Aliased. В разделе Operation вы можете установить логический режим для вновь создаваемого выделения. Опиции данного раздела становятся доступными только в том случае, если один контур выделения уже существует. Соответственно если вы выберете операцию New Selection то создаваемое выделение заместит собой уже существующее выделение; опция Add to Selection добавит к уже существующему выделению выделение создаваемое из контура; Substruct from Selection — вычтет создаваемый контур из сущесьтвующего выделения.

Инструмент Free Form Tool позволяет создавать векторный контур в режиме простого рисования, наподобии кисти. Зажимаете левую кнопочку мыши и просто ведёте мышку рисуя необходимый вам контур. У этого инструмента есть одна главная особенность, которая уподобляет этот векторный инструмент инструменту Magnetic Lasso — это опция Magnetic . Принцип работы такой же, инструмент ищет контрастные границы и прокладывает контур только там. А в остальном контур создаваемый этим инструментом не отличается от обычного контура.

Просмотров: 57900

1) Просто перетаскиваем AI или EPS файл в PHOTOSHOP. Мы видим:

6) Но давайте приблизим изображение. Разница очевидна!

И всё же почему лучше открывать векторные изображения в векторных редакторах?

Потому что тут вы можете изменять не только размеры, подправлять линии, цвета, что в Photoshop не всегда легко, особенно для новичка.
Наконец, вы должны знать, что в Photoshop можно вставлять изображение прямо из Illustrator — просто выделите нужное изображение в illustrator’е, Сtrl+C , а затем Ctrl+V в Photodhop.
Далее процедура идентична описанной выше.

Создание векторных изображений в photoshop. Вектор в фотошопе

Просмотров: 55275

Как рисунок перевести в векторный?

Вот мы и получили самый нормальный эффект.

5. Повторяем пункты 3 и 4 в той же очередности.

7. Проделываем с этим слоем операции указанные в пункте 3,4 и 5.

Вот что у нас получается:

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].

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

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

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

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

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

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

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

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

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

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

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

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

Итак, вектор состоит из геометрических фигур. 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 — на курсах .

Инструменты полиграфиста и дизайнера

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

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

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

Источник: http://verovski.com/2011/02/16/rastr-to-vector-ps-2-2/

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

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

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

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

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

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

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

Трейс / Image Trace

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

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

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

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

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

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

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

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

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

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

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

Источник: http://crabo.ru/solving-problems/kak-perevesti-rastrovoe-izobrazhenie-v-vektornoe-v-fotoshope.html

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

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

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

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

Источник: http://3dnews.ru/774197

Эти уроки могут вас заинтересовать

По заданным фильтрам ничего не найдено

Попробуйте изменить критерий поиска, или сбросить фильтры.

Источник: http://creativo.one/lessons/photo/824-vektornyiy-risunok-iz-foto.html

Шаг 2

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

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

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

Источник: http://verovski.com/2011/02/16/rastr-to-vector-ps-2-2/

Вариант 2. Перевести растровое изображение в векторное с помощью программы Vector Magic.

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

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

Источник: http://skilllife.ru/rastr-v-vector

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

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

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

Источник: http://verovski.com/2011/02/16/rastr-to-vector-ps-2-2/

Об этой статье

Эту страницу просматривали 3267 раз.

Источник: http://ru.wikihow.com/преобразовать-JPEG-в-векторное-изображение-в-Photoshop

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

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

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

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

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

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

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

Photoshop не является подлинной альтернативой Illustrator

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

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

Источник: http://helpexe.ru/tvorcheskij/sozdanie-i-rabota-s-vektornoj-grafikoj-v

Как превратить векторные кисти в настоящие векторные фигуры в Photoshop и Illustrator | Уроки Adobe Photoshop

версия для печати

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

Adobe Photoshop

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

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

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

Теперь выберите инструмент «Выбор контура» и щелкните путь, и нажмите Ctrl + T , чтобы преобразовать его. Перетаскивайте маркеры, пока не измените его размер до точки, в которой будут видны все точки.

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

Adobe Illustrator

Прежде чем начать, вам нужно сделать прозрачное изображение кисти в формате PNG-24, сделайте это в Photoshop и затем откройте Illustrator.

Создайте новый документ в Illustrator, а затем импортируйте изображение ( Файл> Поместить … ). Теперь вы увидите кнопку Live Trace . вверху окна — щелкните по нему.

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

Поделитесь этим уроком со своими друзьями!

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

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

1. Щелкните «P» , чтобы выбрать инструмент Pen . Откройте меню «Окно», и выберите «Пути» , чтобы отобразить панель управления «Пути » . В параметрах bar , выберите стандартную версию инструмента Pen , , чтобы нарисовать правильную Bezier и прямую линию, или версию Freeform для получения относительных результатов рисования, как при использовании перо и бумага или Магнитное перо для рисования на основе перехода цвета или яркости в изображении. Нарисуйте прямые векторные линии, чтобы представить каждое преобразование других элементов вашего изображения. Нажмите «Enter» , чтобы указать, что конец линии открыт или закрыт, или щелкните открытую точку привязки, чтобы завершить линию, с которой она начиналась.

2. Сделайте выделение, используя любую комбинацию Marquee, Magic Wand, Lasso и других инструментов выделения. Чтобы превратить ваш выбор в линию, откройте всплывающее меню в верхнем правом углу панели Paths и выберите «Make Work Path» или нажмите соответствующую кнопку в нижней части панели управления. Задайте значение допуска, определяющее способ выбора линии (точный или относительный) на основе границы исходного выделения. При 0,5 пикселей ваши векторные линии сохраняют тонкие изменения в выделении, а при 10 пикселей вектор будет использовать несколько точек привязки и отобразить эффекты плавного перехода.

3. Дважды щелкните рабочий контур , который появляется на панели Контуры , , когда вы рисуете первый штрих с помощью инструмента Pen или преобразуете выделение в векторную линию. Назовите свою векторную линию или примите значение по умолчанию «Путь [X]» , где «[X]» представляет собой число. Если вы не преобразовали свой Work Path в именованную векторную линию, следующее действие, которое вы предпримете для создания линии, заменит векторную линию на вашем текущем рабочем пути новым векторным выходом.

4. Экспортируйте векторную линию из документа Photoshop в формат Adobe Illustrator для использования в других программах. Откройте меню «Файл», , , найдите подменю «Экспорт», и выберите «Пути к Illustrator». Результирующий файл содержит нечеткие или не закрашенные векторные линии.

Консультация

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

Предупреждение

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

Подробнее:

Как использовать смарт-объекты в Adobe Photoshop
Как использовать Photoshop Fix удалить лишние детали на фотографиях
Используйте функцию размытия в Photoshop

веб-дизайн — как преобразовать обычные изображения в векторные…

Кто-нибудь знает, как преобразовать обычные изображения в векторные изображения в фотошопе? Как сделать это самым простым способом?

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

Следовательно, можно сделать снимок камерой с разрешением 10 МП или больше и использовать ее для изображений в рекламных объявлениях. Он должен быть более чем достаточно большим, и усадка — не такая уж большая проблема.

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

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

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

Все флеш-файлы были AS2 для флеш-плеера 7 — кошмар временной шкалы анимации и слоев UGH! {вздрагивает}. В итоге мы переделали проекты в Actionscript3 для flash player 9 … намного лучше!

Одной из основных оптимизаций, которые мы сделали, было преобразование ресурсов gfx в векторы.Все исходные ресурсы для проектов были сделаны в формате .png, и их было много … Естественно, это значительно увеличило размер .swf. Мы пакетно преобразовали все изображения в векторы .svg, используя собственный инструмент, созданный на заказ, значительно уменьшив размер ресурсов gfx, используемых в проекте … Это было намного быстрее, чем привлекать художников к разработке. команда для перерисовки всех оригинальных gfx!

Jas.

Как создавать векторные маски в Photoshop

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

Шаг 1.Подготовьте свой файл

Используйте Photoshop, чтобы открыть изображение, которое хотите отредактировать; в этом примере я буду использовать фотографию кофейной кружки. После открытия найдите панель «Слои» («Окно» -> «Слои»). Вы должны увидеть только один слой, который называется «Фон». Щелкните этот слой, удерживая клавишу Control (или щелкните правой кнопкой мыши), и в контекстном меню выберите «Слой из фона». Вам будет предложено назвать слой; Для простоты назовите его «Фото». В главном меню выберите Layer -> New Fill Layer -> Solid Color. Придерживайтесь имени по умолчанию (Color Fill 1) и нажмите OK.Выберите цвет, который вы хотите использовать в качестве фона (это поможет проиллюстрировать маску позже), и еще раз нажмите OK. Вы заметите, что ваше изображение исчезает за сплошным цветом, но сейчас мы это исправим. Вернитесь на панель Layers и перетащите слой Color Fill 1 ниже слоя Photo. Это на время позволит скрыть слой цветовой заливки.

Создайте слой с цветной заливкой и поместите его под своей фотографией.

Шаг 2. Обведите контуром

Щелкните вкладку «Пути», которая обычно сгруппирована со слоями и каналами.(Если «Пути» не отображаются, выберите «Окно» -> «Пути».) Найдя панель «Пути», щелкните значок меню в правом верхнем углу и выберите «Новый контур». Дайте пути имя — например, «Контур элемента» — и нажмите «ОК». Теперь выберите инструмент «Перо», с помощью которого вы создадите векторную фигуру, очерчивающую предмет (в данном случае — кофейную кружку). Поместите первую опорную точку в вогнутый угол объекта и работайте оттуда, размещая опорные точки по периметру, пока не закроете фигуру. Держитесь как можно ближе к краю предмета; или, если вы планируете выбить фон, попробуйте вставить путь одним касанием.

Советы по работе с Pen Tool

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

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

Советы по работе с инструментом прямого выбора

Удалите линии направления, удерживая option-command при щелчке точки привязки.
Добавьте (или замените) направляющие линии, удерживая option-command, когда вы щелкаете точку привязки и перетаскиваете мышь.
Преобразуйте гладкую точку в угловую точку с независимыми направляющими линиями, щелкнув любую ручку. Затем направляющие линии можно перемещать отдельно.

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

Шаг 3. Несколько фигур

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

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

На панели параметров вы увидите четыре значка (перекрывающиеся квадраты), которые позволяют изменять способ взаимодействия фигур.Щелкните второй значок — «Вычесть из области фигуры», чтобы указать внутренним формам пробить первую созданную вами форму. Быстрый взгляд на миниатюру контура покажет вам, правильно ли вы все сделали: сам элемент должен быть белым, а внутренние и внешние прозрачные области отображаются серым цветом. Если все в порядке, вы можете объединить фигуры в одну составную фигуру. Выберите инструмент «Выбор контура» и щелкните миниатюру контура; затем на панели параметров нажмите «Объединить».

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

Шаг 4. Добавление маски

Все готово, чтобы добавить маску к фотографии. Сначала щелкните миниатюру пути, чтобы выделить новый путь. Обратите внимание, что линии пути довольно тусклые, и их может быть трудно увидеть на некоторых фонах; однако, пока вы щелкнули миниатюру контура и сам контур выделен (на панели «Контуры»), вы можете двигаться вперед. Вы провели большую часть этого урока, работая с панелью «Контуры», но чтобы преобразовать контур в векторную маску, вам придется вернуться на панель «Слои».Выберите «Слои» («Окно» -> «Слои») и щелкните слой «Фото». Вызовите панель «Маски», выбрав «Окно» -> «Маски», и в правом верхнем углу вы увидите небольшой значок пера.

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

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

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

[ Крис Маквей — писатель, иллюстратор и фотограф игрушек, живущий в Галифаксе, Новая Шотландия. ]

Что такое смарт-объект? Как использовать смарт-объект в Photoshop?

Что такое смарт-объект Photoshop?

Смарт-объект Photoshop никогда не потеряет качество любого векторного объекта или изображения, даже если мы масштабируем или передискретизируем его, или меняем его положение, или поворачиваем, как мы хотим в нашем документе.

Каждый дизайнер должен знать о пользе «умного объекта».

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

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

Здесь у меня есть векторный объект в иллюстраторе.

Я копирую этот объект, нажимая CTRL + C.затем перейдите в фотошоп и нажмите CTRL + V, чтобы вставить.

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

На этот раз я собираюсь выбрать смарт-объекты Photoshop.

Нажмите ок.

Итак, вот наш векторный объект хорошего качества.

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

Теперь нажмите CTRL + T и уменьшите масштаб объекта.

Снова нажмите CTRL + T, увеличьте масштаб и нажмите Enter.

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

Теперь переключите этот слой и нажмите CTRL + V, чтобы вставить его снова.

Но на этот раз я выберу пиксели.

Теперь объект в исходном качестве.

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

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

Возьмите слой смарт-объекта и уменьшите его, а затем увеличьте.

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

А теперь поговорим об объекте, который мы импортировали как пиксель.

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

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

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

Совместное использование InDesign, Illustrator и Photoshop: перемещение векторов

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

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

Перемещение векторов между Illustrator и InDesign

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

Так почему же так много людей используют Illustrator в качестве основной программы для создания векторных изображений? Разве инструмент «Перо» в обеих программах не одинаков? Что ж, да, но есть так много эффектов или техник, которые InDesign просто не может сделать.В Illustrator есть инструменты для создания таких фигур, как спирали и дуги, которые было бы сложно сделать в InDesign. Живые эффекты Illustrator позволяют легко преобразовывать простые объекты в особые формы. Многие картинки поставляются в формате EPS (вектор).

Больше после прыжка! Продолжайте читать ниже ↓
Члены бесплатной и премиальной версии видят меньше рекламы! Зарегистрируйтесь и войдите в систему сегодня.

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

Перемещение через водораздел

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

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

Если вы получили сообщение о том, что ваша работа будет встроена в InDesign, я предлагаю нажать «ОК», а затем отменить команду. (Здесь нет кнопки «Отмена».) Если вы все-таки встраиваете иллюстрацию в InDesign, а затем хотите, чтобы она была удалена, вам придется скопировать и вставить. См. Раздел «Перемещение векторов из InDesign в Illustrator».

Что вы теряете при переходе из Illustrator в InDesign

При переходе из Illustrator в InDesign вы теряете все пиксельные эффекты, такие как тени, свечение и любые эффекты Photoshop в меню «Эффекты».Параметры непрозрачности теряются, даже если результирующие объекты будут векторами. Но чисто векторные эффекты, такие как переходы, деформации, искажения, множественные заливки и множественные обводки, преобразуются так, как если бы вы расширили иллюстрацию в Illustrator.

Перемещение векторов из Illustrator в Photoshop

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

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

Когда у вас есть векторы в документе Photoshop, вы можете манипулировать ими с помощью тех же инструментов выбора вектора, которые есть в Illustrator или InDesign.

Вставка как пиксели

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

Вставка как пути

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

Однако, если вы поместите файл Photoshop с векторной маской в InDesign, а затем распечатаете файл, векторная маска будет растеризована.К счастью, если вы сохраните файл как PDF-файл Photoshop, векторная маска сохранит четкие векторные края при печати.

Перенос контуров из Illustrator в Photoshop также позволяет добавлять эти контуры в широкий спектр пользовательских форм Photoshop. Затем эти формы можно применить к холсту с помощью инструмента Custom Shape Tool. Просто выберите фигуру и щелкните ее правой кнопкой мыши, чтобы выбрать «Определить произвольную форму».

Вставка как слои формы

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

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

Как и вставка контуров, слои-фигуры позволяют создавать четкие векторные контуры, очерчивающие произведение. Эти контуры являются векторами при печати непосредственно из Photoshop. Они растрируются, когда файл PSD помещается в InDesign и распечатывается из него. Однако при сохранении в формате Photoshop PDF они печатаются как векторные контуры.

Вставка как векторные смарт-объекты

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

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

Редактирование векторного смарт-объекта

Векторный смарт-объект — это больше, чем просто рисунок на слое в файле Photoshop. На самом деле это весь исходный файл Illustrator, хранящийся внутри файла Photoshop. Итак, если вам нужно отредактировать какую-либо часть исходного рисунка Illustrator, вы просто дважды щелкните миниатюру векторного смарт-объекта или выберите «Редактировать содержимое» в меню панели «Слои». Появится окно предупреждения с большим количеством текста. Все, что вам нужно сделать, это не забыть сохранить свою работу, когда вы закончите вносить изменения в векторный смарт-объект.Adobe говорит, что выберите «Файл»> «Сохранить», но Cmd / Ctrl-S также работает.

Когда вы редактируете векторный смарт-объект, вы больше не работаете в Photoshop. Вы запустили Illustrator и редактируете иллюстрацию в Illustrator. Но вы не редактируете исходный файл Illustrator. Вы редактируете урезанную версию файла, которая не содержит всех библиотек и полезных свойств исходного файла. Вы можете сказать, что это не исходный файл, так как заголовок — Vector Smart Object.

Выбрав «Файл»> «Сохранить», вы можете закрыть файл векторного смарт-объекта и вернуться в Photoshop. Ваши изменения немедленно применяются к информации Photoshop.

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

Векторные смарт-объекты из InDesign

Вы можете создавать векторные смарт-объекты из InDesign в файлах Photoshop. Выделите объекты в InDesign, скопируйте, а затем вставьте в Photoshop. У вас не будет выбора, как вставить; графический объект автоматически создает векторный смарт-объект.

Однако, когда вы выбираете редактирование векторного смарт-объекта, команда не открывает InDesign. Вместо этого запускается Illustrator, в котором вы можете вносить изменения.

1 2 Вперед

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

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

Шаг 1. Откройте фотографию в Photoshop.

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

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

Шаг 2. Затем мы применяем к слою «Basis» коррекцию «Isaelia», чтобы получить черно-белый силуэт.Вполне возможно, что с первого раза вам не удастся сделать так, чтобы на силуэте были видны все необходимые вам детали. Поэтому сделаем несколько копий слоя «Basis», чтобы на каждом, используя различные настройки для изогелий, получить силуэт с необходимыми деталями.

Сделав две или три копии слоя «Основа», отключите их видимость. Убедитесь, что вы активны только со слоем «Basis»

Шаг 3. Применить (Изображение — Регулировка — Порог).Я использовал настройки за основу силуэта:

Шаг 4. Теперь применим к слою диффузионного фильтра, чтобы сгладить зубчатые края. Фильтр — Стилизация — Распространение (Фильтр — Стилизация — Рассеивание)

Теперь, чтобы сделать края изображения более четкими Изображение — Коррекция — Уровни (Изображение — Регулировка — Уровни), мы перемещаем правый и левый ползунки ближе к центру. Чтобы упростить контроль результата, увеличьте масштаб изображения до 300% перед применением.

Снова повторить действия с диффузным фильтром и уровнями «Уровни»

Шаг 5. Включаем видимость для базового слоя layer_1. Применяем Image — Correction — Heel (Image — Adjustment — Threshold).

Шаг 6. Повторяем для слоя «base _1» шаг 4.

Шаг 7. Создаем новый слой, заливаем его черным цветом, перемещаемся по панели слоев ниже базового слоя.Измените режим наложения для слоя «Basis_1» на « Difference (Difference). Вот что произошло на данном этапе.

Шаг 8. Девушка получилась довольно страшная, но все в порядке. Делаем активный слой «Основа», добавляем маску слоя . С помощью ластика стираем «пугающие» участки на лице девушки.

Уже намного лучше. Однако, на мой взгляд, левый глаз немного проехал.

Шаг 9.. Включаем видимость для слоя «Basis_2», пятки используем так, чтобы появились четкие очертания глаза. Повторяем шаг 4. С помощью «Лассо » выделяем область с глазом и добавляем маску слоя.

Если результат вас устраивает, склеиваем слои.

Всем, кто работает с графическими редакторами, иногда приходится иметь дело и с векторной, и с растровой графикой.

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

1) Просто перетащите AI или EPS файл в Photoshop. Видим:

2) Здесь очень важен размер — ведь в фотошопе изображение станет растровым, а увеличить размер без потери качества будет сложно. Поэтому лучше сразу брать большой размер.

3) Когда мы обнаружили — такой файл, все изображения были на одном слое. Чтобы работать с каждым из них отдельно, вам нужно будет использовать выделение, например, инструмент прямоугольной области, а затем вырезать новый слой.

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

5) В этом примере я скопировал один из черепов, а затем превратил его в смарт-объект и растянул оба объекта. Пока разницы не видно

6) Но давайте подойдем.Разница очевидна!

7) все, что остается сделать, это расставить все как надо). Вы можете использовать свойства слоя (Изображение> Коррекция) и настройки наложения (Правый щелчок> Параметры наложения).

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

Потому что здесь можно изменить не только размеры, правильные линии, цвета, что в фотошопе не всегда просто, особенно для новичка.
Наконец, вы должны знать, что в Photoshop вы можете вставить изображение прямо из Illustrator — просто выберите нужное изображение в Illustrator, CTRL + C. , а затем Ctrl + V. в photodhop.
Далее процедура идентична описанной выше.

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

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

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

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

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

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

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

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

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

⇡ AutoTracer — бесплатный конвертер растровых изображений в вектор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

⇡ Читтрам — Простой онлайн-редактор

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

Возможности

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

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

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

⇡ INKSCAPE — Полная альтернатива коммерческим пакетам

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

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

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

⇡ Zebratrace — бесплатное создание виноватых

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

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

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

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

⇡ Вывод

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

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

Как перевести в вектор?

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

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

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

Так мы получили самый нормальный эффект.

3. Далее, мы применяем к получившейся картинке фильтр «Диффузия», чтобы убрать зубчатые края. Путь к включению фильтра: «Фильтр — Стилизация — Распространение» (Filter-Stylize-Difuse). В открывшемся окне выберите «Анизотропный».

4. Следующим шагом будет сглаживание краев, чтобы они стали более плотными, для этого нажмите «Изображение — Коррекция — Уровни» (Image-Adjustment-levels). В открывшемся окне перемещаем левый и правый ползунок ближе к центру.Чтобы увидеть результат коррекции, лучше всего перед открытием уровней увеличить прорисовку до 300%.

5. Повторяем пункты 3 и 4 в том же порядке.

6. Отключите видимость нашего основного слоя и включите слой «Basis_1». Выполняем действие «Изображение — Коррекция — Иселия» (Image-Adjustment-Threshold). Параметр установлен на 138.

7. Делаем с этим слоем операции, указанные в пункте 3.4 и 5.

8. Создайте новый слой и залейте его черным цветом. Мы называем это «фоном». Устанавливаем его ниже слоя «Основа». В слое «Basis_1» измените режим на «Difference» (разница).

Вот что получаем:

9. Получилось немного ужасно, но сейчас исправим. Слой «Основа» активируйте, и добавьте маску слоя. После этого с помощью ластика удалим лишние участки на лице и теле девушки.

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

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

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

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

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

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

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

Чтобы передать растровое изображение, вы должны сначала выделить его любым инструментом для выбора ВЫБРАТЬ.Теперь выберите нарисованный объект либо с помощью инструмента Wand Tool, либо щелкните по слою левой кнопкой мыши, нажав клавишу Ctrl.

Преобразование выбранного объекта в векторную траекторию (ПУТЬ)

Используя любой инструмент типа SELECT, вызовите контекстное меню. Для этого нужно поднести инструмент к выделенному объекту и щелкнуть правой кнопкой мыши. В появившемся меню выберите «Создать рабочий путь …».

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

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

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

Дважды щелкните по нему, чтобы присвоить имя.

Затем в главном меню выберите «Слой -> Новый слой заливки -> Сплошной цвет …». Можно как-то вызвать новый слой и нажать «ОК». В диалоговом окне выбора цвета выберите цвет будущей формы.

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