Лайфхаки для оформления историй
Советы и инструкции к приложениям.

Дизайн во встроенном редакторе сторис в Инстаграм.

Чтобы сократить время на создание историй, используйте возможности редактора сторис в Инстаграм.

Что можно сделать с его помощью:

  1. Тонкие / толстые линии. С их помощью можно разделять абзацы, использовать их как декор, подчеркивать слова, выделять абзацы.

2. Стрелки. Как классические, так и с точками на концах. Таким образом можно подписывать детали на фото, указывая стрелками на них, использовать их как разделители.

3. Быстро создавать фон. Для репоста и просто для ваших сторис.
1. Как сделать линии и стрелки.
Используйте второй шрифт для толстых линий и третий для тонких.
2. Затемненный фон.
Используйте второй шрифт с включенной подложкой. Если у вас Айфон, то у вас достаточно одного знака, чтобы растянуть прозрачную подложку на весь фон. Если у вас Андроид — вам нужно использовать пробелы, как показано в примере ниже. Скопируйте их несколько раз, чтобы получившийся прозрачный прямоугольник можно было растянуть на всю историю.
3. Еще несколько вариантов фона.
Используйте последний шрифт с включенной подложкой, чтобы растянуть его так же, как и полупрозрачную. Таким образом можно разместить получившийся прямоугольник на половину истории, совместив его, например, с затемненным. Или сделать из него подложку для текста, как в примере ниже.

Иерархия в тексте.

Чтобы текст в истории смотрелся гармонично, важно соблюдать несколько правил:

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

2. Принцип близости. Если у вас есть два абзаца, связанные по смыслу, то отступ между ними должен быть меньше, чем отступ от следующего блока текста. На втором примере показано, как быть не должно. Отступ слишком большой и логика в структуре текста теряется. Это касается и соседства текста с другими элементами.

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

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

4.Выравнивание. Текст, выровненный по левому краю, проще считывать, чем текст, выровненный по центру. Безусловно, есть случаи, когда нужно разместить фразу или слово именно по центру. Но если вы работаете с большим, по меркам сторис, текстом, то лучше не использовать выравнивание по центру. Постоянно обрывающиеся края мешают легкому восприятию информации.

PNG-файлы для историй. Где взять и как искать.

PNG – формат изображений, который работает с полноцветными изображениями, использует сжатие без потерь и позволяет сохранять прозрачность.

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

Именно этот формат используется при сохранении картинок, когда мы удаляем фон в диалогах, сохраняем полупрозрачный тест в Over или копируем стикеры из приложения Шрифты (iOS). Поэтому, если вы видите, что приложение дает выбрать, в каком формате сохранить изображение – выбирайте PNG, если нужно, чтобы оно было без фона.

В интернете масса изображений, которые уже вырезаны за нас. Их легко и удобно скачивать, чтобы использовать сразу в историях. Чтобы найти нужный стикер в таком формате, вбейте в любом поисковике «ключевое слово + png».
Например, «рука png». Ниже можно увидеть результат такого запроса. Осталось выбрать необходимое изображение, скачать и добавить к себе в сторис через стикер.

Кстати, именно так была найдена рука в одном из примеров выше.

Полезные ресурсы.

Ленаголд — сайт, на котором можно найти много стикеров, все они распределены по алфавиту. Скачивание бесплатное.
Colorscheme — сервис для работы с цветовым кругом. Тут можно легко подобрать палитру для ваших историй.
pigment.shapefactory— сервис для подбора цветовых пар.
remove.bg— сервис для быстрого удаления фона. Работает не всегда идеально, но очень упрощает процесс создания стикеров.

Инструкции по оформлению в приложениях.

1
Как сделать блюр на фото
  • В InShot
  • В PicsArt
  • В Snapseed
2
Как сделать блюр на видео
  1. В Inshot принцип такой же, как и с фото в инструкции выше.
2. В CapCut. Для этого создайте проект, перейдите во вкладки Effects — Основные. Там есть несколько вариантов эффекта: Размытие, Размытие и приближение, Мягкий фокус, Размытость.
3
Текст по кругу
Для этого понадобится приложение Over.

1. Создайте новый проект без фона, то есть с прозрачным.
2. Перейдите во вкладку Text, наберите необходимое слово / фразу, выберите настройки шрифта.
3. Затем, находясь во вкладке работы с текстом, перейдите во вкладки Style — Curve. И скруглите текст так, как нужно.
4. Сохраните полученный результат в формате PNG (чтобы фон остался прозрачным).
4
Вращающийся текст по кругу
Чтобы анимировать текст по кругу и заставить его крутиться, понадобится приложение CapCut.

1. Создайте новый проект и добавьте фон.
2. Перейдите во вкладку Stickers и добавьте круг, который был создать в Over. Расположите его в нужном месте.
3. Перейдите во вкладки Animation — Loop, и выберите эффект Повернуть. Настройте скорость и сохраните видео.
5
Как сделать обводку текстом вокруг объекта
Для этого понадобится приложение Meitu.

  1. Добавьте нужное фото и перейдите к редактированию.
  2. Выберите вкладку Magic Brush. А затем, кисть Custom.
  3. Введите текст, который будет в обводке. Если это одно слово, то оно будет постоянно повторяться.
  4. Определитесь с цветом, шрифтом и размером.
  5. Обведите нужный вам объект. В нашем случае это печенька.
Так можно обводить силуэт человека, десерта, добавлять такой текст в качестве фона и т.д.

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

Если добавлять текст / пунктир постепенно (например, по одному слову), каждый раз сохраняя картинку с прогрессом, то собрав фото в любом видеоредакторе выйдет анимация.
6
Фон градиент с шумом
Такой эффект сейчас можно встретить у многих. Сделать его можно несколькими способами. Например, используя только приложение PicsArt или встроенный редактор сторис + PicsArt.

  • PicsArt

1. Создайте документ с нужным фоном. Зайдите во вкладку Стикеры и вбейте в поиске «градиент». Если нужен конкретный цвет — добавьте в поиске.

2. Выберите наиболее подходящие круги с градиентом. Если есть подходящие другие фигуры с округлыми краями – их также можно брать.

3. Разместите фигуры на фоне и примените к ним эффект Размытие.
Сделать это нужно столько раз, сколько потребуется для того, чтобы фон и фигуры объединились и создали переходы.

4. Чтобы добавить шум перейдите во вкладки Эффекты — Эффекты — Noise.
    • Встроенный редактор сторис + PicsArt
    1. Зайдите в редактор сторис в Инстаграм и залейте фон нужным цветом. Выберите кисть, и подбирая близкие цвета, но каждый раз темнее / светлее или немного другого оттенка, рисуйте фигуры или пятна. Если закрашивать фон цветами постепенно, заполняя все в определенной последовательности, градиент получится мягче. Сохраните получившуюся историю в галерею.

    2. Перейдите в PicsArt. Примените к изображению эффект Размытие.
    Сделать это нужно столько раз, сколько потребуется для того, чтобы фон и фигуры объединились и создали переходы.

    3. Чтобы добавить шум перейдите во вкладки Эффекты — Эффекты — Noise.
    7
    Анимированные эмоджи
    Добавить их можно в приложении Meitu

    Зайдите в приложение, выберите Video Editing и загрузите нужное фото / видео. Перейдите во вкладку Stickers. Осталось только выбрать необходимые эмоджи.
    8
    Текст в видео за предметами
    Классный трендовый прием, который поможет выделить ваш рекламный макет. Сделать его довольно легко:

    1. В редакторе сторис или любом другом видеоредакторе добавьте текст на видео.
    Важно: Цвет текста, фона и предметов рядом должен отличаться. Потому что иногда, вместе с фоном, он убирает, очень близкие по цвету, предметы рядом.

    2. Загрузите видео в приложение CapCut.

    3. С помощью функции Overlay добавьте это же видео, но версию без текста. Важно: масштабы видео и его размещение должны совпадать.

    4. Выберите видео, которое вы добавили сверху и используйте функцию Remove background.
    9
    Удаление фона в диалогах
    Таким образом классно показывать отзывы в рекламном макете.

    У iOS это приложение Magic Eraser.
    У Android «Фоновый ластик: PNG & Белый фон, обрезка фото» от Lyrebird Studios.

    Ниже инструкция по работе с приложением на Android. Принцип работы с приложением на iOS такой же.

    1. Загрузите скрин диалога и кадрируйте так, чтобы остались только нужные элементы переписки.
    2. Выберите вкладку Авто, наведите кисть на фон и нажмите на него. Появившимся бегунком можно проявить недостающие детали, такие как подложка у сообщений. Лишние детали легко убрать ластиком.
    3. Чтобы убедиться в ровности краев, можно применить Сглаживание. Но не ставьте сразу максимальное значение. Лучше протестировать необходимую интенсивность эффекта.
    10
    Сделать стикер во время съемки
    ClipDrop — приложение, которое позволяет сделать стикер из фотографируемого объекта моментально. После, им сразу можно поделиться в другие приложения.

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

    Бесплатно предоставляется 10 кадров. Стоимость подписки: 900 руб / месяц. Или 3 600 руб / год.

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

    После создания стикера он автоматически сохраняется в галерею.
    11
    Создание паттернов, в том числе анимированных
    В приложении Patternator можно загрузить уже готовый свой стикер либо создать его там же из изображения. Но второй вариант рекомендуем меньше — лучше сделать это в приложениях (Bazart / PicsArt / PicsKit) или сервисах, которые заточены под это и справятся с работой быстрее (например, в https://www.remove.bg/ru)

    Чтобы сохранить анимированный паттерн, при сохранении выберите опцию Сохранить видео. Иначе, если нажать просто Сохранить, из вашего видео получится стоп-кадр.
    12
    Поместить видео в круг и другие формы
    Используйте приложение CapCut. С помощью вкладки Overlay добавьте видео на фон и примените к нему Mask.
    13
    Полупрозрачный текст
    Используйте приложение Studio (бывший Over). Создайте новый документ без фона, добавьте текст и уменьшите показатель Opacity.
    14
    Функции, которые помогут сделать видео для вашего макета интереснее
    1. Переходы. Тут важно не перемудрить, но есть действительно интересные переходы, которые помогут добавить динамики в ваш рекламный ролик или поддержать задумку. Например, эффект моргания, как будто вы видите картинку от первого лица, классные динамичные переходы или глитч эффект при переходе.

    Такие переходы есть в приложениях InShot / CapCut / VideoLeap / VN.
    Как добавить переход на видео показываем на примере приложения CapCut.
    2. Еще один классный прием, которые сделает видео интереснее — это ускорение с помощью кривых. Что это значит? Вы можете управлять, на каких отрезках и как быстро будет происходить ускорение / замедления видео. Совсем недавно, обработка видео в таком стиле была очень популярна, особенно в ТикТоке.

    Все это также можно сделать в CapCut / VN или приложении, где есть кривые.
    3. Обратное воспроизведение видео. Особенно классно смотрится в случаях с макетами, где десерт ломают / сминают. Также, будет круто смотреться, если в видео происходят какие-то яркие и эффектные моменты, которые хорошо заметны. Например, украшение кремом капкейков, посыпка декором и тд.

    Такие эффекты есть в CapCut / VN / InShot. Иногда, функция называется Обратное или Reverse.
    15
    Интересные эффекты для видео
    Вовремя примененный эффект выделит и сделает макет интереснее.

    • Prequel
    • CapCut, с классными эффектами расфокуса и эффекта мятой бумаги, журнала, пленки
    • Vochi, в котором эффект можно применить к отдельному предмету на видео
    • Tezza, в котором классные пылинки и возможность сделать видео в стиле стоп-моушен
    • Glitch, в котором много ярких и разных глитч - эффектов, и не только.
    Made on
    Tilda