Нюансы, примеры, инструменты

Автор: Роман Мориц

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Те, по которым можно установить личность человека (персональные данные — номер паспорта, ФИО, электронная почта)
  • Некоторые сведения, связанные с профессиональной деятельностью (врачебная тайна, тайна переписки и т. д.)
  • Сведения, связанные с коммерческой деятельностью (номера транзакций, переводов, счетов и т. д.), а также некоторые другие.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Самые удобные сервисы:

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

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

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

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

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

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

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

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

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

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

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

Это можно сделать в Фотошопе:

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

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

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

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

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

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

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

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

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

В агентстве 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:

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

В Mac OS:

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

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

Бесплатные: Joxi, Lightshot и Monosnap

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

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

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

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

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

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

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

  • Запомнить

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

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

  • Показывайте только важное, а не все подряд
  • Показывайте только нужный участок, а не весь экран
  • Убирайте лишние элементы и визуальный мусор: значки плагинов и вкладок, ненужные штрихи и линии
  • Если на скриншоте текст — оставляйте вокруг свободные поля, не «обрезайте» текст
  • Старайтесь делать так, чтобы текст на скриншоте можно было прочитать без увеличения
  • Обговорите оформление с клиентом: уточните, какие эффекты допустимы, в каком формате и какого размера нужны скриншоты
  • Используйте акцентные элементы: стрелки, рамки, выделение цветом. Делайте это умеренно
  • Создавайте снимки экрана в едином стиле: все скриншоты в публикации должны визуально гармонировать друг с другом
  • Скрывайте конфиденциальные данные — используйте для этого размытие, цветную плашку и ластик либо замените информацию на символы «*» через код
  • Склеивайте 2 и более скриншотов в один, если нужно что-то сравнить или компактно показать длинную страницу
  • Используйте мокапы для художественного оформления скриншотов (прежде всего — снимков с телефона)
  • Публикуйте скриншоты в формате PNG или JPEG, предварительно уменьшив их размер в сервисе TinyPNG
  • Используйте GIF-анимации, чтобы показать процессы и динамические действия
  • Дополняйте снимки экрана подписями и пояснениями
  • Перед публикацией дайте каждому скриншоту название, укажите тег Title и атрибут Alt

Помните, что суть картинки должна дополнять суть текста.

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