27 ноября 2018
24829
19 мин
5.00
Как сделать красивый коллаж для емейл-рассылки
В современном мире наш уставший мозг требует все оптимизировать и упрощать, чтобы иметь больше пространства и воздуха. Но отчаянная жажда эмоций и впечатлений берет верх и просит разнообразия. Казалось бы, неразрешимая дилемма. Как бы не так, наш козырь - коллаж, который поможет выразить эмоцию без претензии на большой объем.
В сфере искусства коллаж рассматривают как технику совмещения разнородных материалов и как способ самовыражения. Коллаж - это полноценная картина, которая имеет смысл, это ваше настроение! Главная задача коллажа - передать эмоциональную остроту и насыщенность. А основная его польза в колоссальной экономии места. С позиции маркетолога и дизайнера, всегда выгодно использовать коллаж - с его помощью можно красочно задать посыл и сэкономить пространство под другой контент.
Как сделать коллаж из фото?
Допустим есть серия снимков с отдыха, мероприятия, выставки, фотосессии и т.д. Тяжело порой выбрать из них “ту самую”, которая способна отразить суть события и рассказать всю историю. Выходим из ситуации - создаем фотоколлаж. Креативных идей для реализации превеликое множество:
-
применение разных типов наложения фотографий;
-
комбинированием прозрачности изображений;
-
совмещение цветовых контрастов;
-
мозаика;
-
пазл.
Фантазии авторов безграничны, здесь уже вам карты в руки. Помимо разных методов отображения, можно варьировать количество фото.
С созданием коллажа из фото справится как могучий Adobe Photoshop, так и его аналоги GIMP, Photo Pos Pro, Photoshop Online и др. Чтобы создать такое изображение не обязательно даже привязываться к типу устройства, формату и т.д. Любая программа для обработки фото отлично подойдёт и для создания коллажей.
Приложения для создания коллажей на телефон:
Oнлайн коллажмейкеры и сервисы
На сайте Freepik.com регулярно публикуют множество шаблонов для красивых коллажей. Большинство доступны для бесплатного скачивания.
Пример:
Здесь вы можете скачать шаблоны для любых фотоколлажей: как из множества фотографий, так и из нескольких фото, чтобы не перегружать композицию.
Примеры использования коллажей
Если раньше коллажи использовались больше в домашнем декоре, то сейчас это незаменимый атрибут на сайтах, в письмах, в соцсетях и контекстной рекламе.
1) Оформление сайтов с помощью коллажей из фото:
Какие мы видим плюсы от применения коллажей в оформлении веб-сайта:
-
Эффективное использование свободного пространства: группируя категории либо совмещая баннеры в одну полосу, можно акцентировать посыл и экономить место.
-
Внешний эстетизм: правильно подобранные по стилю фото в коллаже смотрятся свежо - всегда приятно смотреть на вещи, созданные со вкусом.
2) Как используют коллажи соцсети
Tumblr.com дает превью интересных блогов в виде коллажа. Это помогает пользователю еще до регистрации понять что его ждет и стоит ли пользоваться данной сетью.
Snapchat показывает ленту новостей коллажом таким образом, что истории напоминают стену из кирпичиков.
Pinterest превосходно экономит место, располагая ленту главной страницы в 5 колонок. Превью пинов адаптируются по ширине колонки. Таким образом на экране формируется большое количество картинок, а взгляда пользователя касается в 5 раз больше контента.
3) Коллажи в контекстной рекламе
Вряд ли кого удивишь коллажами из фото товаров в контекстной рекламе. Это достаточно выгодное решение расположить на минимальном пространстве максимально возможное количество акционных предложений.
Компания “Шины&Диски” заполнили все свое место крупными фотографиями товаров и миниатюрным лого на белом фоне. Зимняя, летняя резина - товары сезонные. В такой рекламе важно просто напомнить о себе и заявить о широком ассортименте.
В туристическом бизнесе помимо фотографий туров, важна дополнительная информация, иначе пользователям просто будет непонятно что им предлагают.
На двух примерах контекстной рекламы мы видим:
-
Одна компания использует свободное место полностью под картинки.
-
Другая - сопровождает рекламные фото уточняющим текстом и кнопками СТА.
И та и другая подача способны дать хороший результат в своей сфере, а расположение коллажом здесь служит для хорошей наглядности и удобной компоновки.
4) Коллажи в емейл-рассылках
Красивые и нетривиальные инфоблоки в письме - мечта каждого маркетолога. Достаточно совместить в коллаж два или три фото, и инфоблоки преображаются.
Композиция готового образа
Емейл-рассылка компании ALDO с подборками летних нарядов.
Подписчик в большинстве случаев не знает будет ли сочетаться сумочка с платьем, или какой образ выбрать на каждый день.
В этом письме с помощью коллажей решены сразу две задачи:
-
Дать фото как выглядит образ в композиции с обувью и аксессуарами.
-
Показать как выглядят аксессуары вблизи.
Текстовое описание выбранных товаров
Комбинирование текстового блока + фото товаров в промописьме компании Witt.
Первое, что притягивает взгляд в письме - “летающие” изображения товаров, оформленные в фотоколлаж с текстом. Удачный выход, если нужно акцентировать внимание на особых категориях товара.
Праздничная подборка
Письмо компании Butik.ru, приуроченное ко Дню Святого Валентина. Фешн бренды активно пользуются коллажами в рассылках. Обратите внимание, как в этом письме много “воздуха”.
Коллажи на белом фоне, немного правильных отступов, удачно подобранные фото + щепотка текста о преимуществах - вот рецепт фешн-блока такого письма. При подаче полностью удовлетворяется потребность клиента присмотреться к деталям, все уже показано, как на ладони.
Как сделать красивый коллаж в емейл-рассылке?
Так как существует много видов писем, просторы для творчества также широки. Мы можем применить коллажи не только к дизайну всего письма, а и задать акценты только к отдельным блокам. Давайте рассмотрим решения:
1) Оформляем карточку товаров
О важности “вкусной” карточки товаров уже было сказано в статье Карточка товара для email рассылки. А вот как красиво можно оформить карточки товаров с использованием коллажа:
Блоки карточек товаров удобно группировать, располагая каскадом, играть с высотой расположения картинок, углом наклона. Главное - не переусердствовать с такими эффектами. Важно, чтобы карточка товара за вычурным дизайном не потеряла свою лаконичность.
2) Создание баннера
В письмах часто встречается картинка в фоне, которая, в комбинации с другими блоками, выглядит как баннер, но функции его не исполняет. Рассмотрим пример использования такого баннера в рассылке:
Здесь мы видим хороший акцент на цветное изображение товара, наложенное на черно-белый пример использования вещи. Шахматное расположение картинок в блоках помогает избежать эффекта монотонности восприятия.
Создать красивый коллаж
3) Использование коллажа в блоках с промокодами
Хочется, чтобы блок с промокодом был необычным и выразительным. А как выгодно его подать? - Совместить с картинкой или гифкой, оставив его текстовым. Избавьте подписчика от необходимости запоминать промокод, пусть просто его скопирует.
Продумывая дизайн письма с коллажами, не требуйте от себя сверхъестественного. Чтобы письмо выглядело стильно, достаточно грамотно подобранной цветовой гаммы, декоративного шрифта и чувства меры :)
У вас уже есть желание добавить в рассылки разнообразные коллажи из картинок? Давайте рассмотрим как можно создать коллаж из нескольких структур или блоков для емейл-рассылок.
Как сделать красивый коллаж в редакторе eSputnik
Покреативить с базовыми блоками в редакторе достаточно просто. Коллажи из картинок можно создать с помощью одной или нескольких отдельных структур, а особо сложные - из нескольких структур с последующим объединением их в одну полосу.
Для придания акцента композиции из картинок, можно задать фон структур. Он выделит картинки в письме и привлечет внимание. Фон рекомендуем подбирать в вашем корпоративном стиле.
Добавлять фоновый цвет или изображения можно к блокам, структурам или целой полосе. Читать подробнее: Как добавить фон в письме
Рассмотрим 2 типа коллажей:
-
Из четырёх картинок
Интересную структуру можно создать с помощью двух контейнеров, в каждом из которых по два блока. Игра размеров и отступов происходит в меню:
сначала задаем размеры и отступы для структуры, потом для блоков контейнеров.
В примере отступы по 10 рх сверху можно задать либо только нижним блокам, либо по 10 px снизу только верхним двум. Остальные должны остаться с нулевыми отступами.
-
Из пяти картинок
Такой коллаж можно составить при помощи двух структур:
Внутри структур все контейнеры (это блоки с самими картинками) лучше сделать с нулевыми отступами, а отступы для структур задать вертикально-отзеркаленными. Это означает, что по отношению к линии соприкосновения, значения отступов будут одинаковыми у обеих структур:
-
слева и справа 20 px;
-
сверху у верхней и снизу у нижней 20 px;
-
сверху у нижней и снизу у верхней 5 px.
Отдельно стоит сказать о кнопке “Уравнять”. Она делает ширину контейнеров в структуре одинаковой, таким образом избавляя пользователя от математических вычислений, все получается быстро, красиво, и ровно.
Если нажать кнопку “уравнять”, то заблокируются поля для изменения размеров контейнеров, т.к. они уже приведены к равным значениям.
Чтобы разблокировать доступ к редактированию параметра ширины контейнеров, достаточно еще раз нажать на кнопку “уравнять” и блокировка отключится.
Обрезать/отредактировать картинку для коллажа
Даже если ваши картинки для коллажа не подходят по размеру для группировки в коллаж, съезжают или неровно становятся. Во встроенном фоторедакторе их можно подкорректировать.
Нужно помнить:
-
Кадрируя картинку, мы обрезаем ненужное ее содержимое по желаемому размеру;
-
Меняя размер - просто масштабируем без потери частей изображения.
Создавать крутые коллажи для писем не так уж сложно. Пробуйте, вдохновляйтесь нашими примерами и делитесь результатами. О других классных способах создания коллажей пишите в комментариях :)