{"id":13580,"url":"\/distributions\/13580\/click?bit=1&hash=749a7bd0e59410ef196f6ff51feb6b4c9f7e6897e3051412b19b72ce9b7d4eab","title":"\u0413\u0434\u0435 \u0431\u0440\u0430\u0442\u044c \u0438\u0434\u0435\u0438 \u0434\u043b\u044f \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0441\u0432\u043e\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0430","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"edca0fea-02f8-5eb8-ae8c-3678b2acc040","isPaidAndBannersEnabled":false}

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

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

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

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

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

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

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

0
72 комментария
Написать комментарий...
Семен Смирнов

Ммм, миллениалы нашли кнопку F12 в Хроме...

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

Если бы кнопка f12 не только открывала консоль, но и сразу переводила в мобильную версию, кидала рамку и сохраняла скриншот, было бы конечно очень удобно) 

Ответить
Развернуть ветку
7 комментариев
Эмиль Гусейнов

Хмм. Пойду писать статью "Лайфхаки от кнопки f12". Один из таких раскрою сейчас: чтобы загрузить в инсту фотку, можно нажать f12, сделать мобильную версию и грузить фотки как с телефона. 
Ставьте класс, делитесь с друзьями в ватсапе. 

Ответить
Развернуть ветку
FTOH

И давно это работает? А то я качал какую-то приблуду специальную для инсты

Ответить
Развернуть ветку
Страховой космос

В мобильной версии инсты нет кнопок загрузки фото.
UPD: я - долбач, всё есть.

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

да кстати, очень удобная тема

Ответить
Развернуть ветку
Leha Shum

Шутишь?

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

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

Ответить
Развернуть ветку
Удивленный паук например

Комментарий недоступен

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

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

Ответить
Развернуть ветку
3 комментария
Angela Matveenko

И никакого сексизма. Когда попадаю на ваши комментарии, сразу понимаю, как давно вам не попадались хорошие женщины.

Ответить
Развернуть ветку
3 комментария
Leha Shum

Лена, спасибо. Про рамку и скриншот не знал. Может у вас есть Инстаграм с вашими фото ещё?

Ответить
Развернуть ветку
Удивленный паук например

Комментарий недоступен

Ответить
Развернуть ветку
2 комментария
Alex Ryabinin

Это очень мощная статья для vc.ru сразу в New York Times нужно было:)

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

Как вы догадались, как раз готовлю перевод для New York Times

Ответить
Развернуть ветку
Владислав Труфанов

Очень полезно, спасибо.

Ответить
Развернуть ветку
ЯжПрограммист

😂😂😂 что дальше? туториал по мониторингу сетевой активности во вкладке network? как увидеть скрытые поля формы? где искать куки и что с ними делать? добро пожаловать в нарнию?

Ответить
Развернуть ветку
Alexander Rychkov

Открыли, блин, Америку. Это уже хрен знает сколько лет известно. Я лично использую эмулятор iPhone для XCode в таких случаях (ибо так и не смог полюбить яблокофоны с самого начала).

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
7 комментариев
Удивленный паук например

Комментарий недоступен

Ответить
Развернуть ветку
Inna Nikitina

Я тот самый динозавр, который ничего этого не знал 😁 спасибо большое! 

Ответить
Развернуть ветку
Александр Свинин

в голос

Ответить
Развернуть ветку
dy

Проще открыть на смартфоне мобильную версию, сделать скриншот и в специальном приложении получить желаемую картинку "как на смартфоне"

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

Потом ее нужно пересылать на компьютер, если работаешь (например статью пишешь) именно на компе. Если сайт у тебя уже открыт с компа, сделать такой скриншот гораздо быстрее и проще

Ответить
Развернуть ветку
4 комментария
Rustam Mamasydykov

Годно!

Ответить
Развернуть ветку
Anatoly

Неплохо, но лучше не текстом а скриншоты ))

Ответить
Развернуть ветку
Ярослав Шенцов

В чем проблема,  в мобильном браузере выбрать раздел "Версия для ПК", а после комбинацией нескольких клавиш( или свайпом ладони вдоль/поперек датчиков приближения) сделать скрин???

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

В том, что после нужно отправлять скриншот на комп, чтобы его как-то использовать, а также дополнительно оформлять: ставить в рамку или бросать тень

Ответить
Развернуть ветку
1 комментарий
Никита Завьялов

Блин, а в универе я удивлялся почему мои одногруппники не знают про то что можно открыть исходный код элемента и визуально поменять результаты теста на нужные. Видимо таких много

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

Инструкция не про то, как открыть исходный код. Инструкция в первую очередь именно про скриншоты в мокапе, а это чуть менее очевидно, чем просто исходный код

Ответить
Развернуть ветку
2 комментария
Alexey Kopchenko

F12 и потом Ctrl+Shift +M - давно известная тема )))

Ответить
Развернуть ветку
ElSafy foods Ltd

Спасибо от динозавра:) 

Ответить
Развернуть ветку
Читать все 72 комментария
null