Создать пустое изображение: белое, однотонное или прозрачное

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

Вторая большая группа — однотонный фон. Картинка одного цвета подходит как чистый фон для цитаты или объявления в соцсетях, минималистичные обои для телефона или компьютера или подложка для товара, вырезанного с помощью удаления фона. Если нужно объединить фото, пустой холст, добавленный первым в режиме «Наложить», становится фоном для остальных снимков.

У прозрачных изображений свои задачи: основа для логотипа или стикера, пустой слой для рисования или распорка, которая занимает место в письме или старой вёрстке сайта, ничего не показывая. Самая маленькая из них, картинка 1 × 1 пиксель, до сих пор служит распоркой и пикселем отслеживания в рассылках.

Остаётся печать: чистый лист A4 с разрешением 300 DPI для бланка, цветной фоновый лист или основа, на которой в другой программе собирают открытку. Поскольку разрешение записано в файле, при вставке в документ изображение получает правильный физический размер.

Размеры для экрана соответствуют распространённым разрешениям: Full HD — 1920 × 1080, QHD — 2560 × 1440, 4K Ultra HD — 3840 × 2160, все с соотношением сторон 16:9. Обои для iPhone — 1179 × 2556: это разрешение 6,1-дюймового экрана iPhone 15 и 16 по техническим характеристикам Apple. У других телефонов оно своё, так что если знаете разрешение своего экрана, введите его вручную.

Размеры для соцсетей — распространённые форматы: 1080 × 1080 для квадратного поста, 1080 × 1350 для вертикального поста 4:5, 1080 × 1920 для сторис или Reels 9:16 и 1200 × 630 для картинки, которая появляется, когда делятся ссылкой. 1280 × 720 — разрешение, которое справка YouTube рекомендует для собственной обложки видео. Площадки время от времени меняют требования, поэтому, если важен точный размер, сверьтесь с их актуальными правилами.

Соотношение сторон — это форма картинки: ширина относительно высоты. Если включить «Сохранять пропорции», форма не меняется, когда вы правите одну сторону: изображение 1920 × 1080 станет 1280 × 720, как только вы введёте новую ширину. Кнопка обмена превращает горизонтальный формат в такой же вертикальный и обратно.

Пиксели определяют, сколько деталей помещается в изображение, а DPI (точки на дюйм, их ещё называют PPI) лишь задают размер при печати. Картинка 2480 × 3508 пикселей при 300 DPI печатается в формате A4, то есть 21 × 29,7 см, а те же пиксели при 150 DPI дадут лист вдвое шире и вдвое выше. DPI никогда не меняют число пикселей, а экраны их игнорируют. В режиме «Размер печати» инструмент переводит формат бумаги в пиксели и записывает разрешение в файлы PNG и JPG — проверить это можно, если узнать DPI изображения.

Белый выбран по умолчанию, и это самый частый вариант: белая картинка для документа, белый фон для фото товара или чистый лист для печати. Чёрный подходит для экранов, тёмных обоев и кадров видео. Любой другой цвет задаётся палитрой, образцами или HEX-кодом.

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

Непрозрачность — нечто среднее. При 100 % цвет сплошной, при 50 % он наполовину прозрачен и даёт цветную вуаль, которая затемняет или тонирует то, что под ней. Непрозрачность работает в PNG и WebP. В JPG нет альфа-канала, поэтому JPG всегда полностью непрозрачен, а прозрачная картинка сохраняется белой.

Если нужно сделать прозрачным фон уже готового изображения, а не начинать с нуля, воспользуйтесь инструментом «Прозрачный фон» или удалением фона.

Для пустой картинки почти всегда лучше всего подходит PNG. Он сжимает без потерь, поэтому выбранный цвет сохраняется точно, поддерживает прозрачность и непрозрачность, а однотонный PNG весит совсем мало: белая картинка 1920 × 1080, созданная здесь, занимает около 350 байт, а 4K — около 1 КБ. Без надписи инструмент записывает PNG с палитрой из одного цвета — отсюда и такой малый вес.

JPG сжимает с потерями и не поддерживает прозрачность. Сплошной цвет может сместиться на один-два уровня в одном из каналов: глазом не заметно, но важно, когда фирменный цвет должен совпадать до пикселя. Выбирайте JPG, только если сервис или форма не принимают ничего другого; ползунок качества на ровном цвете почти ничего не меняет.

WebP сохраняет прозрачность и открывается в современных браузерах и большинстве приложений, хотя часть старых программ его всё ещё не понимает. Как и JPG, он может слегка сместить сплошной цвет. Не каждый браузер умеет сохранять WebP со страницы; если ваш не умеет, инструмент об этом скажет, а PNG работает везде.

Если у вас уже есть изображение в другом формате и нужен PNG, можно конвертировать его в PNG. Пустые картинки редко нуждаются в сжатии, но JPG или WebP с надписью можно облегчить, если сжать фото.

HEX-код — способ записать экранный цвет шестью символами: #ffffff — белый, #000000 — чёрный, #1e90ff — яркий синий. Первая пара цифр отвечает за красный, вторая — за зелёный, третья — за синий, каждая от 00 до ff. Поле «HEX-код» принимает код с # и без него, а также в коротком трёхзначном виде: #fff — то же, что #ffffff, а 36c — это #3366cc.

RGB записывает тот же цвет тремя числами от 0 до 255: #1e90ff — это RGB 30, 144, 255. Под полем показаны значения RGB текущего цвета — удобно, когда в брендбуке указана одна запись, а приложение просит другую.

Палитра — самый быстрый способ выбрать цвет на глаз. На компьютере некоторые браузеры добавляют к ней пипетку, которая берёт цвет из любой точки экрана, — пригодится, чтобы попасть в цвет логотипа или сайта. Образцы дают в один клик белый, чёрный, прозрачный, светло-серый, кремовый, графитовый и тёмно-синий.

Чтобы попасть в фирменный цвет, вставьте его HEX-код, а не подбирайте на глаз, и сохраняйте в PNG — тогда в файле останется именно это значение. Если в брендбуке указан только RGB, переведите каждое число в две шестнадцатеричные цифры или выберите цвет и сравните показанные значения RGB.

Чтобы файл был лёгким, не включайте надпись и сохраняйте в PNG: однотонный PNG даже в 4K весит не больше нескольких килобайт. Надпись добавляет настоящие детали, поэтому картинка с текстом тяжелее, а JPG того же размера обычно ещё тяжелее.

Для картинки 1 × 1 пиксель выберите размер «1 × 1 пиксель», затем белый, прозрачный или любой цвет и сохраните в PNG. Файл займёт меньше 100 байт. Прозрачный вариант — классическая распорка; цветной страница или приложение могут растянуть в блок этого цвета.

Чтобы проверить результат, откройте файл в инструменте, где можно узнать размер изображения: он покажет размер в пикселях, вес файла и записанные DPI. А если нужно подогнать под один из этих размеров уже готовое фото, измените его размер или сразу приведите к 1920 × 1080.