Если раньше коллажи использовались больше в домашнем декоре, то сейчас это незаменимый атрибут на сайтах, в письмах, в соцсетях и контекстной рекламе.
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.
Отдельно стоит сказать о кнопке “Уравнять”. Она делает ширину контейнеров в структуре одинаковой, таким образом избавляя пользователя от математических вычислений, все получается быстро, красиво, и ровно.
Если нажать кнопку “уравнять”, то заблокируются поля для изменения размеров контейнеров, т.к. они уже приведены к равным значениям.
Чтобы разблокировать доступ к редактированию параметра ширины контейнеров, достаточно еще раз нажать на кнопку “уравнять” и блокировка отключится.
Обрезать/отредактировать картинку для коллажа
Даже если ваши картинки для коллажа не подходят по размеру для группировки в коллаж, съезжают или неровно становятся. Во встроенном фоторедакторе их можно подкорректировать.
Нужно помнить:
- Кадрируя картинку, мы обрезаем ненужное ее содержимое по желаемому размеру;
- Меняя размер - просто масштабируем без потери частей изображения.
Создавать крутые коллажи для писем не так уж сложно. Пробуйте, вдохновляйтесь нашими примерами и делитесь результатами. О других классных способах создания коллажей пишите в комментариях :)