Перейти к содержимому
  • Стили графики и их применение

       (26 отзывов)

    Евгений Зубов
    • 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 минут display: none; https://creatura.club/uploads/ Высокая сложность display: none;
      1. Пройдите тестирование для урока
      2. Оцените урок и сдайте задание

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

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

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

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

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

    Вы узнаете об одной из самых крутых функций в программе. Как использование стилей упрощает жизнь любому кто делает сайт в Adobe Muse. Увидите как редактировать и изменять стили.


      Жалоба


    Отзывы пользователей


    Слава Баранов

    Все понятно

    Поделиться отзывом


    Ссылка на отзыв
    Даниил Князев

    Все понятно, спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    Руслан Гараев

    Чем дальше тем интересней!

    Поделиться отзывом


    Ссылка на отзыв
    Genka

    +

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    Супер круто

    Поделиться отзывом


    Ссылка на отзыв
    adel

    восхищение! я в восторге!

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

    Просмотрено.

    Поделиться отзывом


    Ссылка на отзыв
    Zhanibek_jez

    Понятно

    Поделиться отзывом


    Ссылка на отзыв
    Екатерина Химич

    Удивительно просто и понятно

    Поделиться отзывом


    Ссылка на отзыв
    Иван18

    Все супер!! очень понравилось!:):)

    Поделиться отзывом


    Ссылка на отзыв
    Валерий1234

    Спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    Aspirantmiha

    Очень полезный урок!

    Поделиться отзывом


    Ссылка на отзыв
    РЕКА ЧУ РЕКА ЧУ

    Все понятно. Надо тренироваться! Спасибо!

    Поделиться отзывом


    Ссылка на отзыв
    ievseev09

    Спасибо, всё ясно!

    Поделиться отзывом


    Ссылка на отзыв
    Андрей А

    Интересно!

    Поделиться отзывом


    Ссылка на отзыв
    Sharovich

    Спасибо. Чётко, ясно, без воды. Спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    toxasag

    :):)

    Поделиться отзывом


    Ссылка на отзыв
    7dgoni6

    Полезная информация!

    Поделиться отзывом


    Ссылка на отзыв
    YanaZamkova

    записала, в программе попробовала сделать. все получилось!

    Поделиться отзывом


    Ссылка на отзыв
    gladir1

    Урок посмотрела. Со стилями поработала. Все понятно.

    Поделиться отзывом


    Ссылка на отзыв
    lukomorik

    Спасибо!

    Поделиться отзывом


    Ссылка на отзыв
    vladipice

    Подробное объяснение.

    Поделиться отзывом


    Ссылка на отзыв

×