Узнайте о том, как систематизировать и преобразовывать различные объекты в Adobe Muse, а также управлять ими. Узнайте, как оптимизировать изображения для Adobe Muse.

Примечание.

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

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

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

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

Использование изображений в проектах Adobe Muse

Размещение фреймов изображения в проектах Adobe Muse

Фрейм изображения можно разместить непосредственно в проектах Adobe Muse, просто выбрав инструмент «Фрейм изображения». На панели «Инструменты» выберите инструмент «Фрейм изображения», а затем нажмите в нужном месте своего проекта.

  1. На панели «Инструменты» выберите инструмент «Прямоугольный фрейм» или «Эллиптический фрейм».

    Инструмент «Фрейм изображения» в Adobe Muse
    Перетаскивание прямоугольных и эллиптических фреймов изображений в Adobe Muse.

  2. Нажмите инструмент «Фрейм изображения» и перетащите фрейм изображения в свой проект.

    Вы можете разместить в своем проекте несколько фреймов изображений. Также можно изменять размер фреймов для изображения и перемещать их в соответствии с требованиями своего дизайна.

    Фрейм можно заполнить цветом или поместить в него изображение. Чтобы поместить изображение, перетащите его во фрейм. Размеры изображения изменяются в соответствии с размерами фрейма.

    Прямоугольные и эллиптические фреймы изображений
    Прямоугольные и эллиптические фреймы изображений

Размещение одного изображения на странице

Рабочая среда приложения Muse аналогична интерфейсам программ Illustrator и InDesign. Сначала загрузите размещаемое изображение и нажмите нужную страницу. Чтобы добавить файл изображения, разместив его непосредственно на странице, выполните следующие действия.

  1. Выберите Файл > Поместить или нажмите клавиши Command+D (Mac) или Control+D (Windows), чтобы открыть диалоговое окно Импорт.
  2. Перейдите к папке с файлами примеров и выберите файл made-with-muse.png. Нажмите кнопку Открыть, чтобы выбрать его и закрыть диалоговое окно Импорт.

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

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

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

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

Оптимизация изображений в приложении Muse при публикации и экспорте сайта

В приложение Adobe Muse также можно поместить изображение, предназначенное для печати, которое будет преобразовано в подходящий для Интернета формат. Однако преобразование изображения в подходящий для Интернета формат часто означает сжатие изображения, ведущее к некоторому снижению его качества. Помещение в приложение Muse изображений, не подходящих для Интернета, приводит к их автоматическому сжатию. Если после публикации или экспорта сайта результаты автоматического преобразования неудовлетворительны, попробуйте создать собственные изображения и оптимизировать их для Интернета вручную с помощью приложений Photoshop или Adobe Fireworks®. Удалите исходные изображения и поместите на страницы новые оптимизированные изображения, а затем опубликуйте или экспортируйте сайт.

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

Оптимизация изображений для отображения в Интернете

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

В случае помещения больших файлов изображений приложение Muse автоматически ограничивает размер и изменяет ширину изображения до 2048 пикселей. При наведении курсора на имя ресурса на панели «Ресурсы» отображается подсказка с исходным и измененным размером изображения (измененным в соответствии с максимально допустимым размером).

Прежде чем помещать изображения на страницы, рекомендуется изменить их размер и оптимизировать их для Интернета в редакторе изображений. Помещение изображений с чрезмерно большими размерами может привести излишнему увеличению размера файла .muse. Файл .muse должен будет обрабатывать лишние данные пикселей, которые не нужны для отображения изображения на веб-странице. Это может привести к увеличению времени обработки во время экспорта и публикации сайта. В некоторых случаях слишком большой файл .muse может привести к истечению времени ожидания при изменении размера или оптимизации всех файлов во время экспорта или публикации. Могут возникать ошибки времени ожидания.

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

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

Рисование замещающих фигур

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

  1. На панели «Инструменты» выберите инструмент «Прямоугольник» или «Эллипс».

    Рисование замещающих фигур в Adobe Muse
    Выберите инструмент «Прямоугольник» или «Эллипс» на соответствующей панели

  2. Перетащите прямоугольную или эллиптическую фигуру в свой проект Adobe Muse. 

    • Чтобы создать прямоугольники, выберите инструмент «Прямоугольник», удерживая нажатой клавишу Shift.
    • Чтобы создать окружности, выберите инструмент «Эллипс», удерживая нажатой клавишу Shift.

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

  3. Чтобы задать свойства подгонки объекта, выделите прямоугольник или эллипс и выберите «Объект» > «Подгонка».

    Можно выбрать один из описанных ниже вариантов подгонки.

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

    Уместить фрейм в объекты с сохранением пропорций (Adobe Muse)
    Уместить фрейм в объекты с сохранением пропорций

Использование файла Photoshop в качестве интерактивной кнопки

  1. Выберите Файл > Поместить кнопку Photoshop. В отобразившемся диалоговом окне Импорт из Photoshop найдите файл PSD. Нажмите Выбрать (Mac) или Открыть (Windows), чтобы выбрать файл.

  2. Откроется диалоговое окно Параметры импорта формата Photoshop. Просмотрите, как применяются выбранные параметры. Можно использовать меню, чтобы указать, какой слой файла Photoshop будет отображаться для стандартного состояния кнопки (внешний вид кнопки при начальной загрузке страницы), для состояния при наведении курсора (внешний вид кнопки, когда посетители наводят на нее курсор) и при удержании кнопки мыши (внешний вид кнопки, когда посетители нажимают ее). В трех меню состояния отображаются имена слоев файла Photoshop, а миниатюры демонстрируют внешний вид кнопки при выборе каждого слоя.

  3. В целях данного примера слои Photoshop уже правильно назначены для каждого состояния кнопки. Изменять настройки в меню не нужно. Нажмите кнопку «ОК», чтобы принять распределение состояний по умолчанию.

    Используйте диалоговое окно «Параметры импорта формата Photoshop», чтобы связать существующие слои Photoshop с необходимыми состояниями кнопки.
    Используйте диалоговое окно «Параметры импорта формата Photoshop», чтобы связать существующие слои Photoshop с необходимыми состояниями кнопки.

  4. Нажмите один раз в правой верхней области заголовка страницы «Шаблон-А», чтобы поместить файл Photoshop с исходным размером.

  5. Нажмите ссылку Предварительный просмотр, чтобы использовать эмулятор визуализации на основе WebKit. Проверьте отображение страницы «Шаблон-А». Сначала при просмотре страницы кнопка отображается в стандартном состоянии. Если навести на кнопку курсор, ее оформление немного изменится (коричневый цвет капли станет светлее), а если нажать кнопку, то белый текст станет светло-коричневым, пока кнопка будет нажата.

  6. Нажмите Дизайн, чтобы вернуться к редактированию страницы «Шаблон-А» в режиме Дизайн.

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

Следующая часть посвящена определению областей верхнего и нижнего колонтитулов страницы-шаблона.

Закрепление объектов в окне браузера

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

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

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

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

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

  1. Открыв страницу «Шаблон-А» в режиме «Дизайн», выделите значок Facebook с помощью инструмента «Выделение».
  2. Выберите в разделе «Фикс.» на панели элементов управления положение закрепления вверху справа. Этот параметр закрепляет элемент по текущему положению его правого верхнего угла.
  1. Повторите шаги 1 и 2, чтобы закрепить кнопки значков Google+ и Twitter в их правом верхнем положении, чтобы они не перемещались в окне браузера при прокручивании остального содержимого страницы.
  2. Перейдите в режим «План» для просмотра миниатюр страниц. Обратите внимание, что все страницы теперь содержат три значка сайтов социальных сетей, потому что вы добавили их на страницу-шаблон.
  3. В режиме «План» дважды нажмите страницу «food», чтобы открыть ее в режиме «Дизайн». Или, если она уже открыта, нажмите вкладку страницы «food», чтобы сделать ее активной. Выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы просмотреть страницу в браузере.
  4. Выберите пункт меню «Dessert», чтобы перейти вниз к разделу меню «Dessert». Обратите внимание, что при прокручивании остальных элементов страницы три значка сайтов социальных сетей сохраняют свое положение с правой стороны страницы, поскольку они закреплены.
Закрепление объектов в окне браузера на сайтах Adobe Muse
Закрепление объектов в окне браузера

Перейдите к руководству Создание первого веб-сайта. Глава 6, в котором вы узнаете, как объединять наборы элементов в группу, чтобы работать с ними к с одним элементом. Мы также завершим создание страницы «Visit», добавив на нее встроенную карту Google, на которой посетители смогут посмотреть местонахождения кафе «Katie's Cafe». И завершив создание сайта, вы узнаете, как передать его на сервер хостинга (на платформе Business Catalyst) для публикации в Интернете и совместного доступа к незавершенному проекту со своими заказчиками и коллегами.

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

Мы рассмотрим процесс группирования объектов и поработаем с группами, чтобы научиться вставлять на страницы наборы содержимого. Также мы продолжим работу со встроенным HTML-элементом, и на этот раз добавим на страницу «Visit» интерактивную карту Google. И, наконец, внесем на сайт завершающие штрихи — добавим значок сайта и опубликуем пробную версию на предоставленных серверах хостинга.

Группирование объектов и размещение группы в виде одного элемента

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

  1. В режиме «План» дважды нажмите миниатюру домашней страницы, чтобы открыть ее в режиме «Дизайн».
  2. Выберите «Файл» > «Поместить». Найдите папку с образцами и выберите файл с именем «panel-open-bottom.png». Нажмите кнопку «Открыть», чтобы закрыть диалоговое окно «Импорт», и нажмите один раз в нижней части домашней страницы (ниже виджета «Композиция с лайтбоксом» и выше нижнего колонтитула), чтобы поместить изображение в полном размере.

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

  1. Выберите команду «Файл» > «Поместить» еще раз. На этот раз найдите и выберите файл изображения с именем «spoon-map.png». Нажмите кнопку «Открыть», а затем нажмите один раз на верхнем центральном лепестке, чтобы поместить изображение.
  2. Пока изображение ложки выделено, перетащите на лепесток справа от центра, удерживая нажатой клавишу Option (Mac) или Alt (Windows). Повторите операцию еще раз, чтобы дублировать центральное изображение ложки, и перетащите дублированную копию на лепесток слева. С помощью инструмента «Выделение» расположите три изображения ложки, как показано на следующем рисунке.
Размещение трех изображений ложки на трех верхних лепестках рисунка.
Размещение трех изображений ложки на трех верхних лепестках рисунка.

  1. С помощью инструмента «Текст» создайте текстовый фрейм на центральном лепестке и введите следующее:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

  1. На панели «Текст» установите следующие настройки для форматирования текста:
    • Шрифт: Droid Serif (или другой шрифт семейства serif)
    • Размер шрифта: 14
    • Цвет шрифта: #222222 (в части 5 он был переименован в «katieblack»)
    • Выравнивание шрифта: по центру
    • Интерлиньяж: 120%
  1. Затем выделите только нижние 2 строки и задайте красный цвет шрифта (#A6342A).
  2. Выделите текстовый фрейм с помощью инструмента «Выделение». Нажмите и удерживайте клавишу Option (Mac) или Alt (Windows), чтобы дублировать текстовый фрейм, и перетащите его на лепесток справа, выше изображения ложки. Повторите операцию еще раз, чтобы дублировать центральный текстовый фрейм, и перетащите дублированную копию на лепесток слева. С помощь инструмента «Выделение» расположите текстовые фреймы так, чтобы они находились над ложками (см. следующий рисунок).
Группирование объектов в Adobe Muse
Расположение адресов над изображениями ложек на трех верхних лепестках цветка.

  1. Переключитесь к инструменту «Текст». Выделите текст адреса слева и измените его следующим образом:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

  1. С помощью инструмента «Текст» выделите текст адреса справа и измените его следующим образом:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

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

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

Обратите внимание, что после группирования набора объектов в индикаторе выбора, расположенном в левом верхнем углу панели элементов управления, отобразится слово «Группа».

  1. Скопируйте выделенную группу. Вернитесь в режим «План» и дважды нажмите миниатюру страницы «Visit», чтобы открыть ее в режиме«Дизайн». Выберите команду «Редактировать» > «Вставить на то же место», чтобы поместить всю группу элементов в то же расположение.

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

Помимо группирования, после завершения проектирования полезными могут быть и функции блокировки. Нажмите правой кнопкой мыши группу или выделенный набор элементов и выберите в контекстном меню команду «Закрепить», чтобы заблокировать их. (Также можно выбрать «Объект» > «Закрепить»). Блокировка предотвращает случайное перемещение или удаление законченных элементов, делая их недоступными для выбора. Если в дальнейшем потребуется изменить заблокированные элементы, выберите команду «Объект» > «Разблокировка всех элементов на странице».

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

Встраивание мультимедийного содержимого для добавления анимации

  1. В режиме План дважды нажмите миниатюру страницы MasterFlash, чтобы открыть ее в режиме Дизайн. Обратите внимание, что после дублирования страницы «Шаблон-А», она по-прежнему содержит статичное изображение логотипа. Статичное изображение удобно использовать для точного размещения прямоугольника анимации, однако не забудьте удалить изображение статичного логотипа после встраивания элемента мультимедиа.

  2. Выберите меню Файл > Поместить. В диалоговом окне Импорт перейдите к папке Kevins_Koffee_Kart и выберите файл logo.swf.

  3. Поместите файл SWF в левый верхний угол, совместив его с существующим файлом изображения логотипа.

  4. Выровняв новое окно SWF со статическим изображением логотипа, удалите статический логотип, выделив его и нажав клавишу Delete.

  5. Чтобы проверить отображение сайта с внесенными на главную страницу изменениями, выберите Файл > Предварительный просмотр сайта в браузере и посмотрите, как отображается логотип на разных страницах. Вы можете работать локально на своем компьютере, а затем, не публикуя сайт, предварительно просмотреть его в браузере, переходя по его страницам. Обратите внимание, что анимация (файл SWF) на главной странице воспроизводится один раз и останавливается. При переходе на другую страницу отображается статичный логотип.

    Примечание.

    При выборе команды Файл > Предварительный просмотр страницы в браузере новое окно браузера с главной страницей загрузится быстрее, однако в нем будет отображаться только активная (главная) страница. Используйте этот параметр для проверки только одной страницы сайта, а не всего сайта полностью.

Использование панели пространства

Панель «Интервалы» позволяет применять каскадные таблицы стилей при настройке отступа, а также задавать свойства внутренних полей. Отступ определяет свободную область вокруг содержимого элемента (внутри его границ). Отступ зависит от цвета фона элемента.

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

  1. Для отображения панели «Интервалы» выберите Окно > Интервалы в Adobe Muse.
Откройте панель «Интервалы» в Adobe Muse
Откройте панель «Интервалы» в Adobe Muse

  1. Задайте значения свойств, определяющих отступ слева, справа, сверху и снизу. Если требуется ввести разные значения, отмените выбор кнопки .
Настройка параметров отступа и средника на панели «Интервалы».
Настройка параметров отступа и средника на панели «Интервалы».

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

Масштабирование и поворот объектов с помощью панели «Трансформирование»

В Adobe Muse возможно двумерное преобразование объектов. Поддерживаются операции перемещения, масштабирования и поворота объектов по осям X и Y.

Переключатель «Ширина 100%» на панели «Трансформирование» позволяет масштабировать объекты по ширине экрана. Можно также задавать размещение масштабируемых объектов по всей ширине окна браузера и по размерам экрана компьютера.

Для применения преобразований к выбранному объекту выполните следующие действия.

  1. В Adobe Muse выберите «Окно» > «Перспектива».
Откройте панель «Трансформирование» в Adobe Muse.
Откройте панель «Трансформирование» в Adobe Muse.

  1. Выбрав объект, примените одно из следующих преобразований.
    • Положение: введите значения X и Y, определяющие положение объекта на веб-странице.
    • Масштаб: введите значения ширины и высоты для объекта. Можно также выбрать пропорциональное масштабирование объекта по ширине и высоте, нажав кнопку .
    • Поворот (): введите угол поворота для объекта.
    • Ширина 100% (): можно задать для ширины объекта коэффициент масштабирования 100% и разрешить масштабирование по горизонтали, в том числе по ширине окна браузера.

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

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