Как делать скриншоты для статей, лендингов, гайдов и хелпов

Нюансы, примеры, инструменты
Хороший скриншот делает статью полезнее и заменяет множество словесных объяснений. Плохой только занимает место и вносит путаницу. Из этого гайда вы узнаете, как делать скриншоты правильно: так, чтобы они дополняли текст и облегчали его восприятие.

Зачем нужны скриншоты:

  • Объяснить сложный многоступенчатый процесс. Это может быть установка и настройка программы, цикл покупки на Алиэкспресс, работа с сайтом или сервисом. Такие материалы обычно пишут в формате гайдов и хелпов.

  • Привести пример. Пишете об оформлении карточки товара — добавляете скрины карточек товара. Говорите, что Билайн быстро отвечает в соцсетях — прикрепляете скриншот с постом абонента и ответом Билайна спустя пару минут.

  • Наглядно предоставить информацию. Проще сделать скриншот тарифной сетки, инфографики, содержания курса, чем перепечатывать такую информацию.

Скриншоты важны так же, как текст. Если они правильно сделаны и уместны, статья прибавит в ценности.

Показывайте только важное

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

Делайте простые и понятные скриншоты

А вот настройка — сложный процесс, его надо показать в деталях. Особенно если программа на английском языке:

Скриншот настройки программы должен быть наглядным

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

Показывайте только нужный участок экрана

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

Предположим, мы объясняем, как вызвать Яндекс Такси в веб-версии. Вот такой скриншот выглядит лаконично и понятно:

Делайте лаконичные скриншоты

А здесь много лишней информации, которая не относится к теме: значки плагинов, панель Windows, карта. Все это отвлекает внимание. К тому же окно вызова такси получилось слишком мелким — невозможно что-то прочитать:

Слишком много лишней информации на скриншоте

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

Вот пример. Здесь большая часть скриншота — пустое поле:

Не скриньте пустое неинформативное пространство

На фоне этой пустоты теряются крошечные значки меню, все неразборчиво

Уменьшаем окно — и бесполезного пространства почти не остается. Снимок становится читабельнее:

Целое окно с интерфейсом, но в поле зрения попадает только важное

На изображении — целое окно с интерфейсом, но в поле зрения попадает только важное

Убирайте лишние элементы

Лишние элементы — это, например, вкладки, закладки и плагины в браузере. От них надо избавляться, потому что они не нужны читателю и оттягивают на себя внимание.

Не скриньте вкладки

Все, что наверху, нужно убрать

Полезно завести для работы со скриншотами отдельный «пустой» браузер без плагинов и закладок. Тогда на картинке ничего не будет отвлекать внимание.

Если нужно сделать скриншот всего экрана, позаботьтесь, чтобы на нем не было лишнего

В этом браузере — только адресная строка и кнопки «←» и «→», лишних деталей нет

Иногда на странице сайта висят виджеты и дополнения: кнопки обратного звонка, всплывающие окна онлайн-консультанта. Они тоже отвлекают внимание. Их можно скрыть: открыть исходный код страницы и удалить тот его участок, который отвечает за эти виджеты. Тогда они исчезнут и не появятся до обновления страницы.

Наведите курсор на такой элемент, кликните правой кнопкой мыши и нажмите «Просмотреть код». Откроется панель с исходным кодом, где будет подсвечена нужна строчка. Нажмите delete — и ненужный виджет исчезнет.

Убираем виджеты

Здесь значок онлайн-консультанта наползает на текст и мешает нам. Щелкнем на значок и удалим соответствующие ему строки кода

Убирайте мусор

На неаккуратно сделанных скриншотах остаются ненужные штрихи, линии, рамки и другая «грязь».

Следите, чтобы на скриншоте не было «грязи»

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

Если увидели такой мусор — сделайте скриншот заново или сотрите ненужные элементы ластиком (в программах-скриншотерах, Фотошопе или других редакторах).

Не обрезайте куски текста

Текст на скриншоте не должен обрываться на полуслове. Незавершенный отрывок вводит читателя в заблуждение.

На скриншотах не должно быть обрезанного текста

«Более того, если в других...» что?

Старайтесь скриншотить отрывки текста так, чтобы «повисших в пустоте» слов и фраз не было. В крайнем случае их можно замазать ластиком или убрать в коде страницы:

Лишнее можно стереть ластиком

Оставляйте отступы вокруг текста

Если на скриншоте будет текст — оставляйте вокруг текста небольшое чистое поле. Если этого не сделать, текст на скриншоте визуально сольется с текстом статьи. Получится неаккуратно:

Скриншот должен выглядеть как скриншот, а не часть текста

Кажется, что это не скриншот, а просто абзац, почему-то написанный шрифтом меньшего размера

Лучше сделать отступы и выделить скриншот с текстом рамкой или тенью:

Выделяйте скриншоты

Это аккуратный скриншот: вокруг текста есть свободное место, изображение выделяется в статье

Следите за читабельностью скриншота

На скриншотах все должно быть видно и понятно без увеличения.

Текст на скриншоте не должен быть слишком мелким

С первого взгляда не поймешь, что на этом скриншоте — нужно увеличивать и вглядываться. Лучше так не делать. Сайт pressfeed.ru

Читабельность зависит не только от масштаба картинки. Посмотрите, нет ли огромных выпадающих списков, не слишком ли растянут скриншот.

Обговорите оформление с клиентом

На разных сайтах скриншоты оформляют по-разному. Где-то вставляют картинку «как есть», где-то через CSS оформляют в рамку или прописывают тени. Иногда для публикации установлен строго определенный размер — например, не больше 700 пикселей в ширину. Поэтому вам нужно узнать у клиента (дизайнера, верстальщика, фронтэнд-разработчика), в каком именно виде от вас ждут снимки экрана.

Обговаривайте с заказчиком, как оформлять скриншоты

Если не обговорить технические детали, в статье может оказаться вот такой скриншот с рамкой и тенью одновременно — а это некрасиво

Используйте акцентные элементы

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

Используйте нумерацию, маркеры и т. д.

Показываем, как купить электронную книгу на Алиэкспресс

Важные элементы или мелкие детали можно увеличить, чтобы сделать акцент:

Увеличивайте важные элементы на скриншоте

Показываем, какую выбрать цель рекламной кампании на Фейсбуке

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

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

Акцентные элементы нужны не всегда. Если на изображении и так все ясно, не надо добавлять рамки и стрелки.

Пользователи и без стрелки поймут, где форма

Человек сам поймет, какие поля заполнять при оформлении заказа — не стоит дополнительно их выделять

Создавайте скриншоты в едином стиле

Все скриншоты в статье нужно привести к единому стандарту. Используйте одинаковые шрифты, цвета, рамки, стрелки. Если на одном скриншоте выделили главное красной рамкой — на другом нельзя выделять зеленым кружком. Читатели могут запутаться и решить, например, что зеленым цветом отмечены правильные действия, а красным — неправильные. К тому же это выглядит дешево и неряшливо.

Посмотрите руководство по Google Docs: там несколько десятков скриншотов, и все они сделаны в едином стиле.

Идеально, если на ресурсе есть редакционные стандарты по скриншотам. Если их нет — все равно публикуйте свои материалы со снимками, оформленными в едином стиле.

Убирайте конфиденциальные данные

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

  • Те, по которым можно установить личность человека (персональные данные — номер паспорта, ФИО, электронная почта)

  • Некоторые сведения, связанные с профессиональной деятельностью (врачебная тайна, тайна переписки и т. д.)

  • Сведения, связанные с коммерческой деятельностью (номера транзакций, переводов, счетов и т. д.), а также некоторые другие.

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

Исключение — данные, опубликованные в открытом доступе. Если делаете скриншот главной страницы корпоративного сайта — можно не скрывать телефоны и email. А если рассказываете о CRM-системе или программе 1С, где есть карточки клиентов с телефонами и адресами — сведениях в этих карточках нужно убрать.

Используйте для этого любой из четырех инструментов:

  • Размытие
  • Цветная плашка
  • Ластик
  • Замена настоящих данных на символы «*» через код сайта

Убрать конфиденциальные данные со скриншота можно как минимум четырьмя способами

Замазывайте данные аккуратно: так, чтобы это не бросалось в глаза. Если используете размытие — не заденьте соседних строк. Если закрываете плашкой — пусть она будет небольшой и черной. Огромный красный прямоугольник не подойдет, потому что будет оттягивать на себя внимание.

Склеивайте несколько скриншотов в один

Склеенный скриншот — это несколько изображений, совмещенных на одной картинке. Они нужны, если мы что-то сравниваем:

Склеивайте скриншоты, которые сравниваете

Здесь мы сравниваем, как выглядят длинные посты во ВКонтакте и Фейсбуке (в ВК появляется строчка «показать полностью», а на ФБ — «Еще»)

Или компактно помещаем очень длинное описание:

Склеивайте длинные скриншоты

Здесь мы показываем, каким большим может быть описание карточки товара (на примере одной из игр Мосигры). Если сделать один скриншот — он будет длинным и неразборчивым

Или показываем, как может выглядеть интерфейс программы:

Можно склеить скриншот интерфейса

Здесь мы демонстрируем интерфейс в разных состояниях и вариантах. Читабельность в таких случаях не так важна, главное — общий план

Скленные скрины экономят место и легче воспринимаются: вместо двух-трех картинок мы показываем все на одной.

Важно учесть:  

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

  • Не перегрузите изображение. Лучше склеивать в один небольшие скриншоты, иначе это будет выглядеть сложно и громоздко.

Используйте мокапы

Мокапы — это PSD-шаблоны с оформительными «рамками», имитирующими браузер, смартфон или планшет. Они нужны, чтобы продемонстрировать, как будет выглядеть на определенном устройстве то, что вы показываете на скриншоте.

Мокапы помогут с демонстрацией

Скриншот с имитацией окна браузера (из портфолио студии kaplunoff.com)

Мокапы особенно удобны для художественного оформления скриншотов. Посмотрите на этот пример:

Мокапы помогут оформить скриншоты в портфолио

Здесь мокап — изображение ноутбука с пустым экраном. Вы вставляете в этот экран свой скриншот — получается естественно и красиво

Много бесплатных мокапов есть на MockupDownload. Если не найдете там нужных — загляните на More PSD, «Фотошоп Мастер», Freebiesbug, PSDMockups или другие сайты для дизайнеров.

Чтобы оформить скриншот в мокапе:

  1. Откройте PSD-мокап в Фотошопе
  2. Нажмите «Файл» → «Поместить встроенные....»
  3. Выберите и откройте скриншот
  4. «Подгоните» его под размер мокапа
  5. Сохраните картинку в PNG

Оформление скриншота в Photoshop

Несколько кликов — и готово

Скриншоты с мобильных устройств

Скриншоты с телефонов нужны, чтобы показать работу мобильных приложений, мобильные версии сайтов и т. д. Вот как их сделать:

  • На Айфоне — одновременным нажатием клавиши питания и «Домой»
  • На устройствах с Android — одновременным нажатием кнопок питания и уменьшения громкости
  • На устройствах Windows Phone — одновременным нажатием Start и Power

Помещайте такие скриншоты в мокапы: станет ясно, что это именно снимок с телефона, а не странная прямоугольная картинка.

Скриншот справа — явно более наглядный

Скриншот справа — явно более наглядный

Оформлять скриншоты можно в Фотошопе — так же, как мы описали в предыдущем разделе. Еще проще будет воспользоваться онлайн-сервисами и приложениями. Там можно сразу загрузить скриншот в рамку, и не придется скачивать PSD-мокапы отдельно. Самые удобные сервисы:

Не перепутайте мокапы: скриншоты приложений для iOS показывайте в «рамке» Айфона, а не Самсунга. Если марка и операционная система телефона не играют роли, можно использовать любой мобильный мокап.

Скриншот коммерческого предложения

Скриншот коммерческого предложения, созданного студией Дениса Каплунова (kaplunoff.com)

Публикуйте в формате PNG или JPEG

Скриншоты в PNG самые качественные и четкие, они не «расплываются» на странице после публикации. Но у них есть минус: они весят больше, чем изображения в JPEG. А чем тяжелее скриншоты, тем медленнее загружается вся страница.

Используйте сервис TinyPNG. Он без потери качества снижает вес картинок на 60-70%. Скриншоты в PNG остаются такими же хорошими, но весят ненамного больше, чем в JPEG. Сервис бесплатный.

Сжимайте большие скриншоты

TinyPNG сделал скриншоты легче на 71 %

Однако в больших гайдах и хелпах с несколькими десятками скриншотов, на многоэкранных лендингах всё равно лучше использовать изображения в JPEG. С ними страница загрузится на несколько секунд быстрее. А при медленном интернет-соединении разница в скорости загрузки будет ещё больше.

Создавайте GIF-скриншоты

GIF-анимация — короткий зацикленный ролик без звука. Это промежуточный формат между картинкой и полноценным видео.

В формате GIF можно наглядно показать процессы и динамические действия: настройку программы, работу с пунктами меню, появление автоподсказок. В инструкции или гайде одна «гифка» может заменить несколько скриншотов. Это делает материал компактнее, легче для восприятия.


GIF вместо скриншота

Пример гифки-демонстрации (сделано в Ashampoo Snap)

Гифку можно сделать в некоторых скриншотерах (о них — в конце статьи) или в программах для записи видео с экрана. Таких программ много:

Обычное видео можно превратить в GIF-анимацию в Фотошопе и через конвертеры:

GIF-анимацию обязательно нужно зациклить, иначе она проиграется только один раз и превратится в статичную картинку. Это можно сделать в Фотошопе:

  1. Откройте GIF-анимацию
  2. Нажмите «Сохранить для web» (Ctrl+Shift+Alt+C)
  3. Выберите в меню «gif», а затем в графе «Параметры повторов» — «Постоянно»
  4. Нажмите «Сохранить»


Инструкция по зацикоиванию файлов GIF в Photoshop

GIF — самый «тяжелый» формат. Анимация может весить несколько мегабайт, поэтому не помещайте много гифок на одной странице и старайтесь делать их покороче.

Используйте подписи и пояснения

Подписи помогают читателю понять, что происходит на скриншоте. Это особенно важно при «поверхностном чтении». Чем легче человеку разобраться в статье, тем выше шанс, что он прочитает ее до конца и поймёт.

Подписи попадают в поле зрения именно потому, что расположены рядом с изображениями. Картинки, скриншоты, GIF-анимации, видео — все это «центры внимания» статьи. Подписи должны дополнять их — тогда читатель сразу составит представление, о чем идет речь и насколько полезна для него ваша публикация.

Расскажите, что на картинке:

Подписывайте скриншоты

Из блога Академии Лидогенерации

Объясните, что значит для читателя то, что вы показываете:

Объясняйте, что вы показываете

Из блога Convertmonster

Поясните, что делаете:

Объясняйте действия

Укажите важный нюанс:

Описывайте важное

Из блога Texterra

Важно: в конце подписи не надо ставить точку.

Пояснения можно делать на самом скриншоте. Это полезно, если надо объяснить небольшие технические моменты:

Делайте пояснения на скриншоте

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

Указывайте названия и теги

Перед публикацией для каждого скриншота нужно прописать название, тег Title и атрибут Alt. Это важно для SEO: повышается релевантность страницы запросам, скриншот появляется в результатах поиска по Яндекс Картинкам и Картинкам Google.

Для примера возьмем скриншот музыкального проигрывателя AIMP:

На примере этого скриншота учимся писать Alt и Title

В агентстве Convertmonster дают такие рекомендации:

  • Название. Идеально, если по названию сразу ясно, что изображено на скриншоте. Мы говорим о проигрывателе AIMP — значит, называем изображение aimp-audio-player.png. Избегайте названий вроде img_1652.png — они ничего не говорят ни поисковикам, ни читателям.

  • Alt. Описание в атрибуте alt должно точно и коротко описывать содержимое картинки: «Аудиоплеер AIMP».

  • Title. Тег Title отображается как всплывающая подсказка, когда мы наводим курсор на изображение. Раскройте в этом теге дополнительную информацию: «AIMP — бесплатный плеер с 18-полосным эквалайзером».

Вот что получится в итоге:

<img src="/aimp-audio-player.pngalt="Аудиоплеер AIMP</span>" title="AIMP — бесплатный плеер с <nobr>18-полосным</nobr> эквалайзером</span>" />Аудиоплеер AIMP

Прописать все это можно прямо в редакторе на сайте, когда будете готовить статью к публикации.

Программы и сервисы

Скриншоты можно делать, не устанавливая специальных программ.

В Windows:

  1. Нажать Print Screen
  2. Открыть любой графический редактор (например, Paint)
  3. Нажать «Вставить» (Ctrl+V)

В Mac OS:

  • Нажать ⌘ + Shift + 3, чтобы сделать снимок всего экрана
  • Нажать ⌘ + Shift + 4, чтобы сделать снимок конкретной части экрана

Так выглядит стандартный скриншот на Mac OS

Так выглядит стандартный скриншот на Mac OS

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

Бесплатные: JoxiLightshot и Monosnap

У всех трех скриншотеров примерно одинаковый набор возможностей:

  • Можно сделать снимок всего экрана или только нужного участка
  • Много акцентных элементов: стрелок, фигур, подчеркиваний, вариантов размытия и т. д.
  • Есть горячие клавиши — настраивайте их под себя, если захотите
  • Сделанные снимки сразу загружаются на сервер — можно не сохранять картинку, а скинуть ссылку на нее.

Редактор простенький, но все самое важное есть

Делаем скриншот в Joxi. Редактор простенький, но все самое важное есть

Monosnap и Lightshot работают на Windows и Mac OS, а Joxi — еще и на Linux.

Платные: Ashampoo Snap и Snagit

Ashampoo Snap делает скриншоты, видео и гифки — все это можно тут же отредактировать (вырезать рекламу из ролика, наложить водяной знак на картинку). Он адаптируется под параметры экрана, может увеличивать важные части снимка и создавать симпатичные тени. Все скриншоты в этой статье сделаны именно с помощью Snap 10.

Стоимость: 600 рублей. Работает только в Windows.

Ashampoo — платный, но очень удобный редактор скриншотов

Рисуйте стрелки, накладывайте фильтры и отправляйте готовый скриншот прямиком в Фейсбук или Фотошоп — Snap много чего умеет

Snagit — самый функциональный скриншотер. С ним можно делать любые снимки (в том числе панорамные и с прокруткой), записывать видео и GIF-анимации, настраивать макросы, работать со сканерами и цифровыми камерами. Внутри — очень много эффектов (тени, рамки) и визуальных элементов. Помимо PNG и JPEG, Snagit сохраняет картинки еще в 17 форматах.

Стоимость: $ 49.95. Работает на Windows и Mac OS.

Snagit — мегафункциональный редактор для создания скриншотов

Внутри Snagit

Запомнить

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

Есть несколько правил работы со скриншотами:

  • Показывайте только важное, а не все подряд

  • Показывайте только нужный участок, а не весь экран

  • Убирайте лишние элементы и визуальный мусор: значки плагинов и вкладок, ненужные штрихи и линии

  • Если на скриншоте текст — оставляйте вокруг свободные поля, не «обрезайте» текст

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

  • Обговорите оформление с клиентом: уточните, какие эффекты допустимы, в каком формате и какого размера нужны скриншоты

  • Используйте акцентные элементы: стрелки, рамки, выделение цветом. Делайте это умеренно

  • Создавайте снимки экрана в едином стиле: все скриншоты в публикации должны визуально гармонировать друг с другом

  • Скрывайте конфиденциальные данные — используйте для этого размытие, цветную плашку и ластик либо замените информацию на символы «*» через код

  • Склеивайте 2 и более скриншотов в один, если нужно что-то сравнить или компактно показать длинную страницу

  • Используйте мокапы для художественного оформления скриншотов (прежде всего — снимков с телефона)

  • Публикуйте скриншоты в формате PNG или JPEG, предварительно уменьшив их размер в сервисе TinyPNG

  • Используйте GIF-анимации, чтобы показать процессы и динамические действия

  • Дополняйте снимки экрана подписями и пояснениями

  • Перед публикацией дайте каждому скриншоту название, укажите тег Title и атрибут Alt

Помните, что суть картинки должна дополнять суть текста. Делайте только уместные, наглядные и полезные скриншоты — иллюстрации, а не декорации.