Export files in Photoshop
Learn how to export your documents, artboards, and layers in different formats and sizes.
Export files in different formats
With the August 2021 release of Photoshop 22.5, the export of Photoshop documents as SVG is no longer supported in Photoshop using the Export As option. ‘Export As SVG’ is being discontinued due to low usage and limitations. To know more, see Export As SVG deprecation in Photoshop.
You can use Quick Export As and Export As options to export a Photoshop document, artboards, layers, and layer groups in PNG, JPG, and GIF file formats.
Quick Export As
Use the Quick Export As option when you want to quickly export your work based on the settings you’ve specified in the Quick Export preferences.
To access the Quick Export As option, do either of the following:
- Navigate to File > Export > Quick Export As [image format].
- Go to the Layers panel. Select the layers, layer groups, or artboards you want to export. Right-click your selection and choose Quick Export As [image format] from the context menu.
Quick Export preferences
Quick Export preferences for format, location, metadata, and color space
By default, Quick Export generates assets as PNG with transparency and prompts you every time to select an export location.
To change the Quick Export settings, do either of the following:
- Go to Edit > Preferences > Export
- Select File > Export > Export Preferences
You can specify the following options in the Preferences dialog:
Quick Export Format : Select an image file format for export — PNG, JPG, and GIF . You can further set format-specific parameters. For example, for PNG, you can specify if you want to export assets with Transparency enabled (32-bit) or export Smaller Files (8-bit). For JPG, you can set the export Quality .
Quick Export Location : Choose this option to select the location for images exported using Quick Export. Select one of the following:
- Ask where to export each time : Prompts you to select a location every time you export assets.
- E xport files to an assets folder next to the current document : Places the image asset in a subfolder named Assets within the folder containing the source Photoshop document.
Quick Export Metadata : Use this option to include metadata — Copyright and Contact info in the exported assets.
Quick Export Color Space : Choose whether you want to convert the assets to the sRGB color space.
Export As Location : See the Export As section below.
Export As
Updated in April 2022
Use the Export As option to fine-tune your export settings every time you export layers, layer groups, artboards, or Photoshop documents as images. Each selected layer, layer group, or artboard is exported as a separate image asset.
To launch the Export As dialog, do either of the following:
- Navigate to File > Export > Export As to export the current Photoshop document. If your document contains artboards, all artboards in it are exported through this dialog.
- Go the Layers panel. Select the layers, layer groups, or artboards you want to export. Right-click your selection and select Export As from the context menu.
With the April 2022 release of Photoshop 23.3, the Export As dialog is supported by UXP (Unified Extensibility Platform) and not Common Extensibility Platform (CEP) because UXP supports more modern features and is simpler to design.
Export As Dialog setting and location preference
Export As dialog settings
You can set the following options in the Export As dialog:
Format: Choose PNG, JPG, or GIF.
Format-specific setting: For PNG, specify whether you want to export assets with Transparency enabled (32-bit) or export smaller-sized images (8-bit). For JPEG, specify the desired image quality slider (1–7). GIF images are transparent by default. While exporting PNG assets, remember the following:
- Selecting Transparency generates 32-bit PNG assets
- Selecting Smaller File generates 8-bit PNG assets
- Leaving the above options deselected generates 24-bit PNG assets
Size : Specify the width and height of the image asset. Width and height are locked together by default. Changing the width automatically changes the height proportionately. If you want to specify the canvas bounds of the exported asset, see Canvas Size.
Scale: Choose how big the exported image should be. This option is useful for exporting larger- or smaller-resolution assets. Changing the scale impacts image size.
Resample: Choose a resampling method. Resampling refers to changing the amount of image data as you change either the pixel dimensions or the resolution of an image, typically while resizing an image.
- Bilinear : Adds pixels by averaging the color values of the surrounding pixels. This method produces medium-quality results.
- Bicubic : A slower but more precise method based on an examination of the values of surrounding pixels. Using complex calculations, Bicubic produces smoother tonal gradations than the Bilinear or Nearest Neighbor resampling methods.
- Bicubic Smoother : Good for enlarging images based on Bicubic interpolation, but designed to produce smoother results.
- Bicubic Sharper : Good for reducing the size of an image based on Bicubic interpolation while enhancing sharpening. This method maintains the detail in a resampled image. If Bicubic Sharper oversharpens some areas of an image, try using Bicubic.
- Bicubic Automatic : Automatically chooses the Bicubic sampling method appropriate for the image.
- Nearest Neighbor : Fast but less precise method that replicates the pixels in an image. This method is for use with illustrations containing edges that are not anti-aliased. It preserves hard edges and produces a smaller file. However, this method can produce jagged effects, which become apparent when you scale an image or perform multiple manipulations on a selection.
- Preserve Details : While resizing the image, this method places primary importance on the preservation of image details and sharpness.
Canvas Size: If your asset needs to occupy a certain width and height, specify those values as the Canvas Size. The Export As dialog updates the preview to center the image within those bounds. This option is useful in several scenarios, such as the following:
- You’re exporting icons that have various sizes, but that need to be centered within 50×50 px boxes.
- You’re exporting banner images that are smaller or larger than the required dimensions.
If the image is larger than the canvas size, it is clipped to the width and height values set for the canvas. If the canvas size is larger than the image, the new space will be filled depending on the content of your image. If you have a background layer, it will fill with white color. If you do not have a background layer and your format settings support transparency, the background layer will be transparent. If your file is using the Index color mode, it will fill with the final swatch in the color table. You can click Reset to revert the values to those set in Image Size .
Metadata: Specify whether you want to embed metadata—copyright and contact information—in the exported assets.
Создание 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 отображаться он не будет), в нужном месте, для того чтобы использовать иконку, пишете следующий код:
Экспорт из Photoshop в SVG
Недавно я столкнулась с проблемой, которая заставила меня изрядно потрудиться, рыская по просторам интернета в поисках решения. Мне нужно было экспортировать элементы дизайна, нарисованные в Adobe Photoshop в формат SVG. Я думаю, многие сталкивались с такой проблемой и вам будет интересно узнать, как же я вышла из сложившейся ситуации.
Что такое SVG формат и чем он хорош
Начну с того, что формат SVG – это формат масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML , который в свою очередь используется в web программировании и мобильных разработках. Если сказать своими словами, то SVG файл хранит в себе программный код изображения, а XML , взаимодействуя с HTML или определенными языками программирования, позволяют этот код преобразовывать в это самое изображение в окне браузера или в окне мобильного приложения. Таким образом, можно использовать векторную графику в дизайне сайтов или приложений. А это дает огромные преимущества – ведь, как вы все знаете, векторная графика может, как угодно масштабироваться без потери качества.
SVG в Photoshop
В Adobe Photoshop есть возможность создания векторной графики с помощью Фигур и инструмента Перо . Направление дизайна, которое активно использует данный тип графики, называется Flat дизайн . Чтобы в браузере элементы дизайна смотрелись так же выгодно, как и в исходном файле и при этом свободно масштабировались без потери качества логично будет сохранить их в векторном формате, иначе, зачем вся затея?
Векторный объект, сохраненный в форматах jpeg или png , воспринимается как растровая графика. Поэтому логично будет сохранять векторные объекты в формат SVG .
Оговорюсь, что в этот формат так же можно сохранять объекты с растровыми элементами. Например, векторная фигура с параметром наложения «Тень» . Но в итоге данный объект будет масштабироваться с потерей качества, как элемент растровой графики. Так что, рекомендую сохранять в формат SVG именно векторную графику.
Начиная с последней версии, Photoshop решил отказаться от функции экспорта в SVG, так как данный инструмент специализируется на растровой графике. Для работы с векторной графикой у Adobe есть такие инструменты как Adobe Illustrator и Adobe XD.
Тем не менее, чтобы воспользоваться любым приведенным ниже способом экспорта в SVG, выполните действие Установки > Экспорт и установите флажок Использовать прежнюю версию «Экспортировать как» . Закройте и перезапустите Photoshop.
В иных случаях откройте ваш PSD документ через Illustrator или Adobe XD и сохраните элементы в SVG там.
Экспорт объектов из Photoshop CС и выше в SVG
Начиная с версий CC и выше, в Photoshop появилась полноценная возможность сохранять векторные объекты в SVG. Программный код сохраненного изображения при этом структурирован и не перегружен.
Таким образом не приходится прибегать к разным хитростям, чтобы использовать полученные SVG картинки в дизайне мобильных приложений .
Итак, откройте свое векторное изображение в Photoshop версии CC и выше и выполните следующее действие. Файл — Экспорт — Экспортировать как
В появившемся окне выберите формат SVG и задайте простые установки.
В SVG будет преобразованы все видимые слои. Если вы хотите, чтобы какой-то слой не экспортировался — отключите его видимость на панели слоев.
Экспорт объектов из Photoshop CS5 и ниже в SVG
В ранних версиях Photoshop не было полноценных инструментов для сохранения векторной графики. Поэтому приходилось прибегать к разным хитростям и использовать Adobe Illustrator .
Расскажу подробнее, как происходил процесс экспорта объектов из Photoshop в SVG, в данном случае.
Предположим, вы решили создать дизайн мобильного приложения в стиле Flat , используя векторные фигуры. У вас есть вот такие элементы.
Для начала сохраним весь документ в формат PDF. Файл – Сохранить как… выбрать формат Photoshop PDF .
Появится диалоговое окно, в котором я рекомендую изменить лишь одну настройку.
Вкладка Сжатие – Сжатие: Не показывать.
Теперь, можно смело открывать полученный PDF документ в Adobe Illustrator. Если там есть текст, то он будет преобразован в кривые.
Как видите, все объекты распределены по слоям и разбиты на группы, каждый контур редактируемый. На примере контур одной из кнопок выделен с помощью инструмента «Выделение».
Уже из Adobe Illustrator вы можете сохранять объекты по отдельности или все вместе в формат SVG .
Файл – Сохранить как… выбрать формат SVG.
В появившемся диалоговом окне я выбираю следующие настройки:
Полученный файл можно просмотреть через любой браузер. Попробуйте поменять масштаб страницы браузера, чтобы убедиться, что масштабирование происходит без потерь.
Надеюсь, данная статья оказалась для вас полезной и вы сможете в дальнейшем, без проблем создавать дизайн качественно масштабируемых проектов.
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.
Please enable JavaScript
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:
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).
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.
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.
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.
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.
2. Go to File -> Generate -> Image Assets.
Nothing will appear to happen, but if you re-open the Generate menu, you will see that Image Assets is now 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.
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.
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.
1. Simply Right-click on the layer and choose Copy SVG.
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.
If you are using an M1 Mac on the other hand, there is currently a known issue with exporting SVG files.
- Open Photoshop using Rosetta.
- 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.
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.
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.
Final Thoughts on Saving to SVG in Photoshop
There are a variety of ways to save to SVG in Photoshop, including:
- “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.