Как создать кнопку Adobe Muse

Как создать кнопку в Adobe Muse

Как создать кнопку в Adobe Muse

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

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

В сегодняшнем видеоуроке я расскажу вам, как создать кнопку в программе Adobe Muse.

Как создать кнопку. Начало.

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

Создание кнопки. Захожу в Режим дизайна, выставлю значение 75%, чтобы мое рабочее поле влезало в экран, и давайте создадим кнопку. Кнопку создавать будем на базе текстового блока. Это мы уже умеем делать. Выбираем инструмент «Текст», зажимаем правую кнопку мыши, тянем до нужных размеров. Давайте создадим большую кнопку, чтобы вам было хорошо видно.

Текст кнопки. Пишем здесь название нашей кнопки, например, «Подпишись», выделяем текст, выбираем шрифт. Я выберу PT Sans bold. Размер шрифта выставлю 48. Далее зайду в настройки текста: отцентрирую текст по центру, увеличу интерлиньяж, чтобы надпись была в кнопке посередине, например, 190, и в принципе, тут все.

Заливка. Давайте теперь выйдем из режима редактирования текста: нажмем клавишу esc. Блок у нас выделен. Зададим заливку блоку. Цвет: красный. Esc. Давайте еще раз выделим наш текст и сделаем цвет белым. Так намного лучше. И блоку зададим так же еще скругление, примерно 50. Вот такая кнопка у нас получилась. Можно добавить еще эффект «Тень» под кнопкой, будет еще лучше.

Как создать кнопку. Редактирование состояний.

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

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

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

Итак, мы получили 4 состояния кнопки: состояние «стандартное» — это когда кнопку никто не трогает, состояние «курсора над кнопкой», когда пользователь заносит курсор мыши на кнопку, меняется цвет на оранжевый, «кнопка мыши нажата» -> цвет меняется на зеленый и исчезает эффект тени, и «в активном состоянии» цвет поменяется на светло-коричневый.

Как создать кнопку. Гиперссылка и просмотр.

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

Просмотр. Итак, давайте же проверим, как работает наша кнопка. Переходим в режим просмотра в браузере: нажимаем клавиши Ctrl+Shift+E. У нас происходит просчет, и мы видим, что при наведении курсора мышки на нашу кнопку цвет поменялся на оранжевый. Если мы нажимаем на кнопку, цвет меняется на зеленый и исчезает эффект тени. Отпускаем кнопку мыши и по данной кнопке нас перебрасывает на сайт яндекса, как и должно было быть. Итак, переходим назад в программу Adobe Muse. В принципе, на этом наш урок можно и заканчивать уже.

Как создать кнопку. Эффекты и размеры.

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

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

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

Всем пока. До связи в следующих уроках.

Дмитрий Шаповалов.

2 комментария к “Как создать кнопку в Adobe Muse

  1. Здравствуйте, почему на предросмотре кнопка выглядит угловато, хотя в режиме дизайна всё в порядке (есть мягкие углы)?

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

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