Как делаются такие превью?

Question

[Илья Савельев]

Всем привет.

В дизайнерском инструментарии не силен, подскажите как создаются вот такие вот превью-картинки.



Понятно что на фотостоках берется картинка где все 3 устройства + пустые экраны...а как сделать так чтобы на экранах устройства сохранилась адаптивность сайта? Как такое сделать для своего сайта?

Answer 1

[Антон Измайлов]

Скорее всего - с помощью инструментов разработчика в хроме выбираете устройство для дебага > делаете скрин > загружаете в пустые экраны.

Answer 2

[GreatRash]

www.responsinator.com

Comments

[Илья Савельев]

Не поддерживает desktop устройства

Answer 3

[Кирилл]

Есть даже онлайн сервисы для этого - вот платный https://placeit.net/
Но находил и бесплатные варианты - гугл в помощь.

Comments

[Илья Савельев]

Да, сейчас в поиске вроде нашел что искал.

Answer 4

[Mikalai Bulava]

Если не брать в расчет кучи mockup'ов, которых в интернете полно (есть psd файл, просто нужно будет вставить свой макет), то самому можно запилить в том же фотошопе или иллюстраторе. Нужно будет хорошее фото или эскиз)

экранах устройства сохранилась адаптивность сайта?

В этом и заключается работа дизайнера. Он делает макеты под разные устройства.

Answer 5

[Влад]

В мокап с устройствами вставили три изображение веб-страницы. Это можно легко сделать в любом графическом редакторе.

Answer 6

[Иннокентий]

https://cover.isfor.biz/
Просто нажать потом принтскрин