Как правильно делать скриншоты

Привет! Это Бизиков. 

В двадцать втором выпуске рассылки поговорим о том, на что стоит обратить внимание при создании скриншотов и как их вставлять в слайды вашей презентации.

Зачем?

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

Вот несколько правил, которых я стараюсь придерживаться, когда делаю скриншоты для презентаций:

Очистить от мусора

По возможности избавляюсь от визуального мусора в скриншотах. Не стоит отвлекать зрителя лишней информацией. Например, в статус-баре Андроида стоит очистить строку от уведомлений. Если делаю скриншот сайта с браузером, то закрываю лишние вкладки и скрываю панель с закладками.

Подогнать масштаб

Стараюсь следить за тем, чтобы во вставленном на слайд скриншоте можно было разобрать, что написано. Если скриншот слишком большой, то меняю масштаб, либо обрезаю его.

Показываю только то, о чём собираюсь говорить. Если задача — показать весь сайт, то показываю его частями, разбив на несколько слайдов.

Следить за содержимым

Стоит внимательно следить за тем, что написано на скриншоте. Например, у меня часто бывает, что в презентацию надо вставить скриншоты сервиса, который находится в разработке.

Захожу на демостенд, где есть только тестовые данные. С ними скриншот не очень красиво выглядит, поэтому меняю данные через веб-инспектор. Вместо «Test1233» всегда лучше вставлять живые данные. Ещё плюс такого подхода в том, что не надо ничего «фотошопить». Поменял данные напрямую в браузере, сделал скриншот и всё готово.

Акцентировать внимание

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

Например, именно так поступил в докладе про развитие в профессии. Сделал скриншот экрана Trello и в момент, когда говорил про определенную колонку с задачами, только она была выделена, остальные части скриншота были затемнены.

Как сделать скриншот сайта на всю высоту?

Использую плагин GoFullPage для создания скриншотов сайтов на всю высоту. Сохраняю в PNG, если необходимо — обрезаю, оставляя только нужную часть и вставляю в мокап. 

Как вставить скриншот в мокап?

Мокап — это шаблон устройства в которое можно вставить скриншот.

Скриншот приложения или сайта на слайд можно вставить не просто как картинку, а показать в контексте где мы это смотрим: в браузере, с телефона или вставить в фотографию. Так зрителю легче будет воспринимать и понимать контекст, относительно чего мы рассматриваем. Показываете вы скриншот сайта на компьютере или он так выглядит на телефоне? Мокап без слов подскажет. И ещё с мокапом слайд выглядит лучше, чем без него.

Вот некоторые из сайтов с мокапами, которыми пользуюсь:

• Набор мокапов от Facebook: Sketch, Figma
• Angle 3
• unblast.com
• mrmockup.com
• smartmockups.com

Последний подойдёт, если у вас нет Sketch, Figma или Photoshop. На сайте можно выбрать мокап, загрузить свой скриншот и получить результат. Но выбор ограничен, поэтому рекомендую завести хотя бы Figma — она бесплатна для личного использования.

Поделиться письмом с друзьями и коллегами: