Как настроить разрешение скриншота

Как повысить качество скриншота?

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

От чего зависит качество скриншота?

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

• Формат. При загрузке файла настоятельно рекомендуется выбирать расширение PNG, а не JPEG. Последний формат сжимает картинку с потерями (иногда существенными), поэтому, чтобы получатель смог рассмотреть все детали, при сохранении скрина нужно указывать тип PNG.
• Нанесение меток. Это необходимо, чтобы получатель долго не всматривался в иллюстрацию и пытался понять, что отправитель хотел донести до него. Для этого используются маркер для выделения важного текста, указательная линия и прочие инструменты.

Какой выбрать скриншотер?

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

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

Почему скрин меняет качество?

Это происходит по причине выбора типа изображения, использующего сжатие с потерями. Решит проблему смена формата: с .JPEG, .TIFF или .GIF на .PNG. Это устранит значительную потерю качества, но увеличит размер графического файла.

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

Улучшаем качество скриншота

Для повышения степени ценности изображения при его создании нужно придерживаться следующих рекомендаций:

1. Для выбора формата со сжатием без потерь необходимо при загрузке снимка в диалоговом окне указывать соответствующее расширение (располагается возле строки названия элемента).
2. Чтобы не сохранять курсор на скриншоте, требуется снять флажок с опции в настройках, имеющей соответствующее наименование.
3. Применение графического редактора существенно увеличивает качество снимка. Можно прибегнуть к помощи интегрированной утилиты (при ее наличии) или использовать внешнее приложение, большинство из которых имеет больший спектр инструментов и функций для редактирования.

Сохраняем скриншот без потери качества

Загрузка графического файла данного типа осуществляется путем выполнения совокупности действий (для примера взята стандартная утилита Windows – «Ножницы»):

1. Запустить программу-скриншотер.
2. Выполнить загрузку скриншота, использовав соответствующую функцию приложения.
3. Нажать на кнопку сохранения (в «Ножницах» она располагается на панели быстрых инструментов вверху экрана).
4. В диалоговом окне указать атрибут «тип файла», раскрыв всплывающее меню. Выбрать расширение «PNG».
5. Щелкнуть «Сохранить». Произойдет загрузка в указанную директорию.

Какой выбрать редактор?

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

Если нужны стандартные инструменты (кисти, фигуры или линии), тогда подойдет и приложение «Paint», встроенное в пакет программ Windows.

Если для создания скриншотов нужны расширенные возможности (скрыть личную информацию, изменять текст на изображении и проч.), то можно выполнить загрузку бесплатной утилиты Paint.NET или приобрести Adobe Photoshop.

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

Формат сохраняемого изображения

При экспорте снимка у пользователей может возникнуть вопрос, связанный с выбором расширения в меню «Тип файла». Изучив 3 основных вида, можно уверенно использовать их в случае необходимости.

• PNG – сохраняет информацию без потери качества. Это может использоваться, когда важна ценность изображения, а не его размер.
• JPEG – популярный графический формат, использующий сжатие с потерями. Применяется для отправки небольших картинок или фрагментов с компьютера.
• GIF – расширенный тип, поддерживающий прозрачность и анимации. Хранит сжатые данные без потери качества, цветовая гамма – не более 256 оттенков. Чаще всего используется для передачи перемещающейся информации.

Расставляем акценты на снимке

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

Пропорция и симметрия

При обработке изображения нужно аккуратно выделять объект, на котором пользователь хочет акцентировать внимание (пример см. на иллюстрации).

Отображение курсора

Обычно в опциях имеется такая функция. Ее рекомендуется деактивировать. В приложениях «Lightshot» и «Screen Shooter» она находится во вкладке «Параметры».

Выделяем элементы на картинке

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

1. Создать скриншот, нажав на горячую клавишу.
2. Выполнить загрузку созданного изображения на компьютер, после чего запустить редактор.
3. Расставить метки, используя инструменты «Кисть», «Карандаш», «Линия», «Геометрические фигуры», «Текст».
4. Сохранить обработанный снимок.

Показываем последовательность действий

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

1. Захватить интересующий фрагмент.
2. Выполнить загрузку снимка на устройство.
3. Запустить графический редактор, затем выбрать инструмент «Фигуры», указать «Круг» с параметром «Только заливка» (оттенок любой).
4. Расставить кружки в необходимых местах, выбрать элемент «Текст», в фигурах написать цифру, соответствующую пункту из алгоритма.

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

Источник

Сделать скриншот и изменить его размер и формат

Сделать скриншот экрана компьютера можно с помощью различных программ.

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

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

В операционной системе Windows, в установках «по умолчанию», есть и графический редактор Paint.

Как сделать фото экрана в программе Paint

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

Для этого: откройте главное меню,»все программы», далее «стандартные», найдите «Paint» и запустите программу. Откроется окно общего вида.

Теперь нажмите на клавиатуре «Ctrl +V» или «вставить» в меню программы .

Загрузится фото-картинка, которую мы сделали с экрана компьютера. Сохраните, откройте файл и посмотрите.

В «Paint»можно изменить размер и формат полученного изображения, редактировать другие параметры.

Если нужно вставить картинку на сайт, то это лучше делать в формате JPEG.

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

Как изменить формат и размер скриншота

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

Далее, правой кнопкой мыши выделите изображение, в меню откройте «изменить».

Произойдёт запуск программы в автоматическом режиме. Одновременно загрузится и выбранное изображение.

Выберите пункт «изменить размер». Установите нужные параметры размеров в процентах или пикселях. При необход имости воспользуйтесь функцией сохранения пропорций — поставьте или снимите галочку.

Далее — «Сохранить как». Здесь выберите нужный формат, впишите имя и сохраните.

Также сделать изображение с компьютера можно, например, в 5CM Uploader. Удобная и понятная в работе программа.

Источник

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

Устройство для снимка экрана на первых компьютерах (Command-Shift-3)

Если вы когда-либо делали хелп или мануал для своего приложения, наверняка вы отметили, как неожиданно много времени и сил занимает создание скриншотов.

Ведь кажется, что скриншот — это “секунда работы, Alt+PrintScreen и Ctrl+V!”. Некоторые клиенты удивляются, когда слышат, что скриншот в мануале может стоить и $2 и даже $5.

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

Что нужно скриншотить

Нужно:

• схема основных элементов и зон интерфейса с подписями. Например, панель инструментов, панель состояния, главное меню, контекстное меню. Далее по тексту не придётся объяснять: “Кликните на вот ту кнопку на второй сверху панели слева”;
• один основной скриншот для каждой главы мануала. Вдруг пользователь не читал предыдущие главы, а воспользовался поиском;
• скриншот для каждого действия, которое значительно меняет состояние системы, интерфейса или данных;
• всплывающие (модальные) окна.

НЕ нужно:

• мастер установки, удаления (только если совсем что-то нетривиальное с множеством настроек);
• страницы логина;
• стандартные диалоговые окна (открыть, сохранить);
• километровые выпадающие списки (выберите язык или страну);
• отдельные кнопки (используйте текст);
• то, что уже подробно описано или есть на других скриншотах – лучше дайте ссылку;
• панель, содержащую информацию о версии, правах и т.д. Если выйдет новая версия, то может потребоваться поменять циферку или буковку на всех скриншотах;
• куски кода, конфигов и т.д. Лучше вставить их как форматированный текст – и выглядеть будет лучше, и пользователи смогут скопировать.

Главный принцип: пользователь должен знать, где располагается данная страница (диалог, меню), и понимать конечный результат действий. Текст стоит грамотно разбить на абзацы, заголовки должны отражать основные действия. А скриншоты нужны, чтобы облегчить поиск элементов и дать пользователю подтверждение, что он “на правильном пути”, то есть на его экране всё выглядит так же, как на скриншоте.

Процесс создания скриншотов

1. Настройка окружения. Выберите единый стиль окон и шрифтов в вашей ОС. Если интерфейс “резиновый”, определите ширину и высоту окна браузера или программы и не меняйте ее на протяжении съемки.

Лайфхак: Если вы случайно закроете окно, его размеры могут сброситься, и, скорее всего, вы не сможете их точно восстановить. Чтобы не “потерять” размеры, сделайте скриншот окна и всего экрана и обведите уголки окна красным, а потом установите полученный файл в качестве обоев рабочего стола.

Может, кто-нибудь знает более простой и изящный способ?

2. Подготовка данных. Наполните приложение примерами, приближенными к жизни и решающими конкретные пользовательские задачи. Можно продумать несколько случаев: простых, как “хеллоуворлд”, и посложнее, для продвинутых юзеров.

Желательно, чтобы имена объектов и настройки не менялись в пределах одного раздела. Например, в 1-й главе пользователь Ипполит создал заметку “Как готовить рыбу”. А во 2-й главе нужно рассказать о кастомизации заметок. Естественно, лучше рассказывать про то, как Ипполит применяет к уже созданной заметке красную заливку. Такой нехитрый подход напомнит пользователю о предыдущих действиях, а также обеспечит полноту картины.

Не забудьте наполнить вашу систему “реальными” читабельными данными, сделать предварительные настройки, подготовить шаблоны, сделать бэкапы и т.д.

Если вы делаете скриншоты для документации на иностранном языке, проследите, чтобы в кадр не попали “русские” имена (Andrew — ок, Vanja Babushkin — не ок) или надписи на русском языке.

3. Съемка. Тут все зависит от ваших инструментов, но основные рекомендации такие:
а. По возможности снимайте только значимые зоны интерфейса и делайте скриншот как можно компактнее. Так он и на лист А4 поместится, и будет иметь малый размер.
b. Как и при фотографировании, следите за композицией, не отрезайте части элементов по краям скриншота. Постарайтесь делать скриншоты одинаковой ширины и высоты в рамках одного примера.
c. Чтобы сэкономить время, делайте сразу серию скриншотов. На всякий случай можно сделать “лишние”, незапланированные скрины – вдруг пригодятся при переделках или редактировании.

4. Редактирование. Не всегда получается подготовить красивые и разнообразные данные, избежать опечаток или смоделировать определённую ситуацию (ошибка, выход из строя, большой денежный баланс). В таких случаях есть как минимум 2 выхода:
a. Править код и стили страницы в браузере (правый клик > Inspect element и поехали), если речь идет о веб-приложении.
b. Менять надписи, комбинировать блоки из разных скриншотов в графическом редакторе.

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

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

5. Сохранение. Давайте скриншотам говорящие уникальные имена, придерживаясь определённого формата, например, general_settings_privacy. Лучше не использовать пробелы и прописные буквы, а также слишком длинные названия. Такой подход гарантирует универсальность и работоспособность при размещении онлайн-справки на различных серверах.

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

6. Вставка в текст. Об этом — ниже, в разделе «Оформление».

7. Проверка. Отложите законченный раздел, проверьте его на следующий день. А лучше дайте прочитать текст и посмотреть скриншоты тестировщику или дизайнеру.

Инструменты

Десктоп-инструменты

• Snagit (Win, Mac). Одна из самых популярных программ для снятия скриншотов. Состоит из 2 модулей:
  — Capturing Tool. Фичи: увеличение области выделения, автоматическое определение зон интерфейса, снятие полноразмерных скринов, задержка по времени для всплывающие элементов, запись видео;
  — Editor. Фичи: стрелочки, аннотации, эффекты, рамки, шаринг.
  Из минусов могу назвать только то, что редактор мог бы иметь больше настроек и эффектов;
• Shutter (Linux). Если коротко, то это Snagit для Linux, естественно, opensource;
• Adobe Photoshop (Win, Mac). Рекомендую использовать для хардкорного редактирования, сложных эффектов. Скрины одного раздела можно хранить как слои psd файла, а при помощи макросов и скриптов можно творить чудеса с большим количеством файлов;
• GIMP (Win, Mac, Linux). Бесплатная замена Photoshop. Здесь отличная статья про автоматизацию обработки скринов в GIMP;
• ImageMagic. (Win, Linux) Набор программ (консольных утилит) для чтения и редактирования файлов множества графических форматов. Отлично подходит для пакетной обработки скриншотов;
• Visio (Win). А почему бы и нет? Годится в качестве редактора для выделения и аннотирования, особенно, если куплен весь пакет MS Office;
• Dropbox (Win, Mac, Linux). Десктоп-клиент может автоматически сохранять все ваши скрины на диске и в облаке и копировать ссылку в буфер обмена;
• Joxi (Win, Mac, Linux, Chrome plugin). Тот же функционал, что и в Dropbox, плюс возможность добавления подписей и эффектов на лету;
• LightShot (Win, Mac, Chrome, Firefox plugin). Тот же функционал, что и в Joxi, плюс возможность редактирования скриншота в бесплатном онлайн-редакторе Pixlr.

Плагины для браузеров

Модули HAT программ

Инструменты для создания GIF анимаций

Утилиты для сжатия изображений

• ImageOptim (Mac) — бесплатно;
• RIOT (Win) — бесплатно.

Оформление

Определите оптимальный формат для ваших скриншотов. Если коротко, то:

• png – интерфейсы;
• jpg – фото;
• gif – анимации (отличный пост про анимацию), иконки;
• ico – иконки.

Каждый скриншот должен иметь id, alt, title, номер в пределах раздела или главы.

Выберите ширину и высоту, разрешение:

• для печати (ширина не больше A4, помните про деление на страницы и вставляйте разрывы страниц при необходимости);
• для экрана (как скриншот будет смотреться на планшетах и мобильных, учитывайте особенности скриншотов, сделанных на Retina);
• комбинированный подход – Conditional Output (Help+Manual, Confluence — Scroll Versions plugin, Flare). При таком подходе можно делать несколько версий каждого скриншота.

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

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

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

Если вы вырезали часть окна, то можно показать обрезанный край с неровной кромкой или прозрачностью:

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

Для акцента можно также использовать выделение с помощью цвета – оставить цвет у целевого элемента (панели), а остальные обесцветить:

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

Используйте интерактивные элементы (для HTML):

• лайтбокс как в Confluence, можно с галереей;
• увеличение (как товары на Ebay);
• слайдер;
• image map с тултипами (пример 1, пример 2).

И ещё несколько советов.

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

Переиспользуйте стандартные компоненты (иконки, панели, диалоги). Хороший пример — Confluence Inclusions Library.

Разместите список основных иллюстраций (лучше — со ссылками на иллюстрации) после содержания или в конце мануала.

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

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

Делайте скрины для всех языковых версий ПО одновременно. Тогда при локализации справки вам не понадобится просить переводчика о дополнительных услугах, а техническому писателю не понадобится учить йиксбара, например.

А еще рекомендую прочесть эту статью с очевидными, но полезными советами.

Заключение

Правильные скриншоты улучшают любой хелп или мануал, делают их понятными и наглядными. А чтобы сделать правильные скриншоты, надо хорошо подготовиться и затратить немало единиц времени, внимания и энергии. Например, в нашей практике встречались непростые продукты, скриншоты которых стоили не обычные $1-2 за штуку, а $5 и даже $10. Кстати, если вам потребуется помощь со скриншотами или с хелпами целиком — мы всегда на связи 😉

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

Будет круто, если в комментариях вы поделитесь своим опытом по поводу создания скриншотов. Инструменты, процесс, размеры, подписи, стили, хранение, автоматизация — интересны любые практические советы!

P.S: Спасибо за статью нашему гуру создания технической документации Александру Зинчуку

Alconost занимается локализацией приложений, игр и сайтов на 60 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

Источник