PNG-иконки на прозрачном фоне: как собрать рекламный баннер

Скачайте бесплатный набор из 48 иконок

В наборе есть объекты на темы путешествий, техники, еды, финансов, учёбы, спорта и здоровья. Каждый объект сохранён отдельным PNG с прозрачным фоном. Сначала выберите один, который прямо связан с вашим предложением: самолёт для путешествий, камера для съёмки или кошелёк для финансовой темы.

Открыть бесплатный набор на Яндекс Диске. Его исходная публикация находится в Telegram-канале КреоПромпт. Это открытые материалы; покупать полный пак для их получения не требуется.

Начните с предложения и формата

До выбора фона запишите, что человек должен понять из баннера. Например: «Фотосессия для вашего бренда» или «Туры на выходные». Добавьте одно уточнение, которое действительно нужно читателю: город, дату, состав услуги. Затем определите действие — открыть страницу, написать или записаться.

Создайте документ в размере нужного рекламного размещения. Если делаете учебный пример, удобно начать с квадрата 1080 × 1080. Для реальной публикации проверьте требования площадки и места, которые могут перекрываться интерфейсом. Один и тот же макет не стоит автоматически растягивать во все форматы.

Разместите PNG без лишнего фона

В Photoshop добавьте PNG через «Поместить встроенные»; в Figma можно перетащить файл в макет. Прозрачность сохранится. Белая подложка на превью облака сама по себе не означает, что белый фон есть в оригинальном файле. Проверять нужно скачанный PNG на цветном фоне.

Для первого варианта отведите объекту примерно половину свободного пространства, а тексту — другую половину. Это отправная точка, а не обязательная пропорция. Если предмет слишком детализированный, уменьшенный вариант может выглядеть как пятно; тогда увеличьте его или выберите более простой объект.

Соберите иерархию: заголовок, уточнение, действие

1. Поставьте крупный заголовок в свободной части макета. Удерживайте его в двух-трёх строках, если фраза помещается без потери смысла.
2. Добавьте уточнение меньшим кеглем. Оно должно быть читаемым, но не конкурировать с заголовком.
3. Выделите действие отдельной строкой или плашкой. Для статичного баннера это визуальный ориентир, а не настоящая интерактивная кнопка.
4. Оставьте свободное пространство между предметом и текстом. Близость краёв, бликов и букв часто создаёт случайные визуальные столкновения.

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

Согласуйте цвет и свет

Возьмите один из второстепенных оттенков объекта для фона или акцентной плашки. Текст при этом должен оставаться контрастным. Если иконка тёплая по цвету, спокойный кремовый фон может поддержать её палитру; тёмный фон усилит контраст светлых деталей. Сравните оба варианта на одном и том же макете.

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

Проверьте баннер в размере просмотра

Уменьшите макет до размера, в котором его будут видеть в ленте. За несколько секунд должны читаться тема, предложение и действие. Если сначала замечается декоративный предмет, а заголовок приходится искать, уменьшите предмет, увеличьте текст или уберите часть деталей.

Перед экспортом проверьте орфографию, поля и качество краёв. Не увеличивайте исходную иконку в несколько раз: прозрачный фон не защищает от потери качества. Сохраните редактируемый проект отдельно, чтобы потом адаптировать баннер под другой формат.

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