Создание графических блоков и редактирование

Создание графических блоков.

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

В этом уроке вы научитесь создавать и редактировать графические элементы в программе Adobe Muse.

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

Текст видеоурока:

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

Создание графических блоков. Режим План и миниатюры страниц

Перед нами план сайта, на котором 2 белых прямоугольника. Один из них – это значок-миниатюра нашей главной домашней страницы сайта, другой находится ниже в разделе “Шаблоны”. К шаблонам мы вернемся чуть позже в следующих уроках.

Режим План сайта - миниатюры

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

Создание графических блоков. Режим Дизайн и разметка сайта.

Что же мы видим? Белое поле размерами 1020×1080 пикс., разделенное синими линиями. Два белых поля по 100 пикс. слева и справа и центральное основное рабочее поле шириной 1020 пикс., состоящее из 12 столбцов по 85 пикс., как мы и задавали при настройке проекта.

Разметка сайта - столбцы и колонки

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

Создание графических блоков (прямоугольников).

Выбираем инструмент “Прямоугольник” на панели слева или нажимаем клавишу “M”. Зажимаем левую кнопку мышки на основном рабочем поле страницы и тянем до создания прямоугольника необходимых размеров. Отпускаем кнопку мышки.

Создание прямоугольникаСоздание прямоугольника

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

Создание графических блоков. Перемещение блоков

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

Привязка к направляющим

Создание графических блоков. Изменение размеров

Второе, что мы можем изменить, – это размеры блока. Сделать это можно несколькими способами: просто зажав левую кнопку мыши, потянуть за угол или середину стороны блока. Если при этом зажимать клавишу Shift или Alt, или их вместе, можно получить еще несколько различных вариантов изменения размеров:

  • относительно центра, если зажать Alt,
  • пропорционально, если зажать Shift,
  • относительно центра и пропорционально, если зажать обе клавиши вместе: Shift и Alt.

Изменение размеров графического блока

Создание графических блоков. Изменение размеров и поворот в панели Перспектива.

Второй способ заключается в том, что мы можем изменять размеры блока, задавая численные значения в панели “Перспектива” справа. Если у вас нет такой панели, войдите в меню, окно -> Перспектива или нажмите сочетание клавиш Shift+F8.

Панель Перспектива

Давайте зададим нашему блоку в этой панели размеры 300×300 пикс., предварительно отключив пропорциональное изменение размеров. Здесь же мы можем изменить расположение блока на странице, задав необходимые координаты x и y, а также указать угол, на который мы хотим повернуть блок. Повернуть блок мы можем так же просто, подведя курсор мышки к одному из углов блока. Курсор примет вид круговой стрелки и, зажав правую клавишу мыши, мы можем повернуть наш блок в любую сторону на любой угол.

Поворот графического блока

Создание графических блоков.  Заливка графического блока

Остальные параметры, которые мы можем изменять, находятся в верхней панели. Рассмотрим самые главные. Заливка. Программа предлагает несколько видов заливки блока.

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

Сплошная заливка

Градиентная заливка. Предлагается выбрать 2 цвета, установить для каждого прозрачность, скорректировать фокус градиента, выбрать направление: вертикальное или горизонтальное и установить размер самого перехода от цвета к цвету: автоматически или свое значение.

Градиентная заливка

Так же здесь есть еще параметр “Прокрутка”. Этот параметр нужен для анимации блока на странице. По анимации у нас с вами будет отдельный урок.

 

Создание графических блоков. Обводка блока

Обводка. В обводке доступны 2 основных параметра: цвет и толщина. Давайте зададим нашему блоку цвет обводки синий и укажем толщину линии 16. Доступны так же дополнительные параметры для обводки, если нажать прямо на слово “Обводка”: выравнивание по центру, внутренние или внешние границы, плюс толщина обводки каждой из сторон блока в отдельности.

Обводка блока

Создание графических блоков. Скругление углов блока

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

Скругление углов блока

Создание графических блоков. Эффекты, гиперссылки, футер, фиксация.

Следующий параметр – это “Эффекты”. Здесь у нас доступны тень, скос и свечение. Про эффекты более детально мы поговорим в следующих уроках.

Эффекты

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

Гиперссылки

 

Параметр “Нижний колонтитул” (футер). Этот параметр определяет возможность размещения данного блока в нижнем колонтитуле сайта, если галочка стоит или, наоборот, если галочки нет.

Нижний колонтитулНижний колонтитул

Следующий параметр – фиксация. Мы можем зафиксировать положение блока на странице. Тогда он не будет перемещаться при скроллинге.

фиксация

Создание графических блоков. Прозрачность блока и заливки

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

Непрозрачность

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

 

Автор видеоуроков Adobe Muse –
Дмитрий Шаповалов.

Оставьте комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: