Настройка темы для создания впечатляющих историй
Создание темы
Вы начнете с дублирования существующей истории и создания новой темы для ее стиля.
- Войдите в ArcGIS StoryMaps под учетной записью организации ArcGIS.
Примечание:
Если у вас нет учетной записи организации, см. варианты доступа к программному обеспечению.
- Откройте историю Smoke on the Horizon.
- Пролистайте и прочитайте ее содержание.
История включает в себя карту, фотографии, текст, кнопки и ссылки на источники данных. Вы создадите ее копию, которая будет принадлежать вам, и вы сможете ее редактировать.
- На ленте щелкните кнопку Больше действий и щелкните Дублировать историю.
- В окне Дублировать историю щелкните Да, дублировать.
- Удалите текст (Копия) из заголовка, чтобы остался только Smoke on the Horizon.
В настоящее время в истории используется тема по умолчанию с белым фоном, темно-серым текстом и синими акцентами. Эти цвета не подходят к этой истории. Дым лесных пожаров создает мрачное, туманное и зловещее настроение. Карта и фотографии в рассказе соответствуют этому настроению, а тема - нет. Вы найдете другую тему.
- На ленте щелкните Дизайн.
- На панели Дизайн в разделе Темы щелкните Mesa.
- Пролистайте историю, чтобы увидеть изменения.
Тема Mesa лучше соответствует цветам истории, чем тема по умолчанию Summit, но создаваемое ею настроение кажется легким и ясным. Вы создадите собственную тему, чтобы история выглядела более дымной, мрачной и немного зловещей.
- Щелкните ссылку Управление моими темами.
- Щелкните кнопку Новая тема.
- На панели Выбор начальной точки щелкните Obsidian и щелкните Выбрать.
Выбор темы в качестве начальной точки приведет к загрузке цветов, шрифтов и других характеристик темы в редактор в качестве начальной точки. Поскольку вы решили придать истории более темный, дымчатый оттенок, темный фон Obsidian и красные акцентные цвета станут хорошей начальной точкой для работы.
- На боковой панели удалите Тема без названия и введите Smoke.
Выбор шрифта и цветов
Далее вы выберете шрифты и цвета, которые помогут задать серьезный тон. Вы позаимствуете цвета из карты и фотографий, уже присутствующих в вашей истории, и убедитесь, что эти цвета соответствуют рекомендациям по доступности в отношении коэффициента контрастности.
- На боковой панели разверните раздел Цвета и щелкните меню Цвет фона.
- Удалите #0e1116 и введите #272520.
Цвет фона страницы изменится на темно-коричневый. Этот цвет такой же, как цвет фона (цвет океана) на карте прогноза задымления.
Подсказка:
Вы можете установить в свой веб-браузер расширения, которые позволят вам находить шестнадцатеричные значения цветов на картах, фотографиях и другой графике. Eye Dropper - один из примеров таких расширений.
- Для Цвета заголовка отметьте Использовать цвета темы.
Вы установите это свойство позже, в разделе Типология. Установка этого параметра позволяет вам более подробно настроить эти цвета в этом разделе.
- Щелкните меню Цвет выделения. Из списка Основные цвета выберите оранжевый или введите #C86624.
- Прокрутите пример истории, чтобы увидеть, где появляются оранжевые выделения.
Цвет выделения влияет на кнопки, ссылки, разделители и кавычки. Оранжевый цвет ассоциируется с огнем, поэтому подходит к теме вашего рассказа.
- Разверните раздел Шрифтовое оформление.
Шрифты имеют индивидуальность. Вы пытаетесь задать серьезный тон с помощью этой темы, поэтому вам следует избегать любого шрифта, который выглядит слишком непринужденным, игривым или декоративным. Шрифт Charter BT имеет формальную индивидуальность, поэтому он хорошо подходит к вашей теме. Многие из имеющихся в этом меню шрифтов также могут подойти, поэтому выбор шрифта во многом определяется вкусом. Выбирая шрифты, подумайте о чем вам напоминает каждый из них. Шрифт, напоминающий приглашение на свадьбу, детскую книгу или онлайн-игру, возможно, не лучший выбор для истории о дыме от лесных пожаров. Шрифт, напоминающий об официальных документах, более уместен.
Шрифт Charter BT, который в настоящее время используется для заголовка, является хорошим вариантом для официального шрифта, поэтому вы оставите его.
- Для Названия и заголовков щелкните цветовое меню. Введите #A6671B.
Текст заголовка изменится на желто-оранжевый цвет, позаимствованный у одной из фотографий в вашей истории.
Рядом с цветовым меню появится символ предупреждения. Это указывает на низкий контраст между цветами текста и фона, что затрудняет чтение текста.
- В окне выбора цвета щелкните стрелку рядом с надписью Нечитаемый.
Информация в этом разделе расскажет вам, насколько хорошо цвет текста контрастирует с фоном. Указанные цифры представляют собой коэффициенты контрастности. Коэффициент контрастности считается разборчивым, если он соответствует пороговым значениям, установленным рекомендациями WCAG 2.1 AA. В этом случае оранжевый цвет хорошо контрастирует с фоном, но не со второстепенным фоном.
Цвет второстепенного фона - это более светлая версия коричневого цвета фона. Он генерируется автоматически и не подлежит настройке. Вы сделаете оранжевый цвет светлее, чтобы он был разборчив на обоих фонах.
- В окне выбора цвета переместите круг немного выше и влево. В качестве альтернативы можно ввести #BC7F38.
Числа коэффициента контрастности становятся зелеными, что указывает на адекватный контраст с обоими цветами фона.
Предупреждения о контрасте не следует игнорировать. Хотя вы, возможно, сможете без труда прочитать название в выбранном вами цвете, другие люди - нет. Следование предупреждениям позволяет создать историю, доступную для всех.
Для текста абзаца вы выберете тот же шрифт, что и для названия и заголовков. В картографии часто рекомендуется использовать только один или два шрифта, поскольку создать привлекательную и эффективную карту с небольшим количеством элементов легче, чем со многими. Вы распространите этот совет на дизайн своей темы и будете использовать только один шрифт на протяжении всей истории.
- Для Абзаца выберите Charter BT.
Ограничение вашей темы только одним шрифтом дает вам больше возможностей для вариаций цветов.
- Для Абзаца измените цвет на #C8BEA4.
Этот цвет представляет собой более бледную версию цвета названия. Он менее насыщенный, что делает его более дымным и соответствует теме истории. Он также светлее, что увеличивает его контраст с фоном. Чем меньше текст, тем важнее контраст для удобочитаемости.
- Для Подписей установите цвет #B5ADB7, бледный и ненасыщенный фиолетовый.
Три цвета текста были обусловлены одной из фотографий, представленных в статье.
Заимствование цветов из фотографий и графики - надежный метод разработки цветовой схемы. Эти цвета помогут задать тон истории, основанный на тоне фотографии. Оранжевый и желтый цвета текста также соответствуют символике карты.
Это не совсем одинаковые цвета, но они достаточно похожи, чтобы история выглядела последовательной.
Бледно-фиолетовый цвет хорошо смотрится на коричневом фоне, но проявляется лишь в нескольких местах. Возможно, вы захотите повторно использовать этот цвет в других местах. Вы установите его как дополнительный цвет выделения, чтобы иметь к нему доступ позже.
- На боковой панели прокрутите вверх. В разделе Цвета под Дополнительными цветами выделения щелкните меню первого цвета и установите для него значение #B5ADB7.
Этот цвет не будет немедленно применен к каким-либо элементам истории, но он будет доступен в конструкторе историй позже.
Установка других элементов дизайна
Далее вы измените оформление кнопок и ссылок в своей теме.
- Сверните разделы Цвета и Шрифтовое оформление и разверните раздел Кнопки.
Пример истории перейдет к месту, где находится кнопка примера.
Кнопка оранжевого цвета выглядит очень броско. Для некоторых историй уместны броские кнопки. Например, кнопка призыва к действию должна быть очень заметной. Однако в вашей истории вам не нужно, чтобы кнопки отвлекали от текста абзаца, поэтому измените их на более тусклый цвет, менее привлекающий внимание.
- На боковой панели поставьте отметку Применить пользовательский цвет.
- Задайте цвет #776f5b.
Этот серовато-коричневый цвет похож на цвет основного текста статьи. Это более тусклый оттенок, который не отвлекает внимания от текста и достаточно светлый на фоне, чтобы пройти тесты на доступность.
Текст кнопки также изменился с черного на белый, чтобы обеспечить четкий цветовой контраст. Вы также сделаете кнопку квадратной, чтобы лучше выровнять ее по прямой линии, которую тема использует для блока цитат.
- В разделе Кнопки выберите первый тип кнопки с квадратными углами.
- Разверните раздел Ссылки и выберите вторую опцию.
Оранжевый цвет выделения был слишком броским для кнопок, но кажется подходящим для подчеркивания ссылок, поэтому вы не будете изменять его на собственный цвет.
- Разверните раздел Разделители. В разделе Положение выберите последний вариант.
Разделительная линия в примере простирается на всю ширину статьи.
Существуют дополнительные варианты кавычек и базовых карт. Поскольку ни один из них не используется в вашей истории, вы не будете их корректировать.
Публикация темы
Вы опубликуете и поделитесь своей темой, чтобы применить ее к своей истории.
- Прокрутите пример истории и просмотрите дизайн.
Он имеет серьезный и формальный вид, а цвета соответствуют теме лесных пожаров и дыма.
- На ленте щелкните Опубликовать.
Вы планируете поделиться историей Smoke on the Horizon с общественностью, поэтому ваша тема также должна быть опубликована для всех. В противном случае люди, не имеющие доступа к теме, увидят историю с примененной темой по умолчанию.
- Для параметра Задайте уровень общего доступа выберите Для всех (общий).
- Для Дополнительных опции отметьте Разрешить дублирование.
Эта опция позволит вам сделать копию вашей темы и изменить ее позже.
- Щелкните Опубликовать.
Применение темы к истории
Далее вы примените свою тему и проверите, как она меняет внешний вид вашей истории. Вы переопределите один из цветов темы.
- Вернитесь на вкладку браузера со своей историей. При желании закройте вкладку с вашей темой.
Примечание:
Если вы ранее закрыли вкладку со своей историей, войдите в свою учетную запись ArcGIS. Щелкните вкладку Ресурсы и щелкните элемент ArcGIS StoryMaps Smoke on the Horizon. Щелкните Редактировать историю.
- На ленте щелкните Дизайн.
- Прокрутите панель Дизайн до низу и щелкните Обзор моих тем.
- В галерее тем щелкните карточку Smoke.
Тема применена к истории.
- Закройте панель Дизайн и прокрутите историю, чтобы просмотреть, как она выглядит с новой темой.
Фон карты органично сочетается с фоном истории, а цвета текста и выделений подходят к фотографиям и карте.
- Прокрутите историю до конца.
В первой строке созданного раздела используется оранжевый цвет названия и заголовков.
Вы выбрали этот цвет, учитывая более крупный текст, и предпочитаете что-то более контрастное для этого меньшего шрифта. Вы перезапишите тему и выберете другой цвет.
- Выделите строку текста, которая начинается с This story was created for.
- В появившемся меню щелкните кнопку Цвет.
В разделе Рекомендуется перечислены четыре цвета. К ним относятся цвета заголовка и выделений, которые вы установили в своей теме.
- В разделе Рекомендуется щелкните бледно-фиолетовый цвет. Убедитесь, что цветовой контраст указан как Читаемый.
Цвет текста изменится на фиолетовый.
Публикация истории
В завершение вы опубликуете историю и поделитесь ею с общественностью.
- На ленте щелкните Просмотр.
- Нажмите Да, продолжить.
- Прокрутите историю, чтобы просмотреть ее.
- На панели инструментов предварительного просмотра щелкните кнопку Закрыть просмотр.
- На ленте щелкните Опубликовать.
- Для параметра Задайте уровень общего доступа выберите Для всех (общий).
- Щелкните Опубликовать.
Ваша история завершена. Благодаря вашей индивидуальной теме она имеет тон и настроение, соответствующие ее содержанию. В этом упражнении вы узнали:
- Как создать собственную тему, которая задаст подходящий тон вашей истории
- Как создать полноценное и целостное ощущение, заимствуя цвета, уже присутствующие в истории.
- Как выбрать цвета, соответствующие рекомендациям по доступности
Вы можете найти больше учебных пособий в галерее учебных пособий.
