Три способа: Как сделать скриншот страницы с прокруткой + видео

Как сделать скриншот страницы, выходящей за формат экрана

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

  • дизайнерам Тем (шаблонов) сайтов;
  • тем, кто использует локальный сервер, например, Denwer или Open;
  • разработчикам проектов (макетов) для отправки заказчику;
  • для наполнения своего портфолио;
  • просто, чтобы сделать скрин, выходящий за рамки экрана монитора.

Например, бесплатные Темы для WordPress, которые предлагает разработчик в рассылке смотрятся не так, как мы их видим при скачивании на сайте ru.wordpress.org. Вот сравните:

Скриншоты Тем для сайтов на WP
Слева на право: 1 — скрин только экрана Темы; 2, 3, 4 — пример скриншотов всей страницы целиком

Способ I

Расширение FireShot для создания скриншотов страниц любой длины: плюсы и минусы

FireShot - Огненный выстрел

Для этого варианта установите расширение FireShot для браузера. На русский [Файер Щотс] переводится как Огненный выстрел. Чем привлекает этот продукт, почему ставлю его на первое место? Другие два способа делают скрин экрана и всей страницы целиком, а FS, кроме этого, позволяет самим выбирать длину прокрутки.

Плюсы

Плюсы расширения для браузера FireShot

  1. Плагин можно установить в самых популярных браузерах. Вы найдете FireShot в расширениях Оперы, Яндекса, FF и др.
  2. Скрины получаются довольно хорошего качества. В настройках бесплатной версии есть выбор форматов: PNG/IPG.
  3. Размер отображаемой картинки выбираете сами: видимая область — экран монитора; страница целиком — автоматически: от верха до самого низа; регион — захват нужной длины с прокруткой.
  4. Это бесплатный продукт, но есть дополнительный платный функционал с графическим редактором и расширенным выбором форматов.
  5. В Хроме расширение и описание автоматически переводятся на русский (в других браузерах не проверяла).
  6. Установка дополнительного плагина не влияет на скорость работы браузера.
  7. Скрин можно сохранить на ПК как картинку или PDF-файл; скопировать снимок и ссылку в буфер обмена, распечатать на бумаге, отправить по E-mail.

Минусы

Минусы плагина FireShot

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

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

Как установить FireShot в Google Chrome 

Для установки расширения FireShot в Гугол Хром, откройте магазин, потом расширения, впишите искомое наименование плагина .. Если хотите еще проще, перейдите по ссылке: https://chrome.google.com/webstore… , и сразу попадете на страницу установки FS.

Страница установки FS - модуль для создания скриншотов в браузерах

  1. Нажмите кнопку: Установить.
  2. Подтвердите установку в всплывающем окошке.

Три способа: Как сделать скриншот страницы с прокруткой + видео

  1. В верхней панели браузера появится иконка в виде буквы «.

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

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

Шаг 1. Чтобы создать скриншот, кликните на значок, и выберите один из трех вариантов:

  • вся страница целиком;
  • видимая область на экране;
  • регулируемый захват региона страницы любой длины.

Шаг 2. Подождите несколько секунд (зависит от длины скриншота).

Шаг 3. Когда скрин будет готов, откроется окно выбора, в каком формате сохранить картинку.

Как сохранить скриншот

По-умолчанию скриншот будет находиться в папке FireShot в загрузках или на рабочем столе. Это зависит от ваших настроек браузера.

Как сделать скриншот страницы с прокруткой, используя FireShot

Способ II

Как сделать скриншот всей страницы в разрешении экрана монитора, а также ее мобильных версий

Этот вариант ставлю на II место, потому что нет выбора, в каком формате сохранить скрин (ipg/png). Зато он не требует дополнительной установки плагина в браузер. Для создания скриншота используют гугловские настройки. Чтобы это реализовать в Chrome, откройте страницу, как показано на скриншоте. Нажмите: три точки — дополнительные инструменты — инструменты разработчика.

Создание скрина без дополнительного софта в Chrome

Настройте тип отображения: мобильные варианты (1) или в размере своего монитора (2). По умолчанию расширение (2) будет мобильной версии — это 100%. На скрине видите, что вписала параметры своего экрана: 1366х768 — это (24%).

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

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

Capture screenshot; Capture full size scrinshot

  • Capture screenshot — скрин видимой области (экран);
  • Capture full size scrinshot — скриншот всей страницы с прокруткой.

Дождитесь загрузки. По-умолчанию файл попадет в папку Загрузки (Download).

Все. Создание скрина завершено.

Примечание: Если необходимо сделать графические пометки (выделения, затемнение, стрелки, надписи и пр.), воспользуйтесь, например, хорошим и бесплатным редактором FastStone Image Viewer. Для экранных скриншотов подойдет удобный и быстрый joxi. Если что-то осталось непонятным, посмотрите короткое видео.

Как создать скриншот всей страницы без установки дополнительного софта

Способ III

Как сделать скриншот при помощи расширения joxi с графическим редактором

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

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

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

Как установить расширение Joxi в Google Chrome

для создания скриншота с прокруткой

Чтобы установить расширение joxi в Хроме, перейдите по ссылке в интернет-магазин https://chrome.google.com/webstore… Нажмите на синюю кнопку: Установить. Подтвердите действие в всплывающем окошке, кликнув на Установить расширение.

Как установить плагин joxi для создания скриншота страницы целиком

После этого иконка плагина появится в правом углу верхней панели. При создании первого скриншота, joxi попросит ввести E-mail и пароль. Я не нашла, где можно авторизоваться, поэтому просто нажала опцию Восстановить (изменить) пароль. После этого заполнила окошко и вошла в режим создания скрина. Возможно это потребовалось только мне, так как, программа уже установлена на ПК.

Как сделать скриншот всей страницы

Плагин выполняет две функции, не считая возможности графического редактирования полученной картинки:

  • захват видимой области на экране;
  • снимок всей страницы без захвата определенного региона.

Ссылка на скрин автоматически копируется в буфер обмена. Все картинки хранятся на серверах Джокси. Для этого в облаке выделяется 1 ГБ места. Перейдя по ссылке, скриншот можно скопировать на ПК.

Примечание: Если кроме плагина на ПК установлена и  программа Joxi, она сохраняет снимки в одноименной папке в Загрузках (Download) системы. Работая с утилитой в браузере, обнаружите все файлы скриншотов в облаке: и тех, которые хранятся на компьютере, и тех, что сделаны при помощи расширения для Хрома. Поэтому, когда снимков много, используйте облако для экономии места на диске.

Заключение

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

Комментарии

  1. Уведомление: Как сделать копию сайта на wordpress быстро, просто и бесплатно :
  2. Уведомление: Как выбрать бесплатную тему для сайта на wordpress, скачать шаблон

Оставить ответ

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