Подавайте скриншоти в макетах браузера та пристроїв

Підготуйте скриншот

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

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

1. Виберіть один скриншот із чітким сюжетом і видаліть чутливий вміст.
2. Вирішіть, чи найкраще пояснює контекст рамка браузера, iPhone або iPad.
3. Перевірте, що важливий текст і елементи керування залишаться видимими всередині рамки.

Розмістіть рамку та виберіть сцену

Оберіть тло, яке підтримує скриншот. Спокійний суцільний колір підходить для документації; м’яке фото або природна сцена робить презентацію продукту теплішою. Залиште навколо макета достатньо простору, щоб було видно край рамки. У вікні браузера оболонка має залишатися впізнаваною, але декоративні елементи не повинні конкурувати зі сторінкою.

Зберігайте правдоподібну перспективу. Невеликий нахил додає енергії, але сильний поворот ускладнює читання дрібного тексту. Вирівнюйте макет за візуальним напрямком тла. Рамка, нахилена до вільного простору, виглядає навмисно; та, що вказує на строкатий об’єкт, здається затиснутою.

Читайте далі: як додати рамку iPhone до скриншота

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

Перевірте читабельність і достовірність

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

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

Стилі рамок і умови Pro можуть змінюватися між версіями застосунку, тому перед серією перевірте поточну панель Mockups у застосунку.

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

Виправте поширені проблеми макетів

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

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

1. Спочатку виправте співвідношення, а не масштаб.
2. Виправте читабельність кадруванням та ієрархією до додавання декору.
3. Один раз перегляньте збережене зображення в реальному розмірі призначення.