Как сделать скриншот страницы браузера
Как сделать скриншот страницы — вопрос настолько простой, насколько только может быть простое нажатие одной клавиши на компьютере!
Поскольку я замыслил создать серию статей о том, как работать с картинками в блоге, возникла необходимость написать несколько материалов об основах работы с изображениями. Речь пойдет о самом элементарном действии: создании скриншота страницы. Кстати, фото снизу — скриншот веб-страницы, творчески обработанный.
Полезная азбука:
Screenshot — от англ. «выстрел», «снимок».
Содержание страницы:
Делаем скриншот страницы программой Paint
Понадобится: руки и программа Paint. Может вы не знаете, но она у вас уже есть, если пользуетесь Windows, она по умолчанию входит в пакет стандартных программ. Я с ней работал еще в древних версиях винды.
Создание скриншота в программе Paint
В процессе создания сайта мы рано или поздно сталкиваемся с необходимостью научиться делать снимки с экрана компьютера, что бывает нужно для самых разных задач — от творческих до общения с техподдержкой.
Что такое скриншот?
Скриншот — это снимок экрана компьютера, вернее того, что на нем изображено. Причем снимок делается в самом компьютере. Можно сделать скриншот веб-страницы, любой фотографии, программы и даже текста. Вот пример скриншота текста в Ворде:
Я знаю, как создать скриншот страницы несколькими способами, но обычно пользуюсь одним. Я не дизайнер и владею фотошопом на бытовом уровне, поскольку всю жизнь работал с текстами и моей главной программой был Word. Но скриншот, бывало, требовался время от времени. И делал я его в очень простой программе PAINT, которая есть в любом Windows. Чем мне нравится эта программа:
- В ней можно скриншот обрезать.
- Изменить размер в пикселях или процентах.
- Нарисовать что-нибудь: стрелку, выделить элемент овалом и т. п..
- Повернуть слева на право изображение.
- Сделать какую нибудь надпись.
- Стереть то, что не надо и залить любым цветом.
Написав на скриншоте текст получится такой маленький самодельный баннер или открыточка (если вас интересует, как сделать баннер, открывающийся в новом окне, на эту тему есть отдельная статья «Баннер в новом окне«). Скриншот с текстом выглядит так:
Если хотите научиться превращать картинку в активную ссылку на любую страницу вашего блога или стороннего ресурса, пригодится статья, как сделать картинку ссылкой. Что тоже может оказаться полезным для блоггера.
Мы научимся сегодня делать не только простой скриншот, но и в качестве бонуса — с текстом, что не раз пригодится в будущем, особенно если у вас свой блог.
Инструкция «Как работать в программе Paint»
- 1. Как сделать скриншот страницы. Чтобы создать скриншот, нужно открыть ту страницу, которую хотите «сфотографировать», и нажать на одну-единственную кнопку клавиатуры. Расположена она обычно в самом верхнем ряду и называется Prt Sc (принт скрин). Все, кадр снят.
- 2. Открыть программу Paint. Для этого идем в меню ПУСК — ВСЕ ПРОГРАММЫ — СТАНДАРТНЫЕ — PAINT — ОТКРЫТЬ. Программа загрузится, и откроется главное окно:
- 3. Вставить скриншот в программу. В пункте 1 мы его сохранили — он в буфере, теперь его нужно перенести в любую программу, чтобы сохранить как изображение. Для этого нужно просто нажать на значок ВСТАВИТЬ в верхнем левом углу (на картинке выделено красным кружочком).
- 4. Сохранить. Если вам нужен снимок весь целиком (скриншот экрана компьютера), то на этом этапе можно сохранить изображение. Нажмите на значок дискеты в верхнем левом углу (выделено синим кружочком). Появится новое окно:
В самом верхнем поле задайте путь, куда сохраняете файл.
В поле ИМЯ ФАЙЛА введите название скриншота. Желательно латиницей, по-английски — особенно если сохраняете фото или скриншот для блога. Вообще лучше сразу привыкать все файлы сохранять на латинице — так корректнее. Например, при восстановлении блога из бекапа изображения, названные кириллицей, обычно слетают. Потом приходится вручную возвращать назад каждое. Я пренебрегал правилом до первого бекапа…
В поле ТИП ФАЙЛА выберите расширение. Я обычно выбираю JPEG — он меньше весит. В конце нажмите СОХРАНИТЬ. И всё, скриншот готов!
Как обрезать скриншот
Если вам нужна часть экрана, то скриншот, перед тем как сохранить, нужно обрезать. Возвращаемся в пункт 3: вставили скриншот в программу.
Переходим на вкладку ВИД — УМЕНЬШИТЬ.
Возвращаемся на вкладку ГЛАВНАЯ и щелкаем мышью на кнопку ОБРЕЗАТЬ. Курсор станет в виде прицела.
Удерживая левую кнопку мыши, выделите нужный фрагмент экрана — область выделится пунктиром.
По выделенному фрагменту щелкните правой мышкой. Нажмите КОПИРОВАТЬ.
Теперь скопированный фрагмент нужно вставить в чистый документ и сохранить его. На нижнем рисунке это зона, выделенная красным овалом: щелкаем по маленькой белой стрелочке, в выпадающем окне выбираем СОЗДАТЬ. Открывается чистый лист. Нажимаем на ВСТАВИТЬ. Фрагмент появляется в окне. Нажимаем СОХРАНИТЬ (иконка дискеты) и сохраняем, как в пункте 4.
Как поставить надпись или текст на скриншот
И обещанный бонус. Если нужно сделать на скришоте какую-нибудь надпись, перед тем как сохранить, войдите в меню текстового редактора (на рисунке выше это буква А, выделенная синим кружком). Затем щелкните мышью по той области экрана, где хотите создать надпись, и, удерживая левую кнопку мыши, выделите нужную зону. Появится пунктирный прямоугольник, в котором можно написать текст.
В красном овале: выбирается шрифт и его размер.
Зеленый овал: выбирается цвет шрифта.
Синий овал: прозрачный или непрозрачный фон под текстом.
Когда надпись будет готова, щелкните по любому места экрана мышкой, чтобы выйти из редактора. И сохраните изображение, как уже описывалось выше. Ваша открытка готова!
Теперь вы знаете не только, как сделать скриншот страницы, но и знаете, как работать с программой Paint. Она легкая, понятная и всегда под рукой. Когда приноровитесь, будете делать скриншоты за пару минут.
Еще есть очень интересная и тоже не сложная программа по работе с изображениями — FastStone Image Viewer, в которой можно изменять и красиво оформлять фотографии.
ПОЛЕЗНЫЙ НАВЫК: Как уменьшить вес фото
Если статья помогла вам и вы все поняли, пожалуйста поделитесь ей с друзьями, нажав на кнопки социальных сетей ниже. Этим вы поможете проекту в развитии.
Очень все подробно изложено. Обязательно теперь буду пользоваться выше описанным способом.Мне еще не приходилось создавать скриншоты, теперь смогу это делать
да, писала дольше, чем это делать. В деле времени буквально минуту занимает. Принтскрин — Paint — Вставить — Сохранить.
Спасибо,Лариса!Полезная статья! С фотошопом еше наверное долго придется разбираться, а вот с Paint уже получилось.
Александр, спасибо за отклик! О, Вы разберетесь и с фотошопом со временем. Но и в Paint можно многие простые для блоггера вещи делать.
Конечно разберусь,Лариса,но для меня еще совсем недавно была проблема надпись сделать на картинке или изменить размер.Спасибо Вашему блогу!:)
Самое ценная благодарность для автора — когда получилось!
Можно, конечно, и в Paint — всё-таки он в любой винде предустановлен.
Но есть множество спецпрограмм, в том числе бесплатных Я пользуюсь вот этой — FastStone Capture
Весьма удобная прога.
Рада видеть, Володя! Да, FastStone Captur — отдельная песня.. Собираюсь написать и по нему несколько статей в серии «Веселые картинки»)
Лариса здравствуйте.Подскажите пожалуйста,я сделала пробно с вашего поста скрин,но что то не так получилось. Нужный элемент в самом уголке и много лишнего пространства. Как сделать чтоб была только нудная картинка?[URL=http://www.radikal.ru][IMG]http://s51.radikal.ru/i134/1303/4d/1ccaeeead540.jpg[/IMG][/URL]
Светлана, не ответила сразу, потому что комментарий со ссылками попал в спам. Можно там сделать во весь экран. Для этого нужно обрезать, как прописано в статье, ту часть скриншота, которую вы хотите. Когда вставите вырезанную часть в чистый лист, нужно мышкой ухватить за нижний правый угол скриншота и растянуть на весь лист.
Но, Светлана, Point для скриншота удобен только совсем новичкам. Чтобы делать хорошие и быстрые скрины, скачайте и установите программку FastStone Capture.
Для снятия скриншотов советую LightShot
Спасибо. Много есть программок для скриншотов. Пойнт бывает нужен, когда ничего другого под рукой нет.
Добрый день Лариса.Смешно наверное будет,но как то не обращал на пойнт внимания,какие функции может выполнять эта прграмма,посмотрел,спасибо.Всё пользовался прграммой FastStone,тоже неплохая программа.
Как прикладной инструмент для решения некоторых задач подходит. Особенно когда нужно что-то дорисовать. А так тоже в основном пользуюсь FastStone.Ну, почему я вас все время из спама спасаю?
Может из за ссылки к комментарию,но ссылка непрошла.У Вас какая капча стоит?У меня невидимая капча стоит разработка Андрея Сорвина Invisible Captcha,всё сначала тоже идёт в спам-комментарии.
Капчи нет. Акисмет. А ссылки вручную модерируются).
Пользуюсь как раз FastSone Capture, мы с ней очень дружим, ибо только она в моем случае реально делает скриншоты с прокруткой, а не кричит об этом без толку. Помогите, пожалуйста, с другим!
Когда я делаю скриншот страницы с прокруткой, потом это изображение получается узкое и ооооооочень длинное.
При загрузке на сайт (пока не свой, поэтому галерейной лупы нет) — просто полосочка.
Как сделать так, чтобы скриншоты (склеенные, или прокрученные) — в общем, длинные — нормально отображались и текст был читаемый?? Не могу найти ответ…
Здравствуйте, Алиса!
Да, скриншоты, если их открывать средством просмотра фотографий, получается очень узкое и длинное, но, если Вы его будете загружать на сайт, то оно получиться нормально читаемым. Точно таким же как на странице которую сфотографировали. Только что проверил 😉
Сайты бывают разные. К сожалению, я не могу приложить здесь скриншот того, что увидел бы работодатель, если бы оставила загруженное как есть (нет такой функции). Не видно ничего. Один силуэт. Как быть? Что я делаю не так?
В своём вопросе я имела в виду изображение для портфолио на стороннем ресурсе, к интерфейсу которого я не имею отношения. Ресурс добротный. Функция портфолио предусмотрена. На куче других сайтов видела роскошно разворачивающиеся при просмотре скриншотов. И только у меня всё не как у людей, хоть об монитор разбейся!
Попробовала загрузить на свой другой сайт. (В качестве теста).
И без лупы всё распределилось ровненько по страничке!
..Не знаю, зачем делать такие портфолио, как там, где я сегодня потеряла целый день…
Но, видимо, выход только один — поскорей создавать себе собственный сайт — и там уже скриншоты должны нормально размещаться…
СПС а то вроде норм все знаю о компе почти по МаКСИМУме а это не знал ну точнее знал но как делать не знаю СПАСИБО БОЛЬШОЕ!
Пожалуйста, Андрей! Скриншоты делать, это наверное самое простое, что можно делать на компьютере. 😉
Спасибо большое! очень все понятно и подробно описано, у меня все получило с первого раза
Пожалуйста, Ольга! Рад за Вас! 🙂
Здравствуйте!никак не пойму куда сохраняется этот скриншот…не удается найти….
Здравствуйте, Игорь!
Вы не найдете, где он сохраняется, потому что он сохраняется в буфере обмена. Просто откройте программу Paint и нажмите на квадратик, как показано на скриншоте(смотрите пункт №3(вставить скриншот в программу). Он сам там появиться, где Вы сможете его убавить или полностью редактировать.
вы меня не так поняли не могу найти уже после Paint.
Надо смотреть куда сохраняете, а лучше самому выбрать, куда сохранить.
Там же после того, как нажимаете «файл», затем «сохранить как», открывается окно, где можно выбрать, куда сохранить изображение.
Надо только запоминать или сохранять всегда на рабочий стол, так проще.
спасибо.теперь буду внимательней
Глупый способ, т.к. снимает вместе с полями и мышкой, проще установить расширение для браузера или воспользоваться онлайн сервисом, и получить сразу готовое изображение любого нужного размера, без полос прокрутки и панели задач снизу, тем более таким способом не возможно сделать скрин полной высоты сайта.
Глупый — не глупый, во всяком случае простой и для новичков быстрый. Расширения тормозят скорость работы интернета, а получить готовое, нужных размеров изображение можно с помощью легкой и простой программы «FsCapture». Да еще и обработать(стрелочки, надписи, водяные знаки) в ней можно, без всяких сверх знаний.
Чем это простой. Оно и видно — ой а где у меня картинка, я на кнопку нажала а ее нет )))
А про проги я и говорил, сейчас в любом браузере есть дополнения для этого с возможностью редактировать фото
Понял, что расширения хорошие, но я ими не разу не пробовал пользовался. У меня скорость инета маленькая, поэтому такими штуками практически не пользуюсь.
Насчет «ой а где у меня картинка», так это все зависит от уровня пользователя, а не от простоты-сложности. Бывает, что человек не знает, как фильм запустить, и это не значит, что это трудно сделать. 😉
Не мучайтесь, загружайте себе более современные программы и пользуйтесь без проблем. Есть очень продвинутая программа по снятию скриншотов clip2net.com/ru/ , с графическим редактором и короткими прямыми ссылками на картинку. Делитесь ссылкой в чате или можно на прямую публиковать в соц. сети. Удобна, пользуюсь давно и ничего менять не хочу. Рекомендую!
Спасибо, Мари, это действительно хорошая программа! Тоже пользовался одно время. Сейчас нет необходимости.
Спасибо за статью, очень полезная, а я мучился как сделать скрин.
Пожалуйста, Александр. Их делать легко, но я чаще пользуюсь «ножницами», которые встроенные в каждую винду, как паинт, но снимают не весь экран, как Paint, а то, что сам выделишь.
Ножницы тоже в стандартных программах есть. Очень удобная прога! После снятия скриншота сразу можно отредактировать его.
Огромное спасибо! Очень ценная информация! Все получилось!!!!!! Рада что попала на этот сайт!!!!! Благодаря Вам веришь в себя:)
Пожалуйста, Ольга! Рад, что у вас все получилось.
А я давненько подсел на FastStone Capture и не могу отказаться. Удобно, что скрины с прокруткой можно делать и даже скринкаст считать, а про всякие эффектики и надписи не говорю.
Я начал использовать https://pikwy.com для создания скриншотов, удобно, быстро