Перейти к содержимому
  • Блок 3.2 - Работа с объектами

    Что такое объект на сайте? Как используя объекты создавать шедевры. Вы узнаете от простого к сложному, все про эти "кирпичи" сайта.

    8 занятий в этой категории

    1. Работа с прямоугольником

      20 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567e8d805fa8b_3.3.1.mp4.a54a7b8fba187d8476565a17143d6ed0.mp4 4 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      В этом уроке мы рассмотрим работу с инструментом "Прямоугольник". Открываем программу Adobe Muse. У меня уже открыт новый проект сайта. Я нахожусь в режиме "Дизайн". Для того, чтобы создать прямоугольник, вам необходимо выбрать левой кнопкой мыши в панели "Инструменты" инструмент "Прямоугольник", либо нажать на клавиатуре горячую клавишу M. Я нажимаю сюда левой кнопкой мыши, и мой курсор превращается в перекрестие. Для того, чтобы создать прямоугольник, я нажимаю левой кнопкой мыши в области контента страницы и тяну его до нужных размеров. Отпускаю левую кнопку мыши, и прямоугольник создан. 

      Какие основные операции мы можем производить с данным прямоугольником? Давайте выберем инструмент "Выделение", он имеет вид стрелочки. Либо вы нажимаете на клавиатуре горячую клавишу V. Давайте рассмотрим, как можно изменить основные размеры прямоугольника. Мы можем просто потащить левой кнопкой мыши за один из его краев, и размеры прямоугольника при этом будут изменяться. Также мы можем потянуть левой кнопкой мыши за одну из его сторон. При этом прямоугольник будет изменяться только в одном направлении: горизонтальном или вертикальном.

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

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

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

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

      На этом данный урок закончен. Мы познакомились с инструментом "Прямоугольник" в программе Adobe Muse. Вам нужно будет выполнить задание и ответить на вопросы для того, чтобы перейти к следующему уроку.

      • 0 комментариев
      • 695 просмотров
    2. Дизайн прямоугольников

      21 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567e8e49bc315_3.3.2(..).mp4.7c06971241ccac1efcaf1b7ffe5a8d9d.mp4 6 До 10 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом видео мы рассмотрим основные настройки прямоугольников в программе Adobe Muse. Для начала давайте создадим один прямоугольник: выбираем инструмент "Прямоугольник", зажимаем левую кнопку мыши, тянем и отпускаем. Прямоугольник создан.

      Первое, что мы рассмотрим - это инструмент "Заливка". Мы можем осуществить заливку, нажав на стрелочку с квадратиком рядом с инструментом "Заливка" и выбрать один из цветов. Вы можете выбирать любой цвет. Я выбрал зеленый. Также мы можем осуществить заливку прямоугольника, нажав на надпись "Заливка", рядом с прямоугольником. Здесь нам открывается немного больше настроек. Цвет мы также можем выбрать в этом прямоугольнике, поменять его на другой, поставить непрозрачность. И через данный синий прямоугольник у нас начинает просвечиваться задний белый фон. Также можно выбрать, какая у нас будет заливка. Сейчас стоит заливка "Сплошная". Весь прямоугольник залит одним цветом. Если мы выберем "Градиентную заливку", то появляется доп.опция выбора еще одного цвета и опция для его непрозрачности. Сейчас стоит черный и синий цвет. Мы видим, как плавно изменяется заливка прямоугольника от черного к синему цвету. Мы также можем выбрать направление градиентной  заливки, поставить, например, по вертикали. Тогда изменение цвета будет происходить по вертикальной линии. Также мы можем выбрать размер градиентной заливки. Если выбрать "Автоматическая", то заливка будет распределяться фиксировано и равномерно. Если мы поставим "Фиксированную заливку", то мы можем выбирать, на какой длине будет изменяться наша заливка. 2 пикселя  - это минимальное значение, поскольку у нас как минимум 2 цвета. Максимальное значение фиксированной заливки  - 5000 пикселей. При функции "Сплошная заливка" нам также доступна функция выбора изображения для прямоугольника. Мы нажимаем "Добавить изображение", при этом открывается доп. диалоговое окно, в котором нам необходимо выбрать изображение на компьютере. Нажимаем "Открыть", и теперь наш прямоугольник залит изображением. При этом цвет заливки прямоугольника остается. То есть, если наше изображение будет меньше, чем данный прямоугольник, то мы увидим, что цвет заливки прямоугольника заполняет все остальное пространство, которое не занято заливкой картинки.

      Также мы можем подогнать наше изображение, которое мы выбрали в качестве заливки данного прямоугольника, с помощью функции "Подгонка". Сейчас у нас стоит исходный размер. Мы видим исходный размер изображения, которое мы выбрали, в реальную величину. Мы также можем выбрать "Заполнение", тогда наше изображение растянется на весь прямоугольник. Можем выбрать "По размеру", также "Мозаикой" - тогда изображение будет дублироваться по вертикали и по горизонтали. Либо отдельно по горизонтали будет дублироваться изображение, либо только по вертикали. Я сейчас поставлю исходный размер, и дополнительно здесь есть функция "Положение". Положение позволяет нам размещать изображение внутри прямоугольника с привязкой к одной из его сторон или углов. Либо выставить привязку по центру. Тогда наше изображение разместится ровно по центру данного прямоугольника. На этом с функцией заливки всё.

      Далее функция "Обводка". Она позволяет добавить линию по периметру прямоугольника. Давайте добавим обводку черным цветом и выставим значение, например, в 10 пикселей. Теперь, как вы видите, у нашего прямоугольника по периметру появилась черная линия толщиной в 10 пикселей. Если мы будем увеличивать данную линию, то мы получим эффект рамки. Причем, как вы видите, линия обводки одинаково расширяется от центральной линии. Если мы зайдем в параметр обводки через нажатие на слово Обводка, то здесь мы увидим еще несколько дополнительных опций: опция "Выравнять" как раз и помогает нам уставновить,  от какой линии и в какую сторону будет строиться ширина линии обводки. Сейчас она строится равномерно от центра внутрь и наружу прямоугольника, то есть по центру обводки. Мы можем выставить значение "По внутренней границе", тогда обводка будет строиться внутрь. Либо "По внешней границе", тогда обводка строится по внешней границе. Мы можем выбрать толщину обводки отдельно для каждой стороны прямоугольника.Для этого нам достаточно взять установленный значок, нажимаем на него, он меняется на разомкнутый значок. Теперь мы можем менять тилщину обводки для каждой стороны. На этом с обводкой всё.

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

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

      • 0 комментариев
      • 536 просмотров
    3. Группировка элементов на сайте

      22 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567e8f59c59db_3.3.3.mp4.acfe564db0fae2f8facfc266f5d59f3b.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом видео-уроке мы поговорим о группировке объектов в программе Adobe Muse. Зайдите в программу, создайте новый сайт. Переключите вид в режим "Дизайн" двойным кликом на миниатюре страницы и поместите на страницу несколько различных объектов, например, прямоугольник с заливкой и картинки. Я размещу на странице 1 картинку с помощью "Файл" - "Поместит" и создам также 2 прямоугольника. Один прямоугольник я выделил и закрашу его синим цветом, а второй прямоугольник выделю и закрашу оранжевым. Итак, у нас есть картинка логотипа и два прямоугольника, закрашенных различными цветами. Сейчас это все отдельные объекты, когда мы кликаем левой кнопкой мыши на каждый из них, то вокруг них появляется выделение. Для того, чтобы сгруппировать этим объекты, нам необходимо выделить их все. Зажимаю левую кнопку мыши, тяну, появляется закрашенная рамка, отпускаю левую кнопку мыши, когда все объекты выделены. Сейчас выделены 3 объекта. Для их группировки мы нажимаем правой кнопкой мыши на одном из объектов и выбираем "Группировать".

      Сейчас я покажу еще один способ. Заходим в "Объект" - "Сгруппировать". Объекты перед группировкой обязательно должны быть выделены. Сгруппированные объекты выступают как один объект, которые можно переместить, удалить, скопировать, дублировать, уменьшить, увеличить и т.д. Над ним вы можете совершать большинство тех действий, котрые вы совершаете над отдельными элементами. Мы также можем поменять цвет сгруппированных объектов. Для этого достаточно выделить группу одним кликом мыши и выбрать другой цвет в параметрах "Заливка". Сейчас мы видим,что в нашей группе есть объекты с различной заливкой, поэтому параметр "Заливка" отображается знаком вопроса. Если мы сейчас выберем какой-либо один цвет, например, зеленый, то все объекты данной группы окрасятся в зеленый цвет. Для того, чтобы редактировать свойства отдельного объекта, необходимо кликнуть на него 2 раза левой кнопкой. Объект выделится, и мы сможем изменять его свойства отдельно от группы. Давайте снова поменяем ему цвет. Группа при этом остается группой. То есть если мы сейчас снимем выделение, нажав на пустом поле, и снова нажмем однажды на одном из этих объектов, то увидим, что опять выделилась вся группа объектов. Если мы хотим разгруппировать объекты,то вызываем контекстное меню правой кнопкой мыши и выбираем "Разгруппировать". При этом группа выделена.

      Другим способом мы также можем зайти в меню - одним кликом мышки. Давайте я снова создам из них группу и, зажав клавишу Alt , дублирую всю группу сразу. Тяну левой кнопкой мыши, зажав клавишу Alt. Таким образом мы дублируем всю группу сразу. Давайте поменяем у второй группы заливку блоков на синий и уменьшим масштаб. Теперь вы видите, что у нас есть 2 группы объектов с различными параметрами. Вторую группу я разгруппирую. Нажимаю правую кнопку мыши на группе и нажимаю "Разгруппировать". Вторая группа объектов уже не группа, а отдельные объекты.

      В первом случае для того, чтобы быстро выделить сразу 3 объекта, нам достаточно выделить 1 из них. Во втором случае нам придется каждый раз выделять эти объекты, если мы хотим выделить их все вместе, либо выделением левой кнопкой мыши, либо выделяя каждый из них, удерживая Shift. Согласитесь, что в первом случае гораздо быстро и удобно выделаит все объекты сразу. Таким образом, если вы создали в программе некую композицию из объектов с неким завершенным смыслом, например, это может быть меню сайта или некая дизайнерская композиция,то объединяйте эти объекты в группе. В дальнейшем это намного упростит и ускорит Вам работу над проектом.

      На этом данный урок закончен. выполните задание, пишите ответы на вопросы и переходите к следующему уроку.

      • 0 комментариев
      • 731 просмотр
    4. Инструмент выравнивания элементов

      23 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_02/3.3.4_Vyiravnivaneie_obektov.mp4.6bf487c7679d9d77b98b676b357a5c47.mp4 10 До 10 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом видео вы узнаете о выравнивании объектов на странице с помощью панели "Выравнивание" в программе Adobe Muse. Панель "Выравнивание" позволяет нам выравнять несколько элементов страницы сайта относительно друг друга или относительно области содержимого. Заходим в программу, открываем новый сайт, заходим в режим "Дизайн". Для того, чтобы открыть панель "Выравнивание", вам необходимо выбрать окно "Выравнивание". Сбоку у нас появляется дополнительная закладка, и сразу открывается панель "Выравнивание". Если панель "Выравнивание" у нас открыта, то в меню "Окно" напротив параметра "Выравнивание" стоит флажок, то это означает, что панель в данном случае активна. Рассмотрим небольшой пример. Сейчас я создам несколько объектов. У нас есть 3 объекта, я вставил картинку логотипа и 2 графических блока, закрашенных разными цветами. 

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

      Точно также мы можем выравнивать два и более объекта. Допустим, сейчас наши объекты расположены хаотично на странице, и нам необходимо выравнять их по левому краю. Мы просто выделяем эти три объекта, зажав Shift, и нажимаем одну из кнопок выравнивания, например, "Выравнять по левому краю". Если мы нажимаем по центру, то наши объекты выравниваются по центру по области содержимого. То есть, они находятся в центре данной страницы. Если мы нажимаем "Выравнять по правому краю", то объекты прилипают к правому краю страницы. Далее давайте разместим их по центру и попробуем выравнять объекты по верхнему краю. Если мы сейчас нажмем данную кнопку при выделении всех объектов, то все они прилипнут к верхнему краю, учитывая отступ. И все они расположены как стопка объектов. Нам, конечно же, это не нужно, и мы их снова разделим. Давайте расположим их немного криво. Если мы выделим сразу три объекта и нажмем на эту кнопку, то все они снова собьются в стопку. Давайте снова их выделим и нажмем по нижнему краю. Теперь вся стопка прилипла по нижнему краю, и снова придется все объекты растаскивать. При использовании функции"Выравнивание" важно то, что вы выбрали в меню.

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

      Давайте выравняем наши объекты по центру. Немного их раскидаем, выделим все объекты и выберем "Выравнять по ключевому объекту". Ключевой объект закрашивается жирной линией. Мы можем менять ключевой объект, нажав левую кнопку мыши. Давайте ключевым объектом сделаем логотип, и теперь стала доступна функция "Интервалы". Мы можем задать пиксели между распределяемыми объектами. Объекты будут распределяться относительно ключевого объекта. Если мы выберем и нажмем на кнопку "Распределить с равными интервалами по вертикали", то объекты распределились именно так. В данном случае стоит 0 пикселей и объекты прилипают друг к другу. Если мы нажмем с равными интервалами по горизонтали, то увидим то же самое. Если мы выставим какое-то значение, например, 30 пикселей, и нажмем на те же самые кнопки, то в первом случае наши объекты распределятся с равными интервалами по вертикали, и интервалы будут равны 30 пикселей. Если же мы нажмем при выделенных объектах "Выравнять по ключевому объекту", выберем логотип и нажмем "Распределить с равными интервалами по горизонтали", то наши объекты распределятся с равными интервалами по горизонтали, и эти интервалы в данном случае будут тоже по 30 пикселей.

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

      • 0 комментариев
      • 746 просмотров
    5. Эффекты прямоугольников

      24 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567e916c1074d_3.3.5.mp4.a407b4ae0e56b276721d1e01becef99c.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В данном уроке мы рассмотрим эффекты, которые мы можем применять к прямоугольникам в программе Adobe Muse. Заходим в программу, создаем новый сайт, заходим в режим "Дизайн" и создаем прямоугольник. Сделаем ему заливку, выбираем инструмент "Выделения" или нажимаем горячую клавишу V. Далее выбираем прямоугольник и заходим в параметр "Эффекты". В данной закладке у нас есть три параметра для прямоугольника: тень, скос, свечение. Давайте разберем их отдельно подробнее.

      Выбираем эффект "Тень", ставим флажок напротив надписи "Тень", и нам становятся доступны некоторые параметры. Мы можем выбрать цвет тени, непрозрачность, размытие, угол, на который будет смещаться тень, величину смещения в пикселях. Сейчас вы уже видите,что прямоугольнику применился данный эффект, и уже есть некоторые настройки. Мы видим небольшую тень вдоль краев прямоугольника. Цвет тени стоит черный, непрозрачность 50%. Мы можем изменить непрозрачность до 100%, и тогда тень будет абсолютно черной. Размытие тени стоит 8 пикселей, то есть это величина плавного перехода между тенью и основным фоном. Угол смещения мы можем выставить, например, 180 градусов, и тогда тень сместится в другую сторону. То есть здесь мы меняем позицию источника света. Ставим снова 45 градусов, возвращаем тень на место. Мы можем указать величину смещения. Чем больше величина смещения, тем дальше наша тень уходит от прямоугольника, позволяя создать эффект того,что прямоугольник будет подниматься над плоскостью страницы. Давайте поставим 10 пикселей, поставим больше размытие и поставим непрозрачность 80 %. Мы можем как двигать ползунок, так и задавать значение вручную. И можем поменять, например, цвет тени на синий. Далее отключаем эффект "Тень" и переходим к эффекту "Скос".

      Ставим флажок напротив надписи "Скос", и нам становятся доступны его параметры. Параметры скоса: непрозрачность, размытие, угол, смещение скоса. Мы можем изменять также это значение вручную, двигая ползунок мышкой, либо задавать здесь значение на клавиатуре. Например, 50. Давайте увеличим смещение скоса, например, поставим 20 пикселей. Этот скос позволяет нам создать объемную фаску вокруг прямоугольника. Также можем задавать размытие, если поставим 0, то у нас будут очень четкие линии. Если увеличим эту величину, то наша фаска становится более сглаженной. И можем менять угол фаски. Таким образом мы можем создавать некий эффект объема в программе Adobe Muse для прямоугольника. Давайте перейдем дальше.

      Эффект "Свечение". Ставим флажок напротив надписи "Свечение", и нам становятся доступны параметры свечения. Давайте сразу выберем цвет свечения, например, фиолетовый, непрозрачность будет 50 %, размытие увеличим до 25 пикселей. Сейчас наш прямоугольник подсвечивается снизу ореолом с выбранным цветом. Если мы поставим флажок "Внутреннее свечение", то этот ореол переместится внутрь прямоугольника. Мы получим эффект виньетки. Убираем эффект "Свечение". Также как и для всех остальных элементов в программе вы можете регулировать для прямоугольника эффект "Прозрачности". Двигая ползунок в меньшую или большую сторону, вы можете регулировать этот параметр.
      На этом данный урок закончен. Мы рассмотрели основные эффекты, которые мы можем применить к прямоугольнику. Вам будет необходимо ответить на вопросы и выполнить задание, чтобы перейти к следующему уроку.

      • 0 комментариев
      • 584 просмотра
    6. Стили графики и их применение

      25 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567e91f58e65b_3.3.6.mp4.4724252997afe6aa13b4c3fc4ef33caf.mp4 7 До 10 минут Скрыть https://creatura.club/uploads/ Высокая сложность Скрыть

      В этом видео-уроке мы рассмотрим то, как создавать и использовать "Стили графики" в программе Adobe Muse. Для ускорения и упрощения работы в программе разработчики этой программы сделали так, чтобы можно было создавать "Стили графики". Что это такое? Для того, чтобы зайти в стили графики идем в Окно и выбираем "Стили графики". У нас появляется сбоку закладка, здесь есть еще и другие стили. Но мы рассмотрим "Стили графики" и как с ними работать.

      "Стили графики" позволяют нам быстро изменять внешний вид объекта одним кликом мышки. Двайте рассмотрим все это на примере. У меня есть три графических объекта - это три картинки. Давайте я выберу самый первый и изменю в нем, например, эффект "Тени" с параметрами: размытие 14, непрозрачность 80%. Также к этому логотипу добавим эффект "Скругление" в 30 пикселей и добавим обводку желтого цвета 5 пикселей. Без использования стилей графики для создания такого же, как и первый логотип, нужно выделить логотип, зайти в "Эффекты", поставить эффект "Тени", вспомнить,  какие значения применялись к первому логотипу. Например, сейчас уже не совсем помню эти значения. Но поставим 80, размытие 15, ставим скругление. Чтобы этот процесс автоматизировать, в программе есть "Стили графики". Выделяем первый наш объект, который мы уже отредактировали, и нажимаем маленький значок "Создать новый стиль на основе примененных атрибутов".  Автоматически у нас появляется запись "Стиль". При наведении мыши на данную запись мы видим, что радиус скругления 30, фоновый цвет - нет, толщина границ 5, тени включена, непрозрачность 8, размытие 14, цвет границ и выравнивание обводки снаружи. То есть этот стиль содержит все те изменения, которые  мы производили с первым логотипом. Нажимаем двойным кликом на него и можем изменить здесь имя, например,"Логотип". Также у нас видны все настройки стиля внутри данных параметров стиля графики. Я назвал стиль "Логотип", нажимаем "Ок", и у нас изменился список "Стили графики". Далее выделяем другой логотип, например, последний, и применим тот же самый стиль, который применен к первому логотипу. Выделяем последний и выбираем стиль графики "Логотип". Вы видите, как автоматически все настройки первого логотипа применились к настройкам третьего. То же самое можем сделать и со вторым. Выбираем его левой кнопкой мыши и выбираем "Логотип". Теперь все три картинки имеют одинаковые параметры, характеристики и эффекты.

      Далее с помощью стилей графики можно изменить оформление всех логотипов, которые размещены на сайте. Допустим 2 логотипа размещены на других страницах, а страниц очень много, не помню, где они расположены. Нам нужно изменить все эти логотипы. Например, я хочу, чтобы мои логотипы имели обводку зеленого цвета и были без скруглений краев. Также хочу убрать эффект "Тени" и поставить эффект "Свечение", сделать его черным. Выставим размытие, например, 16 пикселей. То есть в какой-то момент я решил, что логотип должен выглядеть именно так. Другие логотипы выглядят в старом стиле. А напротив надписи "Логотип" в стилях графики появился значок +. Это означает, что стиль изменился. Теперь для того, чтобы нам быстро изменить все стили логотипов при выделенном основном логотипе, на котором мы только что делали изменения, мы нажимаем на значок "Переопределить выбранный стиль на основе примененных атрибутов". Нажимаем на данный значок, и вы видите, что все логотипы автоматически изменили свой внешний вид. Таким образом вы можете автоматизировать свою работу в программе и значительно ускорить процесс верстки сайта, а также быстро осуществить изменения при необходимости изменить дизайн сайта и изменить стиль. Для того, чтобы отменить данный стиль мы выбираем данный объект и нажимаем "Выбор стиля графики"  - нет. Мы видим, что все стили графики отменились, и картинка выглядит как в начале. давайте снова применим стиль к данной картинке.

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

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

      • 0 комментариев
      • 765 просмотров
    7. Настройки растягивания объектов

      26 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567e9319705ca_3.3.7.mp4.b84e9e2054a08be07a1b7eed290fe924.mp4 3 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом уроке мы рассмотрим тему настройки растягивания объектов. У многих часто при работе в программе возникает вопрос: "Как сделать так, чтобы картинка, которая расположена в проекте, растягивалась во всю ширину окна браузере, независимо от того, какая ширина экрана установлена?" Для этого в программе Muse есть специальные настройки.

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

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

      Где же находится эта настройка в программе Adobe Muse ? Настройка растягивания объектов во всю ширину страницы браузера находится в панели "Перспектива". Здесь, изменяя размер, мы можем изменять свойства нашего объекта. Например, если мы сейчас изменим размер нашего объекта, то значок изменится на "замок". Но если мы снова захотим выставить функцию растягивания объекта во всю ширину страницы браузера, то мы выбираем "Растянуть по ширине браузера". И наш прямоугольник снова растянулся во всю ширину области содержимого программы. То же самое, что мы делали недавно вручную. Мы можем менять эти свойства прямоугольника, используя данную функцию. 

      На этом данный урок закончен. Выполните задание к уроку и переходите дальше.

      • 5 комментариев
      • 690 просмотров
    8. Закрепление объектов

      27 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567e939835ad5_3.3.8.mp4.3b782fd52b6942438a15aba3ff6a3fce.mp4 4 До 5 минут Скрыть https://creatura.club/uploads/ Высокая сложность Скрыть

      В данном уроке мы рассмотрим тему закрепления объектов в программе Adobe Muse  В данной программе вы можете создать объект, который при прокручивании страницы всегда будет сохранять свое положение в окне браузера, то есть он не будет прокручиваться вместе с остальным содержимым страницы. Допустим, у нас на странице есть несколько графических блоков, файлов (логотип DigitalMakers.ru), несколько графических блоков, и мы хотим, чтобы наш логотип, например, не прокручивался со всеми остальными блоками на странице. Мы выделяем данный объект, заходим в панель "Перспектива "и здесь видим функцию "Закрепить в браузере". Нажимаем на одном из этих квадратов, и он закрашивается белым цветом, это значит, что наш объект закрепился от верхней и левой границы на определенном расстоянии. Давайте посмотрим, как это будет выглядеть в браузере. Заходим в меню "Файл" - "Предварительный просмотр страницы в браузере". Вы видите, что наш логотип размещен именно на таком расстоянии от краев браузера и при прокрутке страницы остается на своем месте.

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

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

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

      • 11 комментариев
      • 846 просмотров
×