Картинки для сайту: як підібрати правильно
Ви помітили, що ми говоримо "не почитай на сайті", а "подивися на сайті". Сайти ми любимо та сприймаємо насамперед візуально. Без картинок на сайті ніхто не присвятить і хвилину на ознайомлення з сайтом. Тільки якщо графічний контент оформлений якісно, ви втримаєте користувача на сайті. Тільки тоді користувачі цінуватиуть корисність та зручність сайту.
Щоб підібрати картинки для сайту, вам зовсім не потрібно бути архіваріусом інтернету або купувати дорогі фото. Достатньо знати, що і як шукати.
У цьому матеріалі ми розповімо: як вибрати красиві стильні безкоштовні фото та ілюстрації, на яких ресурсах їх завантажувати, як досягти стилістичної єдності фото для сайту, в які частини сторінки можна додавати зображення для сайту,
Що обрати: стокові фото, ілюстрації для сайту або фото від професійного фотографа
Перше, що вам потрібно знати. Правильної відповіді на це питання немає.
Робота зі стоковими фото швидка, зручна та дозволяє заощадити гроші. Але якщо вам потрібно показати свої товари чи послуги, стокові фото – не варіант. До того ж якщо ви не хочете зробити свій сайт шаблонним, вам потрібно переглянути сотні фотографій.
Ілюстрації потребують тривалого пошуку безкоштовних картинок для сайту (ілюстрацій на стоках менше, ніж фотографій). А замовлення ілюстрацій у діджитал-художника взагалі дорога справа. Якщо вам вистачить посидючості, і ви зможете підібрати всі ілюстрації в схожій стилістиці – ваш сайт буде характерним і незабутнім.
Фотограф створить унікальний контент саме про вас або про ваш продукт. Якщо ви замовляєте професійну зйомку, ви повинні розмовляти однією мовою з фотографом. Мова цього спілкування – технічне завдання (ТЗ). Про те, як скласти ТЗ для фотографа, ми розповімо нижче.
Де брати картинки для сайту: фото та ілюстрації
Свій сайт ви можете наповнити контентом з фотостоків із мільйонами безкоштовних картинок для сайту. Використовуючи фотостоки з безкоштовними зображеннями, ви не створите проблеми з авторськими правами.
Для пошуку фото ми рекомендуємо обирати Unsplash, Pexels, Pixabay, StockSnap, Freerange Stock. З цими фотостоками вам не потрібно вказувати авторів фотографій, згадувати джерело фото або платити роялті. Зображення можна використовувати в комерційних цілях і змінювати їх у будь-який спосіб. Пошук на стоках дозволяє застосовувати фільтри сортування професійних безкоштовних фотографій та вибирати потрібні вам тематики.
Ілюстрації на умовах безкоштовної ліцензії ви можете знайти на стоках Ouch.pics, Freepik, unDraw, Manypixels. Додатково шукати ілюстрації для сайту ви можете і на згаданих раніше фотостоках (там є також розділи з ілюстраціями). Якщо ви дуже хочете знайти ваші унікальні ілюстрації, шукайте їх через Google. Є буквально сотні сайтів із невеликими наборами безкоштовних картинок.
Безкоштовні стокові фото для сайту: як правильно шукати
Головне завдання під час пошуку зображень на фотостоках – бути небанальним і дотримуватись обранного стилю. Кілька порад допоможуть вам у цьому.
Використовуйте різні слова у запитах на стоку
Використовуйте різні комбінації ключових слів під час пошуку на фотостоках, доки результати не влаштовує вас. Не зупиняйтеся на перших результатах. Ці зображення можуть з'являтися на інших сайтах. Ви можете оцінити, наскільки блідими можуть бути фото за невинахідливими запитами.
Вище ви бачите фотографії, знайдені на фотостоку Unsplash за запитом “тренування”. Усі ці фото не мають характеру: посмішки, багато щастя та надмірна привітність. Хіба вам потрібні такі стерильні зображення?
А ось тут з'являється індивідуальність. Для пошуку цих зображень використано запити "екстремальні навантаження", "розтяжка на вулиці", "креативне тренування", "красивий джоггінг".
Звертайте увагу на колекції
Коли вам натрапите на потрібну фотографію, ви можете знайти схожі зображення для сайту трьома способами.
По-перше, кожна фотографія має свого автора. Ви можете відкрити сторінку автора та переглянути інші зображення. Можливо, там будуть стилістично схожі зображення.
По-друге, певна фотографія може входити до колекції фотографій. Перейдіть за відповідним посиланням з добіркою фотографій і шукайте додаткові зображення.
По-третє, знизу сторінки фотостоки пропонують схожі зображення. Найчастіше вони близькі і тематично, і стилістично, і в аспекті використаних у фото кольорів.
Вибираючи ілюстрації як картинки для сайту, ви не скуті пов'язаними обмеженнями, які існують для фотографій. Не обов'язково шукати фотографії з однаковими персонажами. Локації, що не характерні для вашої країни, не з'являться на фото. Ілюстрації не вимагають додаткової корекції кольору та обробки.
Якщо у вас є сайт з абстрактними послугами (наприклад, у сфері інфобізнесу або бухгалтерських послуг для малих підприємців) ілюстрації найкращий вибір. Вони внесуть емоції до інформаційної складової сайту.
Щоб усі ілюстрації на сайті були схожими, вам потрібно швидко розбиратися в типі ілюстрацій – їх художніх особливостях. На основі цих особливостей ілюстрації діляться в такий спосіб:
Залежно від об'ємності виконання
ілюстрації поділяються на плоскі, напівплоскі та виконані в 3D. У плоских ілюстраціях використовується заливка кольором. У напівплоських з'являються тіні чи поділ об'єктів на кілька фігур у перспективі. З розпізнаванням 3D у вас не буде складнощів.
На основі використаних художніх засобів
ілюстрації можуть виконуватися простими фігурами, з використанням пензлів та текстур із застосуванням градієнтів. Перший тип ілюстрації – прості плоскі зображення з рівномірними заливками. На ілюстраціях з пензлями і фактурами ви можете побачити штрихи, які повторюються, або імітації матеріалів і текстур. У зображеннях з градієнтами кольори плавно поєднуються.
За типом використаних контурів
ілюстрації можуть бути взагалі без контурів, з використанням контурів як обведення або контури можуть бути всередині об'єктів для поділу їх на частини.
Залежно від реалістичності виконання
ілюстрації бувають майже реалістичними, супердеформованими чи вкрай стилізованими. У першому випадку у всіх об'єктів зберігаються реалістичні пропорції. У деформованих ілюстраціях окремі частини можуть бути збільшеними та зменшеними або неприродної форми. У стилізованих зображеннях об'єкти будуть схожі на геометричні фігури, завитки або абстракції.
Виходячи зі складності сюжету та різноманітності деталей
серед ілюстрацій можна виділити мінімалістичні, збалансовані та візуально навантаженні типи. У мінімалістичних ілюстраціях об'єкти спрощені. У збалансованих ви можете роздивитись деталі, але ці ілюстрації можна швидко роздивитись в цілому. В останньому випадку потрібно тривалий час для розуміння сюжету та змісту ілюстрацій.
Тепер художні враження мають конкретні терміни для опису. При виборі картинок на стоках намагайтеся підбирати такі зображення, де є всі ознаки вибраних вами художніх типів. Щоб вам було легше, ми створили шпаргалку для звіряння стилю.
Врахуйте, що на вашому сайті ви можете комбінувати фотографії, ілюстрації та геометричні фігури. Наприклад, геометричні фігури та абстракції прикрашають та роблять дизайн сторінки сайту цікавішим. Сюжетними ілюстраціями ви продемонструєте умовні явища: послуги, переваги, порядок роботи. Реалістичні зображення допоможуть показати щось конкретне: людей, товари, приміщення.
Професійна фотозйомка: як поставити ТЗ і знайти фотографа
Найнятий вами фахівець точно вирішить завдання зі створення контенту, якщо ви правильно створите технічне завдання і обговорите деталі зйомки. Тільки тоді витрати на створення фото для вашого сайту будуть обґрунтованими. У технічному завданні (ТЗ для фотографа) обов'язково потрібно визначитись із такими питаннями:
- Ціль фотосесії. Опишіть для якої мети ви наймаєте фотографа, що потрібно сфотографувати, на чому потрібно зробити наголос, які емоції повинні викликати фотографії і яку дію в результаті перегляду контенту має зробити відвідувач сайту.
- Стилістика та концепція. Визначтеся з жанровими особливостями фотографій: предметна, інтер'єрна репортажна, фуд, корпоративна, художня або технічна зйомка. Прикладіть приклади фотографій (референси), що сподобалися вам. Вкажіть домінуючі кольори фотографій.
- Сфера використання. Розкажіть коротко про сайт, для якого створюються фотографії. Додатково ви можете показати макет сайту або сайти, які сподобалися, зі схожою тематикою. Не зайвою буде інформація про ваш бренд, особливості бізнесу та цільову аудиторію.
- Локація, реквізит, обслуговування. Домовтесь про всі технічні деталі. Де проходитиме зйомка і чи потрібно орендувати для неї студію. Чи потрібні професійні моделі або їх роль виконуватиме хтось із ваших знайомих. Як саме потрібно підготувати реквізит чи предмети зйомки? Дізнайтеся, чи потрібні візажисти та оренда світла.
- Кількість та вид фото. Встановіть кількість фотографій, які потрібно отримати в результаті зйомки. Додатково перерахуйте, що має бути присутнім на фото. Не забудьте вказати формат майбутніх фотографій, тобто співвідношення їхніх сторін.
- Обробка та терміни. Фотограф може робити просто фото або їх додатково обробляти. На строк та кінцеву ціну за роботу фотографа впливає складність обробки. По градації складності обробка ділиться наступним чином: проста корекція кольору, художня ретуш, складна обробка з видаленням або додаванням елементів.
- Ціна. Виходячи зі складності, часу, кількості фото та типу обробки зображень, фотограф назве вартість роботи. Вам залишається лише обговорити порядок та черговість оплат.
Знайти спеціаліста можна на біржах з пошуку творчих спеціалістів або в соціальних мережах, використовуючи теги. Наприклад, за тегами #фотограф #Київ #фешн-фотографія ви знайдете в Instagram фахівця для модної зйомки.
Завжди розглядайте кілька варіантів фотографів та звертайте увагу на роботи в портфоліо. Чим стилістично ближчі роботи їхні портфоліо до бажаного вами результату, тим вдаліші результати зйомки ви матимете.
На що звернути увагу, вибираючи картинки для сайту
Уникайте кліше
Не вибирайте перші побачені зображення на стоку і не просіть робити шаблонні фотографії (наприклад, фото команди з посмішками і піднятими пальцями вгору).
Наприклад, ви доставляєте готові корисні обіди – не вибирайте усміхнену жінку з салатом для картинки на вашому сайті, а обирайте життєву фотографію зі звичайною людиною, яка обідає.
Дотримуйтесь схеми кольорів
Об'єднуйте всі зображення на вашому сайті єдиним колірним рішенням. Постарайтеся вибирати фото з кольорами, що повторюються. На деяких фотостоках є колірний фільтр зображень – він допоможе вибрати потрібні зображення.
Якщо фото зроблені різними авторами, але вони стилістично єдині, – використовуйте онлайн-фоторедактори для накладання фільтрів або корегуйте кольори самостійно.
Робіть перевірку емоціями
Коли ви підберете достатню кількість фотографій, переходьте до вибору. Розглядаючи фотографію, постарайтеся відчути фото без прив'язки до цілей, що формулюються. Ті, які викликають емоції – це ваші фотографії.
Найбільше емоцій викликають картинки для сайту з динамічним сюжетом, унікальним настроєм та людьми на фото чи у ілюстраціях.
Думайте про мобільну версію сайту
Ваші зображення повинні бути доречними не тільки у повній версії сайту, але й при перегляді на мобільних пристроях.
Якщо фотографія відображатиметься на мобільних пристроях без масштабування, потрібно в макеті мобільної версії сайту оцінити, наскільки дрібними будуть деталі зображення.
Не забувайте про оптимізацію зображень
Зображення повинні бути не тільки якісними, але в них повинен бути і оптимальний розмір. Тоді сайт буде швидко завантажуватися, це оцінять пошукові системи та користувачі з повільним інтернетом.
На розмір картинок впливає формат зображення та ступінь стиснення. Більше про формати та оптимізацію ви дізнаєтесь у розділі статті, присвяченому SEO-оптимізації зображень. Для зменшення розміру картинок можна використовувати сервіси Kraken.io, TinyPNG.com, Compressor.io, Imagecompressor.com.
Куди додавати картинки на сайт: перший екран, фото продукту або послуги, галерея, фон
Зображення головного екрана. Одне зображення – одна думка
Перший екран сторінки – це фільтр відвідувача. За декілька секунд він вирішує: продовжити перегляд або закрити сторінку. Тому приділяйте особливу увагу підбору зображення для цього блоку.
Картинка головного екрану сайту не повинна бути перевантажена візуально, а її зміст повинен бути зрозумілим за мілісекунди.
Фото товарів та послуг на вашому сайті. Поради щодо вибору та розміщення
Коли ви показуєте свої товари або послуги, у вас є 3 можливості для їх демонстрації. Чергуйте між собою їх або вибирайте відповідний в залежності від ситуації. Фото товарів ви можете отримати у постачальника товарів або зробити їх самостійно.
- Взаємодія у фото товарів на сайті. На таких фотографіях ви показуєте результат чи процес взаємодії клієнта з вашим продуктом. Наприклад, ви продаєте кавоварку з дуже простим доглядом – покажіть процес її обслуговування. Цей тип фотографій можна використовувати, коли вигоду легко показати.
- Деталізація у фото товарів на сайті. Хоча б раз користувачу потрібно показати товар чи послугу з належною деталізацією. Найкраще робити серію предметних фотографій та розміщувати їх у галереї. Припустимо, ви продаєте взуття ручної роботи. Для демонстрації продукту розміщуйте фотографії з послідовною деталізацією. Наприклад, вид зверху – система шнурівки – макрофото фурнітури системи шнурівки.
- Контекст у фото товарів на сайті. Показуйте умови або ситуацію, в яких ваш продукт є доречним. Так ви продемонструєте причину, яка викликає потребу у товарі чи послузі. Наприклад, ваші індикатори диму в приміщеннях можуть бути не лише функціональними, а й стильними. Правильний варіант їх розміщення – фото у сучасних та красивих інтер'єрах.
Галерея на сайті: користь та економія простору
Кожна дія користувача на сайті потребує зусиль. Якщо їх потрібно багато, користувач може втомитися та втратити інтерес. Статичний контент (тобто контент без інтерактивної взаємодії) легко споживати, але він не компактний.
Галерея – це інтерактивний контент на сторінці сайту.
Ви можете розмістити зображення на сторінці сайту одне за одним. Але тоді сторінка буде великою, потребуватиме довгого прокручування.
Обираєте галерею? Користувач зможе переглянути важливу інформацію в одному місці, але відвідувач має бути зацікавлений у додаткових кліках.
Тому використовуйте галерею з картинками для сайту тільки в тому випадку, якщо є корисна однотипна інформація. Наприклад, деталізації фото товарів, інтер'єр приміщень, зображення з елементом репортажності, серії фото людей (наприклад, світлини співробітників компанії з невеликими текстовими описами до них).
Зображення як фон. Правила розміщення зображень-фонів на сайті
Зображення та текстовий контент знаходяться у діалозі між собою. Око спостерігача насамперед фокусується на фото. Потім погляд переміщується на заголовок, а потім на елементи взаємодії зі сторінкою. Наприклад, кнопки.
Вам потрібно дотримуватись кількох правил, щоб різні елементи сторінки правильно взаємодіяли між собою.
- Не розміщуйте змістовий та композиційний центр фонових зображень під текстом. У такому разі відвідувач не зможе сконцентруватись ні на фото, ні на тексті. Композиційний центр – це логічна та візуальна точка концентрації уваги на зображенні. Не забувайте, що ділянка фотографії під текстом має бути однорідною за кольором та світлом.
- Робіть текст та зображення самодостатніми. Тобто відвідувач має зрозуміти зміст фото та тексту окремо без зв'язку між ними. Але зв'язок цих елементів має додати глибини до розуміння чи емоційного сприйняття теми блоку.
- Складайте композиційні пари з фото та тексту з елементами сайту. Зображення або блоки мають композиційні центри. При правильному поєднанні точки уваги зображення ведуть до точок уваги тексту.
Картинки для сайту на Weblium
Наш конструктор сайтів – Weblium – перетворює дизайн сайтів на задоволення. Ваш сайт буде корисним та красивим, а вам для цього не потрібно звертатися до дизайнерів.
Так само ми максимально спростили роботу із зображеннями, щоб ваш дизайн сайтів з'являвся за години – а не дні.
Безкоштовні зображення з фотостоку Unsplash
Безпосередньо в меню роботи із зображеннями ви можете знайти свої зображення з 1 000 000 зображень на стоку. Для додавання іконок із меню керування елементом іконки шукайте необхідне у безкоштовних бібліотеках Icons8 та The Noun Project.
Базові можливості редагування зображень
Ви можете вибрати параметри масштабування та заповнення області зображення на сайті, щоб відкадрувати фото та ілюстрації належним чином. Додатково ви можете застосовувати фотофільтри та накладання кольору, щоб забезпечити стилістичну єдність фотографій.
Оптимізація зображень та її вимкнення
Для збільшення швидкості завантаження сайту наш конструктор сайтів автоматично зменшує розмір зображень, але зберігає їхню якість. Якщо вам потрібно показати фото у високій якості, то фонові зображення на сайті ви зможете показати з оригінальними параметрами.
Ми знаємо, що з правильними зображеннями дизайн вашого сайту не поступатиметься роботам професійних дизайнерів. Приєднуйтесь до платформи та створюйте ваш чудовий сайт зараз.