Иногда в работе бывает нужно заскринить сайт с телефона, чтобы продемонстрировать мобильную версию или показать побольше контента. Например, так удобно демонстрировать статьи — в вертикальный скриншот влезает больше контента, а по бокам не остается пустого пространства.
Мне скринить с телефона всегда было неудобно — нужно делать скриншот, пересылать его на компьютер, а потом еще запихивать его в мокап или бросать сверху тень. Куча мороки. Но недавно мне показали способ сделать все это гораздо быстрее и вообще без участия смартфона. С ним получается без сторонних программза несколько секунд делать вот такие симпатичные мокапы:
Чтобы показать, как это сделать, записала гифку. Можете посмотреть сразу ее:
Если по гифке не очень понятно, следите за руками:
- Открываем нужный сайт в браузере Google Chrome
- В панели инструментов браузера нажимаем на три точки справа — там, где у нас все настройки.
- Выбираем там «Дополнительные инструменты → Инструменты разработчика». Появляется страшная консоль с кучей кода. Обычно она вылезает справа, иногда снизу (видимо, на старых версиях Хрома, точно не уверена).
- В этой консоли в левом углу есть кнопка с изображением смартфона. При наведении появляется подпись «toggle device toolbar». Нажимаем на нее — и сайт слева становится маленьким и переходит на мобильную версию.
- Теперь над сайтом на самом верху есть панелька: на ней можно выбирать разные версии смартфонов, чтобы экран был разного размера.
- Если вам нужно, чтобы вокруг экрана была рамочка смартфона, то есть можно было сразу заскриншотить мокап, нужно сделать еще одно действие. На новой панели (где у вас выбор версии смартфона) справа есть три точки. Нажмите на них и выберите «Show device frame». Готово — у вас вокруг скриншота красивая рамка. Учтите, что не у всех версий смартфона есть рамка. Я обычно выбираю iPhone 6/7/8, там рамка красивая и размер подходящий.
- Теперь нажмите на те же три точки и выберите «Capture screenshot». Сохраняйте скриншот куда хотите. Он будет сразу на прозрачном фоне. Внутри окошка сайт можно листать, чтобы сделать скриншот другой части экрана.
Может, этот способ уже все давно знали и я динозавр) Но надеюсь, хоть кому-то будет полезно.
Ммм, миллениалы нашли кнопку F12 в Хроме...
Если бы кнопка f12 не только открывала консоль, но и сразу переводила в мобильную версию, кидала рамку и сохраняла скриншот, было бы конечно очень удобно)
Комментарий недоступен
Да, тут мой косяк. Надо выбрать было мобильную версию в консольке.
это где именно?
В этих же трех точках выбрать «Add device type» и на некоторых сайтах там можно менять тип версии.
Комментарий недоступен
Ага, там все сложнее чуть оказалось. Он сам перестраивает на мобильный вид, если верстка адаптивная. А чтобы например вк открыть мобильный, мне быстрее прописать m.vk.com. Но тут такие IT-гуру и знатоки консоли, может кто-то что-то умнее подскажет)
Комментарий недоступен