<
  • Главная
Статьи

Види банерів для публікації постів

  1. ТЕКСТ + ФОН
  2. ТЕКСТ + ЗОБРАЖЕННЯ
  3. 1. Накладення напівпрозорого фону на зображення
  4. 2. При повному або частковому розмиття зображення
  5. 3. Розташування тексту на однорідних частинах фотографії
  6. 4. Розташування тексту або його частини на плашки
  7. ТЕКСТ + ЗОБРАЖЕННЯ + ФОН
  8. Розташування тексту щодо фотографії

При оформленні постів в більшості випадків використовується текст, нанесений поверх картинки. Бажано, щоб текст чітко формулював основне смислове навантаження або доповнював її. В якості картинки може бути просто фон або фотографія. Різні поєднання цих трьох елементів - текст, зображення, фон - дають нам три основних види банерів:

  • Текст + фон
  • Текст + зображення
  • Текст + зображення + фон

Всі інші види - це похідні від основних трьох, хоч і здається, що різновидів дуже багато. У кожного виду є свої особливості, але найголовніше, чого потрібно домогтися - щоб текст легко зчитується. У переважній більшості випадків це досягається за рахунок створення контрасту між текстом і фоном.

ТЕКСТ + ФОН

Це найпростіший у виконанні банер - ви просто берете будь-якої фон і розміщуєте на ньому текст. Фон може бути однотонний, з градієнтом, з дрібної текстурою або містити прості геометричні форми. Читаність тут забезпечується за рахунок контрасту за кольором між текстом і фоном.

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

Також, подібні банери можна використовувати для публікації цитат і відгуків

Завантажити набір psd-шаблонів «Текст + фон»

ТЕКСТ + ЗОБРАЖЕННЯ

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

Але розмістити текст на фотографії трохи складніше, ніж на простому фоні. На фотографіях буває багато дрібних деталей різних квітів, і, часом, текст на них втрачається і погано зчитується. Доводиться застосовувати деякі зусилля, щоб зрозуміти, що написано.

Розберемо основні способи, як це зробити правильно. Хочу підкреслити, що даний цикл статей розрахований не на дизайнерів, тому я розповім про найпростіші способи, які під силу того, хто хоч трохи орієнтується в Фотошопі. Навіть якщо ви не знаєте як застосувати той чи інший прийом, цю інформацію можна швидко знайти і вивчити. Складних дизайнерських штучок розбирати не будемо.

1. Накладення напівпрозорого фону на зображення

Якщо фотографія надто яскрава, або повністю в фокусі, на ній багато дрібних деталей, то домогтися читання можна, наклавши на неї напівпрозорий шар з кольором. Таким чином, ми досягаємо потрібного нам контрасту.

На першому прикладі текст в деяких місцях зливається з фотографією. Це важко читається. Щоб зробити додати фон (я роблю в Фотошопі), додайте поверх фотографії новий шар з кольорової заливкою і понизьте його прозорість. Щоб акцентувати увагу на тексті, я ще роблю невелике затемнення по краях, а серединку залишаю світліше. Візуально це привертає увагу до середини.

Колір накладеного фону може бути не тільки темним. Він може бути і світлим, і кольоровим, і навіть з градієнтом. Також, затемнити можна тільки частина фотографії, де буде текст.

Зверніть увагу, що на таких банерах використовувана фотографія як би «приглушується», вона служить просто фоновим доповненням, а основний акцент робиться на текстової складової. Чи не намагайтеся виділити відразу і текст, і фотографію. Погляд повинен чіплятися за щось одне, а потім переходити на додаткові акценти.

2. При повному або частковому розмиття зображення

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

3. Розташування тексту на однорідних частинах фотографії

Є фотографії з відносно однорідними за кольором і змістом частинами, на яких текст дуже добре розташовується без будь-яких зайвих маніпуляцій. Потрібно лише підібрати потрібний розмір тексту і контрастний колір.

4. Розташування тексту або його частини на плашки

Розташувавши текст на підкладці однорідного кольору, ви не тільки зробите його легко читаним, але і можете акцентувати увагу користувачів на певній фразі. Якщо плашка занадто велика, краще зробити її трохи прозорою. Текст буде читатися однаково, але зате не буде відчуття, що частина фотографії просто вирізана.

Завантажити psd-шаблони «Текст + зображення»

ТЕКСТ + ЗОБРАЖЕННЯ + ФОН

Цей вид банерів використовується, якщо текст не виходить розташувати на фотографії без втрати його читабельності. Частина банера заливається фоном, а інша частина відводиться під фотографію. Текст маємо на фонової частини.

Причому розташовувати фон щодо фотографії можна абсолютно різними способами - справа, зліва, зверху чи знизу, за допомогою будь-яких геометричних фігур. Цей вид банерів хороший тим, що легко зчитується і текст, і фотографія.

Цей вид банерів хороший тим, що легко зчитується і текст, і фотографія

Завантажити psd-шаблони «Текст + зображення + фон»

Розташування тексту щодо фотографії

Психологи відзначають, що в силу анатомічних особливостей нашого зору зображення, розташовані зліва, сприймаються швидше і легше зчитуються. Але у мене часто бували випадки, коли потрібно було розташувати зображення праворуч, а текст зліва. Ніяких різких стрибків і падіння конверсії ми з колегами не помітили. Але вирішили в подальшому провести «слідчий експеримент» і заміряти конверсію при різному розташуванні зображення на одному і тому ж банері. Як тільки ми отримаємо результати, обов'язково поділимося інформацією.

джерело



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью