Баннеры для социальных сетей
Правила оформления баннеров, рассылок для социальных сетей.
Как подготовить изображения для баннера?
Если у вас есть вопросы, вы можете написать нам:
Вопросы по текстам
Алексей Шилкин: alexsey.shilkin@ru.axxonsoft.com
Азрет Тебердиев: azret.teberdiev@ru.axxonsoft.com
Вопросы по дизайну
Павел Черенков: pavel.cherenkov@ru.axxonsoft.com
Нина Слипченко: nina.slipchenko@ru.axxonsoft.com
Вы можете использовать как произвольную цветовую палитру, так и палитру логотипа. Количество активных цветов (цветовых акцентов) должно быть не больше 3. Ориентируйтесь на примеры, приведенные ниже.
Обратите внимание, что мы не используем полностью белый фон (#FFF), потому что основным цветом социальных сетей является белый. Чтобы ваше изображение выделялось в ленте новостей — оно должно быть контрастным. В примерах вы можете найти как комбинировать цвета и формы для нужного результата.
Заглавный знак (аватарка) для соцсетей
Данный знак используется как аватарка или userpic для соц. соцсетей. В архиве вы найдете различные варианты знака для поулярных сетей.
«Авангардный» стиль
Давайте проанализируем составной макет баннера в стиле авангард. Баннер продвигает камеру известного бренда.
Определим основу баннера, ee форму и цвет. На этой основе будет строится вся композиция. Хороший выбор для цвета основы — цвет букв логотипа компании.
Следующий слой определяет дополнительные акцентные цвета и фигуры. На этом слое вы должны построить основной фон баннера.
Заключительный фоновый слой расставляет акценты, объединяет композицию фона.
Основные смысловые изображения (камеры, устройства и прочее) располагаются над сформированным ранее фоном. Фон нужно откорректировать, если изображения плохо видно. После этого вы должны задать заголовок баннера (при необходимости) и разместить дополнительные логотипы.
Для смыслового изображения нужен исходник в формате PNG на прозрачном фоне. К изображению следует применить фильтр «Desaturate» (рис. 1), а затем применить фильтр «Шум» (рис. 2). Настройки фильтра (рис. 3) зависят от исходного изображения.
Рис. 1
Image > Adjustments > Desaturate
После десатурации, изображение может приобретать коричневый оттенок. Используйте настройки цветвого баланса, чтобы получить необходимый нейтральный цвет.
Рис. 2
Filter > Noise > Add Noise…
Главное, чтобы зерно и шум на итоговой картинке были очень маленькими и едва заметными. Зерно не должно образовывать клякс.
Рис. 3
Filter settings «Add noise»
Кроме того, вы можете экспериментировать с такими настройками, как: Яркость / Контрастность и Уровни.
Логотип ITV Group. Используется на светлом фоне. Желательно, чтобы логотип располагался в постоянном месте, тогда все изображения в ленте новостей будут выглядеть гармонично и легко читаться.
Для темного фона нужно использовать специальную версию логотипа. Не удаляйте слоган под логотипом, даже если кажется, что его трудно увидеть на картинке.
Очень важная вещь в дизайне — это шрифты. Нужно использовать шрифт, который вы скачаете по ссылке ниже. Обратите внимание, что каждый шрифт лицензирован. Использование этих шрифтов в личных целях запрещено.
«Стандартный» стиль
Раскладка элементов в стандартном баннере — намного проще. Баннер состоит из фонового изображения и информационного слоя.
Фон может быть темным или светлым, но не белым. Расположение фоновой картинки не регламентировано.
Текст должен быть контрастным к фону. Важные элементы могут выделяться блоками.
- На этой странице вы можете увидеть правила использования логотипов.
- Посмотреть и скачать шрифты,которые вы можете использовать в дизайне.
В другом примере баннера мы можем видеть деление площади баннера на 2 четких блока — информационный и графический
Информационный блок обязательно содержит логотип и главный заголовок. Может содержать поясняющий текст.
Графический блок может быть абстрактным или представлять собой тематическую картинку.
Шаблоны «Стандартных» баннеров
Здесь вы можете скачать шаблоны в формате Adobe XD. Изображения и текст в шаблоне являются примерными и их необходимо заменить.
Специальные шаблоны
Пост со скриншотом (продукта)
Ресурсы для баннера
Если для оформления скриншота вам нужны изображения устройств: телефона, компютера или ноутбука. Вы можете скачать шаблоны устройств в формате PSD или PNG.
Скачайте шаблон в формате PSD (Adobe Photoshop).
Вы можете разместить скриншот, изменить любой цвет, а также повернуть и изменить положение любого объекта.
Пример баннера со скришотом
Шаблон со скриншотом в ноутбуке
Основной цвет
#053b79 (основа)
Дополнительный цвет
#0194e0
Цвет акцентов
#6f4add
Цвет фона
#e8ebef (фон)
Пост с логотипом продукта
Ресурсы для баннера
Все продуктовые логотипы вы можете найти на этой странице.
Скачайте шаблон в формате PSD (Adobe Photoshop).
Вы можете разместить логотип продукта, изменить любой цвет, а также повернуть и изменить положение любого объекта.
Пример баннера с логотипом
Шаблон с логотипом программного продукта
Основной цвет
#053b79 (основа)
Дополнительный цвет
#ffffff (белый)
Цвет акцентов
#2ee0d1
Цвет фона
#e8ebef (фон)
Пост с иконкой фичи продукта
Ресурсы для баннера
Вы можете найти актуальные иконки фич по данной ссылке
Скачайте шаблон в формате PSD (Adobe Photoshop).
Вы можете разместить иконку фичи, изменить любой цвет, а также повернуть и изменить положение любого объекта.
Пример баннера с иконкой фичи
Шаблон с иконкой фичи
Основной цвет
#053b79 (основа)
Дополнительный цвет
#0194e0
Цвет акцентов
#e57b63
Цвет фона
#e8ebef (фон)
Анонс выставки
Ресурсы для баннера
Используйте эффектные фотографии местности или города, где будет проходить выставка. Вы можете использовать данный шаблон для своего баннера, просто замените фотографию и укажите корректный заголовок, номер стенда, даты проведения выставки.
Скачайте шаблон в формате PSD (Adobe Photoshop).
Вы можете заменить фотографию, изменить любой цвет и текст, а также повернуть и изменить положение любого объекта.
Пример баннера с анонсом выставки
Шаблон с анонсом выставки
Основной цвет
#053b79 (основа)
Дополнительный цвет
#ffffff (белый)
Цвет акцентов
#2c94ff
Цвет фона
#e8ebef (фон)