прекрасних

Яке враження ви справляєте на блоги, в яких немає зображень чи неякісних фотографій?

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

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

Ви хочете знати, як? Продовжуйте читати.

Найкращі інструменти для оформлення зображень у блозі

Перш ніж розпочати розробку зображень вашого блогу, вам знадобляться деякі інструменти редагування. Доступно кілька безкоштовних та платних рішень:

Photoshop (платно)

Photoshop - це програмне забезпечення для редагування зображень для професіоналів. Photoshop, розроблений Adobe та частиною його набору інструментів Creative Cloud, чудово підходить для роботи з фотографіями (без сюрпризів!).

Illustrator (платно)

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

GIMP (безкоштовно)

GIMP - це безкоштовна альтернатива Photoshop. Хоча GIMP і не такий багатий на функції, як рішення Adobe, GIMP все ж є вражаючим інструментом. Щоб створити образи для публікацій у своєму блозі, цього має бути більш ніж достатньо.

Canva (безкоштовно та платно)

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

Що робить чудове зображення обкладинки/презентації?

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

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

Зображення

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

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

Вибір загальних образів

Що стосується зображень загалом, існує ряд сайтів, які пропонують різноманітні типи зображень, включаючи фотографії, векторні зображення та піктограми:

  • iStock (платно) - надає стокові фотографії, векторну графіку та значки, які, як правило, дуже хорошої якості
  • Shutterstock (платно) - надає високоякісні стокові фотографії, векторну графіку та значки, які також мають дуже хорошу якість
  • Freepik (Безкоштовний та платний) - цей сайт пропонує безліч безкоштовних та платних стокових фотографій, векторної графіки та значків
  • Canva (платно) - пропонує стокові фотографії, векторну графіку та значки за дуже низькою ціною для використання на їх платформі

Фотографії

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

Вектори пошуку та іконки

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

  • Vecteezy (Безкоштовно та платно) - цей веб-сайт пропонує цілий ряд векторної графіки та піктограм
  • Vectorstock (безкоштовно та платно) - на цьому веб-сайті також представлений широкий спектр векторної графіки та піктограм

Друкарня

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

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

Джерела постачання

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

  • 1001 шрифти - на цьому сайті є велика кількість безкоштовних шрифтів для особистого користування
  • Dafont - багато шрифтів, і багато з них безкоштовні у використанні
  • Fonts.com - надає послугу передплати для доступу до багатьох професійних шрифтів
  • Google Fonts - деякі люди можуть цього не знати, але ви можете фактично завантажити Google Fonts для використання у своїх робочих програмах

Колір

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

Концепція теорії асоціативної мережі полягає в тому, що кожна частина знань є вузлом, включаючи кольори. Поки ми живемо своїм життям і переживаємо різні переживання, між цими вузлами встановлюються зв’язки. Уявіть, ваші улюблені хлопчачі цукерки кислі та зелені. Завдяки великому впливу кислих та зелених цукерок, ви почнете будувати зв'язок між цим смаком та кольором.

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

Ви можете подумати: «Добре, чудово. Але як це допомагає мені вибрати колір? Ну, вибір правильного кольору активує певні вузли, які допоможуть посилити ваше повідомлення. Досить очевидний приклад, але уявіть, що ваш блог стосується грошей, фінансів та американського ринку. У США гроші зелені. Логічно, що одним із кольорів, який найбільше асоціюється з грошима, є зелений, і вибір цього кольору для зображень вашого блогу допоможе активізувати "вузол" грошей у свідомості ваших читачів.

Кольорові інструменти

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

  • Adobe Color - це кольорове коло, що надається Adobe, яке може забезпечувати різноманітні поєднання кольорів на основі різних правил
  • Paletton - це ще одне кольорове коло, подібне до Adobe
  • Палітра матеріалів - якщо ви дотримуєтесь принципів дизайну матеріалів компанії Google, ця веб-сторінка допоможе вам вибрати правильні поєднання кольорів

Створення обраного зображення в блозі за допомогою Canva

Ми розглянули різні елементи зображення вашого блогу. Тепер давайте застосуємо все це на практиці. Ми будемо використовувати Canva як онлайн-послугу, до якої може отримати доступ кожен. Наш приклад у блозі буде про "5 салатів менш ніж за 5 хвилин", і ми створимо для них образ.

Перш за все, вам доведеться записатися на Canva. Після цього підпишіться, і ваша інформаційна панель буде представлена ​​вам.

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

Ви побачите, що з’являються деякі поля для введення розмірів ширини та висоти. Ми будемо використовувати 670px у ширину та 377px у висоту. Ви можете використовувати розміри, необхідні для вашого блогу.

Клацніть Дизайн! і вам буде представлений екран, на якому ви будете розробляти образ вашого блогу. На панелі зліва ви побачите кілька варіантів дизайну. У цьому прикладі ми виберемо варіант окремого зображення, який є виділенням у верхньому лівому куті.

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

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

Коли зображення завершиться, ви можете просто перетягнути його на полотно. Фон нашого зображення вже завершений.

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

  1. Створіть накладання одного кольорового блоку з його прозорістю, встановленою на щось менше 100%, щоб зробити фонове зображення видимим
  2. Створіть елемент, який не заповнює фонове зображення

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

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

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

Для цього зображення коло змінено на білий, непрозорість зменшено до 85%, а коло зроблено трохи менше. Майте на увазі, що коли ви змінюєте розмір елементів, вони можуть знаходитись не в тому положенні, яке вони спочатку передбачали. Щоб перемістити елементи, просто наведіть на них курсор, клацніть і перетягніть.

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

Заголовок та підзаголовок будуть додані до нашого полотна. Після вибору текстового елемента з’являться різні варіанти редагування тексту. Сюди входять параметри шрифту, розміру шрифту та кольору тексту. Не соромтеся спробувати їх і подивитися, які з них здаються придатними для образу вашого блогу.

Цей підручник використовує Quicksand як шрифт для заголовка та підзаголовка. Колір шрифту встановлено на чорний, щоб контрастувати з білим фоновим колом. Розмір шрифту також трохи відрізняється: заголовок встановлений на 38,7, а підзаголовок - на 16,6.

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

Щоб додати дільник, клацніть Елементи а потім виберіть Рядки у меню ліворуч. З'являться різні типи ліній. Для цього підручника було обрано одну з пунктирних ліній. Клацніть на нього, і він додасть його на ваше полотно. Можливо, вам захочеться змінити розмір і розширити рядок.

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

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

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

Вибравши формат файлу та клацнувши Завантажити, ваше зображення буде збережено на вашому комп'ютері, щоб ви могли завантажити його у свій щоденник. Легко право! Після того, як ви зробили це кілька разів, ви можете створити привабливі професійні образи блогу менш ніж за 5 хвилин.

Ось остаточне зображення:

Створювати приголомшливі зображення для вашого блогу просто

Як бачите, створення зображень для вашого блогу не повинно бути трудомістким або дорогим.

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