Блог «НаМаксимум» | Максим Климков
О Тильде Модификации

Как загрузить изображение с наложением light/screen в Тильду?

Инструкция по шагам, как перенести  картинку с любым эффектом наложения в Tilda, сохраняя прозрачность фона

В примере на видео берем картинку снежинок в JPEG-формате с черным фоном, которой мы задали режим наложения Screen. В Figma на макете все отображается отлично - снежинки на прозрачном фоне. Но при сохранении картинки в PNG черный фон остается. То есть режим наложения Screen не сохраняется
Снежинки на черном фоне
Вот так выглядят снежинки без режима наложения Screen
Продающий новогодний лендинг на Тильде
А вот так они выглядят с применением режима наложения Screen

Что делать в данной ситуации?

  1. В Figma убираем у снежинок режим наложения и ставим по умолчанию Normal. Также непрозрачность ставим на 100%.
  2. Сохраняем картинку в JPEG-формате, чтобы изображение меньше весило.
  3. Загружаем картинку в Тильду и располагаем в нужном месте.
  4. В Тильде добавляем блок с бесплатной модификацией от ANNEX под номером ANX822.
  5. Заходим в «Контент» блока ANX822 и выбираем наши снежинки (смотрите скриншот).
  6. Ниже меняем значение mix-blend на Screen (смотрите скриншот).
  7. Сохраняем и опубликовываем страницу.
Режим наложения mix-blend-mode
5 шаг
Режим наложения mix-blend-mode
6 шаг
Готово! Теперь снежинки на прозрачном фоне. Вы можете проделывать данную операцию с любыми картинками, у которых однотонных фон, экспериментируя с режимами наложения
Made on
Tilda