Как сделать красивую инфографику: текст отдельно, иконки отдельно
Как сделать красивую инфографику самостоятельно: текст и даты от нейросети, набор иконок в одном стиле и сборка в редакторе на примере реформ Петра I.
Евгений
Дизайнер-партнёр LibraChat
5 мин чтения
Я просил пять иконок, а пришло четыре. Корабль, перо со свитком, монета, треуголка. Крепость пропала, и никто об этом не сказал. А у тех четырёх, что пришли, линии разной толщины, хотя в запросе стояло «одна толщина линий».
Это и есть главный вопрос, если хочешь понять, как сделать красивую инфографику. Красота в ней не в цвете и не в шрифте. Она в одинаковости: одна толщина, один стиль, одна сетка. Нейросеть здесь хорошо помогает с частями, но собирать целое и следить за этой одинаковостью приходится самому.
Целиком не вышло, и это к лучшему
Задачу я взял школьную: инфографика по истории о главных реформах Петра I. Сначала дважды попросил нарисовать её целиком, одной картинкой. Картинка не пришла ни разу, ответ закончился ошибкой. Такое бывает, и я пошёл другим путём.
Для красивой инфографики я и так разделил бы работу. Даты и подписи должны быть точными, а надписи на картинках иногда выходят с перепутанными буквами. К тому же нарисованную целиком картинку не поправишь по частям: ошибся в одной дате, перерисовывай всё. Поэтому текст отдельно, иконки отдельно, сборка в редакторе.
Текст: пять строк, которые держат схему
Текст я попросил без картинки:
Составь текст для инфографики по истории: пять главных реформ Петра I, для каждой год и одна короткая строка, что изменилось. Без картинки, только текст.
Пришло ровно пять пунктов. У каждого год, одно слово-тема и строка пояснения. Армия, управление, церковь, служба, налоги. Например:
Боярскую думу сменил Сенат — постоянный высший орган власти.
Даты я перепроверил. Рекрутские наборы с 1705 года, Сенат в 1711-м, Синод в 1721-м, Табель о рангах в 1722-м, подушная подать собирается с 1724-го. Всё сходится. Проверять стоило: в инфографике ошибка в дате бросается в глаза сильнее, чем в абзаце текста.
Как дизайнеру мне понравилась сама структура ответа. Год, тема, пояснение — это готовые три уровня иерархии. Год можно сделать самым крупным, тему жирной, пояснение мелким. Глаз сначала идёт по годам, как по шкале времени, и только потом читает.
Одно я бы поправил. Строки разной длины: про армию почти вдвое длиннее, чем про Сенат. В инфографике пять колонок с разной длиной текста выглядят неровно. Я бы попросил ниже в этом же разговоре: «сделай все пояснения одной длины, по 6–8 слов».
Иконки: четыре из пяти и разная толщина
Потом я попросил иконки, по одной на каждую реформу:
Нарисуй набор из пяти иконок в одном стиле для инфографики по истории: парусный корабль, гусиное перо и свиток, монета, треуголка, крепость. Плоские иконки, одна толщина линий, два цвета — тёмно-синий и золотой, на белом фоне, ровно в ряд, без подписей.
Пришли четыре отдельные картинки вместо одной с рядом. Цвета выдержаны везде: тёмно-синий и золотой. А дальше начинается разнобой.
Корабль тонкими линиями и с кучей снастей: красиво крупно, но в маленьком размере такелаж сольётся в сетку
Корабль нарисован тонко и подробно: три мачты, паруса, такелаж, волны. Крупно это красиво. Но инфографику смотрят с экрана или с листа издалека, и иконки там размером с ноготь. На таком размере снасти сольются в серую сетку.
Монета с толстым двойным кольцом: линии вдвое толще, чем у корабля, а звезда в центре больше похожа на компас
Монета сделана совсем иначе: толстое двойное кольцо и звезда внутри. Линии здесь вдвое толще, чем у корабля. Звезда в круге к тому же больше похожа на компас, чем на деньги.
Треуголка с толстым контуром читается лучше всех, но по форме ближе к двууголке
Треуголка тоже с толстым контуром. Её легче всего прочитать в маленьком размере, но по форме это скорее двууголка. Перо со свитком вышло тонким, как корабль. Крепости нет совсем.
Поставь эти четыре в ряд, и станет видно, почему инфографика выглядит самодельной. Две иконки тонкие, две толстые, одна детальная, три простые. Каждая по отдельности нормальная. Вместе они спорят.
Что делать? Я бы выбрал одну иконку за образец, лучше треуголку, потому что она читается мельче всех. И дописал бы в том же разговоре правку: «перерисуй корабль, перо и монету линиями той же толщины, что у треуголки, с той же простотой, и добавь крепость». Пропавшую крепость стоит попросить отдельно, иначе её легко не заметить.
Сборка: где инфографика становится красивой
Собирать я бы стал в любом редакторе, где можно положить картинки и текст: хоть в PowerPoint, хоть в бесплатном онлайн-редакторе. Это ручная работа, но короткая.
Порядок такой. Сначала сетка: пять одинаковых колонок или одна горизонтальная линия времени с пятью точками. Потом иконки одного размера на одной высоте. Под каждой год крупно тёмно-синим, ниже тема жирным, ещё ниже пояснение мелко. Золотой цвет только для иконок и линии, чтобы не пестрило. Между колонками одинаковый воздух.
В PowerPoint для этого не нужна линейка. Выдели все иконки, выровняй их по верхнему краю и распредели по горизонтали: расстояния станут одинаковыми сами. То же самое сделай с годами и подписями. Пять минут. А разница заметна сразу.
Последний шаг — уменьшить готовую инфографику до размера, в котором её увидят. Если иконки читаются и годы видны сразу, всё получилось. Если глаз цепляется за одну колонку, ищи, чем она отличается от соседних.
Если инфографика нужна для карточки товара, там свой порядок: фото товара важнее иконок, и об этом я писал в истории о том, как создать инфографику. А что писать в подписях, чтобы их читали, разобрано в тексте про нейросеть для инфографики.
Что я теперь проверяю первым
Что одинаково у всех элементов на моей инфографике? С этого начинаю. Цвета потом.
Если ответ «почти ничего», красивой она не будет, какой бы яркой ни была. Если толщина, размер, цвет и отступы совпадают, даже простые иконки смотрятся дорого.
Возьми свою тему и попроси в LibraChat сначала текст с датами или цифрами, потом иконки в одном стиле. Положи иконки рядом и посмотри на них прищурившись.
Какая из твоих иконок первой выбьется из ряда?
как сделать красивую инфографикукартинки и видеоинфографика по историииконки