Как сохранить в svg photoshop
Перейти к содержимому

Как сохранить в svg photoshop

  • автор:

Как преобразовать или сохранить файл в формате SVG в Фотошопе?

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

Формат изображения SVG (Scalable Vector Graphics) был специально разработан для 2D-графики и базовой анимации. В основном используется на сайтах и, в отличие от большинства других форматов, таких как jpg, png и прочих, не содержит пикселей. То есть, содержимое состоит из строковых данных (позволяет задать фигуру компактной строкой), которые содержат положение, форму, цвет и различные элементы изображения.

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

Способ включения поддержки

Откройте Photoshop и перейдите в меню «Редактирование – Настройки – Экспорт…».

Откроется меню параметров, в котором нужно поставить галку в поле «Использовать прежнюю версию «Экспортировать как».

Примените изменения нажатием на «ОК». Рассмотренная опция добавляет поддержку SVG в Photoshop.

Сохранение и преобразование файла в формате SVG

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

Для сохранения перейдите в меню «Файл – Экспорт – Экспортировать как» (Alt+Shift+Ctrl+W).

В открывшемся окне щелкните на раскрывающееся меню в разделе «Настройки файла» и выберите SVG из списка.

Нажмите на кнопку «Экспортировать все» и в итоге изображение будет сохранено с расширением SVG.

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

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

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

How to Save & Export SVG from Photoshop [4 EASY Methods!]

SVG files are perfect for transferring vector images from Photoshop to Illustrator or any other vector-based editor for further work. But with Adobe moving away from letting you save SVGs in Photoshop, it’s no longer obvious how to save an SVG file.

This article gives you a quick overview of how to save vectors in Photoshop, and also has some troubleshooting steps if your Photoshop SVG export is not working.

Can Photoshop Open SVG Files?

Photoshop can open SVG files as Smart Objects through File -> Place Embedded or Place Linked, although as Photoshop is a raster-based editor, not a vector-based editor, it is more limited in its vector editing capabilities so not all of your edits will necessarily show within Photoshop.

export svg from photoshop

How to Export SVG from Photoshop

To save and export SVG files from Photoshop, go to Edit -> Preferences -> Export and check the “Use Legacy ‘Export As’” option, then use File -> Export As, select an SVG format from the dropdown menu and then click Export.

1. Use Legacy “Export As” for SVG Files

Starting with the version of Photoshop released in August 2021, “Export As” for SVG files is no longer natively supported.

For most users it will be possible to switch it back on using the below steps, although if you have an M1 Mac, then you will need to slightly modify this – see the troubleshooting section at the bottom of this article for more details on this.

For all other users:

photoshop export as legacy option

1. Go to the Edit -> Preferences -> Export menu, and then click Use legacy “Export As”.

2. Go to File -> Export -> Export As or use the keyboard shortcut Alt+Shift+Ctrl+W (Windows) or Opt+Shift+Cmd+W (Mac).

export svg in photoshop

3. From the Format box in the File Settings section of the Export As popup, choose a Format of SVG.

4. Then once you have confirmed that you are using an SVG format, you can click Export.

save svg in photoshop

Note that this will export every layer in your document. If you only want to export a single layer, then see below.

2. “Export As” for a Single Layer

If you have something like a PNG logo that you want to convert to SVG, then exporting only a single layer is a good option.

As for the steps above, you must first ensure that Use Legacy “Export As” is activated in your Export preferences. Then:

1. Right-click on the layer that you wish to export in the Layers Palette.

2. Then choose Export As.

export svg layer

3. You will see the same Export As popup, where you need to choose a Format of SVG, then click Export to save the single layer as an SVG file.

export single layer as SVG in Photoshop

3. Save An SVG File in Photoshop with Image Assets

Saving SVGs with Image Assets allows you to save multiple image types at once, and also provides the most flexibility of any method of saving, although it is not in itself intuitive to use.

1. Rename the layer/s that you wish to export by adding a .svg to those that you want to export as SVG files. If you want to export all layers combined into one SVG file, then first use Ctrl/Cmd+Alt+E to copy all visible layers to a new layer. You can then add a .svg to the name of this layer.

rename svg file

2. Go to File -> Generate -> Image Assets.

generate image assets photoshop

Nothing will appear to happen, but if you re-open the Generate menu, you will see that Image Assets is now ticked.

image assets ticked

3. Go to File -> Save As or use the keyboard shortcut Shift+Ctrl/Cmd+S, and save your file as a PSD file type.

save as psd

4. If you now look in the folder where you saved you SVG file, you will see the PSD document, plus a folder which contains your layer/s saved as SVG files.

This folder contains your SVG file, to do with as you wish.

svg file

4. Copy SVG Source Code

If you are wanting an SVG file for web-based use, then it is possible to take the data in HTML markup, although this is not suitable for any other uses.

copy svg

1. Simply Right-click on the layer and choose Copy SVG.

svg data

2. You can then paste the SVG code into your HTML editor.

Note that this will not work if your layer is a Smart Object. In this case, first Rasterize the layer from the menu you see when Right-clicking on the layer.

Photoshop SVG Export Not Working?

The most common reason why Photoshop SVG Export is not working is because Adobe have now discontinued the use of the SVG export function, you need to use the legacy export feature in order to access it. Do this by going to Edit -> Preferences -> Export and choosing the Use legacy “Export As” option.

legacy export as

If you are using an M1 Mac on the other hand, there is currently a known issue with exporting SVG files.

  1. Open Photoshop using Rosetta.
  2. Go to Preferences -> Tech Preview and ensure that Optimized Export As is unchecked.

SVG Export Limitations

There are some known limitations to exporting SVG files in Photoshop, including text and layer / clipping masks not rendering as expected, and the background layer exporting as transparent.

Text Not Rending As Expected

It is suggested that you convert text to a shape before saving it to SVG, as this will allow the text to be rendered correctly.

convert text to shape

To do this, simply Right-click on your text layer, then choose Convert to Shape in the options menu that appears.

After converting a text layer to a shape, it will no longer be editable as text, so make sure that this is your last step prior to saving as SVG.

Background Layer Exports as Transparent

To prevent the background layer from exporting as transparent in the SVG file, duplicate it in the layers panel. This will make it visible in the SVG.

To do this, Right-click on the Background Layer and choose Duplicate Layer from the popup menu. Alternatively, use the keyboard shortcut Ctrl/Cmd+J.

duplicate background layer

Press OK in the Duplicate Layer window that appears, and you will have successfully duplicated the background layer, and made it visible when exported to SVG.

duplicate background

Final Thoughts on Saving to SVG in Photoshop

  • “Export As” for the entire file
  • “Export As” for individual layers
  • Saving SVG using Image Assets
  • Copying the SVG source code

If your save to SVG is not working, then make sure to apply the Legacy “Export As” in Photoshop’s Export preferences. Remember that as Photoshop is a raster-based program, it can be tricky to fully capture every vector-based edit in an exported file, so it can still be better to use PNG, unless you are have a very specific reason to use SVG.

Экспорт файлов в Photoshop

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

Экспорт файлов в разных форматах

Обновлено в августе 2021 г. (версия 22.5).

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

Используйте функции Быстрый экспорт в и Экспортировать как для экспорта документов, монтажных панелей, слоев и групп слоев Photoshop в файлы формата PNG, JPG или GIF.

Экспорт документов, монтажных областей и слоев в Photoshop

Быстрый экспорт как

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

Чтобы получить доступ к функции Быстрый экспорт в , выполните одно из следующих действий.

  • Выберите Файл > Экспорт > Быстрый экспорт в [формат изображения].
  • Откройте панель Слои . Выберите слои, группы слоев или монтажные области, которые необходимо экспортировать. Щелкните выделенные объекты правой кнопкой мыши и выберите Быстрый экспорт в [формат изображения] в контекстном меню.

Установки быстрого экспорта

Установки быстрого экспорта для формата, расположения, метаданных и цветового пространства

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

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

  • Выберите Редактирование > Установки > Экспорт
  • Выберите Файл > Экспорт > Настройки экспорта

Быстрый экспорт файла PSD в виде изображения

Можно задать следующие параметры в диалоговом окне Установки .

Формат быстрого экспорта : выберите формат файла изображения для экспорта — PNG, JPG или GIF . Далее можно задать параметры, относящиеся к конкретному формату. Например, для PNG можно указать, экспортировать ресурсы с включенным параметром Прозрачность (32 бита) или выполнять экспорт изображений меньшего размера (8 бит). Для JPG можно задать Качество экспорта.

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

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

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

Цветовое пространство быстрого экспорта : выберите, требуется ли преобразовывать ресурсы в цветовое пространство sRGB .

Экспортировать как местоположение : см. раздел Экспортировать как ниже.

Экспортировать как

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

Для запуска диалогового окна Экспортировать как выполните одно из следующих действий.

  • Выберите Файл > Экспорт > Экспортировать как , чтобы экспортировать текущий документ Photoshop. Если документ содержит монтажные области, то все они экспортируются с помощью этого диалогового окна.
  • Откройте панель Слои . Выберите слои, группы слоев или монтажные области, которые необходимо экспортировать. Щелкните выделенные объекты правой кнопкой мыши и выберите Экспортировать как в контекстном меню.

В версии Photoshop 23.3 за апрель 2022 г. диалоговое окно «Экспортировать как» поддерживается UXP (унифицированной платформой расширяемости), а не общей платформой расширяемости (CEP), поскольку UXP поддерживает более современные функции и проще в разработке.

Настройка диалогового окна «Экспортировать как» и выбор папки

Параметры диалогового окна «Экспортировать как»

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

Формат: выберите PNG, JPG или GIF.

Настройка формата: для PNG укажите, экспортировать ресурсы с включенным параметром «Прозрачность» (32 бита) или выполнять экспорт изображений меньшего размера (8 бит). Для JPEG укажите желаемое качества изображения (1–7). Изображения GIF по умолчанию прозрачны. При экспорте ресурсов PNG учитывайте следующее.

  • При выборе параметра «Прозрачность» будут созданы 32-битные ресурсы PNG.
  • Выбор параметра «Файл меньшего размера» позволит создать 8-битные ресурсы PNG.
  • Если снять оба флажка, приложение будет создавать 24-битные ресурсы PNG.

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

Масштаб: выберите, насколько большим должно быть экспортированное изображение. Этот параметр полезен для экспорта ресурсов большего или меньшего разрешения. Изменение масштаба влияет на размер изображения.

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

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

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

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

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

Метаданные: укажите, хотите ли вы включать метаданные — авторские права и контактную информацию — в экспортируемые ресурсы.

Цветовое пространство: укажите следующие параметры, выбранные по умолчанию:

  • Хотите ли вы преобразовать экспортированный ресурс в цветовое пространство sRGB.
  • Хотите ли вы внедрить цветовой профиль в экспортируемый ресурс.

Экспортировать как ПРЕДПОЧТЕНИЕ МЕСТОПОЛОЖЕНИЯ

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

  • Выберите Редактирование > Установки > Экспорт
  • Выберите Файл > Экспорт > Настройки экспорта

В диалоговом окне Установки выберите параметр в списке Экспортировать как папку .

  • Экспортировать ресурсы в папку текущего документа.
  • Экспортировать ресурсы в последнюю указанную папку .

Экспорт файлов разных размеров

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

Для этого выполните следующие действия.

  1. На панели в левой части окна Экспортировать как выберите относительный размер ресурса, например 1,25x .
  2. Выберите суффикс для имени ресурса, экспортируемого с относительным размером. Например, @ 1,25x . Суффиксы упрощают управление экспортируемыми ресурсами.
  3. При необходимости щелкните значок «+», чтобы задать другие размеры и суффиксы для экспортируемых ресурсов.

Выбранные параметры масштабирования применяются ко всем выделенным слоям или монтажным областям.

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

Можно экспортировать и сохранять слои как отдельные файлы с использованием множества различных форматов, включая PSD, BMP, JPEG, PDF, Targa и TIFF. Слои именуются автоматически по мере сохранения. Можно задать параметры для управления генерацией имен.

Чтобы экспортировать слои в виде файлов, сделайте следующее.

  1. Выберите Файл > Экспорт > Экспортировать слои в файлы .
  2. В диалоговом окне Экспорт слоев в файлы в разделе Выходная папка нажмите кнопку Обзор , чтобы выбрать место сохранения для экспортируемых файлов. По умолчанию создаваемые файлы сохраняются в той же папке, где хранится исходный файл.
  3. Введите имя в текстовом поле Префикс имени файла , чтобы задать общее имя для файлов.
  4. Выберите параметр Только видимые слои , если необходимо экспортировать только те слои, для которых включена видимость на панели Слои . Используйте этот параметр, если нет необходимости экспортировать все слои. Отключите видимость для слоев, которые экспортировать не нужно.
  5. В меню Тип файла выберите формат файла. Задайте необходимые параметры.
  6. Выберите параметр Включить ICC-профиль , если необходимо встроить профиль рабочего пространства в экспортируемый файл. Этот параметр важен для рабочих потоков с цветовым профилем.
  7. Нажмите кнопку Выполнить .

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

Экспорт монтажных областей в виде файлов

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

  1. В Photoshop выберите «Файл» > «Экспорт» > «Монтажные области в файлы» .
  2. В диалоговом окне Монтажные области в файлы выполните следующие действия.
    • Выберите целевую папку, в которой следует сохранить сформированные файлы.
    • Задайте префикс имени файла.
    • Выберите тип экспорта: только содержимое монтажной области или вместе с перекрывающимися областями.
    • Укажите, следует ли экспортировать все монтажные области или только выбранные.
    • Укажите, следует ли экспортировать вместе с монтажными областями их фоны.
    • Выберите тип файлов для экспорта. Поддерживаются следующие форматы экспорта: BMP, JPEG, PDF, PSD, Targa, TIFF, PNG-8 и PNG-24.
    • Укажите параметры экспорта для выбранного типа файлов.
      • Укажите, следует ли экспортировать вместе с монтажными областями их имена. При выборе этой настройки можно указать пользовательский шрифт, размер и цвет шрифта, а также цвет расширения холста.
  3. Нажмите кнопку Выполнить . Photoshop экспортирует монтажные области в виде файлов выбранного формата.

Экспорт монтажных областей в виде файлов

Экспорт монтажных областей в PDF

Монтажные области можно экспортировать как PDF-документы. Выполните следующие действия.

  1. В Photoshop выберите Файл > Экспорт > Монтажные области в Adobe PDF .
  2. В диалоговом окне Монтажные области в Adobe PDF выполните следующие действия.
    • Выберите целевую папку, в которой следует сохранить сформированные PDF-документы.
    • Задайте префикс имени файла для создаваемых PDF-документов. Например, Кампания_страхование.
    • Укажите, следует ли экспортировать только содержимое на монтажных областях или также содержимое в участках, перекрывающих монтажные области.
    • Укажите, следует ли экспортировать все монтажные области или только выбранные.
    • Укажите, следует ли экспортировать вместе с монтажными областями их фоны.
    • Укажите, следует ли создать один PDF-документ для всех монтажных областей в текущем документе или отдельный PDF-документ для каждой монтажной области. Если принято решение создать несколько PDF-документов, для всех них используется определенный ранее префикс имени файла.
    • Укажите кодировку для экспортированных PDF-документов: ZIP или JPEG . При выборе JPEG следует также задать параметр Качество ( 0–12 ).
    • Укажите, включать ли в экспортируемые PDF-документы профиль ICC (International Color Consortium). Профиль ICC содержит данные, характеризующие устройство ввода или вывода цвета.
    • Укажите, следует ли экспортировать вместе с монтажными областями их имена. При выборе этой настройки можно указать пользовательский шрифт, размер и цвет шрифта, а также цвет расширения холста.
  3. Нажмите кнопку Выполнить . Photoshop создает PDF-документ.

Экспорт монтажной области в PDF

Прекращение поддержки экспорта в формате SVG

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

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

  • Выберите Установки > Экспорт и установите флажок Использовать прежнюю версию «Экспортировать как» . Закройте и перезапустите Photoshop.
  • Для работы с SVG лучше использовать векторные приложения, такие как Illustrator и XD, поскольку Photoshop в основном работает с пикселями. Откройте файл PSD в Adobe XD или Illustrator и используйте их функции экспорта в формат SVG. Дополнительные сведения об экспорте файлов из XD или Illustrator:

прежняя версия «экспортировать как»

Ограничения экспорта SVG в Photoshop

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

Общие вопросы

Какое цветовое пространство лучше всего подойдет для экспорта документа Photoshop?

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

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

Что такое экспортные фрагменты?

Фрагменты разделяют изображение на изображения меньшего размера, которые собираются на веб-странице с помощью HTML-таблицы или слоев CSS. Разделив изображение, можно назначить каждому фрагменту свою URL-ссылку для создания навигации либо оптимизировать каждую часть изображения с помощью индивидуальных параметров оптимизации. Экспортировать и оптимизировать разделенное на фрагменты изображение можно с помощью команды «Сохранить для Web (старая версия)». Photoshop сохраняет каждый фрагмент как отдельный файл и создает код HTML или CSS, необходимый для отображения разбитого на фрагменты изображения.

Можно ли экспортировать документ Photoshop с помощью команды «Сохранить для Web»?

Да. Вы по-прежнему можете использовать команду Сохранить для Web (старая версия) для экспорта ресурсов. Чтобы экспортировать документ с помощью старой версии функции экспорта, выберите Файл > Экспорт > Сохранить для Web (старая версия).

Распространенные ошибки

Ошибка: функция Adobe «Сохранить для Web»

Если при использовании Photoshop в macOS 10.15.x выбрать «Файл» > «Экспорт» > «Сохранить для Web», отобразится ошибка Ошибка функции Adobe «Сохранить для Web». Невозможно завершить данную операцию. Произошла неизвестная ошибка.

Сведения о временном решении см. в разделе Photoshop и macOS Catalina (10.15).

Ошибка: рендеринг видео запускается, но не завершается

Если выбрать команду Файл > Экспорт > Просмотреть видео, процесс не завершается.

Сведения о временном решении см. в разделе Photoshop и macOS Catalina (10.15).

Ошибка: при запуске Photoshop отображается сообщение «Возникла проблема с Генератором»

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

Ошибка: слой пустой

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

Ошибка: изображение выходит за границы документа

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

Создание SVG-спрайта вручную

Если у вас небольшой проект, вы не используете (не умеете?) сборщики, то собрать SVG-спрайт можно вручную. Дело это несложное.

Сохраняем SVG-иконки. Для этого в Photoshop можно нажать «ctrl+shift+alt+w» или зайти в меню «Файл», затем выбрать «Экспортировать» и наконец «Экспортировать как…».

В правом верхнем углу открывшегося окна выбираем «SVG» и сохраняем.

Далее создаём файл спрайта, например, «sprite.svg». Открываем его и наши иконки в редакторе.

Удаляем всё лишнее. Информацию в xmlns, ширину, высоту (viewBox оставляем), id, взятый из названия слоя в Photoshop. Стили тоже можно удалить и прописать их в CSS-файле. Получается что-то типа этого:

В sprite.svg создаём тег SVG, дописываем ему display: none.

Внутрь тега SVG переносим код наших иконок.

Каждой иконке задаём id, а тег SVG самой иконки заменяем на тег «symbol».

Всё! Вставляете на страницу SVG удобным для вас способом (из-за display: none отображаться он не будет), в нужном месте, для того чтобы использовать иконку, пишете следующий код:

Добавить комментарий

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