Вы что-то сделали или заметили классную функцию и хотите её показать. Вы делаете скриншот, кладёте его в твит, а он просто там висит — плоский серый прямоугольник с жёсткими углами, впритык к вашему тексту. Рядом с отточенным постом он читается как что-то второстепенное. Хорошая новость в том, что разница между «сырым захватом» и «продуктовым скриншотом» — не навык и не дорогой инструмент. Это три небольшие правки и выбор правильной формы под площадку.
Почему сырой скриншот выглядит плоско
У скриншота жёсткий край со всех четырёх сторон и никакой связи с тем, на чём он окажется. В ленте он сталкивается с фоном поста и текстом вокруг. Нет поля, поэтому ничто не говорит глазу «это самостоятельная вещь»; нет глубины, поэтому он выглядит приклеенным, а не размещённым. Отточенные скриншоты, которые вы прокручиваете каждый день, тихо решили ровно эти две проблемы.
Рецепт из трёх частей
Каждый скриншот в духе «как они сделали его таким чистым» делает одни и те же три вещи:
- Отступ — полоса пространства вокруг скриншота, чтобы он не был втиснут край в край. Одно это делает большую часть работы.
- Скруглённые углы — смягчение четырёх острых прямых углов самого скриншота, что мгновенно читается как дизайн.
- Мягкая тень плюс фон — слабая падающая тень приподнимает изображение над поверхностью, а мягкий градиент (или однотонный фирменный цвет) заполняет отступ, так что всё выглядит как задумка.
Это и есть весь вид «продуктового скриншота». Вам не нужна рамка устройства или пометки, чтобы это сработало — это другая задача.
Перетащите скриншот, выберите градиентный или однотонный фон, подвиньте отступ и радиус углов и настройте тень на вкус. Предпросмотр обновляется вживую, и вы экспортируете PNG, когда всё выглядит верно. Всё собирается на canvas в вашем браузере, поэтому скриншот — на котором может быть личка, дашборд или письмо — никогда никуда не загружается.
Выберите соотношение сторон под площадку
Одна и та же украшенная картинка должна быть разной формы в зависимости от того, куда идёт, и инструмент фиксирует вывод на Авто, 16:9, 4:3, 1:1 или 3:4:
- 16:9 — широкие карточки соцсетей и слайды. Чисто заполняет горизонтальный слот.
- 1:1 — квадратный пост для Instagram или LinkedIn, где высокие или широкие картинки обрезаются в сетке.
- 3:4 — высокая картинка, занимающая больше экрана телефона при прокрутке.
- Авто — когда вы просто хотите, чтобы кадр обернул скриншот с отступом без навязанной формы.
Зафиксируйте нужное соотношение, и отступ дополнит остальную часть кадра вокруг скриншота, так что экспорт лёг в слот без неловкой обрезки.
Несколько заметок о вкусе
Держите тень слабой. Тяжёлая тень выглядит как неудачная падающая тень из 2009-го; лёгкая просто добавляет глубину. Не переусердствуйте со скруглением — небольшой радиус читается как аккуратность, огромный начинает походить на пузырь. И подбирайте фон под настроение: спокойный однотонный цвет для чего-то серьёзного, мягкий градиент, когда хотите ощущение запуска.
Вывод
Вам не нужен дизайнерский софт, чтобы скриншот выглядел так, будто ему место в настоящем посте. Добавьте поле, слегка скруглите углы, положите его на мягкий фон со слабой тенью и экспортируйте в форме, которую хочет площадка. Это занимает меньше минуты, ничего не покидает ваш браузер, а результат перестаёт выглядеть сырым захватом и начинает выглядеть тем, чем вы намеревались поделиться.