Comments 76
Про Monosnap забыли.
Спасибо за статью, однозначно в закладки.
Но, возник вопрос по поводу gif скриншотов. Сколько времени уходит на создание изображения, которое в примере показано Пример?
Но, возник вопрос по поводу gif скриншотов. Сколько времени уходит на создание изображения, которое в примере показано Пример?
Мы используем более простой способ фиксации размеров скриншотов (более простой — на наш взгляд).
Перед началом съемки необходимо просто:
— установить требуемое разрешение экрана. Например, 1280х1024.
— установить автоскрытие панели задач
— развернуть приложение на весь экран.
Таким образом приложение в каждую съемку не будет отличаться по размерам ни на пиксель. И все действия выполняются очень просто.
Перед началом съемки необходимо просто:
— установить требуемое разрешение экрана. Например, 1280х1024.
— установить автоскрытие панели задач
— развернуть приложение на весь экран.
Таким образом приложение в каждую съемку не будет отличаться по размерам ни на пиксель. И все действия выполняются очень просто.
UFO just landed and posted this here
Полностью поддерживаю. ShareX — мой скриншотер №1.
Есть версия только для Windows.
Поддерживаю. Более универсального, гибкого, одновременно простого и ле
гкого решения под Win я не нашел.
Чего только стоит загрузка на свои сервера, полностью настраиваемые хоткеи и сценарии, запись с экрана в mp4 и gif.
гкого решения под Win я не нашел.
Чего только стоит загрузка на свои сервера, полностью настраиваемые хоткеи и сценарии, запись с экрана в mp4 и gif.
Хочу сделать важное замечание: прежде, чем делать скриншоты, нужно сперва определить — для чего они. Если это инструкция в электронном виде — тут все просто (к слову, не понимаю, зачем на маке ставить отдельное приложение, если стандартное cmd+shift+4 и пробелом выбирать окно делает замечательные скриншоты, включая тень вокруг окна и вырезая «подложку», т.е. на белом фоне. На линуксе я пользуюсь scrot-ом. Он не умеет делать аннотации, но это же unix-way — в скроте сделать скриншот, а аннотируй где душе угодно. В том же офисе).
А вот если скриншоты предназначены для печати все становится резко сложнее. Если у вас не retina, то разрешение вашего экрана заметно уступает разрешению печати. Начинается либо интерполяция, либо артефакты, хорошо заметные на бумаге. И в одном, и в другом случае такие изображения портят впечатление (поднимите руку те, кто встречал иконку 32 на 32 пикселя, растянутую на 5 на 5 см). Чтобы скриншоты хорошо выглядели на печати, их нужно делать с разрешения, при котором ppi близок к печатному (хотя бы 300). Тут поможет либо выставить огромное разрешение, если позволяет система, либо использовать лупу и делать скриншоты частей приложения, склеивая их обратно в редакторе. Если у кого есть готовое решение этой задачи — поделитесь.
А вот если скриншоты предназначены для печати все становится резко сложнее. Если у вас не retina, то разрешение вашего экрана заметно уступает разрешению печати. Начинается либо интерполяция, либо артефакты, хорошо заметные на бумаге. И в одном, и в другом случае такие изображения портят впечатление (поднимите руку те, кто встречал иконку 32 на 32 пикселя, растянутую на 5 на 5 см). Чтобы скриншоты хорошо выглядели на печати, их нужно делать с разрешения, при котором ppi близок к печатному (хотя бы 300). Тут поможет либо выставить огромное разрешение, если позволяет система, либо использовать лупу и делать скриншоты частей приложения, склеивая их обратно в редакторе. Если у кого есть готовое решение этой задачи — поделитесь.
Решение очень простое: готовя скриншоты к печати, не стоит их ресамплить. Лучше потерять разрешение, чем четкость изображения.
Сама пиксельная природа скриншота оставит его прекрасно отрисованным даже при разрешении 100-150 dpi (или, как верно пишете, ppi — формально это более правильный термин). Лупа экранная ведь делает ровно то же самое, что увеличение физических размеров печатного изображения без ресамплинга ;-)
Конечно, если тянуть до огромных размеров — то будет фигово. Но делать такие разгоны для цельных скриншотов обычно не приходится, а иконку в 90% случаев можно найти большего, чем 32х32, размера — многие современные ico-файлы содержат много размеров, да и в Сети надыбать можно.
Ну и, конечно, никакого сохранения скриншотов интерфейсов в jpg! ;-)
Сама пиксельная природа скриншота оставит его прекрасно отрисованным даже при разрешении 100-150 dpi (или, как верно пишете, ppi — формально это более правильный термин). Лупа экранная ведь делает ровно то же самое, что увеличение физических размеров печатного изображения без ресамплинга ;-)
Конечно, если тянуть до огромных размеров — то будет фигово. Но делать такие разгоны для цельных скриншотов обычно не приходится, а иконку в 90% случаев можно найти большего, чем 32х32, размера — многие современные ico-файлы содержат много размеров, да и в Сети надыбать можно.
Ну и, конечно, никакого сохранения скриншотов интерфейсов в jpg! ;-)
если стандартное cmd+shift+4 и пробелом выбирать окно
Как это возможно запомнить?! Я полагал, что Mac OS X позиционируется как простая в освоении и использовании система.
Рекомендую удобный инструмент для изменения размера окон Sizer.
Можно сделать свой набор размеров, при «ресайзе» мышкой выводится текущий размер.
Можно сделать свой набор размеров, при «ресайзе» мышкой выводится текущий размер.
А для mac есть хорошая программа для управления окнами Moom (раньше пользовался Divvy). Так вот, в Moom (как и в других аналогичных программах) — делается набор размеров, как у SVGen, плюс к этому можно запомнить расположение окна на экране. Это может быть важно на mac, так как главное меню программы оторвано от окна этой программы. Либо у вас скриншот многооконного интерфейса и, например, фотообои на десктопе, а не одноцветный фон. Чтобы все было единообразно.
А еще бы послушать советы как делать скриншоты из high dpi окружения и для него.
еще можно пользоваться Cloudshot: cloudshot.codeplex.com
Он умеет делать скриншоты и писать gif
Он умеет делать скриншоты и писать gif
Ссылка теперь другая http://cloudshot.com
Я так понимаю, что кроссплатформенных HAT программ не существует?
А зачем велосипеды изобретать, если всё (или почти всё), что нужно уже есть в операционной системе???
PSR же! windows.microsoft.com/ru-ru/windows7/how-do-i-use-problem-steps-recorder
Включили, поработали, получили все шаги с описанием, отредактировали. Profit!
PS Для комфорта удобнее запускать в виртуалке с относительно малым разрешением, типа 1024 х 768.
PSR же! windows.microsoft.com/ru-ru/windows7/how-do-i-use-problem-steps-recorder
Включили, поработали, получили все шаги с описанием, отредактировали. Profit!
PS Для комфорта удобнее запускать в виртуалке с относительно малым разрешением, типа 1024 х 768.
Спасибо за подсказку.
Про «Ножницы» в Windows7 никто не сказал — ссылка.
Про «Ножницы» в Windows7 никто не сказал — ссылка.
конечно, автор описывает «более другой» кейс, с другими приоритетами.
Поэтому мне совершенно не близок набор софта для собственно скриншотинга (кроме Joxi, пожалуй — за эту прогу респект).
Мне обычно требуется быстро сделать скриншот, иногда отредактировать и что-то подписать на нем — и быстро загрузить на сервак со ссылочкой. В общем, вот еще несколько альтернатив Joxi (и Дропбоксу, но тут я не хочу использовать цельный клиент для частной задачи):
• QipShot (грузит на QIP-сервер — как с регистрацией на нем, так и без нее)
• 4sharedShot (клон QipShot'a для юзеров 4shared)
• Postimage (тоже грузит на свой сервер postimage.org )
для быстрой загрузки уже готовых изображений в web также использую snag.gy, работающий аналогично упомянутому выше makescreen.ru
А вот чего я не нашел — так это тулзы, делающей все вышеперечисленное, но при этом способной делать скролл-скриншоты длинных web-страниц. Те, что умеют такие скрины (типа FastStone Capture) — не умеют чего-то другого обычно…
Поэтому мне совершенно не близок набор софта для собственно скриншотинга (кроме Joxi, пожалуй — за эту прогу респект).
Мне обычно требуется быстро сделать скриншот, иногда отредактировать и что-то подписать на нем — и быстро загрузить на сервак со ссылочкой. В общем, вот еще несколько альтернатив Joxi (и Дропбоксу, но тут я не хочу использовать цельный клиент для частной задачи):
• QipShot (грузит на QIP-сервер — как с регистрацией на нем, так и без нее)
• 4sharedShot (клон QipShot'a для юзеров 4shared)
• Postimage (тоже грузит на свой сервер postimage.org )
для быстрой загрузки уже готовых изображений в web также использую snag.gy, работающий аналогично упомянутому выше makescreen.ru
А вот чего я не нашел — так это тулзы, делающей все вышеперечисленное, но при этом способной делать скролл-скриншоты длинных web-страниц. Те, что умеют такие скрины (типа FastStone Capture) — не умеют чего-то другого обычно…
У joxi есть расширение для Chrome, которое умеет скроллить страницы.
Забыли про Image Uploader zenden.ws/ru/imageuploader
Поддержка Yandex.Fotki, Yandex.Disk, Google Drive, Google Picasa WebAlbums, Dropbox, flickr.com, и многих других, FTP сервер.
Встроенный редактор снимков.
Ко всему к этому он еще Open Source.
Поддержка Yandex.Fotki, Yandex.Disk, Google Drive, Google Picasa WebAlbums, Dropbox, flickr.com, и многих других, FTP сервер.
Встроенный редактор снимков.
Ко всему к этому он еще Open Source.
Я часто использую снимки экрана. Ежедневно. Советую screencloud, делаю скриншот нажатием горячей клавиши — на выходе прямая ссылка на png в буфере.
UFO just landed and posted this here
Еще одну копейку кину.
У ноутбука моего тормозной софт для FN клавиш, заменил его установив «Keyboard Maniac», скачал утилитку «Nircmd».
В первой переопределил клавишу PrtSc на создание скриншота и сохранения в нужной папке.
Команда: «savescreenshot „Z:\Screenshots\~$currtime.HH_mm_ss$.png“»
Ну и конечно настроил регулировку яркости, выключение экрана, и еще пару горячих клавиш.
Очень доволен программой, не теперь не хватает клавиш на свои нужды.
У ноутбука моего тормозной софт для FN клавиш, заменил его установив «Keyboard Maniac», скачал утилитку «Nircmd».
В первой переопределил клавишу PrtSc на создание скриншота и сохранения в нужной папке.
Команда: «savescreenshot „Z:\Screenshots\~$currtime.HH_mm_ss$.png“»
Ну и конечно настроил регулировку яркости, выключение экрана, и еще пару горячих клавиш.
Очень доволен программой, не теперь не хватает клавиш на свои нужды.
Никто не сказал про kscreenshot, а он умеет задержку, скриншот окна с рамкой/без, и самое удобное — готовый скриншот часто не надо даже сохранять, его можно просто перетащить куда надо, тот же хром это переваривает прекрасно, не говоря о других программах.
Чтобы показать динамику, можно сделать комбинированный скриншот:
Это вы уже в редакторе впоследствии делаете?
По поводу фиксации размеров экрана при производстве скриншотов:
В случае веб-приложений бывает полезно поставить какое-нибудь расширение для браузера, позволяющее принудительно точно задавать размеры окна браузера или viewport'a. Пользовался Web Developer Toolbar для этих целей в Chrome.
Это точнее, чем «засечки» на фоновом рисунке экрана..
В случае веб-приложений бывает полезно поставить какое-нибудь расширение для браузера, позволяющее принудительно точно задавать размеры окна браузера или viewport'a. Пользовался Web Developer Toolbar для этих целей в Chrome.
Это точнее, чем «засечки» на фоновом рисунке экрана..
А как же Skitch от Evernote? evernote.com/intl/ru/skitch
Отличный инструмент и синхронизация с эверноутом в придачу
Отличный инструмент и синхронизация с эверноутом в придачу
Если вы делаете скриншоты для документации на иностранном языке, проследите, чтобы в кадр не попали “русские” имена (Andrew — ок, Vanja Babushkin — не ок) или надписи на русском языке.
При этом на первом же скриншоте часть названий полей (не имен!) на русском, часть — на английском.
Кстати, чем русские имена-то плохи?
Вот список скриншотеров на любой вкус.
Естественно, все бесплатно.
Естественно, все бесплатно.
- Screenshot (rus)
- WebShot (eng)
- Screenshot Captor (eng)
- PicPick (rus)
- ScreenPresso (rus)
- UVScreenCamera (rus)
- Clip2Net (rus)
- Capture NET (rus)
- Qip Shot (rus)
- ScreenCapture (rus)
- Joxi (rus)
- Jing (eng)
- Lightshot (rus)
- Gyazo (eng/opensource)
- Floomby (rus)
- Grabilla (eng)
- Screeny (rus)
- ScreenSnag (eng)
- Greenshot (rus)/opensource)
- Icecream Screen Recorder (rus)
- ShareX (eng/opensource)
- Monosnap (rus)
GreenShot очень удобный, много лет им пользуюсь.
Из этого добра отмечу
Greenshot в свое время меня чем-то разочаровал, не помню. Сейчас вроде, подрос функционально.
WebShot, судя по описанию, занятная штука. Как раз для использования в сложных workflow подготовленными юзерами. Не для чайников.
- PicPick, который одним из первых стал предлагать возможности настоящего комбайна с кучей функций
- Grabilla, у которой не только куча функционала теперь, но и отличный букмарклет — один из первых и при этом лучших веб-сэйверов, с помощью которого можно сохранять для себя особо ценные страницы, не боясь, что в один непрекрасный день сайт с этой инфой перестанет существовать
- QipShot, как мой основной инструмент (хотя и со слабеньким редактором) — в первую очередь за надежный (при том что бесплатный) сервис хранения-шаринга. Картинки не пропадают.
Greenshot в свое время меня чем-то разочаровал, не помню. Сейчас вроде, подрос функционально.
WebShot, судя по описанию, занятная штука. Как раз для использования в сложных workflow подготовленными юзерами. Не для чайников.
UFO just landed and posted this here
А что-нибудь из этого можно установить на свой сервер и заливать скрины туда?
Ребята, поделитесь опытом, как вы потом обновляете скриншоты в документации, когда интерфейс меняется?
И что делать, если скриншот уже был обработан (добавлены красные рамки, стрелки, тени, обрезаны края и тп)?
У нас просто это довольно механически делается, мне кажется это немного неправильно…
И что делать, если скриншот уже был обработан (добавлены красные рамки, стрелки, тени, обрезаны края и тп)?
У нас просто это довольно механически делается, мне кажется это немного неправильно…
Можно делать в html и подменять только картинки. А после преобразовывать в нужный формат.
как вариант, можно сохранять ещё и файл-проект, например, в snagit. при таком подходе все стрелки сохраняются как отдельные объекты, а вам остаётся только фон менять.
Есть специализированный софт для таких случаев. Недешевый. Например, TT Knowledge Force работает так:
— автор мануала пишет «скринкаст», проходя по всем требуемым функция программы (например, «Как создать новую учетную запись»)
— TTKF пишет не видео, а серию скриншотов, дополненную мета-информацией, взятой из accessibility meta (описание действий автора, уникальные ID каждой кнопки, произносимые названия кнопок и т.п.)
— в дальнейшем эту серию скриншотов можно опубликовать как:
а) пошаговое «кино» с автоматически сгенерированными комментариями («Now click 'Edit' button to open 'Edit configuration' dialog»)
б) интерактивный курс (в котором требуется выполнить некоторое задание, например «Open 'Edit configuration' dialog» — система будет ждать, пока вы не «нащупаете» нужную кнопку)
в) статичный документ (DOC, PDF, HTML), в котором кино из пункта «а» разложено на скриншоты и комментарии.
А теперь — главный трюк. Если запустить TTKF в режиме перезаписи, он автоматически повторит изначальные действия автора и сравнит текущий интерфейс программы с записанным. При обнаружении различий («появилась новая кнопка») он в полуавтоматическом режиме (требуется подтверждение от оператора) обновит все скрины.
Если перезапись запустить в той же программе, но с другим языком интерфейса, то будет просто создана альтернативная языковая версия скринкаста — со скринами и комментариями на новом языке, но семантически привязанная к оригинальному скринкаста. Возможен форкинг (если в другой языковой версии есть доп.кнопки, которых нет в оригинале).
Все это придумано для документирования, составления мануалов, производства интерактивных обучалок и экзаменов для пользователей SAP, поэтому ценник там весьма enterprise.
— автор мануала пишет «скринкаст», проходя по всем требуемым функция программы (например, «Как создать новую учетную запись»)
— TTKF пишет не видео, а серию скриншотов, дополненную мета-информацией, взятой из accessibility meta (описание действий автора, уникальные ID каждой кнопки, произносимые названия кнопок и т.п.)
— в дальнейшем эту серию скриншотов можно опубликовать как:
а) пошаговое «кино» с автоматически сгенерированными комментариями («Now click 'Edit' button to open 'Edit configuration' dialog»)
б) интерактивный курс (в котором требуется выполнить некоторое задание, например «Open 'Edit configuration' dialog» — система будет ждать, пока вы не «нащупаете» нужную кнопку)
в) статичный документ (DOC, PDF, HTML), в котором кино из пункта «а» разложено на скриншоты и комментарии.
А теперь — главный трюк. Если запустить TTKF в режиме перезаписи, он автоматически повторит изначальные действия автора и сравнит текущий интерфейс программы с записанным. При обнаружении различий («появилась новая кнопка») он в полуавтоматическом режиме (требуется подтверждение от оператора) обновит все скрины.
Если перезапись запустить в той же программе, но с другим языком интерфейса, то будет просто создана альтернативная языковая версия скринкаста — со скринами и комментариями на новом языке, но семантически привязанная к оригинальному скринкаста. Возможен форкинг (если в другой языковой версии есть доп.кнопки, которых нет в оригинале).
Все это придумано для документирования, составления мануалов, производства интерактивных обучалок и экзаменов для пользователей SAP, поэтому ценник там весьма enterprise.
У вас скриншот с примером обрезанного края взят из этой статьи: habrahabr.ru/company/devexpress/blog/106611 Можно было бы и её как пример привести.
… детали можно увеличить, чтобы сделать акцент...
А вот чем такое можно сделать?
Вчера как раз таким вопросом задавался, нигде не упомянули, какие инструменты так умеют.
Методом проб и ошибок остановился на ScreenPresso (спасибо этому комментарию)
Там по хоткею (M), либо на панели инструментов искать увеличительное стекло
Методом проб и ошибок остановился на ScreenPresso (спасибо этому комментарию)
Там по хоткею (M), либо на панели инструментов искать увеличительное стекло
Share Bucket нелпох еще
Greenshot нравится. Работает по PrintScreen, есть аннотации, заливает куда угодно — хоть в буфер, хоть в imgur, хоть в Jira. Возможно есть и круче\навороченней, но мне получается работать с ним моментально практически.
github.com/sindresorhus/pageres – клевая скриншотилка для пользователей Ubuntu / OS X и иже с ними. Без графического интерфейса.
Установка:
Пример использования:
Установка:
$ npm install --global pageres
Пример использования:
$ pageres todomvc.com yeoman.io 1024x768 1366x768
Под Win мне нравится встроенный скриншотер в IrfanView — все самые необходимые опции (настраиваемая горячая клавиша, что снимать, куда складывать и т.п.) присутствуют плюс есть базовое редактирование (пририсовать стрелочки, подсветка), и все это без необходимости установки отдельного ПО. К тому же IrfanView непосредственно как просмотрщик картинок очень хорош — быстрый, легкий, бесплатный.
Не упомянули Яндекс.Диск, в котором есть удобная скриншотилка с возможностью редактирования:
Paint.net опенсурсный тоже не упомянули. Запускается в отличии от фотошопа и гимпа в разы быстрее, а так слои есть. фильтры есть, плагины есть.
Про Dropbox сказали, а про отечественный Яндекс.Диск забыли, хотя он имеет гораздо лучший скриншотер. Умеет делать снимок всего экрана, региона или окна (автоматически вырезая фон), после чего мы попадаем в редактор с базовым функционалом: можно изменить размер изображения, замылить или выделить объект, добавить текст, линии или стрелки. После в один клик публикуем в вебе. Я перешел на него с Joxi, перепробовал много разных вариантов, ЯД очень достойный игрок на рынке.
А для записи обучающий роликов что порекомендуете?
Странно, странно… ждал, когда Pumpshooter упомянут. А его всё нет.
Вообще, сколько людей, столько и мнений (софтин), даже не ожидал такого разброса от коллег.
Вообще, сколько людей, столько и мнений (софтин), даже не ожидал такого разброса от коллег.
В разделе «Инструменты для создания GIF анимаций» забыли ScreenToGif.
Я делаю скрины в FastStone Capture (платный продукт, но достаточно много функций, включая создание скринов с прокруткой, редактор со стрелками, надписями, размытием области и кучей эффектов, определение цвета пикселя, экранная линейка и ещё куча всего).
Для записи видео в наивысшем качестве — мне очень нравится UVScreenCamera (это отечественный продукт, тоже платный). Прелесть в двух киллер-фичах: кастомный формат сохранения видео, при котором запись происходит без потерь (!), с возможностью экспорта в GIF, FLV, AVI с кучей кодеков и другие, а главное — функция сглаживания движения указателя при редактировании во встроенном редакторе. То есть я могу вырезать лишний фрагмент на записи, потом выделить два граничных кадра, применить сглаживание — и редактор сам создаст дополнительные кадры, сглаживающие рывок указателя. Очень крутая возможность.
Для записи видео в наивысшем качестве — мне очень нравится UVScreenCamera (это отечественный продукт, тоже платный). Прелесть в двух киллер-фичах: кастомный формат сохранения видео, при котором запись происходит без потерь (!), с возможностью экспорта в GIF, FLV, AVI с кучей кодеков и другие, а главное — функция сглаживания движения указателя при редактировании во встроенном редакторе. То есть я могу вырезать лишний фрагмент на записи, потом выделить два граничных кадра, применить сглаживание — и редактор сам создаст дополнительные кадры, сглаживающие рывок указателя. Очень крутая возможность.
Sign up to leave a comment.
Делаем скриншоты правильно: практические советы