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