Товаров: 0 (0р.)

Svg как открыть в фотошопе: SVG — формат файла. Чем открыть SVG?

Содержание

Как открыть SVG в Photoshop Использование SVG Комплект для Adobe Creative Suite

опубликованный: 2013-04-27

Adobe обеспечивает поддержку формата SVG файла с помощью Adobe Illustrator, однако люди, которые используют Adobe Creative Suite может потребовать открытия такого файла через другие приложения Adobe Photoshop, как, что невозможно без преобразования файла SVG в первую очередь. Проще решение этой проблемы может быть просто использовать инструмент стороннего производителя, известного какSVG Kit, который позволяет напрямую открывать файлы SVG , используя различные Adobe Suite , приложения , такие как Adobe в InDesign Server, Adobe Photoshop, Adobe InCopy и Adobe Bridge.Этот вектор графический инструмент совместим как с Windows, и компьютерах Mac, в том числе 32-разрядные, так и 64-разрядных операционных систем. Давайте посмотрим, как вы можете использовать SVG Kit, чтобы открыть SVG файлы непосредственно с помощью Adobe Photoshop.

Открыть SVG файлов непосредственно в Adobe InDesign, Photoshop и других приложений

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

Работа с типичным качеством изображения в Photoshop

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

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

SVG Kit работает с операционными системами под управлением Adobe CS3 для CS6, за исключением 64-битных операционных систем Windows, так как они совместимы с версией CS4 к CS6. Одна лицензия SVG Kit стоит $ 99.

Перейти к загрузке SVG Kit

Как експортировать SVG из Photoshop’а, что бы потом его можно было редактировать?

У меня в макете (.psd) есть svg файл. Как его экспортировать, что бы потом его можно было вставить в html и из css менять его? Когда я нажимаю export as и выбираю svg, то он экспортируетсявот так
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 75 22">
  <metadata><?xpacket begin=""?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5. 6-c142 79.160924, 2017/07/13-01:06:39        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                           
<?xpacket end="w"?></metadata>
<image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAWCAQAAAAiV6lIAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfiCAYVOSnUmHB5AAACH0lEQVRIx7WX752aQBCGn/WXAuggpgOsIFpBoIKDCqIVnFbApQJIBdqBdiCp4EgFbgdvPvDnBAUWc87h4dmZh53xHRcddWtn7RXJo2XydJEUtNbOkt41p8c010XScmil5e9XOdRvlw7CUpK0ba3Vn+h2pLk5o+1tlA6UtP0CQMHvq92v+PiAx16xyRg3n4TYwW/Q5HPEA3LeKizTodechABIVZiTQ8xIf7sxHoZaGTu772QKE1Le08/RiAUAr+2SPwh2YGUszAZ8NwCMJyuqAqby/xMqM6GxMIhlLCeAvna+8szIKHtx1HcQqunP2fQwd8FiTsCc42dAjWH51a25WEgB+EonQQX3oAaxtMaDspAO92UJsUCkyBkqYo8H7ExHXnqxtCYBYOeaxORN6y8doeqb/dHtyVK3vE6gJS/MAcicVKsGO2jHK7DXwhSOUAVzfI4s2ttDtm159g2fVpsrvR5HvcPnXGWImoHT6sm+IhZkfHtItzfkgM9w6/uAZWEykxMCEGn9sV0WMa+ks4EaK0G/GasV73gESsxmwNGyMjmAOSkmBRLZegKXWHZKBzmBnYG1/tD3eQ0UgMn0nQhIlJernySnHbD6N5mUynfHfn1AAZiYA+BxLP+7PQULTMYb4FUi42IxOc0AexIWmI2rEFf+tRz7pE/EAkLySWAFKwACJU/EMpYYO+lE3ZPr8pGwdTnU+8QYOK1g2hOjktvzP27Ai3/GXPADAAAAAElFTkSuQmCC"/>
</svg>
и я его не могу менять (например при hover менять цвет из белого на красный). А когда я нажимаю на export contents, то он у меня экспортируется как файл .ai

Как открыть svg в фотошопе

Масштабируемая векторная графика (SVG) — это спецификация для изображений, которая предлагает преимущества для онлайн-просмотра и хранения на устройствах с ограниченной памятью. Разработанная Консорциумом World Wide Web (W3C), эта спецификация использует файлы XML для определения внешнего вида, рендеринга и поведения изображений.Большинство интернет-браузеров и графических приложений поддерживают файлы SVG или планируют сделать это в будущих выпусках. Поскольку Adobe Photoshop является растровым редактором, он не поддерживает напрямую SVG, который является векторным форматом. Рекомендуемое решение — открыть файл SVG в Adobe Illustrator, который является векторным редактором, и сохранить его в формате, который распознает Photoshop, например EPS.

Вещи, которые вам понадобятся

  • Adobe Illustrator установлен и настроен на вашем компьютере
  • Adobe Photoshop установлен и настроен на вашем компьютере

Шаг 1

Запустите Adobe Illustrator. Откройте файл SVG, который вы хотите открыть в Adobe Photoshop.

Шаг 2

Выберите «Сохранить как» в меню «Файл». Выберите «Illustrator EPS» в меню «Сохранить как тип». Нажмите «Сохранить».

Шаг 3

Нажмите «ОК» в диалоговом окне «Параметры EPS». Вам не нужно менять какие-либо настройки по умолчанию.

Шаг 4

Запустите Adobe Photoshop. Откройте файл EPS, который вы сохранили в Illustrator. Нажмите «ОК» в диалоговом окне «Растеризация общего формата EPS».

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

SVG Kit, который позволяет напрямую открывать файлы SVG , используя различные Adobe Suite , приложения , такие как Adobe в InDesign Server, Adobe Photoshop, Adobe InCopy и Adobe Bridge.Этот вектор графический инструмент совместим как с Windows, и компьютерах Mac, в том числе 32-разрядные, так и 64-разрядных операционных систем. Давайте посмотрим, как вы можете использовать SVG Kit, чтобы открыть SVG файлы непосредственно с помощью Adobe Photoshop.

Открыть SVG файлов непосредственно в Adobe InDesign, Photoshop и других приложений

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

Работа с типичным качеством изображения в Photoshop

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

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

SVG Kit работает с операционными системами под управлением Adobe CS3 для CS6, за исключением 64-битных операционных систем Windows, так как они совместимы с версией CS4 к CS6. Одна лицензия SVG Kit стоит $ 99.

название говорит само за себя. Есть ли способ открыть / импортировать файл SVG в Photoshop CS2 или CS3? Я нахожусь на Mac OS X, но предпочитаю кросс-платформенные решения. Illustrator может открывать файлы SVG, поэтому мне кажется странным, что Photoshop не может. Я понимаю, что Illustrator основан на векторах, но Photoshop также имеет ограниченные векторные возможности.

9 ответов

вы можете открыть его в Inkscape (это бесплатно,inkscape.org) и экспортировать как PNG оттуда, с размером вы предпочитаете.

Adobe потеряла всякий интерес к SVG, когда они купили Flash. Лучше всего открыть его в Illustrator и преобразовать в нечто другое, что Photoshop может проглотить.

для использования SVG изображений в Photoshop CS3 попробуйте «SVG Kit for Adobe Creative Suite» изsvg.scand.com и это вся история!

да, SVG Kit для Adobe Creative Suite только для Photoshop / Elements составляет $ 100! Adobe CS5 по-прежнему не открывает эти файлы. Лучший вариант сейчас-скачать Inkscape (бесплатно) и экспортировать его в другой формат.

SVG Kit для Adobe Creative Suite имеет бесплатную пробную версию в любом случае, так почему бы не попробовать? Кроме того, он поддерживает CS5.5, CS5, CS4 и CS3, и вам не нужно конвертировать SVG в другие форматы.

вы можете использовать GIMP для открытия и растеризации SVG, а затем Сохранить как PSD. Gimp также может импортировать пути, но я не уверен, как их сохранить, чтобы сохранить векторную графику в photoshop.

Я всегда просто помещаю [ctrl+shft+p] в Illustrator, а затем копирую и вставляю в photoshop как смарт-объект. Его быстрый и грязный, но он работает.

Я знаю, что вы спрашивали о CS2 или CS3, но Photoshop CC 2015.1 теперь поддерживает открытие и импорт статических SVG файлов.

кроме того, GIMP (free и open source) может открывать их. затем вы можете экспортировать его или даже скопировать-вставить как растеризованное разрешение по вашему выбору.

Экспорт из Photoshop в SVG

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

Что такое SVG формат и чем он хорош

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

SVG в Photoshop

В Adobe Photoshop есть возможность создания векторной графики с помощью Фигур и инструмента Перо. Направление дизайна, которое активно использует данный тип графики, называется Flat дизайн. Чтобы в браузере элементы дизайна смотрелись так же выгодно, как и в исходном файле и при этом свободно масштабировались без потери качества логично будет сохранить их в векторном формате, иначе, зачем вся затея? Векторный объект, сохраненный в форматах jpeg или png, воспринимается как растровая графика. Поэтому логично будет сохранять векторные объекты в формат SVG.

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

Подход, описанный в статье относится к версиям Photoshop ниже CS5. Если ваша версия программы выше, за более детальной информацией обращайтесь к новой статье — Экспорт изображений в SVG для мобильных приложений

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

Положив руку на сердце, скажу, что сначала я искала более простой путь, а именно всевозможные онлайн — конвертеры, например, как этот — http://www.online-convert.com/ru . Но работа с ним не принесла положительного результата. В случае с черно-белой картинкой – все было хорошо, а вот если нужно было сохранить цвет – начинались глюки.

Экспорт объектов из Photoshop в SVG

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

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

Для начала сохраним весь документ в формат PDF. Файл – Сохранить как… выбрать формат Photoshop PDF. Появится диалоговое окно, в котором я рекомендую изменить лишь одну настройку. Вкладка Сжатие – Сжатие: Не показывать.

Теперь, можно смело открывать полученный PDF документ в Adobe Illustrator. Если там есть текст, то он будет преобразован в кривые.

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

Уже из Adobe Illustrator вы можете сохранять объекты по отдельности или все вместе в формат SVG.

Файл – Сохранить как… выбрать формат SVG.

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

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

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

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях  

и мы обязательно опубликуем для вас еще больше полезных уроков!

(Visited 53 372 times, 23 visits today)

Не используйте русифицированный фотошоп — Блог HTML Academy

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

Убедитесь, что Фотошоп правильно настроен: выпадающее меню Edit → Color Settings (вызывается Shift + Ctrl + K), выставьте для RGB вариант sRGB. Это то цветовое пространство, «в котором работает весь веб».

Дополнительная мелкая настройка: Edit → Preferences → Units & Rulers (для OS X пункт Preferences — в выпадающем меню с названием программы), в выпадающих списках для «Rulers» и «Type» нужно выбрать единицы измерения «Pixels».

Интерфейс

Интерфейс Фотошопа

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

Панель со всеми инструментами слева, прочие панели справа или «плавают».

Внешний вид Фотошоп настраивается: можно перетаскивать панели, включать и отключать их видимость (в выпадающем меню Window), сворачивать и разворачивать (двойной клик по названию панели), сворачивать в иконки.

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

Необходимые и желательные для верстальщика панели:

  1. Layers — панель слоёв — папки и слои макета.
  2. Character — данные о выделенном текстовом слое или тексте (шрифт, цвет, размер, интерлиньяж и другое).

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

Все лишние панели закрыть, ибо занимают место. Спасибо, кэп!

Как верстальщику работать в Фотошопе

Если вы правша, держите левую руку на левой части клавиатуры, чтобы легко доставать до Shift, Ctrl, Alt и Пробел.

Включите линейки (выпадающее меню View → Rules, поставить галочку (оно же — Ctrl + R)), убедитесь, что они показывают пиксели (правой кнопкой мыши кликнуть на линейке, выбрать пиксели).

Ориентация по документу

Tab — показать или скрыть все панели.

Зажать Пробел, «схватить» мышью за документ и перетаскивать — перемещение в рамках масштаба. Зажатие кнопки временно активирует инструмент Hand Tool.

Ctrl + 0 — вписать макет в рабочую область.

Ctrl + 1 — установка масштаба 100%.

Зажать H, зажать левую кнопку мыши — документ масштабируется так, чтоб был виден целиком, можно перетащить рамку (вы держите левую кнопку нажатой, просто тащите мышь) в любое место и отпустить — окажитесь в этой области с тем масштабом, который был ранее. Архиудобно для перемещения по увеличенному документу! Почти как зажатие Пробел, но быстрее при перемещении на «большие расстояния».

Зажать Alt, крутить колесо мыши — масштабирование в обе стороны вокруг того места, где расположен курсор.

Выбор слоёв

Можно поискать нужный слой в панели слоёв, но есть способ быстрее.

Зажать Ctrl и кликнуть на слой. Зажатие кнопки временно активирует инструмент Move Tool. Работает в случае выбора любого инструмента кроме Hand Tool (по зажатию Ctrl включается инструмент масштабирования) и самого Move Tool. Чтобы это работало, убедитесь, что настройки инструмента Move Tool (это панель под выпадающими меню, когда инструмент выбран) выставлены следующие: Auto-Select — галка стоит, в выпадающем списке рядом — Layer.

Показать и скрыть

Показать или скрыть какие-либо слои просто — кликнуть на иконке «глаз» этого слоя в панели слоёв (или с клавиатуры: Ctrl + ,).

Alt + клик по иконке «глаз» в панели слоёв — показать только один этот слой, прочее скрыть, повторный клик, чтобы вернуть статус кво.

Информация о слоях

Двойной клик по миниатюре текстового слоя — редактирование слоя, выставляйте текстовой курсор в нужное место — узнаёте шрифт, размер, интерлиньяж, трансформации, кернинг, спейсинг и цвет. Если параметры Horizontally Scale или Vertically Scale отличаются от 100%, нужно экспериментировать с CSS3-свойством transform у блока, в который включать только этот текст и налаживать взаимодействие дизайнера и верстальщика, если это контентный текст.

Двойной клик по миниатюре слоя с цветом, градиентом, заливкой текстурой — вызов модального окна с данными слоя.

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

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

Цвет в макете: инструмент Eyedropper Tool (в настройках указать Sample Size → Point Sample). Кликаем по произвольному пикселю, в панели цвета (под всеми инструментами) видим цвет пикселя.

Размер в макете: инструмент Ruler Tool — нажать, тащить мышью, отпустить — в панели настроек (под выпадающим меню, параметр L1) увидите измеренное расстояние. Если тащить с зажатым Shift, измеритель перемещается строго горизонтально, строго вертикально или под 45° (для верстальщика не актуально).

Можно использовать Rectangle Marquee Tool, создавая выделение (размер выделения будет показан рядом с выделением), если Фотошоп версии CS6 и новее. Убрать получившееся после измерения выделение — Ctrl + D.

Прочие полезные верстальщику техники

Показать и скрыть сетку, направляющие, габариты трансформации, нарезку — Ctrl + H.

Отмена и повтор последнего действия — Ctrl + Z(снова спасибо, Кэп!)

Отмена действий последовательно — Ctrl + Alt + Z

Команда из выпадающего списка Image → Trim — подрезка прозрачных или однотонных пикселей (удобно, если нужно получить слой на прозрачном фоне: копируем слой в новый документ, подрезаем, экспортируем).

Узнать истинный габарит слоя с полупрозрачными эффектами — правый клик по названию слоя → Convert to Smart Object. После этого габарит трансформации показывает размер с эффектами.

Обрезать макет до габаритов какого-либо изображения для его экспорта — инструмент Crop Tool.

F12 — восстановить макет в том виде, в котором он сейчас сохранён на диске.

Экспорт графики для веба

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

Если векторный объект нарисован в самом Фотошопе, то чтобы экспортировать SVG, выберите в панели слоёв векторный слой, вызовите контекстное меню и используйте команду File → Export As. В открывшемся окне экспорта можно выбрать SVG-формат. На этапе экспорта отмасштабируйте экспортируемую картинку — убедитесь, что в результате получится именно вектор, а не растровая вставка в векторный файл.

Если же SVG создан в стороннем векторном редакторе (например, в Adobe Illustrator) и добавлен в Фотошоп как смарт-объект, то для его экспорта нужно вызвать на слое контекстное меню и выбрать пункт Export Contents.

Экспорт графики

Большие фотографические (многоцветные) изображения экспортируются как JPEG, качество 60‒95.

Мелкие картинки, вписывающиеся в 256 цветов, которым не нужна полупрозрачность или она бинарная — PNG-8.

Любые картинки где нужна полупрозрачность или отсутствие искажений — PNG-24.

Заключение

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

Экспортируем векторные слои из AI в PSD

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

В этом должна помочь стандартная функция экспорта в PSD, но так ли это?

Экспортируя в Иллюстраторе через меню File → Export → PSD с опцией «Write Layers» → «Maximum Editability», мы получим случайным образом слитые растровые слои.

Экспорт в PSD по умолчанию

Сторонние способы

Забегая вперёд, ни сторонние программы, ни моё решение не переносят редактируемые мешы или эффекты из Иллюстратора в Фотошоп.

Сохранение PSD через Fireworks

В статье 2013 года попадается вариант сохранения AI в PSD через Файерворкс.

Плюсы:

  • Сохраняются имена

Минусы:

  • Адоб перестал обновлять Файерворкс с 2013 года
  • Непонятно, что растрируется, что остаётся векторным

Сохранение PSD через Affinity Designer

Плюсы:

  • Векторные объекты, обводки
  • Заливки одним цветом, градиенты
  • Импортирует растровые изображения в документе
  • Прозрачность объектов
  • Редактируемые тексты

Минусы:

  • Цена 50$
  • Все группы распадаются
  • Сбрасывает имена объектов
  • Не поддерживает обтравочные маски, эффекты

Расширение SVG Layers

Импорт SVG в Фотошоп через SVG Layers

Плюсы:

  • Векторные объекты, обводки
  • Заливки одним цветом, градиенты в бета версии
  • Группы объектов
  • Редактируемые тексты

Минусы:

  • Цена 19$
  • Макет придётся предварительно из AI, EPS сохранять в SVG
  • Проблемы импорта объектов с прозрачностью
  • Не поддерживает обтравочные маски, эффекты, растровые изображения в документе
  • Лишние символы в именах объектов

Способы в Иллюстраторе

Сторонний платный софт имеет свои плюсы и минусы экспорта. Мне интересно было найти решение напрямую из Иллюстратора.

На примере статьи 2011 года у Турбомилк обычно все уроки сводятся к получению растровых слоёв:

  • Группировать объекты в макете
  • Сортировать по слоям
  • Растрировать через Object → Rasterize или эффект Effect → Rasterize
  • Экспортировать в PSD

Экспорт в PSD растровых слоёв

И тут попадается трюк для Иллюстратора на Tutsplus. Если к объектам применить Make Compound Shape в панели Pathfinder, то при экcпорте объект будет векторным. Проверяю способ на нескольких объектах.

Экспорт после применения Make Compound Shape

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

Что если у нас файл содержит десятки, сотни объектов? Вручную применять к каждому объекту Make Compound Shape долго. Если записывать экшн в Иллюстраторе, то появляется проблема перебора объектов — встроенная команда Select Next Object будет перескакивать сгруппированные объекты и не сможет переходить автоматически на следующий слой.

Автоматизация

Я решил автоматизировать процесс подготовки векторного файла для экспорта в PSD и написал скрипт Ai2Psd.

Cкрипт проверяет все объекты документа в группах и слоях. Найдя объект с одноцветной заливкой, он применяет к нему команду Make Compound Shape. В конце скрипт покажет инструкцию и откроет окно экспорта в PSD.


Upd: У Адоб в Иллюстраторе 2020 до сих пор остаются проблемы самого механизма экспорта. Будьте готовы, что даже новые версии скрипта в каких-то случаях не помогут.

Плюсы:

  • Скрипт бесплатный
  • Векторные объекты c одноцветной заливкой
  • Группы объектов
  • Обтравочные маски
  • Прозрачность, режимы наложения
  • Имена объектов
  • Редактируемые тексты

Минусы:

  • Скрипт вносит изменения в файл, лучше его запускать на копии
  • Градиенты, паттерны и обводки растрируются
  • Растровые изображения могут в PSD оказаться слитыми в 1 слой

Скачать Ai2Psd

Оптимизация документа

Обводки
Чтобы обводки остались в Фотошопе векторными, в Иллюстраторе сделайте их самостоятельными объектами через Object → Path → Outline Stroke.

Преобразование обводки в объект

Похожие объекты
Если у вас есть группа из сотен одинаковых объектов, например, кистью нарисованы волосы или текст, переведенный в кривые, для скорости работы скрипта объедините элементы в Compound Path через Object → Compound Path → Make.

Объединение схожих объектов

Исключения

Эффекты
Если в файле присутствуют объекты, к которым применены эффекты: тень, свечение, шум и т.д. и вы хотите их перенести в PSD, то перед запуском скрипта надо вручную растрировать в режиме Type Optimized.

Паттерны
Чтобы паттерны остались векторными, примените Object → Expand. Тогда они станут обычными векторными объектами внутри обтравочных масок, которые скрипт обработает.

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

Автогруппировка проблемных объектов в AI для получения отдельных слоёв в PSD

Скачать Ai2Psd

Если скрипт не скачивается, то вот запасная ссылка.

Отзывы

Mateusz Nowak: «Thanks for Ai-to-Psd script!»

Dilyana Aleksandrova: «ai to psd saved my ass at work man, thank you for sharing it!»

Weyn Cueva: «This is amazing! I’ve been looking for something similar because I work more in Photoshop. Thank you»

Maggie Stilwell: «This is awesome! A great timesaver. Thank you for sharing it»

WashIrving: «выглядит чертовски полезно. спасибо, бро»

zmotion: «Шикарный скрипт. Уверен для многих, в том числе и для меня это будет весьма полезно!»

Abdelrahman Hamza: «Man this is GREAT I have been struggling for many years in my work process and workshops. Thank you very much for your tool and effort»

Краткие итоги

  • Ни сторонний платный софт, ни скрипт Ai2Psd не являются 100% способом перенести сложные макеты корректно из Иллюстратора в Фотошоп.
  • Флэт иконки, UI элементы, простые иллюстрации — их можно получить из AI в PSD векторными.
  • Трюк с Make Compound Shape на объекте с заливкой без обводки в Иллюстраторе позволяет экспортировать вектор в PSD.
  • Если сгруппировать растрируемый объект в Иллюстраторе, то он будет отдельным слоем в Фотошопе.
  • Скрипт Ai2Psd является бесплатной альтернативой сторонним программам.

Донаты

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

JPEG, PNG, SVG и т. Д.

По умолчанию Adobe Illustrator сохраняет файлы в формате AI. Это идеально подходит для тех случаев, когда вы работаете над проектами, или для сохранения мастер-копии вашей работы.

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

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

Сохранение артбордов в Adobe Illustrator

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

и как сохранить артборды в виде отдельных файлов.

Артборды похожи на разные страницы в файле Illustrator. Они могут быть объединены в одно изображение, но вы также можете сохранить их отдельно.

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

Вот что вы должны сделать:

  • Если вы хотите сохранить несколько монтажных областей в виде отдельных файлов, установите флажок Использовать артборды. Затем выберите либо Все чтобы сохранить все монтажные области, или введите Спектр (например, 2-4), чтобы указать, какие монтажные области сохранить.
  • Когда у вас есть объекты, расположенные за пределами артборда (например, если он перекрывает край), установите флажок Использовать артборды. Это гарантирует, что ваше окончательное изображение содержит только то, что находится внутри монтажной области, а остальное обрезано.
  • Если все ваши художественные работы находятся в артборде, и у вас есть только один из них, снимите флажок Использовать артборды. Это создаст изображение, обрезанное до границ объектов внутри, со всеми удаленными пробелами. Это особенно удобно для вывода объектов квадратной или прямоугольной формы.

Сохранение JPEG в высоком разрешении в Adobe Illustrator

Для иллюстрации, инфографики или чего-либо, что должно быть напечатано как визитная карточка

, лучший вариант — вывести его в формате JPEG с высоким разрешением.

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

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

  1. Идти к Файл> Экспорт> Экспортировать как. Введите имя файла и установите Формат в JPEG.
  2. Установите, как вы хотите сохранить ваши монтажные области, затем нажмите экспорт продолжать.
  3. в Параметры JPEG изменение экрана Цветовая модель если вам нужно, и выберите качество.
  4. Под Опции, установить выходное разрешение. Экран (72 точек на дюйм) создаст файл того же размера, что и исходный документ, и должен подойти для использования в Интернете. выберите Высокий (300 точек на дюйм) для изображения с высоким разрешением. Это будет достаточно для печати.
  5. Нажмите Хорошо сохранить файл.

Сохранение файлов Adobe Illustrator в формате PNG

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

Для поддержки стандартных дисплеев и дисплеев с высоким разрешением вы должны экспортировать файл в разных размерах. Вы можете сделать это автоматически.

  1. Идти к Файл> Экспорт> Экспорт для экранов.
  2. Выберите монтажные области Вкладка. Если на вашем изображении несколько артбордов, выберите те, которые вы хотите вывести.
  3. Под Форматы, задавать Формат в PNG а также Масштаб в 1x.
  4. Нажмите Добавить шкалу. Это создаст настройки для второго изображения, поэтому установите Масштаб вариант нового относительного размера. 3x, например, будет выводить изображение в три раза выше и шире, чем оригинал.
  5. Добавьте больше размеров, если они вам нужны.
  6. Нажмите Экспорт артборда чтобы сохранить ваши изображения.

Сохранение файлов Adobe Illustrator в формате SVG

Лучший, более современный способ экспорта графики, например значков и логотипов для Интернета, — использование формата SVG. Сокращенно от Scalable Vector Graphics, SVG на самом деле является языком разметки на основе XML.

Хотя вы можете выводить файлы, на которые вы можете ссылаться на вашей веб-странице, вы также можете сохранить изображение в виде фрагмента кода, который вы можете вставить непосредственно в ваш HTML-файл. Затем вы можете редактировать это с помощью CSS. Это очень эффективный способ добавления эффектов и анимации к вашим изображениям.

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

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

  1. Идти к Файл> Экспорт> Экспортировать как.
  2. Установить Формат в SVG и нажмите экспорт.
  3. Задавать стайлинг в Внутренний CSS. Это помещает всю информацию о стиле в блок, который можно легко изменить с помощью CSS.
  4. За Шрифт выбирать SVG сохранить текст по выбору. Только выбрать контуры если вы используете непонятный, нестандартный шрифт. Покидать Изображений на заповедник.
  5. Удостовериться преуменьшать а также отзывчивый оба проверены на максимальную производительность и совместимость.
  6. Теперь нажмите Показать код открыть код в текстовом редакторе. Вы можете скопировать и вставить это в свой HTML-файл. Или нажмите Хорошо вывести изображение в виде файла SVG.

Сохранение артбордов в формате PDF в Adobe Illustrator

Самый простой способ сохранить файл Illustrator в формате PDF — через Сохранить как вариант. Однако, если вы используете более одного артборда, это объединит их все в многостраничный PDF.

Существует простой способ сохранить артборды в виде отдельных файлов PDF:

  1. Идти к Экспорт> Сохранить для экранов.
  2. В открывшемся диалоговом окне щелкните монтажные области и выберите те, которые вы хотите сохранить.
  3. В правой колонке Формат в PDF, затем нажмите Экспорт артбордов. Для вывода больших или сложных файлов может потребоваться несколько секунд.
  4. По завершении ваши файлы будут по умолчанию сохранены в отдельной подпапке.

Сохранение объектов из изображения Adobe Illustrator

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

Вы можете сделать это, превратив объекты в активы.

  1. Идти к Окно> Экспорт активов.
  2. Выбрать Инструмент выбора с панели инструментов или нажмите В на вашей клавиатуре. Теперь перетащите объекты, которые вы хотите сохранить на Экспорт активов панель.
  3. Теперь выберите Актив. Держать Ctrl или же Cmd выбрать более одного.
  4. Под Настройки экспорта выберите Формат. Вы можете выбрать PNG, JPEG, SVG или PDF.
  5. Если вы сохраняете в формате PNG или Jpeg, вы можете экспортировать в нескольких размерах. Задавать Масштаб в 1x, затем нажмите Добавить шкалу и множество Масштаб например, 2x. Вы также можете использовать эту опцию для экспорта актива в различные форматы.
  6. Нажмите экспорт и выберите место для сохранения ваших новых файлов.

Как использовать файлы Adobe Illustrator в других приложениях

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

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

Для большинства приложений, не относящихся к Adobe, вам, скорее всего, потребуется сохранить файл в формате SVG (используя Сохранить как команда на этот раз). Ознакомьтесь с нашим руководством по открытию AI-файлов без Adobe Illustrator

Больше подробностей.

Экспорт в формате SVG в Photoshop?

Экспортировать как SVG в Photoshop? — Обмен стеками графического дизайна
Сеть обмена стеков

Сеть Stack Exchange состоит из 177 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange
  2. 0
  3. +0
  6. Авторизоваться Зарегистрироваться

Graphic Design Stack Exchange — это сайт вопросов и ответов для профессионалов, студентов и энтузиастов графического дизайна.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил

Просмотрено 80k раз

Я открыл изображение PNG в Photoshop.Я хочу экспортировать как SVG и сделать изображение пиксельным. Как мне это сделать?

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

Создан 27 фев.

ПОСрПОСР

5111 золотой знак11 серебряных знаков22 бронзовых знака

2

Невозможно экспортировать SVG с помощью Adobe Photoshop.Единственный способ добиться желаемого — скопировать изображение в Adobe Illustrator и сохранить его как файл SVG.

Я не уверен, зачем вам это нужно, поскольку цель SVG — сделать Scalable Vector Graphics , чтобы вы могли изменять размер изображения без его пикселизации. Экспортируя его как SVG, вы, по сути, оборачиваете уже имеющийся код PNG в XML — с тем же успехом можете использовать вместо него файл PNG.

alexxlab

Задания для фотошопа: Практические задания для работы в графическом редакторе Adobe Photoshop

Лист бумаги для фотошопа: 4 000+ картинок с текстурой бумаги бесплатно

Как в фотошопе нарисовать кнопку: Рисуем кнопку для сайта в Фотошоп / Creativo.one

Как сделать в фотошопе фото в стиле гта: Делаем в Photoshop художественную обработку в стиле Дрим-арт

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

Как увеличивать и уменьшать фото в фотошопе: Инструмент «Масштаб» в фотошопе

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

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