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

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

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

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

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

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

ТЕКСТ + ФОН

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

джерело



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

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

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

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

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

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

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

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

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

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