Как создать динамический фон для сайта в Adobe Muse?
Это видео как раз о том, как создать динамический фон для сайта с помощью стандартного мини-приложения слайд-шоу программы Adobe Muse.
Вы научитесь добавлять картинки и фото, настраивать приложение, удалять ненужные атрибуты, устанавливать переходы между различными фонами и регулировать параметры анимации. Смотрите видеоурок:
Динамический фон для сайта. Об уроке.
В этом видеоуроке мы сделаем небольшую композицию и рассмотрим, как сделать так, что бы размещённые на сайте фотографии в виде фона сменяли одна другую и плавно переходили друг в друга. Как сделать, что бы фотографии менялись автоматически.
Заходим в программу Adobe Muse, у меня создан новый проект, без всяких настроек.
Динамический фон для сайта. Размещение виджета слайд-шоу.
Для того, что бы разместить картинки на сайте в виде фоновых изображений, мы будем использовать стандартные виджеты из библиотеки мини приложений программы Adobe Muse. Находятся они здесь – в библиотеке мини приложений,в программе, в разделе «Слайд шоу». Мы возьмём виджет «Полноэкранный режим».
Это мини приложение позволит разместить нам нашу картинку на весь экран и позволит настроить переходы между ними.
Я уменьшу масштаб, что бы вам видны были настройки этого виджета. Снова захожу в настройки виджета, нажимаю вот этот треугольничек, и мы видим, что рамка разместилась так, что видна сейчас на весь экран.
Динамический фон для сайта. Добавление изображений.
В данном виджете удалим все изображения, которые изображены в качестве примера. Нажмём правую клавишу мыши на данном виджете. Нажимаю «удалить содержимое виджетов». Далее захожу опять в этот же виджет и нажимаю «отменить все использованные стили». Удаляю ненужные мне элементы – это элементы счётчика и перехода стрелочек.
Таким образом мы получили только одно главное изображение, одна рамка размещена по всему периметру нашего сайта. Здесь я могу через настройки данного мини приложения добавить сюда изображение. Для того, что бы добавить изображение, я нажимаю на значок папки, у меня открывается окно Windows, где я могу выбрать свои изображения. Давайте я выберу несколько изображений фона – первые пять, и нажимаю «открыть». Вы видите, что автоматически у меня появились здесь изображения.
Динамический фон для сайта. Настройки виджета.
Я захожу в настройки данного виджета. Что мы здесь можем настроить? Во первых – это «автоматическое воспроизведение», оно уже стоит, и здесь вы можете настроить, через сколько секунд будет происходить переход от одной картинки к другой. Здесь вы так же можете установить скорость данного перехода. И «разрешить перелистывание», или перемешать картинки. Я отключаю «разрешить перелистывание», ставлю здесь переход «выцветание», это будет переход от картинки к картинке. Здесь вы можете установить каким образом будет происходить фрейм. Я оставляю «заполнить фрейм с сохранением пропорций». И здесь тоже оставляю «заполнить фрейм с сохранением пропорций». Всё остальное пускай остаётся по умолчанию.
Динамический фон для сайта. Просмотр и корректировка.
И, давайте зайдём в режим «просмотр», посмотрим, что у нас получилось. Мы видим, что ровно через 3,5 секунды у нас одно изображение меняется другим. Переход у нас составляет всего пол секунды.
Давайте зайдём снова в режим дизайн. Попробуем изменить значение перехода (скорость перехода) динамического фона сайта, поставим 1 секунду. Автоматическое воспроизведение поставим через 2 секунды. Снова идём в режим «Просмотр», и теперь видим, что наши изображения сменяются гораздо более плавно.
Динамический фон для сайта. Добавление текста.
Таким образом размещаем какие-либо элементы на своём сайте, например текст. Я написал здесь”Adobe Muse уроки”, сделаю этому тексту белый цвет, например, и большой какой-либо шрифт поставлю, например 60. Шрифт выберу PT Sans, Bold, например. Поставлю текст по центру, здесь у нас размещена какая-нибудь кнопка – наполню её заливкой, оранжевым цветом, например. Перейду и настрою ей закругление какое-нибудь (например 20 поставлю). И выровняю её немного по центру. Будем думать, что это у нас некая кнопка. Заходим снова в режим просмотра, и мы видим что фон у нас меняется, а текст и кнопка у нас остаются на данной странице.
Динамический фон для сайта. Добавление текста.
Таким образом вы сможете добавить любые фотографии в данный виджет, и эти фотографии постоянно у вас будут на весь экран. Вы можете настроить здесь автоматическое воспроизведение. Поставить больше здесь секунд, что бы не так часто у вас менялись картинки. И установить больше или меньше скорость перехода. Таким образом этот виджет позволяет очень гибко и очень быстро настроить размещение на сайте фоновых изображений, и настроить их смену.
На этом мы заканчиваем наш урок. На нем мы научились создавать фоновые изображения, и делать смену фоновых изображений, вот такой динамический фон для сайта.
Подписывайтесь на мой канал, ставьте лайки пишите комментарии к данному видео. До встречи на следующих видео уроках.
Автор видеоурока
Дмитрий Шаповалов