Приветствуем всех на курсе по SMM-дизайну! Сегодня у нас седьмой урок, и мы будем делать инфографику. Обычно ею занимаются графические дизайнеры, но мы с вами в любом случае попробуем её сделать. И инфографика у нас будет в упрощённом формате.

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

Инфографика разделяется на пять основных типов. Первый — это аналитическая, или цифровая. С её помощью представляют статистические данные. Обычно она отличается обилием цифр, разных диаграмм, графиков и т. д.

Вторая — это новостная инфографика, которая наглядно рассказывает про какие-либо свежие события, отражает хронологию и важные этапы происходящего.

Третий тип — это конструкционная инфографика. Она демонстрирует устройство каких-либо механизмов и явлений, иногда хронологию или причины исторического события.

Четвёртый тип — это рекламная инфографика. Создаётся для продвижения какого-либо продукта. Яркая картинка с описанием всех достоинств товара и различные выгоды от этой покупки. Такая инфографика делается для привлечения клиентов к какому-либо товару.

И пятый тип, последний, — это сравнительная инфографика. Она позволяет сравнивать характеристики различных объектов. Если нужно, её можно дополнять более подробными анализами.

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

Так как в инфографике используются иконки, то здесь мы даем ссылку на статью на сайте Tilda Education, где можно найти различные ресурсы с бесплатными иконками. Настоятельно рекомендуем ознакомиться и подобрать себе какие-либо сайты с иконками, которые вам будут по душе.

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

А теперь давайте перейдём к рисованию нашей инфографики. У нас имеется такой текст. Здесь есть основной вопрос, после него — перечисление пунктов и адрес сайта. Из всего этого нам необходимо сделать инфографику. Перейдём в Figma.

Как всегда, нам необходимо создать новый фрейм. Для этого нажимаем кнопку F и выбираем Instagram-пост, — он подойдет и для ВК. Вот здесь: Social Media — Instagram-пост. После этого давайте по очереди перенесём каждый кусок текста.

Итак, мы перенесли наш текст. Давайте его выделим, выровняем и увеличим так, чтобы это было видно. У нас есть четыре пункта и заголовок. Можно разместить наш заголовок сверху по центру. И сразу же увеличим его в размере. Сделаем вот такие блоки-разбивки, выделим наш текст, чтобы он сразу же бросался в глаза, и сосредоточим его по центру. Поднимем для начала повыше. Можно ещё выделить его жирным.

Дальше у нас есть эти четыре блока. Давайте их структурируем и скомпонуем. Пожалуй, сделаем вот так.

Выравниваем в них текст по центру и распределяем их по макету.

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

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

Нажимаем на выбранную иконку и следом нажимаем Get This Icon. Сначала всплывёт окошко и вам предложат зарегистрироваться на сайте. После регистрации спросят, какой формат скачивания вы будете использовать. Выбираем стандартное скачивание — Basic Download — и нажимаем «Продолжить». Дальше предлагается формат png — это картинка. Нам сейчас нужен формат SVG, чтобы мы могли потом перекрасить иконку. Скачиваем. Затем просто берем и перетягиваем ее в Figma. Появляется такая огромная иконка, её сразу надо уменьшить. Видите, у нашей иконки огромное пространство внизу. Нажмём Сtrl+Shift+G, «Разгруппировать» — верхний слой убрался. Теперь давайте уменьшим ее по краям. Возьмем 128. Поставим ее сюда.

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

Также скачиваем в формате SVG. Снова нажимаем Сtrl+Shift+G, ставим замочек и ставим размер 128.

Следующий блок — «прибегать к нутритивной поддержке при стойкой потере веса». Здесь идёт, скорее всего, обращение к врачу, поэтому нужно поискать что-то связанное с ним. Как вариант, можем взять такую или такую иконку. Они, в принципе, обе по стилю подходят. Либо посмотреть здесь какие-то схожие.

И последний блок — «соблюдать здоровый режим питания». Здесь тоже стоит написать «диета» и искать по этому ключевому слову. Как вариант, можем взять вот такую иконку. Здесь как раз есть часы и напоминание о режиме питания.

Итак, основные блоки мы определили. Теперь нам их нужно скомпоновать. Можно сделать их чуть побольше и расставить. Потом уже перекрасить.

Давайте попробуем начать с верхних элементов. Вот так выделяем оба. Сделаем их ширину 140. Так пойдет. Выделим все блоки с текстом и сделаем шрифт 28.

Хотя нет, пожалуй, вот эти иконки оставим всё же 128. Больше их не стоит делать. Выровняем их между собой по центру.

Дальше начнём работать с текстом. Уберем висящие предлоги, чтобы было проще читать и воспринимать текст. Чуть-чуть их сдвинем, вот так, и выровняем по центру. Давайте посмотрим, какое расстояние берём между иконкой и текстом. 20. Самое то. Сгруппируем. Теперь поработаем со вторым блоком. Если у нас здесь будет расстояние 20,05, то ничего страшного.

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

Теперь все эти иконки выровняем по верхнему краю вот так, чтобы они обе были выровнены по верху. Либо, как вариант, мы можем растянуть текст так, чтобы он уместился на три строки.

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

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

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

Сейчас из-за текста смотрится так, будто бы слева мало пространства, а справа — много. Давайте всё выделим. Нажмём Alt и посмотрим расстояния. Здесь 135, а здесь — 36. Давайте перенесём всё это в центр. Можем оставить вот так. Но теперь вот здесь, кажется, немного меньше свободного места. Т. е. с этим можно играться и играться.

Давайте вот так перенесем, на глаз, и оставим. А теперь перейдём непосредственно к сайту, на котором будет размещаться наша инфографика. Видим, что здесь используются вот такие цвета — красный и тёмно-синий. Вернее, текст у нас тёмно-синий, а цвета — различные оттенки красного.

Предлагаем сейчас нажать на клавиатуре PrintScreen и сделать скриншот. Заходим в Figma, встаем где-то рядом и нажимаем Сtrl+V. Когда вы делаете скриншот, вы сразу же можете поместить его в Figma. Предлагаем взять отсюда сразу же нужные цвета. Этот красный и тёмно-синий. Начнём с самого основного — с заголовка, который должен быть броским. Делаем красным цветом его верхнюю часть. И возьмём фиолетовый цвет для его нижней части отсюда. Дальше разгруппируем блоки, выберем текст и тоже сделаем его тёмно-синим.

Теперь пройдёмся по иконкам. Давайте изначально их тоже сделаем синими, а потом уже в нужный элемент добавим красный цвет. Приближаемся к нашей иконке. Нажмём Ctrl+Shift+G, чтобы разгруппировать её. Получились разные векторы. Так нам будет удобнее перекрашивать. Мы можем перекрасить вот этот элемент в красный, а вилку и ножик — оставить синими. Можем сделать наоборот. Давайте попробуем вот так. Выделяем обратно, нажимаем Ctrl+G, чтобы сгруппировать, и переходим к следующей иконке. Нажимаем Ctrl+Shift+G, разгруппировали — и перекрашиваем в красный вот эти элементы.

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

А здесь у нас получается один элемент. Целая иконка. Мы её можем полностью перекрасить в красный. Либо выбрать новую иконку, похожую, где есть разбивка на элементы. И уже её потом перекрасить.

Вот эта иконка будет как раз отличаться, потому что здесь нет стыков между яблоком и табличкой. Давайте её возьмём. Иконку нужно сделать по высоте 128. Разгруппировываем и красим. Сгруппируем обратно и чёрный цвет переведём в тёмно-синий.

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

Вот таким образом у нас получилась наша инфографика с текстом, с названием и с иконками.

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

На этом наш урок подходит к концу. До новых встреч!