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

Обновлено: 21.11.2024

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

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

На этот раз я рассказал, как создать файл svg в Photoshop.

◆ Как экспортировать изображения в формате SVG в Photoshop?

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

Выберите «Формат экспорта» из «Экспорт» в «Файл» в строке меню. а

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

Вы также можете открыть панель «Формат экспорта» другим способом.

Откройте «Слой» в «Окне» в строке меню и выберите слой, который вы хотите сохранить в формате SVG, в окне слоев.

Щелкните правой кнопкой мыши выбранный слой или выберите «Формат экспорта» с помощью кнопки (4 горизонтальные линии) в правом верхнем углу окна слоя, чтобы открыть панель «Формат экспорта».

[Метод 2] Создать с помощью «Image Asset»

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

Затем установите флажок «Изображение» в разделе «Создать» в «Файл» в строке меню.

При сохранении данных папка ресурса автоматически создается в той же иерархии, что и папка, в которой сохранен файл Photoshop, и в ней сохраняется файл SVG.

[Метод 3] Создание с использованием исходного кода SVG
Сначала создайте пустой файл SVG с помощью текстового редактора или аналогичного инструмента.

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

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

◆ Как экспортировать изображения в формате SVG в Illustrator

Есть четыре способа сохранить изображение, созданное в Illustrator, в формате SVG.

[Метод 1] При сохранении файла Illustrator сохраните его в формате SVG.

Создайте иллюстрацию в Illustrator и, если это новый файл, выберите «Сохранить» в «Файл» в строке меню. Если вы хотите скопировать файл, нажмите «Сохранить как» или «Сохранить копию» и выберите.

Измените формат файла панели сохранения на «SVG (svg)» и нажмите «Сохранить» в правом нижнем углу.

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

[Метод 2] Создайте файл SVG из «Экспортировать объект»

Выберите «Экспорт объекта» в «Окно» строки меню, чтобы открыть окно экспорта объекта.

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

Затем измените формат настроек экспорта на SVG, нажмите кнопку «Экспорт» в правом нижнем углу панели, выберите место для сохранения, и изображение будет сохранено в формате SVG.

Рекомендуется использовать «Экспорт объекта», поскольку вы можете экспортировать и сохранять материал в формате SVG в любое время при редактировании иллюстрации.

[Способ 3] Экспорт с помощью «Экспорт для экрана»

Выберите «Экспорт для экрана» в разделе «Экспорт» в «Файл» в строке меню, чтобы открыть панель «Экспорт для экрана».

Выберите вкладку «Монтажные области», если вы хотите сохранить каждую монтажную область как один файл SVG, или выберите вкладку «Ресурсы», если вы хотите сохранить каждый объект как файл SVG.

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

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

[Способ 4] Сохранить из «Экспортного формата»

Выберите «Формат экспорта» в «Файл» в строке меню.

После выбора места сохранения измените формат файла на «SVG (svg)» и сохраните его, чтобы экспортировать файл в формате SVG.

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

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

Чтобы сохранить файл SVG в Photoshop, выберите «Файл» > «Экспортировать как». В настройках файла установите формат SVG и нажмите «Экспорт», чтобы сохранить файл. Если параметр SVG недоступен, перейдите в Photoshop > «Установки» > «Экспорт» и снимите флажок «Использовать устаревший экспорт как», чтобы сделать формат SVG доступным.

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

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

А пока давайте рассмотрим три быстрых способа экспорта SVG.

Видеоруководство

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

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

Вы также можете экспортировать один или несколько слоев с помощью этой функции. Щелкните правой кнопкой мыши слой, который хотите экспортировать, и выберите «Экспортировать как».

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

2. Экспорт файла SVG с использованием ресурсов изображения

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

Вам нужно сначала переименовать свой слой, дважды щелкнув имя объекта или слоя, который вы хотите сохранить в виде файла SVG. Добавьте «.svg» в конец имени слоя и нажмите Enter (Windows) или Return (Mac).

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

Теперь вы можете сохранить документ в нужном формате. Выберите «Файл» > «Сохранить как» или нажмите Shift + Control + S (Windows) или Shift + Command + S (Mac).

Выберите формат файла, в котором вы хотите сохранить файл, затем нажмите "Сохранить".

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

3. Скопируйте код SVG

Если вам нужен только код SVG для вставки в документ HTML, вы можете скопировать код из слоя объекта. Чтобы скопировать код, щелкните правой кнопкой мыши слой объекта SVG и выберите «Копировать SVG».

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

Не работает сохранение в формате SVG — как исправить

При сохранении файлов SVG вы можете столкнуться с некоторыми проблемами, особенно с последними версиями Photoshop. Вот две распространенные ошибки и способы их исправления.

1. Формат SVG не отображается

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

Выберите «Правка» > «Установки» > «Экспорт» или нажмите Control + K (Windows) или Command + K (Mac) и выберите «Экспорт» в левой части окна.

Установите флажок «Использовать старый вариант «Экспортировать как», и в следующий раз при экспорте файла можно будет использовать формат SVG.

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

2. Экспорт текста в виде файла SVG

При экспорте текста в виде файла SVG перед экспортом файла необходимо преобразовать текст в фигуру. Это позволит вам управлять элементами в других программах, таких как Adobe Illustrator.

Чтобы преобразовать текстовый слой в фигуру, выберите текстовый слой на панели «Слои».

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

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

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

Растр против вектора

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

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

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

Начнем!

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

2) После выбора щелкните правой кнопкой мыши и выберите «Сделать рабочий путь…»

3) Затем в меню «Слой» нажмите «Новый слой-заливка» и «Сплошной цвет»

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

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

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

7) Получив слой формы для каждого цвета, выберите «Файл» > «Экспорт» > «Экспортировать как…».

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

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

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

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

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

Этап Photoshop

В этом примере мы будем использовать простой текстовый логотип, созданный с использованием семейства шрифтов Pacifico (снимок экрана).

На вкладке «Слои» в Photoshop щелкните правой кнопкой мыши текстовый слой и выберите «Преобразовать в фигуру» (скриншот).

Затем сохраните файл в формате Photoshop EPS.

Этап Illustrator

Откройте файл EPS в Adobe Illustrator. Вы должны увидеть, что текст теперь является векторным объектом.

На этом этапе вы можете внести некоторые изменения, например удалить ненужные слои, изменить цвет фона или изменить размер. Чтобы изменить размер документа в Illustrator, просто выберите «Файл» > «Настройка документа» и выберите «Редактировать монтажные области».

Вы можете использовать мышь, чтобы изменить размер монтажной области, или указать размер более точно, заполнив ширину (W) и высоту (H).

Затем сохраните файл в формате SVG, который используется по умолчанию. Вот и все.

Заключение

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

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

Что делает этот скрипт Photoshop:

После активации этого скрипта все векторные слои с расширением «.svg» в конце имени слоя экспортируются в файлы SVG вместе с атрибутами их формы и цвета.

Больше не нужно нарезать SVG один за другим, как пещерный человек. Закончили подготовку слоев? Бум!

Требования:

  1. Windows или Mac OSX
  2. Фотошоп CS5, CS6
  3. Adobe Illustrator

Как использовать этот скрипт:

  1. Загрузите приведенные ниже инструкции.
  2. Перетащите это в папку сценариев Adobe Photoshop: «Adobe Photoshop/presets/scripts»
  3. (НЕОБЯЗАТЕЛЬНО) Перейдите в Photoshop и установите сочетание клавиш для использования этого скрипта (это можно сделать через меню «Правка» -> «Сочетания клавиш», а затем в «Файл» -> «Сценарии» -> «PS to SVG»). Нам нравится использовать сочетание клавиш CMD+ALT+E, но вы можете установить любое сочетание клавиш по своему усмотрению.
  4. В PSD-файле укажите векторные слои, которые вы хотите экспортировать, с добавлением «.svg» в конце. Например, слой «Звезда» должен называться «Star.svg».
  5. Когда будете готовы — просто активируйте скрипт с помощью сочетания клавиш, которое вы определили на шаге 3, или через меню: Файл —> Скрипты —> PS в SVG, и ваши файлы будут ждать вас в том же каталоге, что и ваши файлы. PSD.
    Совет. Работает быстрее, если Illustrator уже открыт до активации скрипта.

Известные проблемы:

  • Сценарий несовместим с новыми версиями Photoshop CC, в которых, кстати, есть функция «экспорта ресурсов».
  • Сценарий также создает файлы AI в дополнение к файлам SVG. Вы можете удалить их, они вам не нужны.
  • Этот скрипт работает только с векторными слоями, а не с группами слоев.

Прочитайте все о том, как мы используем скрипт в нашем собственном рабочем процессе

Саги поделился своим рабочим процессом экспорта SVG из Photoshop при работе над большим дизайнерским проектом.

Читайте также: