Работа с объектами в Adobe Muse

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

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

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

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

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

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

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

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

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

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

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

Оптимизация изображений в приложении 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 может привести к истечению времени ожидания при изменении размера или оптимизации всех файлов во время экспорта или публикации. Могут возникать ошибки времени ожидания.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

6. На панели «Текст» установите следующие настройки для форматирования текста:
   • Шрифт: Droid Serif (или другой шрифт семейства serif)
   • Размер шрифта: 14
   • Цвет шрифта: #222222 (в части 5 он был переименован в «katieblack»)
   • Выравнивание шрифта: по центру
   • Интерлиньяж: 120%

7. Затем выделите только нижние 2 строки и задайте красный цвет шрифта (#A6342A).
8. Выделите текстовый фрейм с помощью инструмента «Выделение». Нажмите и удерживайте клавишу Option (Mac) или Alt (Windows), чтобы дублировать текстовый фрейм, и перетащите его на лепесток справа, выше изображения ложки. Повторите операцию еще раз, чтобы дублировать центральный текстовый фрейм, и перетащите дублированную копию на лепесток слева. С помощь инструмента «Выделение» расположите текстовые фреймы так, чтобы они находились над ложками (см. следующий рисунок).

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

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

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

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. В Adobe Muse выберите «Окно» > «Перспектива».

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