Фоны, рамки и отступ

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

Фон — это поверхность, а не картинка

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

Отступ, углы и тень

Отступ — это насколько запись отодвинута от края кадра, и из трёх он делает больше всего: около 5 % — хорошее значение по умолчанию, больше для вертикальных форматов, где лишний воздух читается как замысел, и ноль, когда нужна запись от края до края. Скруглённые углы намекают на окно, а не на сырой захват. Тень даёт записи положение в пространстве; по умолчанию она на 85 % силы, размытие и смещение масштабируются вместе с кадром, поэтому остаются пропорциональными при любом разрешении. Все три ломаются в одну сторону: слишком большой отступ ужимает интерфейс до нечитаемости, слишком сильное скругление съедает углы интерфейса, а слишком много тени читается как эффект презентации двадцатилетней давности.

Оконные и браузерные рамки

Три варианта: никакой, простая оконная полоса с тремя точками и браузерная рамка с адресной строкой. Оконная полоса подходит всему, что не сайт: настольному приложению, инструменту, панели. Браузерная рамка подходит, когда важно, что это сайт, а адресная строка несёт **тот URL, который вы наберёте, и ничего иного**. По умолчанию она намеренно пустая: печатать правдоподобный URL, который не является показываемым, значит вводить зрителя в заблуждение, и такой умолчание мы отправлять не готовы. Полоса бывает светлой и тёмной под ваш интерфейс.

Что на самом деле двигает камера

Знать это стоит, потому что объясняет, почему скомпонованные демо выглядят правильно: фон остаётся неподвижным, а масштабируется и смещается именно обрамлённая запись. Наезд входит в экран внутри рамки, а поверхность, на которой она лежит, остаётся на месте — ровно как камера, приближающаяся к экрану на столе, а не как если бы масштабировался весь мир. Если бы фон масштабировался вместе с записью, каждый наезд ощущался бы дешёвым слайдовым переходом. Один и тот же рендерер рисует предпросмотр и итоговый файл, поэтому то, что вы видите при монтаже, и получает кодировщик.