Как за 15 секунд сделать красивый скриншот «как со смартфона» без смартфона

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

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

Чтобы показать, как это сделать, записала гифку. Можете посмотреть сразу ее:

Если по гифке не очень понятно, следите за руками:

  1. Открываем нужный сайт в браузере Google Chrome
  2. В панели инструментов браузера нажимаем на три точки справа — там, где у нас все настройки.
  3. Выбираем там «Дополнительные инструменты → Инструменты разработчика». Появляется страшная консоль с кучей кода. Обычно она вылезает справа, иногда снизу (видимо, на старых версиях Хрома, точно не уверена).
  4. В этой консоли в левом углу есть кнопка с изображением смартфона. При наведении появляется подпись «toggle device toolbar». Нажимаем на нее — и сайт слева становится маленьким и переходит на мобильную версию.
  5. Теперь над сайтом на самом верху есть панелька: на ней можно выбирать разные версии смартфонов, чтобы экран был разного размера.
  6. Если вам нужно, чтобы вокруг экрана была рамочка смартфона, то есть можно было сразу заскриншотить мокап, нужно сделать еще одно действие. На новой панели (где у вас выбор версии смартфона) справа есть три точки. Нажмите на них и выберите «Show device frame». Готово — у вас вокруг скриншота красивая рамка. Учтите, что не у всех версий смартфона есть рамка. Я обычно выбираю iPhone 6/7/8, там рамка красивая и размер подходящий.
  7. Теперь нажмите на те же три точки и выберите «Capture screenshot». Сохраняйте скриншот куда хотите. Он будет сразу на прозрачном фоне. Внутри окошка сайт можно листать, чтобы сделать скриншот другой части экрана.

Может, этот способ уже все давно знали и я динозавр) Но надеюсь, хоть кому-то будет полезно.

0
72 комментария
Написать комментарий...
Илитный Иксперт
Лена Шпрингер

Вот они вайтишницы, которые теснят мужиков в ИТ. Поднажмите, еще чуть чуть и хоткеи в хроме выучите

Ответить
Развернуть ветку
Лена Шпрингер
Автор

Если вы не заметили, это раздел не IT, а маркетинг)

Ответить
Развернуть ветку
Илитный Иксперт

Какое отношение ваша инструкция имеет к маркетингу?  Маркетинг это "как сделать скриншот, который повысит продажи", а не "как сделать скриншот".

Хотя может вы так свой личный бренд продвигаете. Ну чтож, черный пиар - тоже пиар.

Ответить
Развернуть ветку
Лена Шпрингер
Автор

да, мне перенесли уже в «сервисы», я заметила. Но у меня была другая логика — конкретно это может помочь копирайтерам, маркетологам и прочим, кто готовит контент, готовить его чуть быстрее и удобнее.

Ответить
Развернуть ветку
Илитный Иксперт

Не надо оскорблять этих людей, они всетаки гуглить умеют и такую притивную информацию либо знают, либо найдут за 2 секунды

Ответить
Развернуть ветку
69 комментариев
Раскрывать всегда