Як робити та оформлювати скриншоти: 5 простих порад
При оформленні кейсу або промосторінки дизайнеру доведеться робити скриншоти. Щоб ці скриншоти були зрозумілими для глядача і допомагали розібратися в продукті, важливо стежити за їхньою ясністю та інформативністю. Ось кілька порад щодо правильного створення скриншотів і програм, які можуть допомогти в цьому.
Зберігайте контекст
Скриншот має чітко демонструвати стан інтерфейсу та те, як користувач має до нього дістатися. Якщо зображення виглядає як ребус, глядач може залишити сторінку і шукати відповіді деінде.
Наприклад, цей скриншот не показує, що це за меню, де його знайти і в якій програмі воно використовується:
Проте якщо показати хоча б частину інтерфейсу програми, все стане зрозуміло:
Обрізайте зайве
Якщо ви пояснюєте, як працює частина сайту чи програми, показуйте лише цю частину. Коли на зображенні багато різних елементів, читачу важко орієнтуватися серед них. Наприклад, на цьому скриншоті курсор вказує на іконку заливки осередку в Google Sheets. Без попереднього пояснення ви навряд чи зрозуміли б, що це:
Але якщо відрізати зайве полотно та зберегти необхідний контекст, то скриншот стане зрозумілішим:
Те ж саме стосується й непотрібних елементів: відкритих вкладок, повідомлень, обрізаних частин тексту та картинок. Усі ці деталі потрібно прибирати, щоб скриншот виглядав акуратно і не відвертав увагу читача.
Виділяйте важливе
Не завжди вдається прибрати всі непотрібні елементи зі скриншота, зберігаючи при цьому контекст. У такому випадку можна модифікувати інтерфейс так, щоб він залишався впізнаваним.
На цьому скриншоті Figma вікно, що випадає, занадто маленьке, а всі зайві елементи видалити не вийде, тому що вони можуть знадобитися для пояснення:
А якщо збільшити верхнє меню, то інтерфейс збереже впізнаваність, і при цьому відразу стає очевидним, де головний елемент:
Залиште «повітря» по краях
Скриншот – це самодостатня композиція, над якою попрацював дизайнер. Щоб не псувати її, залишайте навколо скриншота поля. Тут межі вказані дуже точно – при масштабуванні браузера вони змінюють розмір пропорційно. Тому саме так потрібно показувати сайт глядачеві:
Якщо прибрати поля, композиція зламається:
При цьому у сайту поля можуть бути вузькими. У такому разі не потрібно їх «нарощувати» – просто залиште все як є. Наприклад, як на сайті Hyle:
Обережно використовуйте вказівники
Вказівник може допомогти виділити маленьку кнопку, яку неможливо збільшити без втрати якості скриншота чи контексту програми:
Але якщо на скриншоті буде кілька вказівників, глядачу буде важче розібратися. Навіть нумерація, додаткові назви чи кольори не завжди допоможуть розв'язати проблему:
У цьому випадку краще просто записати відео. Якщо воно коротке, то його можна зациклити, щоб воно виглядало як гіфка:
Програми для скриншотів. MacOS і Windows мають вбудовані інструменти для створення скриншотів. Але якщо потрібно завантажити зображення в інтернет і поділитися посиланням, це може бути тривалим процесом. Це стає проблемою, якщо ви часто коментуєте чи показуєте частини скриншотів на роботі.
4 програми для оформлення скриншотів
Xnapper для macOS — це онлайн-інструмент для створення красивих скриншотів. Окрім базової функції знімання екрана, інструмент може змінювати фон скриншоту, робити знімки екрана з прозорим фоном, а також прикрашати готові знімки різноманітними візуальними елементами, додавати та видаляти об’єкти тощо.
ShareX для Windows – безкоштовна програма з відкритим вихідним кодом. Вона має багато налаштувань, але спочатку потрібно зареєструватися на сервісі для завантаження картинок і прив’язати ключ облікового запису до ShareX. Рекомендуємо використовувати для цього vgy.me – безкоштовний сервіс для створення коротких посилань.
BrandBird — AI інструмент, який перетворює cкриншоти на привабливу графіку у єдиному стилі. Програма дозволяє робити все швидко, не налаштовуючи вручну рамки, шари, монтажні області та інші складні елементи. Користувачі можуть додавати фони, 3D-ефекти та використовувати готові шаблони.
Joxi для macOS і Windows – якщо ви користуєтеся Windows і не хочете мати справу з ShareX, скористайтеся цим сервісом. Але у безкоштовній версії всі посилання на скриншоти будуть містити рекламу.
Для телефонів на iOS та Android додаткові програми зазвичай не потрібні, оскільки стандартних функцій достатньо. Головне – пам’ятати, які кнопки натискати:
На iOS – одночасне натискання кнопок Home та Sleep.
На Android – одночасне натискання кнопок Volume Down та Power.