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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

^* Дополнение по SVG:

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

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

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

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

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

На форумах Adobe есть очень полное руководство по началу работы с Pen Tool .

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

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

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

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

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

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

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

Генератор Photoshop в некоторых ограниченных случаях может сохранять SVG (да, правильные, только векторные SVG на основе слоев формы, созданных в Photoshop). Однако для этого вам понадобится Photoshop CC 2014.2 (или 2014.1).

Справка от Adobe: https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

Этот документ Photoshop:

Создал этот SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="272" height="245" viewBox="0 0 272 245">
  <defs>
    <style>
      .cls-3 {
        fill: #fc6665;
      }
    </style>
  </defs>
  <g id="vectorsvg">
    <circle id="circle-1" class="cls-3" cx="50" cy="50" r="50"/>
    <rect id="rect-1" class="cls-3" x="72" y="145" width="200" height="100"/>
  </g>
</svg>