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

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

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

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

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

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

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

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

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

• BeFunky;

• Fotor;

• Picasa;

• Photoscape;

• PhotoGrid;

• Pizap;

• Funny Photo Maker

• Layout;

• Collageit;

• Collagerator;

• iPiccy

• PhotoMix Collage;

• TurboCollage;

• Мастер Коллажей;

• AKVIS Chameleon;

• SmileBox;

• Magic Collage.

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

• Photovisi.com

• Collages.ru

• Canva

• Fotor.com

• Avatan.ru

• Fotoram.io

• Holstprint.com

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

Пример:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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