МК: сделать обложку бесплатно в Figma пошагово для чайников

Актуально? Ещё бы! Если у вас нет 3-7 тысяч рублей для красивой авторской обложки, вам точно будет интересна эта статья. Насущный вопрос качественной обложки максимально остро стоит у авторов, кто собирается получить КС или только получил его. И тут начинается маета: с одной стороны, продающая профессиональная обложка как воздух нужна. С другой стороны, лучше эти деньги вкатить в рекламу. А бывает, просто нет денег на нормальную обложку.

Показываю пошагово на примере своей книги, как выкручивалась сама. Бесплатно, без регистрации и СМС, всё как мы любим!

Осторожно, много информации! Надо налить чаёк-кофеёк, чтобы вкуснее было её переваривать!

Итак, какая обложка мне была нужна?

У меня жизнеутверждающее фэнтези, юмор, любовь, бытовуха, приключения, весело, задорно. Итого, напрягаем свои маркетинговые извилины. Мне нужно, чтобы:

были яркие, жизнеутверждающие тона;

главная героиня или два главных героя на обложке, смотрят в кадр;

нетривиальный шрифт, передающий настроение книги.

Ок, определились.

Шаг 1. Картинка.

Нам нужна базовая картинка, с которой будем работать. Где её взять? 2025 год на дворе — в нейросетях, конечно, же!

Сразу скажу, Шедеврум, Кандинский и прочая ерунда — это детский сад на «поиграться». Если вам нужна обложка, просто надо забыть об этих нейросетях, как будто их не существует. Чем они ужасны? В рамках наших задач — буквально всем! Чем же тогда пользоваться?

Очень сносный результат даёт ChatGPT, и я писала целую статью (вот тут по ссылке) о том, как мы с ней рисовали обложку к моему героическому фэнтези «Человек без прошлого» сразу после обновы весной 2025. Существенный минус — у вас всего 5 попыток в сутки.

Другая нейросеть, с которой можно попробовать — Recraft. Здесь уже 50 попыток в сутки. И промпт можно только на английском языке. Но вам же не сложно написать промпт на русском, а потом загнать его буквально в любой переводчик, чтобы получить английский текст? Кое-кто из вполне успешных коммерческих авторов признавался, что постоянно делает обложки с этой нейросетью.

Но я пошла сложным путём. Меня заколебали стоп-слова и вся эта игра в «нельзя» с вышеупомянутыми нейросетями. Они постоянно в ханжеском обмороке даже от слов «грудь», «пеньюар», «декольте», «голый» (даже если голый у вас в промпте палец ноги!!!), поэтому я стала пользоваться nsfw-нейросетью, которая работает вообще без стоп-слов, и можно сгенерировать хоть «пеньюар», хоть «грудь», хоть чл… В общем, всё.

Да что это я? У меня книжка даже не 18+, и картинка мне нужна вполне пристойная. И тем не менее, я люблю пользоваться nsfw-нейросетью и не заморачиваясь, писать точные промпты. Прямо в поиске забиваете и ищете. Без регистрации и СМС VPN. Ссылку, естественно, здесь в статье не дам.

(Для поклонников Stable Diffusion: Гусары, молчать! Нет, я не пользовалась ею. Пока есть приемлемые варианты проще, я не усложняла себе жизнь. Но буду благодарна за подробный гайд!)

Итак, обещала же пошагово. Привожу промпт на английском:

A vertical cover for a book about a witch, humorous romantic fantasy. No lettering. Cover must be deluxe. Must leave room for lettering.

There are two characters on the cover. The first is a black-haired, brown-eyed young woman. She’s a witch. She’s smiling. She is very pretty, with beautiful forms. She is dressed in the medieval dress of a European commoner. In her hands she holds a vial of potion. A gorgeous fox fur collar is slung over her shoulder. She looks slyly at the camera.
Behind her is a black-hairedhandsome man about 35 years old. Trim, slim, with green eyes. He looks at her. He is wearing a shirt, leather pants with suspenders — he has the look of a medieval commoner.

The background is a cobblestone street in a German town, half-timbered houses, tiled roofs, flowers in tubs. Bright saturated colors, everything is very beautiful and clean. The atmosphere of a beautiful Swiss or German provincial town.

По этому промпту в результате примерно 30 попыток получила вот это:

Хозяйке на заметку: выбирая нейрокартинки, смотрите внимательно на руки и пальцы. Нейросеть не имеет представления, как мы, человеки, устроены, поэтому «руки из задницы» при работе с нейросетями перестаёт быть просто фигурой речи. 6-7 пальцев на руке — да легко, буквально на каждой третьей картинке.

Всё, с нейросетью закончили, она нам больше не пригодится.

Шаг 2. Убираем фон.

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

Можете попробовать любой уборщик фона. Они все делают свою работу не идеально, но для нашей задачи это подходит. Например, здесь у меня кусок правого рукава у девушки «съеден» вместе с фоном. Это всё мелочи, главное, смотрим, чтобы волосы и лица не попортило. Большой привет тем, кто будет это проделывать с каким-нибудь жуком с тонкими усиками — там только ручная обработка без шансов.

Шаг 3. Привет, Figma

Нам нужна Figma. Скачивать ничего не надо, всё доступно онлайн прямо в браузере. Что это за зверь? Это как гугл-документы, только для графики и конструирования сайтов. (Щас не падать в обморок, мы просто будем работать с картинкой!) Авторизация — тоже легко и автоматически, через ваш гугл-аккаунт. Всё как в гугл-доках же!

Рассказывать буду прям пошагово, чтобы вы впервые открыли — и справились.

1. Вставляем изначальную картинку — которая с фоном. Жмём внизу на стрелочку справа от квадрата, а потом в выпадающем меню на image\video. Выбираем файл на компьютере, какой надо вставить. Ну, или просто Ctrl+C и Ctrl+V.

2. Вставляем рядом картинку без фона точно так же.

3. Подпишите обе картинки, чтобы было понятно, что у вас с фоном, а что без фона. Это важно, а то запутаетесь! Для этого на левой панели со списком элементов левой кнопкой мыши выделяем название элемента (сам элемент у нас сразу выделяется и на большом экране), потом по нему левой кнопкой — и Rename. (Или, для любителей горячих клавиш, Ctrl+R.) Переименовали в понятное.

4. Смотрим, чтобы в списке элементов то, которое без фона, было сверху. Иначе оно будет под картинкой с фоном, а нам так не надо. Если оно не сверху, просто перетащите его в списке элементов куда надо. Внимание: перетаскиваем в списке элементов, где названия, а не на рабочем экране, где сами картинки!

Шаг 3. Делаем из двух картинок одну

1. Совмещаем две картинки. Для этого выделяем их: зажимаем Shift и тыкаем в те элементы, которые нужно выделить. В нашем случае это все две картинки. И жмём на две кнопки в блоке Alignment — там, где показано стрелочками в любом порядке. Две картинки таким образом совместятся, вторая никуда не делась!

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

У нас выскакивает вот такое окошко:

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

Обратите внимание, когда вы двигаете ползунок, у нас эффекты происходят только с фоном, герои при этом не «пострадают». Если у вас не так и меняются герои, или ничего не меняется, или меняется всё сразу — вернитесь на начало шага 2 и перепроверьте, действительно ли у вас картинка с героями без фона на верхнем слое, точно ли вы выделили нужную картинку и т. д. Всё у вас получится!

Шаг 4. Работаем с надписями.

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

1. Жмём на нижней панели на букву «Т» и идём на рабочее поле, кликаем левой кнопкой мыши — выскакивает поле для надписи. Пишем название. Повторяем эти же действия — и пишем имя автора.

По итогу этих действий у меня слева такой список элементов:

2. Играемся с различными параметрами до получения нужного результата.

Выбор шрифта и его размер здесь, на правой панели:

Цвет:

Контур букв и цвет контура:

Обратите внимание, буквы можно обвести изнутри (Inside) или снаружи (Outside)

Тень и цвет тени:

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

Предвижу вопрос: Где все эти параметры? У меня на панели их нет!

Ответ: наверное, вы не выделили текстовый блок. Выделите его — и всё появится.

Самая душная часть закончилась, осталось пара штрихов. Ну, правда, всего пара, честное слово!

3. Лепим надписи на картинку. Просто перетаскиваем их на картинку мышкой прямо на рабочем поле. Если у нас надпись уходит под картинку — проверяем, чтобы она была верхним слоем. Смотрим это на списке элементов слева — надпись должна быть выше картинок.

Как отцентрировать картинку по горизонтали? Для этого выставляем надписи, где мы хотим, чтобы они оказались по высоте. А потом выделяем все 4 элемента:

• картинку без фона
• картинку с фоном
• название книги
• имя автора

И жмём справа на панели на ту же штуковину Alignment, что и в начале работы с картинками. Только на этот раз — только по горизонтали.

Вуаля — надписи не сместились по высоте, зато стали ровно посередине картинок по горизонтали.

Шаг 5. Сохраняем готовую обложку.

Точно несложно, честно-честно! Выдыхайте, мы уже почти профессионалы!

Теперь нам надо все элементы сгруппировать. Что будет, если этого не сделать? Всё сохранится отдельными элементами в 4 разных файлах png, а не цельной картинкой. Итак, группируем. Для этого выделяем все 4 элемента (напоминаю, зажимаем Shift и тыкаем левой кнопкой мыши в каждый элемент) и жмём правую кнопку мыши. Вылетает вот такое длинное окошко. Нам нужно Group selection.

Должно получиться вот так — в списке элементов появляется новая иерархия:

Группу тоже для удобства можно переименовывать, можно группировать группы, и тогда появляется третья иерархия, и т. д. …

Вы всё ещё читаете это и не уснули? Поздравляю, вы молодец! Сохраняем!

Кнопки «сохранить» нет! Да, тут всё не так очевидно, но просто. Вам в правую панель, в самый-самый конец. Строчка Export. Это вот здесь:

При желании можно выбрать сохранение в половинном качестве, или сменить расширение и сохранить не в png, а в jpg, например.

Всё! Мы молодцы!

Готовая обложка улетела в загрузки, ну, а мы себя чувствуем просто веб-дизайнерами! Ещё пара обложек — и можно в резюме вставить фразу «владею Figma на базовом уровне»!

Что же у нас получилось?

Смотрим на странице книги «Неведьма», как выглядит наша обложка: https://author.today/work/448251.

Я очень старалась и провела за этим гайдом целый летний день. И если он для вас был полезен, то мне будет приятен любой ваш знак внимания: лайк, подписка, донат, ну, а приятнее всего, конечно, если вы станете моим постоянным читателем!

Жду вас на странице моих книг: https://author.today/u/marina_udaltsova/works

Всем любви и терпения!

Будут ещё статьи про нейросети, лайфхаки, обложки и полезную всячину!