Оглавнение:

1. Введение
2. Начало
3. Нынешнее время
4. Итог

Введение

Привет! Если вы сидите в проектах и фармите роли, то я думаю вы могли видеть мои работы, а конкретно инфографики, или же "превьюшки" постов. Они, по моему мнению, выглядят довольно симпатично:

В этой статье я бы хотел рассказать о своём пути и дать пару советов начинающим ребятам (возможно вы вообще ничего не знаете в этой сфере, либо же работаете в софте для нубчиков, например Canva)

Началось всё весной 2024, когда я только узнал про амбассадорки. Тогда я делал инфографики в фотошопе, и я думаю это один из худших выборов для создания инфографиков

Ниже пару примеров моих работ из того времени:

Я думаю вы понимаете, что это выглядит плохо, я и сам в то время это понимал. И посмотря на других ребят которые сидят в амбах, я решил перейти в фигму. И я вам тоже советую выбрать ИСКЛЮЧИТЕЛЬНО фигму, так как по моему мнению это самая удобная программа для создания ИМЕННО инфографиков. Для дополнительных задач я использую фотошоп, и получается связка. Вам я так же советую использовать эти программы так же (фотошоп я использую для вырезания персонажей и цветокоррекции, а в фигме уже создаю полноценный инфографик со всеми элементами)

Фигма в освоении очень простая программа (внизу статьи я прикрепил ссылки, благодаря которым вы можете ознакомиться с программой за день-два и сразу же начать что-то делать), а фотошопом думаю многие и так знают как пользоваться. Если же нет - гайды на все необходимые темы можно очень просто найти

Начало

Думаю, почти все начинали с копирки чего-то. Так же начал и я

Вбиваете в пинтерест "web3 ui/ux design", берёте любую понравившуюся работу, и начинаете повторять её в фигме. После этого можете пытаться создать что-то своё, черпая по парочке фишек с работ на пинтересте

Вот мои первые работы:

Если вы посмотрите на даты, то можете понять, что прошло буквально 2 с лишним недели, а я уже начал делать относительно неплохие инфографики, которые до сих пор выглядят хорошо. Я думаю, для вас это может быть показателем того, что даже если вы только начинаете, то уже можно делать отличные работы. Главное только начать

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

Так я просидел в фигме 3 месяца и постепенно дошел к единому стилю, который выглядил так:

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

Фишечки: интересный задний фон, который дублирует главную тему поста. Начал использовать аниме персов с пинтереста (через нейронку прогнал для апскейла, через фотошоп вырезал). Прикольные стрелочки, звездочки и тд для разнообразия и наполненности. Круто продублирован весь фрейм с прозрачностью на заднем фоне

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

Довольно минималистичный инфографик, не вижу смысла что-то объяснять. Просто красиво и лаконично выглядит

Опять же, повторяю, все это было сделано из миллионов референсов с пинтереста. И вот получилось сделать что-то своё, следовательно вы можете тоже достаточно просто придумай свой дизайн

Нынешнее время

Сейчас я пришел к +-единому стилю инфографиков, которые лишь отличаются под каждый проект, но по своей сути похожи:

Я думаю, что мои нынешние инфографики выглядят красиво, минималистично. Главное - что под каждый проект у меня свой "дизайн-код", это может выделять вас на фоне остальных людей

И тут самое время попытаться вам объяснить, по какому принципу я всё располагаю на фрейме (или хотяб примерно)

У меня есть пару правил, которых я сам неосознанно придерживаюсь:

1. Не должно быть маленьких, еле заметных элементов
Если ты что-то добавляешь - это должно быть видно, иначе зачем вообще добавлять что-то?

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

3. Цветовая палитра должна быть под стать проету
Палитру цветов для работ зачастую можно найти в брендкитах (так же там лежит логотип, маскот и тд), которые должны лежат в дискорде/на сайте. Либо же сами заходите на сайт проекта, выбираете цвета, и делаете себе палитру самостоятельно

4. Элементы для оформления можно и нужно брать с инфографиков проекта
Обычно проекты к себе в твиттер тоже заливают какие-то инфографики. С них можно что-то украсть: элементы, в целом позиционирование объектов, либо опять же цветовую палитру

Итог

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

Полезности:

Два хороших, полноценных гайда на фигму (азы):
> https://www.youtube.com/watch?v=4v1PdxP0GBI
> https://youtu.be/sTdmUdsfOkY?si=k4tXso3ikVKGZS1R

Доп. гайды на фигму:
> https://www.youtube.com/watch?v=csoJ258TDWg
> https://www.youtube.com/watch?v=M0i9yF5w5Q8
> https://www.youtube.com/watch?v=Bf29aA3lWvQ
> https://www.youtube.com/watch?v=VW7wbow5p8A
> https://www.youtube.com/watch?v=ue0hKThvdgA
> https://www.youtube.com/watch?v=ZFOJIeKatYc
> https://www.youtube.com/watch?v=iF90AOF0IZI
> https://www.youtube.com/watch?v=3s2JD_4afR4
> https://youtu.be/wIuVvCuiJhU?si=lGP1sne0d2wzjaOK

Плагины:
> IconScout - уже писал, что для поиска иконок. Мастхев
> Image Editor - редактировать фотографии прям в фигме
> Vectorized - переделать png в svg. Иногда может быть полезно
> Image Palette - создает отдельную группу со всеми цветами с изображения

Рефы на пинтересте (полайкайте и у вас будут подобные рекомендации):
> https://ru.pinterest.com/pin/127648970684560745/
> https://ru.pinterest.com/pin/58124651438058575/
> https://ru.pinterest.com/pin/18014467258433934/> https://ru.pinterest.com/pin/582934745564347747/
> https://ru.pinterest.com/pin/10133167906698404/
> https://ru.pinterest.com/pin/11188699074908780/
> https://ru.pinterest.com/pin/795659459186408625/
> https://ru.pinterest.com/pin/10203536650875413/
> https://ru.pinterest.com/pin/68748594362/

Полезные сайты:
> Bigjpg - https://bigjpg.com/ru (использую практически только его для апскейла картинок)
> Pixelcut - https://www.pixelcut.ai/ (огромный список инструментов, которые могут понадобиться: апскейлер, бг ремувер, генеративная заливка, анкроп и т.д.)
> Clipdrop - https://clipdrop.co/ (еще один сайт с таким же огромным списком иструментов)
> Problembo - https://problembo.com/ru (очень много нейронок)