Как делать снимки экрана для сайта

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

Основные рекомендации

1. Не масштабируйте снимки!

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

Рассмотрим пример. Вот снимок, отмасштабированный из разрешения FullHD в разрешение 1550×872. На нём мелкий текст уже размыт (кликните для того, чтобы увеличить).

Снимок отмасштабирован, из-за чего мелкий текст на нём размыт. На превью, которое выводит WordPress в статье, он размыт ещё сильнее, чем в оригинале.
А здесь верно, текст на снимке видно очень чётко.

2. Отключайте сжатие изображений в редакторе MS Word

Большинство авторов не добавляют скриншоты прямо на готовую страницу сайта, они вставляют их в документ MS Word на этапе подготовки статьи. Это вызывает такую же проблему, как и в предыдущем пункте. Редактор автоматически сжимает снимки, тем самым ухудшая их качество (в соответствии с установками по умолчанию). Это уменьшает размер документа, но ухудшает качество встроенных изображений. Процесс усложняется — надо будет предоставлять не только файл со статьёй, но и архив с изображениями, размещёнными в тексте. Кому-то придётся выискивать снимки в этом архиве и сопоставлять их с теми, которые в документе, вместо того, чтобы загрузить в макет статьи всё, что там есть, автоматически.

Для того, чтобы отключить сжатие изображений, перейдите на вкладку Файл, затем кликните по пункту Параметры. Далее — пункт меню Дополнительно. В окне параметров найдите опцию Не сжимать изображения в файле и включите её. Кроме того, в раскрывающемся списке Разрешение по умолчанию выберите пункт Высокое качество. Эти параметры применяются только для редактируемого в данный момент документа.

Для того, чтобы эти настройки автоматически применялись для всех новых документов, выберите пункт Для новых документов вместо текущего (для нового документа это Документ1) в раскрывающемся списке рядом с названием подраздела Размер и качество изображения. Такие изменения параметров могут быть также сохранены, если они производились не в процессе редактирования нового документа или какого-либо другого, а шаблона для новых документов по умолчанию — normal.dotm (для использования такого модифицированного шаблона в будущем).

3. Оптимальная ширина снимка: 1024-1500 пикселей

Размер снимка тоже имеет значение. Чем больше снимок, тем больше он занимает места на сервере, тем хуже на нём видны мелкие элементы и текст. Особенно это актуально для пользователей, читающих статьи на мобильных устройствах. Это усугубляется ещё и тем, что WordPress масштабирует снимок для вывода превью в статье до разрешения 1024×576 (WordPress масштабировать можно, а вам нельзя!) С другой стороны, если снимок будет меньше 1024-х пикселей, он может быть отмасштабирован системой в другую сторону и опять будет выглядеть размытым.

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

4. Обрезайте большие снимки

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

Не верно, но допустимо.
Верно.
Верно, снимки экрана полноэкранных приложений обрезать не надо.

5. Делайте снимки интерфейса одной программы одинакового размера

Старайтесь, чтобы все обрезаемые снимки интерфейса одной и той же программы были примерно одного размера. Посмотрите, например, три снимка в тексте со следующей рекомендацией (№6). Это одна и та же программа, но каждый снимок имеет свой масштаб. Это сбивает с толку.

6. Делайте снимки окон на фоне рабочего стола

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

Не верно, так как не понятно, где заканчивается изображение и начинается фон сайта.
Все ещё не верно.
Верно.

7. Не растягивайте окна

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

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

8. Избегайте попадания посторонних элементов

К посторонним элементам относятся окна программ, файлы и другие элементы, не имеющие отношения к содержимому скриншота. Windows этой проблеме не очень подвержена, так как не имеет прозрачных окон в интерфейсе по умолчанию, но снимок терминала в Linux, за которым виднеется браузер со статьёй, выглядит некрасиво. Пример:

Не верно, за снимком виден браузер, окно сливается с фоном сайта.
Верно. Если вам нужен прозрачный фон или ещё какие-либо украшения, почему бы и нет, нет проблем.

9. Выделяйте важные элементы изображения

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

Вполне допустимо. Если на снимке всё-таки надо показать программу с большим окном и при обрезании она потеряет информативность, то можно оставить весь рабочий стол.
На изображении выделен инструмент и показан пример его применения. Так лучше.

10. Используйте большой шрифт

Этот пункт тоже не очень обязательный и его полностью заменяет использование верной ширины снимка, но всё таки желательно, чтобы шрифт, на снимке был большим его было легко читать без сильного увеличения. Особенно это касается терминалов Windows и Linux. Там размер шрифта очень легко настраивается и нет никакой проблемы перед созданием снимков увеличить размер шрифта на несколько пунктов.

11. Вставляйте изображения без привязки

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

Вставляйте изображения без обтекания

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

Лайфхаки для снимков экрана

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

Как добавлять скриншоты прямо в документ Word?

Для того, чтобы не обрезать изображение каждый раз, имеется обходной путь. Можно на время изменить разрешение вашего экрана, например, до 1366×768 или около этого, тем самым обеспечивая оптимальную ширину формируемого изображения. На снимке будет отлично всё видно, шрифт увеличится, площадь свободного ненужного места уменьшится.

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

В Windows это можно делать на ходу. Ни перезагружать компьютер, ни закрывать приложения не нужно. Теперь можете сделать снимок экрана, нажимая кнопку PrintScr на клавиатуре. Сделанный снимок будет помещён в буфер обмена. Его можно сразу же вставить в документ Word прямо из буфера с помощью нажатия сочетания клавиш Ctrl+V или используя контекстное меню. Таким образом, не надо ничего обрезать с помощью внешних редакторов. Кроме того, все изображения будут одного размера. При условии, что настройки параметров Word, о которых я упоминал выше, будут выполнены, изображения получатся вполне приемлемого качества.

В ОС Linux делается аналогично. Любой дистрибутив позволяет менять разрешение экрана, а если вы используете VirtualBox, то это становится ещё проще. Однако с разрешением экрана обращайтесь аккуратно. Я попробовал играть с разрешением в Linux — очень сильно меняется расположение элементов в окне программы. Главное, чтоб всё было в меру.

Как обрезать снимки в графическом редакторе Gimp?

Для обрезки снимков я могу порекомендовать бесплатный графический редактор Gimp. Есть его вариант как для Windows, так и для Linux.

Сделайте первый снимок. Если делаете его с помощью сочетания клавиш Win+PrtScr, он сохраняется в файл, если просто с помощью клавиши PrtScr — он помещается в буфер обмена. Откройте файл в Gimp или вставьте содержимое буфера в новое окно программы:

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

Используйте инструмент Выделение для выделения нужной области снимка интересующей нас ширины.

Нажмите Ctrl+C (или Правка -> Копировать) для того, чтобы скопировать выделенное, затем Ctrl+Shift+V для того, чтобы создать на основе скопированного в буфер содержимого новое изображение. То же самое можно сделать, открыв меню Файл и выбрав пункт Создать... -> Из буфера обмена. Вы получите готовое изображение.

Это изображение остаётся лишь сохранить в файл с помощью сочетания клавиш Ctrl+Shift+E или выбрав пукнт меню Файл -> Экспортировать.

Далее сделайте новый снимок, перетащите его в окно программы или вставьте из буфера обмена поверх старого:

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

Таким образом, снимки можно обрабатывать намного быстрее, чем если вы будете обрезать каждый по отдельности.

Если нет нужды возиться с файлами, работайте непосредственно с буфером обмена. Вставив содержимое буфера в новое окна графического редактора, выделите нужную вам область на изображении, копируйте выделенное в буфер и сразу же вставляйте в открытый документ Word в нужное вам место в тексте. Не забывайте, что любое такое встроенное в документ изображение также можно сохранить в виде файла. Технические характеристики такого файла, естественно, будут соответствовать характеристикам встроенного в документ изображения.

Выводы

Теперь вы знаете как создать снимок экрана для готовящейся вами статьи, ознакомлены с основными ошибками авторов и точно уже не захотите их впредь совершать. Думаю, что после выявления новых аспектов этой тематики статья эта будет обновляться. Структура статьи организована так, что вы можете время от времени открывать её, просматривать содержимое и вспоминать как делать всё наиболее удачно и быстро. Удачи!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *