Генератор макетов устройств

О Генератор макетов устройств

Генератор макетов устройств помещает скриншот в настоящую рамку устройства: iPhone с Dynamic Island, Android-телефон, iPad, MacBook Pro, окно браузера с полосой вкладок и адресной строкой или настольный монитор на подставке. Каждая рамка рисуется в истинных пропорциях экрана этого устройства, поэтому экспорт выглядит так, как скриншот выглядел бы на железе. Рамка рисуется на холсте во вкладке вашего браузера, а значит скриншот ещё не вышедшего приложения или внутреннего дашборда никогда не покидает ваш компьютер.

Три рамки, к которым чаще всего обращаются

Рамка — это подсказка для читателя: одним взглядом она говорит, смотрит ли он на приложение для телефона, веб-страницу или инструмент для компьютера, ещё до того, как прочитано хоть слово внутри скриншота.

Измеритель обрезки: то, что большинство генераторов макетов пропускают

Экран устройства имеет фиксированную форму. Экран iPhone — 1179 на 2556, примерно 9:19.5, и почти ничто из того, что вы снимаете, не совпадает с этим точно. Большинство генераторов макетов тихо масштабируют изображение, пока оно не покроет экран, и отбрасывают то, что выходит за край, так что вы узнаёте, что нижняя часть таблицы тарифов пропала, только после публикации.

Этот инструмент вместо этого измеряет обрезку. В режиме Заполнить экран измеритель под кнопками подгонки показывает точный процент скриншота, который скрывает рамка, и полоса меняется с зелёной на красную, когда это число растёт. Если оно выше, чем вам удобно, есть два выхода:

• Сдвиг. Ползунок перемещает видимую область вдоль той оси, которая выходит за край, так что можно сохранить шапку, середину или подвал вместо центрированной обрезки.
• Вместить целиком. Скриншот масштабируется, пока каждый его пиксель не окажется внутри экрана, а оставшиеся полосы заполняются выбранным цветом. Ничего не обрезается — ценой видимых полос сверху и снизу или слева и справа.

Хорошее правило: меньше примерно 8% обрезки читатель не замечает, от 8% до 25% нормально, если вы сдвинули кадр так, чтобы сохранить объект, а больше 25% — стоит либо переснять скриншот в пропорциях устройства, либо переключиться на «Вместить целиком».

Какую рамку выбрать и при каком разрешении

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

Как пользоваться генератором макетов устройств: по шагам

1. Добавьте скриншот: перетащите PNG или JPG на панель загрузки, нажмите на неё, чтобы выбрать файл, или нажмите Ctrl+V, чтобы вставить снимок прямо из буфера обмена.
2. Выберите рамку устройства: iPhone, Android, iPad, MacBook, «Браузер» или «Монитор». Рамки телефона и планшета также переключаются между книжной и альбомной ориентацией.
3. Проверьте измеритель обрезки: если скрыто слишком много, перетащите ползунок сдвига или переключитесь на «Вместить целиком», чтобы ничего не потерять.
4. Оформите рамку: задайте цвет рамки, фон, отступ, тень и блик. На рамке браузера введите свой заголовок вкладки и адрес.
5. Экспорт: выберите размер экспорта, затем «Скачать PNG», чтобы сохранить макет, или «Копировать изображение», чтобы вставить его в публикацию.

Практические советы

• По возможности снимайте скриншот в пропорциях устройства. Окно браузера, перед захватом подогнанное до 1179 на 2556, даёт измерителю обрезки 0% и пиксельно точный макет.
• Берите рамку браузера, когда важен URL. Свой домен в адресной строке ставит бренд в изображение без подписи.
• Держите отступ между 6% и 12%. Меньше — устройство касается края публикации; больше — экран в ленте становится нечитаемым.
• Подберите цвет рамки к скриншоту. «Космический чёрный» под скриншот в тёмном режиме, «Серебро» или «Титан» — под светлый; оформление браузера следует за тем же выбором автоматически.
• Приглушите блик для экранов с большим количеством текста. Лёгкий отблеск читается как стекло, сильный — как стоковое фото и прячет ваш текст.
• Экспортируйте с прозрачностью для слайдов. Фон «НЕТ» даёт парящее устройство с тенью, готовое к наложению на любую презентацию или hero-блок.

Конфиденциальность

Всё происходит во вкладке браузера через HTML5 canvas API. Скриншот читается по локальному object URL, рисуется в рамку и кодируется в PNG самим браузером. Ни одно изображение не загружается, не сохраняется и не передаётся, и после загрузки страницы инструмент продолжает работать без сети.

Часто задаваемые вопросы

Мой скриншот загружается на сервер?

Нет. Рамки устройств рисуются через HTML5 canvas API во вкладке вашего браузера, а скриншот читается по локальному object URL. Никуда ничего не отправляется, поэтому макеты ещё не вышедших приложений, внутренних дашбордов или клиентской работы остаются на вашем компьютере. После загрузки страницы инструмент продолжает работать вообще без сети.

Какие рамки устройств доступны?

Шесть: iPhone с Dynamic Island, Android-телефон с камерой punch-hole, iPad Pro, MacBook Pro с вырезом и основанием, окно браузера с полосой вкладок и адресной строкой и настольный монитор на подставке. Каждая рамка использует настоящие пропорции экрана этого устройства, поэтому макет здесь совпадает с тем, как скриншот выглядел бы на железе.

Мой скриншот другой формы, чем экран устройства. Что произойдёт?

Для этого и нужен измеритель обрезки. «Заполнить экран» масштабирует скриншот, пока он не покроет весь экран, обрезая то, что выходит за край, а измеритель показывает точный процент скрытого. Ползунок сдвига затем перемещает видимую область вдоль обрезанной оси, чтобы сохранить важное. «Вместить целиком» масштабирует скриншот, пока весь он не окажется внутри экрана, и заполняет оставшиеся полосы выбранным цветом — ничего не теряется.

Какое разрешение должно быть у скриншота?

Подберите его под устройство в рамке: 1179 на 2556 для iPhone, 1080 на 2400 для Android-телефона, 1668 на 2388 для iPad, 3024 на 1964 для MacBook, 1440 на 900 для окна браузера и 2560 на 1440 для монитора. Такой размер и больше остаются чёткими. Меньшие скриншоты тоже работают, но их увеличивают, и вокруг текста становятся видны мягкие края.

Можно ли экспортировать устройство на прозрачном фоне?

Да. Выберите образец фона «НЕТ», и отступ вокруг устройства экспортируется как альфа вместо цвета, а рамка, экран и падающая тень по-прежнему рисуются. «Скачать PNG» сохраняет эту прозрачность — это то, что нужно, когда макет пойдёт на слайд, hero-блок или страницу, сквозь которую должен быть виден её собственный фон.

Почему рамка браузера становится тёмной?

Оформление браузера следует за выбранным цветом рамки. Выберите «Космический чёрный», и полоса вкладок, панель и адресная строка переключатся на тёмную тему, чтобы макет совпал со скриншотом в тёмном режиме; любой более светлый цвет рамки даёт светлую тему. Заголовок вкладки и адрес — обычные текстовые поля, поэтому в изображение можно поставить своё название продукта и домен.

Инструменты изображения:

• Добавить линию к изображению Популярное
• Добавить текст к изображению Популярное
• ⬛ Калькулятор соотношения сторон Популярное
• Обрезать изображение по кругу Новый
• Создатель коллажей
• Генератор «Соедини точки» Популярное
• Просмотр и удаление EXIF данных Новый
• Перевернуть GIF
• Перевернуть изображение
• Создатель GIF Популярное
• Инструмент для пикселизации изображений
• Компрессор изображений
• Обрезчик изображений
• Улучшитель изображений Популярное
• Изменитель размера изображений
• Поворот изображений
• Разделить фото на части Популярное
• Конвертер изображения в ASCII арт Популярное
• Трассировщик изображения в SVG Новый
• Генератор изображений-заглушек Lorem Picsum Новый
• 📷 OCR / Текст из изображения Новый
• Калькулятор размера печати и разрешения (DPI/PPI)
• Генератор изображений со скруглёнными углами Новый
• Оформитель скриншотов Новый
• Генератор макетов устройств Новый
• Добавить тень к изображению Новый
• Добавить рамку к изображению Новый