SEO-продвижение сайта от 150 000 рублей

Заказать звонок
Телефон отдела продаж:
8 (800) 775-16-41
Наш e-mail:
mail@texterra.ru
Заказать услугу
Как делать красивые скриншоты: лучшие сервисы и лайфхаки Редакция «Текстерры»
Редакция «Текстерры»

Это перепечатка 217 выпуска текстерровской рассылки.

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

Какие ошибки допускают при создание скриншота?

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

О каких ошибках идет речь?

1. По краям нет «воздуха»

Неправильно:

Текст «липнет» к краям скриншота

Правильно:

Между текстом и краями скриншота достаточно «воздуха»

2. Количество «воздуха» разное со всех сторон

Неправильно:

Сверху и слева «воздуха» много, а справа и снизу – его практически нет. Такой скриншот смотрится неаккуратно

Правильно:

Со всех сторон «воздуха» примерно одинаково. Скриншот выглядит ровным и аккуратным

3. В некоторых местах контент обрывается

Неправильно:

Текст справа обрезан. В нем нет никакого смысла

Правильно:

Если текст справа нужен, его надо включить полностью

Или:

Если не нужен – удалить
Продвинем ваш бизнес
Подробнее

С помощью каких программ и сервисов можно сделать скриншот?

В своей работе я использую программу Monosnap, расширение FireShot и кнопку Print Screen на моем ноутбуке. Давайте подробно рассмотрим каждый из них.

1. Программа Monosnap

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

Monosnap позволяет делать скриншоты, а затем эти скриншоты дорабатывать

Еще одна полезная функция этой программы заключается в том, что она позволяет загружать сделанные скриншоты в интернет (например, картинку с медведем вы можете найти по ссылке – http://take.ms/nDAuS), а еще – делать видеозапись рабочего стола, что тоже иногда пригождается по работе.

2. Расширение Fireshot

Для браузеров Google Chrome, Mozilla Firefox и Opera. C помощью него я делаю скриншоты всей страницы: делаю левый клик мышью по иконке расширения и выбираю команду «Захватить всю страницу».

Выбираем команду «Захватить страницу»

После этого нажимаю на кнопку «Сохранить»:

Сохраняем скриншот

И обрезаю изображение в программе Paint:

Выделяем нужную область и нажимаем «Обрезать»

Главное преимущество этого расширения заключается в том, что в большинстве случаев он сам определяет, какие элементы на странице повторяются (например, онлайн-чат двигается вместе с прокруткой страницы) и автоматически их убирает. Например, он делает замечательные скриншоты диалогов «ВКонтакте».

3. Старый добрый PrintScreen

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

Остановила видео, нажала PrintScreen и вставила картинку в Paint или документ «Ворд»

Лайфхак №1: как убрать со страницы ненужные элементы

Часто бывает так, что ты хочешь сделать скриншот всей страницы, но тебе мешает онлайн-чат или какая-нибудь кнопка. Чтобы убрать ненужный элемент со страницы, кликните по нему правой кнопкой мыши и нажмите «Просмотреть код» (у меня Google Chrome, в других браузерах может называться чуть по-другому).

Кликаем по онлайн-чату правой кнопкой мыши и нажимаем «Просмотреть код»

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

Не бойтесь – вы ничего не сломаете на сайте. Ни на вашем, ни на чьем-либо другом. После обновления страницы онлайн-чат вернется на свое место.

Лайфхак №2. Как убрать ненужный элемент в готовом скриншоте

Если вы сделали скриншот и видите там элементы, которые вам не нужны, их можно удалить следующими способами:

1. Программа Paint

Если фон однотонный, то здесь все просто. Выделяем нужную область и жмем Delete.

Убираем ненужный элемент в «Пеинте»

Если после этого остается белая область, ее нужно залить фоновым цветом. Для этого берем пипеткой нужный цвет, выбираем инструмент «Заливка» и кликаем по белой области.

Заливаем белую область синим цветом

2. Snapseed

Если цвет фона не однотонный, то «Пеинта» будет уже недостаточно. В этом случае можно использовать «Фотошоп» или, как более простой вариант, приложение Snapseed.

Правда, этот вариант не для нетерпеливых.

Откройте приложение и нажмите в нем «+». Выберите необходимое фото. У меня оно будет таким.

Без очень сложных объектов

После выберите на вкладке инструменты «Точечно».

Она находится в третьем ряду

Проведите по льдине.

Раз, и ее больше нет =)
Раз, и ее больше нет =)

Раз, и ее больше нет =)

Если нужно удалить более сложные объекты, то придется работать с инструментом достаточно долго и эффект будет далек от идеального.

Удаление кораблика незамеченным не останется

***

Я поделилась с вами инструментами и методами, которыми я пользуюсь в своей работе. Быть может, вы знаете какие-то более удобные способы. Если это так, поделитесь ими в комментариях. Я буду вам очень признательна =)

Поделиться статьей:

Новое на сайте

22 ноя 2024
13 877
Как файл htaccess может улучшить ваш сайт: топ-10 лайфхаков для вебмастера

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

22 ноя 2024
21 688
Почему так важно указывать цены на своем сайте

Если вы адепт позиции «Ответил(а) в личку», у нас для вас плохие новости. 

22 ноя 2024
195 823
Как создать и настроить карту сайта sitemap.xml

Даже в 2024 году XML-карта нужна: этот инструмент по-прежнему используется краулерами Google и «Яндекс» – для ускорения индексации и получения технической информации о страницах. 

Смотреть все статьи

У вас есть деловой запрос? Давайте обсудим!

Оставьте свои контакты, мы свяжемся с вами в ближайшее время.

Нажимая на кнопку «Оставить заявку», вы подтверждаете свое согласие на обработку пользовательских данных

Спасибо!

Ваша заявка принята. Мы свяжемся с вами в ближайшее время.