Как создать 3D Обложку. Без установки фотошопа и других программ.

Как создать 3D Обложку онлайн

Как создать 3D Обложку онлайн.

Привет ребята. С Вами, Евгений Назаров.

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

Вообще, конечно, создание 3D Обложки через PS является наиболее удобным и быстрым способом, но так как мой ПК отказывался нормально работать, пришлось искать альтернативу и я её нашёл.

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

Видео курс для вас!
Так же, когда я нашёл для себя достойный способ с помощью которого обложки делаются от 15 минут без скачивания каких либо тяжёлых программ, я сделал по нему бесплатный видеокурс.

Забрать курс: Как создать 3D Обложку без скачивания сложных программ.

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

 

Подготовка к созданию 3D Обложки.

И так, чтобы нам приступить к работе, нужно открыть в браузере некоторые инструменты, а именно сайты фотошопа, фото редактора и генератор 3D Обложек.

Онлайн-фотошоп: https://online-fotoshop.ru/

Фото редактор Avatan: https://avatan.ru/

Генератор 3D Обложек: http://3dcoverdesign.ru/

  • Открываем 3dCoverDesign и выбираем шаблон обложки, который вам более импонирует и подходит для проекта. Открываем выбранный шаблон и смотрим размеры торцевой и лицевой части нашей будущей коробки.
  • Переходим в фотошоп онлайн и создаём новый рисунок. Прописываем для него нашу ширину и высоту.

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

Например если торцевая часть у вас 180×1000 px, а лицевая 670×1000 px, то сделайте заготовку шириной 850×1000 px. Это значительно облегчит работу с объектами, которые должны иметь продолжение с лицевой на торцевую часть.

ЛайфХак 2 — Заготовку сохраняйте в формате png с прозрачным фоном, это облегчит работу в фото редакторе Avatan, так как фон сайта белый, а если и заготовка будет белой, то соответственно вы просто не увидите где её края.

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

  • Далее открываем нашу заготовку в фото редакторе аватан и начинаем наполнять контентом.

 

Переходим к оформлению шаблона 3D Обложки.

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

Также в нем удобно работать с новыми слоями. В этом инструменте они называются «Наклейки». Когда загружаете какую то иконку, например, можно менять её размер и положение обычным растягиванием и перетаскиванием. Это очень удобно.

 

Удачное оформление 3D Обложки.

Что должно быть на коробке и как она должна быть оформлена, чтобы приносила хорошую конверсию?

  • Во первых особое внимание уделяем названию и описанию, и то и другое обязательно должны быть.
  •  Название и описание должны отражать суть продукта и быть минималистичны.

Например, как на этой коробке, которую мы сделали в видео курсе.
Как создать 3D Обложку онлайн

Сразу понятно что это за продукт и какую пользу несёт.

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

Минималистичный стиль подразумевает под собой отсутствие всего лишнего. Добавляйте только ту информацию или объекты, которые несут в себе полезную информацию.

 

Создаем 3D Обложку из нашей заготовки и делаем компрессию.

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

После заходим на 3dCoverDesign, загружаем торцевую и лицевую часть в соответствующие блоки и кликаем кнопку «Создать 3D» и уже через несколько секунд вы получите то, что хотели, в наилучшем виде.

Как только обложка будет готова, её можно скачать в расширении 1500×1500 px и с довольно большим весом, более 1 mb.

Многие сервисы, куда вы будете загружать обложку разрешают закачивать файлы весом не более 500 kb. Даже если вы просто будете заливать коробку на лендинг, такой вес слишком большой и существенно будет тормозить загрузку страницы. Поэтому файлу нужно сделать компрессию — уменьшить её вес. Без потери качества это можно сделать на сервисе tinypng.com

Ну, а на этом, я закончу писАть, и дам возможность поблагодарить меня поделившись статьёй в Социальных Сетях. Вам не сложно, мне приятно, а Блогу полезно!

Всё ребят, спасибо что читаете.

Всегда с Вами,
Евгений Назаров.

Понравилась статья? Поделись ею в Соц. Сетях.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*