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

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

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

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

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

Нужно:

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

НЕ нужно:

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

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

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

Как сделать скриншот только активного окна на компьютере?

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

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

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

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

Как сделать скриншот экрана? LightShot — Лучшая программа для скриншотов

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

Если вы делаете скриншоты для документации на иностранном языке, проследите, чтобы в кадр не попали “русские” имена (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 программ

• Dr.Explain. «Интеллектуальное” снятие и аннотирование скриншотов – главная фишка этой программы. Она определяет структуру окна и может автоматически распознать и подписать все элементы интерфейса. В самом редакторе есть много стилей для стрелочек, цифр и так далее;
• Help+Manual. Дороже, чем Dr.Explain, а модуль для снятия скринов хуже. Но пользоваться можно, тем более, что аннотации к скринам складываются в отдельный xml файл, который можно перевести при локализации;
• MadCap Flare. Достаточно дорогой редактор, модуль снятия скриншотов не впечатляет, но все основные функции есть. Радует то, что можно задавать свои стили для изображений.

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

• GifCam (Win) — бесплатно;
• ScreenFlow (Mac) — платно, также умеет снимать и редактировать видео;
• LICEcap (Win, Mac) — бесплатно.

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

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

Оформление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Как сделать скриншот окна?

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

Способы сделать скриншот окна

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

Комбинация клавиш

Alt + Prt Scrn позволяет поместить на снимок только активное окно. Решение работает во всех актуальных версиях Windows. Стоит только кликнуть где-нибудь внутри приложения, которое необходимо заскринить, и воспользоваться этими горячими клавишами. Результат окажется в буфере обмена, его получится вставить в любую форму по Ctrl + V.

Win + Shift + S – ещё один метод, более продвинутый, чем предыдущий. Воспользовавшись этой последовательностью, юзер увидит панель в верхней части экрана. Следует нажать кнопку «Оконный фрагмент», после чего кликнуть программу, которая должна оказаться на изображении.

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

Приложения

Часть читателей найдёт удобным другое решение – программы, помогающие делать скриншоты. Они обычно срабатывают по той же кнопке Prt Scrn (иногда – по другой, зависит от настроек).

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

1. Snagit;
2. PicPick;
3. Monosnap;
4. ShareX;
5. ScreenShooter;
6. Ashampoo Snap.

Ещё можно пользоваться другими решениями, но самостоятельно обрезать содержимое в любом редакторе. Подойдёт даже Paint, встроенный во все релизы Windows.

Заключение

Создать скриншот легко на всех устройствах, для этого достаточно использовать горячие клавиши (hotkeys) или утилиты из Сети.

Источник: screenshoti.ru

Как сделать скриншот активного окна?

Чтобы сделать скрин только активного окна, не зацепив того, что находится за окном на дисплее, жмем кнопки Alt + Print screen и затем вставляем в Ворд или любой графический редактор.

Здесь нажали просто Prt scr

А во втором случае Alt + Prt scr — видим только активное окно.

автор вопроса выбрал этот ответ лучшим
комментировать
в избранное ссылка отблагодарить
Ксарф­ акс [156K]
4 года назад

Расскажу о 2 способах, позволяющих сделать скриншот активного окна.

1 способ

Можно воспользоваться стандартным средством ОС Windows — приложением «Ножницы» («Snipping Tool»).

Вот пошаговый алгоритм создания скриншота:

1) Для запуска приложения в «Пуск» выбираем «Все программы» -> «Стандартные» -> «Ножницы».

Также можно нажать на комбинацию клавиш «Win» + «R», в появившемся окне ввести команду SnippingTool.

2) Откроется такое вот окно:

Рядом с кнопкой «Создать» будет раскрывающийся список, выбираем в нём «Окно».

3) Теперь нажимаем на кнопку «Создать» и щёлкаем левой кнопкой мыши на нужном окне (его границы при наведении курсором будут выделены красным цветом).

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

4) Сохранить скриншот можно путём нажатия на значок дискеты.

Или можно воспользоваться комбинацией клавиш «Ctrl» + «S».

2 способ

С помощью программы IrfanView.

1) В главном меню IrfanView выбираем «Options» -> «Capture/Screenshot»­ .

2) В окне настроек выбираем «Foreground Window», то есть активное окно.

Также задаём комбинацию клавиш, которая активирует создание скриншота, и вариант его сохранения.

3) Теперь нажимаем на кнопку «Start», щёлкаем мышкой на нужном окне (то есть делаем его активным) и создаём скриншот с помощью заданной комбинации клавиш.

комментировать
в избранное ссылка отблагодарить
КОРЛА­ НД КАРЛО­ ВИЧ [115K]
8 лет назад

Можно, как справедливо уже сказали, воспользоваться известной связкой Print screen + Paint, а там уже вырезать именно активное окно, а можно и воспользоваться специальным софтом. Например, я всегда использую программу MWSnap, когда мне нужно сделать скриншот не всего экрана, но определённой его части. Там же в настройках можно выбрать для активных окон, а также указать, нужно ли отображать на скриншотах курсор мыши, настроить автосохранение и многое другое. Очень полезная и бесплатная программа, найти её очень просто в поисковике. Конечно, существуют и другие подобные программы, сейчас всякого добра много.

Источник: www.bolshoyvopros.ru