Узнайте, как импортировать графику SVG в Adobe Muse CC. Размещайте, копируйте и импортируйте графику SVG в Adobe Muse.

Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Adobe Muse позволяет использовать векторные изображения, созданные с помощью таких инструментов, как Adobe Illustrator, в дизайне сайта. В настоящее время, Adobe Muse имеет встроенную поддержку формата Scalable Vector Graphics (SVG). Формат SVG можно использовать для создания логотипов, значков, заливки фона и браузера, а также многих других элементов. Затем эти элементы можно поместить прямо на холст веб-страницы в Adobe Muse.

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

Поскольку они не зависят от разрешения, Adobe Muse обрабатывает файлы SVG одинаково для версий веб-сайта со стандартным и высоким разрешением. При помещении файлов SVG на холст веб-страницы в представлении «Дизайн» их масштаб не уменьшается до 50% от исходного размера.

Обработка файлов SVG перед размещением в Adobe Muse

Примечание.

Приведенная далее процедура действительна только при использовании Adobe Muse 2015.1 или более ранних версий.  

Для файлов SVG, созданных с помощью Adobe Illustrator, выполните указанные ниже действия.

  1. Завершив работу над дизайном в Adobe Illustrator, выберите Файл > Сохранить файл.

  2. В раскрывающемся списке Тип выберите SVG. Перейдите в папку, где необходимо сохранить файл, и нажмите кнопку Сохранить.

  3. В диалоговом окне параметров SVG установите следующие атрибуты:

    • Расположение изображения: Встроить
    • Профиль SVG: SVG 1.1
    • Шрифты - Тип: Преобразовать в контур
    • Свойства таблиц CSS: Атрибуты представления
    • Десятичные знаки: 3
    • Кодировка: Unicode (UTF-8)
    Задайте настройки SVG в Adobe Illustrator, а также перед импортом SVG в Adobe Muse CC.
  4. Нажмите кнопку «ОК», чтобы сохранить файл.

Импорт SVG

Если используется Adobe Muse 2015.1 или более ранняя версия, выполните пошаговые инструкции, приведенные в разделе Подготовка файлов SVG для размещения в Adobe Muse, прежде чем импортировать и поместить файл SVG в Adobe Muse.

  1. В Adobe Muse выберите Файл > Поместить (Ctrl + D в Windows или Cmd + D на MAC).

  2. Перейдите к папке с файлом SVG, выделите его и нажмите Открыть.

  3. В Adobe Muse при перемещении файла SVG рядом с указателем мыши отображается миниатюра для предварительного просмотра. На холсте веб-страницы нажмите там, где следует поместить файл SVG. Вставленный файл будет указан в списке на панели «Ресурсы».

    Панель «Ресурсы»

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

Копирование SVG в Adobe Illustrator

Adobe Muse позволяет копировать содержимое из Adobe Illustrator на холсты веб-страниц. Копирование содержимого удобно в том случае, если не требуется сохранять и использовать все содержимое графического объекта в дизайне сайта.

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

  1. В Adobe Illustrator выполните одно из следующих ниже действий.

    • Изолирование группы элементов или выделенного контура: нажмите правой кнопкой мыши группу элементов или контур, который необходимо скопировать, и выберите в контекстном меню команду «Изолировать группу/выделенный контур».
    • Выбор группы элементов или контура вручную: выделите группу элементов или контур, которые требуется скопировать.
    Выделение группы или контура
  2. Нажмите клавиши CTRL + C (Windows) или CMD + C (MAC), чтобы скопировать выделенное содержимое.

  3. В программе Adobe Muse нажмите клавиши CTRL + V или CMD +V, чтобы вставить скопированную группу элементов или контур на холст веб-страницы в представлении «Дизайн».

    Холст веб-страницы

    Вставленный файл SVG будет указан в списке на панели «Ресурсы».

    Панель «Ресурсы»

Импорт SVG в качестве фоновой заливки и заливки браузера

  1. В зависимости от того, требуется ли заполнить фон или добавить заливку в браузере, воспользуйтесь командой «Заливка» или «Заливка в браузере» соответственно. Дополнительные сведения см. в статье Использование команд «Заливка» и «Заливка в браузере».

  2. Нажмите кнопку «Добавить». Перейдите к расположению с нужным файлом SVG, выделите его и нажмите кнопку «Открыть».

    Нажмите кнопку «Добавить»
  3. Задайте соответствующие значения для атрибутов «Подгонка» и «Положение».

    Задайте соответствующие значения для атрибутов «Подгонка» и «Положение»

Примечание.

При добавлении файлов SVG в качестве фонового изображения или заливки в браузере изображение растрируется в представлении «Дизайн», если для атрибута «Подгонка» выбрано значение По размеру или Масштабировать с заполнением. Однако при предварительном просмотре в Adobe Muse или в браузере файл отображается должным образом.

Добавление изображений SVG в слайд-шоу

В Adobe Muse 2015.1 и более поздних версиях изображения SVG можно добавлять в слайд-шоу. Сначала перетащите виджет «Миниатюры» из библиотеки виджетов. Затем в своих библиотеках Creative Cloud Libraries выберите векторные изображения и поместите их в слайд-шоу.

Видеопособие

Видеопособие
Danielle Beaumont

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет