Фотоколлажи для email рассылок

Как сделать красивый коллаж для емейл-рассылки

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 4 средняя оценка: 5 (рейтинг: 100%)

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

фотограф и фотоколлаж


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

Как сделать коллаж из фото?

Допустим есть серия снимков с отдыха, мероприятия, выставки, фотосессии и т.д. Тяжело порой выбрать из них “ту самую”, которая способна отразить суть события и рассказать всю историю. Выходим из ситуации - создаем фотоколлаж. Креативных идей для реализации превеликое множество: 

  • применение разных типов наложения фотографий;
  • комбинированием прозрачности изображений;
  • совмещение цветовых контрастов;
  • мозаика;
  • пазл.

Фантазии авторов безграничны, здесь уже вам карты в руки. Помимо разных методов отображения, можно варьировать количество фото. 

С созданием коллажа из фото справится как могучий Adobe Photoshop, так и его аналоги GIMP, Photo Pos Pro, Photoshop Online и др. Чтобы создать такое изображение не обязательно даже привязываться к типу устройства, формату и т.д. Любая программа для обработки фото отлично подойдёт и для создания коллажей.

Приложения для создания коллажей на телефон:

Oнлайн коллажмейкеры и сервисы

На сайте Freepik.com регулярно публикуют множество шаблонов для красивых коллажей. Большинство доступны для бесплатного скачивания.
 

Пример:

коллаж из фото в рамках

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

Примеры использования коллажей

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

1) Оформление сайтов с помощью коллажей из фото:

оформление сайтов с помощью колажей из фото

  Какие мы видим плюсы от применения коллажей в оформлении веб-сайта:

  • Эффективное использование свободного пространства: группируя категории либо совмещая баннеры в одну полосу, можно акцентировать посыл и экономить место.
  • Внешний эстетизм: правильно подобранные по стилю фото в коллаже смотрятся свежо - всегда приятно смотреть на вещи, созданные со вкусом.

2) Как используют коллажи соцсети

Tumblr.com дает превью интересных блогов в виде коллажа. Это помогает пользователю еще до регистрации понять что его ждет и стоит ли пользоваться данной сетью.

как использует коллажи tumblr

Snapchat показывает ленту новостей коллажом таким образом, что истории напоминают стену из кирпичиков.

как используются коллажи в snapchat

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

 

Pinterest. отображение фото в ленте коллажом

3) Коллажи в контекстной рекламе

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

контекстная реклама Шины&Диски

Компания “Шины&Диски” заполнили все свое место крупными фотографиями товаров и миниатюрным лого на белом фоне. Зимняя, летняя резина - товары сезонные. В такой рекламе важно просто напомнить о себе и заявить о широком ассортименте.

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

Booking контекстная реклама

На двух примерах контекстной рекламы мы видим:

  • Одна компания использует свободное место полностью под картинки.
  • Другая - сопровождает рекламные фото уточняющим текстом и кнопками СТА.

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

4) Коллажи в емейл-рассылках

Красивые и нетривиальные инфоблоки в письме - мечта каждого маркетолога. Достаточно совместить в коллаж два или три фото, и инфоблоки преображаются.

Композиция готового образа

Емейл-рассылка компании ALDO с подборками летних нарядов.

 

подборка летних нарядов ALDO

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

В этом письме с помощью коллажей решены сразу две задачи:

  1. Дать фото как выглядит образ в композиции с обувью и аксессуарами.
  2. Показать как выглядят аксессуары вблизи.

Текстовое описание выбранных товаров

Комбинирование текстового блока + фото товаров в промописьме компании Witt.

текстовое описание выбранных товаров

Первое, что притягивает взгляд в письме - “летающие” изображения товаров, оформленные в фотоколлаж с текстом. Удачный выход, если нужно акцентировать внимание на особых категориях товара.

Праздничная подборка

Письмо компании Butik.ru, приуроченное ко Дню Святого Валентина. Фешн бренды активно пользуются коллажами в рассылках. Обратите внимание, как в этом письме много “воздуха”.

 рассылка Butik.ru ко Дню Святого Валентина

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

Как сделать красивый коллаж в емейл-рассылке?

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

1) Оформляем карточку товаров

О важности “вкусной” карточки товаров уже было сказано в статье Карточка товара для email рассылки. А вот как красиво можно оформить карточки товаров с использованием коллажа:

 пример использования коллажа в карточке товара

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

пример группировки карточек товаров

 

2) Создание баннера

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

пример письма с применением коллажа из баннеров под текстом

Здесь мы видим хороший акцент на цветное изображение товара, наложенное на черно-белый пример использования вещи. Шахматное расположение картинок в блоках помогает избежать эффекта монотонности восприятия.

3) Использование коллажа в блоках с промокодами

Хочется, чтобы блок с промокодом был необычным и выразительным. А как выгодно его подать? - Совместить с картинкой или гифкой, оставив его текстовым. Избавьте подписчика от необходимости запоминать промокод, пусть просто его скопирует.

  пример использования коллажа в блоке с промокодом

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

 простая и стильная рассылка с коллажом

У вас уже есть желание добавить в рассылки разнообразные коллажи из картинок? Давайте рассмотрим как можно создать коллаж из нескольких структур или блоков для емейл-рассылок.

Как сделать красивый коллаж в редакторе eSputnik

Покреативить с базовыми блоками в  редакторе достаточно просто. Коллажи из картинок можно создать с помощью одной или нескольких отдельных структур, а особо сложные - из нескольких структур с последующим объединением их в одну полосу. 

 полоса с коллажом

Для придания акцента композиции из картинок, можно задать фон структур. Он выделит картинки в письме и привлечет внимание. Фон рекомендуем подбирать в вашем корпоративном стиле.

добавление фона в коллаж

Добавлять фоновый цвет или изображения можно к блокам, структурам или целой полосе. Читать подробнее: Как добавить фон в письме

Рассмотрим 2 типа коллажей:

  • Из четырёх картинок

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

настройки для коллажа из четырех фото

В  примере отступы по 10 рх сверху можно задать либо только нижним блокам, либо по 10 px снизу только верхним двум. Остальные должны остаться с нулевыми отступами.

задание отступов коллажу из четырех картинок

  • Из пяти картинок

Такой коллаж можно составить при помощи двух структур:

коллаж из пяти картинок

Внутри структур все контейнеры (это блоки с самими картинками) лучше сделать с нулевыми отступами, а отступы для структур задать вертикально-отзеркаленными. Это означает, что по отношению к линии соприкосновения, значения отступов будут одинаковыми у обеих структур:

  • слева и справа 20 px; 
  • сверху у верхней и снизу у нижней 20 px;
  • сверху у нижней и снизу у верхней 5 px.

 зеркальные отступыотступы структуры

Отдельно стоит сказать о кнопке “Уравнять”. Она делает ширину контейнеров в структуре одинаковой, таким образом избавляя пользователя от математических вычислений, все получается быстро, красиво, и ровно.

Если нажать кнопку “уравнять”, то заблокируются поля для изменения размеров контейнеров, т.к. они уже приведены к равным значениям. 

уравнять контейнеры до

Чтобы разблокировать доступ к редактированию параметра ширины контейнеров, достаточно еще раз нажать на кнопку “уравнять” и блокировка отключится.

уравнять контейнеры после

Обрезать/отредактировать картинку для коллажа

Даже если ваши картинки для коллажа не подходят по размеру для группировки в коллаж, съезжают или неровно становятся. Во встроенном фоторедакторе их можно подкорректировать.

Нужно помнить: 

  1. Кадрируя картинку, мы обрезаем ненужное ее содержимое по желаемому размеру; 
  2. Меняя размер - просто масштабируем без потери частей изображения.

видео как создать коллаж в редакторе 

 

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

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

Как сделать красивый коллаж для емейл-рассылки