Clay-мокапы: минималистичные рамки устройств любого цвета

Обновлено 30 октября 2026 г.

Clay-мокап помещает скриншот в мягкую матовую форму устройства одного цвета. У неё нет камеры, бликов стекла и металлических граней. Она читается как «телефон» или «планшет», не будучи конкретной моделью. Clay-рамки удерживают внимание на приложении, а цвет рамки можно подобрать под цвет бренда.

Что делает мокап «clay»

Название пришло из clay-рендеров в 3D-моделировании: объект показывают в одном простом матовом материале, чтобы была видна форма без деталей поверхности. Clay-мокап устройства работает так же.

Один цвет, матовый. Вся рамка одного цвета, с мягкой светотенью и без блеска и бликов.
Упрощённая форма. У неё пропорции телефона или планшета: скруглённые углы, корпус чуть больше экрана, небольшая толщина. Мелкие детали вроде вырезов камеры опущены.
Не привязан к модели. Он не выдаёт себя за конкретный iPhone или iPad, поэтому никто не примет его за устройство прошлого года.

Когда clay-рамка лучше реалистичной

Нужно совпасть с брендом

Реальные устройства выпускаются в нескольких фиксированных отделках. Clay-рамка может быть любого цвета: цвета бренда, оттенка акцентного цвета приложения или нейтрального тона, который растворяется в фоне. Для набора скриншотов для App Store или серии постов в соцсетях один clay-цвет на всех изображениях делает набор продуманным, а не собранным из разного.

Минималистичные посты и слайды

В ленте соцсети детальный телефон с бликами и заметными кнопками соперничает с интерфейсом. Матовая рамка мягкого цвета тише, и люди смотрят именно на экран. То же верно для слайдов и документации, где устройство нужно лишь для того, чтобы сказать: «это на телефоне».

Не устареет

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

Подходит для любого размера экрана

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

Когда нужна реалистичная рамка

Clay подходит не всегда. Если приложение зависит от конкретного устройства — например, функция для новейшего iPhone или раскладка только для iPad, — реалистичная рамка показывает это с одного взгляда. Анонсы продуктов и изображения для прессы тоже часто выглядят лучше с реальным железом. Многие используют оба варианта: реалистичные рамки для изображений к запуску и clay — для повседневных постов.

Как подобрать цвет clay

Начните с фона. Рамка и фон — две крупные цветовые области. Сначала выберите фон, затем цвет рамки на тон светлее или темнее из того же семейства. Бледно-серый на белом, глубокий синий на тёмно-синем и персиковый на кремовом — всё это работает.
Экран должен быть самым ярким. Если у приложения светлый интерфейс, чуть более тёмная рамка выделит экран. Для тёмного интерфейса то же самое делает более светлая рамка.
Осторожнее с цветом бренда. Насыщенный фирменный цвет на рамке может перебить экран. Смягчённый вариант — с добавлением белого или серого — обычно выглядит лучше и всё равно узнаётся как ваш.
Держите единство. Используйте один цвет рамки на всём наборе изображений. Меняйте вместо этого фон или раскладку.
Проверьте контраст. Если рамка почти совпадает по цвету с фоном, устройство может пропасть. Мягкая тень помогает их разделить.

Как сделать clay-мокапы в FeatureFrame

В FeatureFrame два clay-устройства: Clay-телефон в форме современного iPhone и Clay-планшет в форме iPad mini. Ни на одном из них нет Dynamic Island и камеры. Каждое берёт форму со скриншота, поэтому подходит для экрана любого размера.

Добавьте скриншот. Перетащите его в окно или вставьте. Скриншоты в форме телефона попадают на Clay-телефон, а в форме планшета — на Clay-планшет.
Выберите Clay в меню «Устройство», если скриншот стоит в рамке реального устройства.
Выберите цвет. Есть 14 готовых: Белый, Черный, Облачный, Каменный, Песочный, Терракотовый, Графитовый, Пудровый, Персиковый, Сливочный, Мятный, Небесный, Лавандовый и Шалфейный. Чтобы использовать любой другой цвет, например фирменный, введите его hex-значение или воспользуйтесь пипеткой.
Наклоните. Clay-рамки трёхмерные, как и реальные устройства, поэтому готовые углы и управление наклоном работают так же. Лёгкий наклон показывает мягкую светотень вдоль края.
Настройте сцену. Выберите фон (сплошной цвет, градиент, обои macOS или своё изображение), тень и размер холста. Добавьте второй или третий скриншот для раскладки.
Скопируйте или экспортируйте. Скопируйте изображение, чтобы вставить его в пост, перетащите его наружу или экспортируйте в PNG или JPEG.

Clay-телефон и Clay-планшет в цветах Белый и Черный бесплатны. Остальные цвета, свои цвета, рамки реальных устройств, экспорт в PNG и собственный водяной знак доступны в FeatureFrame Pro за $19.99 один раз или $9.99 в год.

Простой рецепт для начала

Для аккуратного набора скриншотов для App Store или поста в соцсетях:

Используйте рамку Облачный или Небесный на очень светлом фоне из того же семейства.
Добавьте лёгкий наклон и мягкую тень.
Сохраняйте один цвет и угол на всех изображениях набора.
Используйте холст 4:5 для лент или 16:9 для страницы запуска или слайда.

Если вы делаете скриншоты для App Store, проверьте размеры, которые требует Apple, в нашем руководстве по размерам скриншотов для App Store.

Что ещё почитать

Библиотека рамок устройств: все рамки реальных iPhone и iPad в FeatureFrame.
Размеры изображений для скриншотов приложения.