В данном видео я расскажу вам про адаптивность, которая появилась в Adobe Muse 2015.1. Также вы узнаете о некоторых новых функциях, которые появились в данной программе.

Что вы узнаете в данном видео:

— Функция изменения размеров элементов;

— Функция закрепления элементов;

— Подробная информация о точках остановки в Adobe Muse;

— Какие размеры необходимо использовать точках остановки? Почему я выбираю именно такие размеры?

— Адаптивная сетка (эксплозивная информация);

— Как адаптировать элементы из старых проектов в новой адаптивной версии Adobe Muse 2015.1;

— Как адаптировать и трансформировать элементы под мобильные устройства.

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

Получите бесплатный комплект для Adobe Muse здесь

____________________________

Текстовая версия.

Привет, меня зовут Владимир Чернышов, и в данном видео я расскажу вам про адаптивность, которая появилась в Adobe Muse 2015.1, также вы узнаете о некоторых новых функциях, которые появились в этой программе.

О чем сегодня пойдет речь:

— об изменении размеров элементов;

— о функции закрепления;

— я подробно расскажу о точках остановки и о том какие размеры необходимо использовать;

— о том какие размеры я использую в точках остановки и почему выбираю именно такие размеры;

— расскажу про адаптивную сетку (экслюзив);

—  покажу как переносить элементы из ваших старых проектов в новую версию Adobe Muse;

— как трансформировать и адаптировать эти элементы под мобильные устройства.

1. Функция закрепления элементов в адаптивном Adobe Muse.

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Функция закрепления элементов

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

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Нажимаем вкладку «Окно» и выбираем пункт «Перспектива»

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

 

а) Элемент не закреплен.
Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

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

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

 

б) Элемент закреплен по центру.
Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Если при выделении объектов поставить точку посередине, то они будут закреплены по центру, относительно ширина браузера

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

 

в) Закрепление объекта слева.
Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

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

Если выбрать любой элемент и поставить точку слева, то появляется  пунктирная линия — это расстояние до границы браузера. Оно никогда не будет меньше с левой стороны при сужении браузера. Как это выглядит в браузере? Когда вы уменьшите ширину браузера, то появляется  расстояние слева, это расстояние равно длине пунктирной линии (которая видна только в программе Adobe Muse).

 

г) Закрепление объекта справа.
Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

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

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

 

2. Изменение размеров элементов при сужении браузера.

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

 

а) Без изменения размера.

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Если напротив надписи «Изменить размер», стоит значение «Нет», то при сужении браузера элемент не будет изменять свой размер.

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

 

б) Гибкое значение ширины текста и блоков.
Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Если применить к элементу «Гибкое значение ширины», то его ширина будет изменяться при изменении ширины браузера.

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

 

в) Гибкое значение ширины и высоты. 
Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Гибкое значение ширины и высоты, можно применять к элементам, которые вставлены из вне. Например картинкам.

Функцию «Гибкое значение ширины и высоты» можно применять к объектом, которые вы вставляете из вне. Это могут быть изображения или векторная графика (например из Adobe Illustrator). Чтобы трансформировать элементы, нужно выделить элемент и выбрать «Гибкое значение ширины и высоты», напротив надписи «Изменить размер». В браузере все будет выглядеть следующем образом. При сужении границ браузера ширина и высота вставленной картинки будет уменьшаться.

 

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

Функция «Растянуть по ширине браузера», позволяет растягивать элементы на всю ширину.

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

 

3. Точки оставновки в Adobe Muse.

Следующая функция о которой вам важно знать называется «Точки остановки», благодаря этим точкам вы можете перестраивать контент на вашем сайте. Например при сужении границы браузера до ширины 980 px, элементы могут быть расположены по другому, нежели при ширине 1185 px.

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

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

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

 

Какого размера создавать точки остановки?
Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

4 точки остановки. 1185 px (10 колонок), 980 px (8 колонок), 768 px (5 колонок), 480 px (6 колонок)

Для того, чтобы создать точки остановки, вам сначала нужно понять какого размера они должны быть. Как это определил я? Передо мной стояла задача перенести старые элементы, которые я создавал до этого программе Adobe Muse. Я использовал ширину 960 пикселей и сетку из 12 колонок со средником 20 пикселей, также были небольшие расстояния с левой и с правой стороны. Если взять обычный прямоугольник и померить рабочую область, то она была 916 пикселей. Я поставил перед собой задачу сделать так, чтобы старые элементы, которые у меня уже есть трансформировать и адаптировать под мобильные устройства (то есть перенести в новую версию данной программы).

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

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

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

Для того чтобы создать новую точку остановки, необходимо создать новый сайт. Я покажу вам на реальном примере, как я создаю специальную сетку с которой работаю. В дальнейшем я адаптирую по данной сетке старые элементы. Чтобы создать новый сайт необходимо нажать наверху «Файл», затем выбрать пункт «Создать новый сайт». Когда появляется окно приветствия, я ставлю максимальную ширину страницы — 1185 пикселей, количество столбцов — 10. После этого можно изменить ширину средника, я ставлю значение «0».

Я использую 4 точки остановки — это 1185 пикселей с 10 колонками, 980 пикселей с 8 колонками, 768 пикселей с 5 колонками и 480 пикселей с 6 колонками. Почему я использую именно такие размеры? Скоро узнаете.

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

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

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

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

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

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

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Для изменения свойств, выберите пункт «Свойства точки остановки»

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

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Можно включить «Свойства точки остановки» нажав на правую клавишу мыши и выбрав этот пункт. Появится вот такое окно.

После этого ставлю 8 столбцов. В этой точке остановки, я делаю все так, как на рисунке выше. Позже объясню почему.

Следующая точка остановки будет 768 пикселей и количество столбцов будет — 5.  Аналогичным образом добавляю точку остановки для  480 пикселей с 6 колонками.

Адаптивная сетка.
Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

В точке остановки сетка меньше 980 px. Там необходимо размещать все элементы сайта.

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

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

В точке остановки 980 px, сетка устроена так, что контент всегда меньше, чем 768 px.

Аналогичным образом дела обстоят в следующей точке остановки. Данная сетка также меньше, чем следующая точка остановки. Я думаю то что вы поняли мою логику, почему я сделал именно так. Почему я выбрал именно такие размеры точек остановки? Все просто. Потому, что они подходят для мобильных устройств.

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Конечная точка остановки 480 px.

В конце необходимо делать ширину, которая будет меньше 320 пикселей, потому что большинство мобильных устройств именно 320 пикселей и Muse нам предлагает именно такую ширину. То есть расстояние на картинке должно быть меньше 320 пикселей. Я думаю то что вы поняли почему я сделал именно такую сетку.

 

Адаптация элементов из старых проектов Adobe Muse.

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Элементы сайта из моих старых проектов подходят для новой сетки.

Как адаптировать старые сайты? Если я скопирую элементы из своих прошлых проектов (например отзыв), то он подойдет к той сетке, которую я до этого создал.

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

В точке остановки 980 px необходимо перестроить все, чтобы отзыв помещался в границы сетки.

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

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Пиктограмма форматирования текста в текущей точке остановки.

Чтобы уменьшить размер текста в одной точке остановки необходимо выбрать пиктограмму, которая показана на рисунке выше. Здесь написано — «Форматировать текст в текущей точке остановки». Если мы выбираем ее и уменьшим текст до 18 px, то размер этого текста не будет изменен в других точках остановки. Если выбрать следующую пиктограмму (где много букв т) и будем трансформировать текст, то он будет отформатирован в других точках остановки. Это касается цвета и размера этого текста.

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

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

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

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

Можно подвинуть фото наверх и все перестроить.

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

 

Адаптивность в Adobe Muse. Новые функции, адаптивная сетка и точки остановки.

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

Для того, чтобы переместить элементы, которые у меня находятся в точке остановки 758 пикселей, я нажимаю правую клавишу мыши и копирую размер и расположение в точку остановки 480 пикселей. Затем перехожу в последнюю точку остановки (480 px) и перестраиваю контент, как показано на рисунке выше. Текст имеет гибкое значение ширины, а плашка растянута на всю ширину браузера.

Чтобы все было более понятно и наглядно, смотрите видео урок, который расположен наверху этой страницы. Успешных проектов!