Добавление тени на изображение

Падающая тень

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

Как добавить падающую тень

  1. 1

    Загрузить изображение

    Наилучшим образом работает с файлами формата PNG, уже содержащими прозрачность, или с скриншотом продукта, который необходимо обрамить.

  2. 2

    Настройте параметры тени

    Радиус размытия, смещение по осям X/Y, прозрачность, цвет.

  3. 3

    Выберите холст

    По размеру изображения вместе с тенью либо фиксированный размер с отступами.

  4. 4

    Экспорт

    При выводе в формат PNG края мягких теней сохраняются; при выводе в формат JPG фон становится видимым.

Настройки тени, которые кажутся правильными

Хорошие падающие тени обычно мягче и менее плотные, чем те, которые люди выбирают интуитивно.

Готовые стили

Стиль Размытие Смещение по Y Непрозрачность Разброс
Лёгкий подъём (UI-карточка) 12 пикс. 2 пикс. 8 % 0
Высота материала 2 8 пикс. 2 пикс. 15 % 0
Высота материала 8 24 пикс. 12 пикс. 20 % 0
Пост в соцсетях 40 пикс. 20 пикс. 25 % 0
Плавающее ключевое изображение 80 пикс. 40 пикс. 30 % 0
Длинная тень (плоский дизайн) 0 пикс. 40 пикс. 30 % 0

Цвет тени

  • Чёрный цвет прост в использовании, но часто выглядит резким. Тёмная приглушённая версия доминирующего цвета изображения смотрится более цельно.
  • Чистый чёрный с непрозрачностью 25 % обычно лучше, чем чёрный с непрозрачностью 70 %.
  • Тёплые тени под тёплым изображением, холодные тени под холодным.

Где находится свет

Если у изображения есть внутреннее ощущение освещения (например, логотип с бликом), согласуйте направление тени с этим светом. Обычные скриншоты фотографий лучше всего смотрятся при свете сверху вниз, в этом случае тень смещается вниз на 2–20 пикселей.

Вывод в PNG и JPG

  • PNG: края тени плавно переходят в прозрачность. Идеально для размещения изображения на любом фоне.
  • JPG: тень сводится к выбранному цвету фона. Используйте этот формат, когда фон итогового размещения уже известен.

Избегайте наложения эффектов

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

Часто задаваемые вопросы

Почти всегда непрозрачность слишком высокая. Снизьте её до 20–30 % и увеличьте радиус размытия. Реальные тени при дневном свете рассеянные; резкая тёмная тень воспринимается как сценический свет.

Инструмент создаёт только внешние падающие тени. Для внутренних теней (например, текста, вдавленного в поверхность) используйте специальный фильтр фаски или тиснения.

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

Да. Файл PNG с альфа-каналом создаёт тень вокруг непрозрачных участков, а не по всей области прямоугольника. Вырезанные изображения товаров со сложными силуэтами формируют естественные тени, повторяющие форму объекта.

Сопутствующие инструменты

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Генератор спрайт-листов

Объедините несколько изображений в один PNG спрайт-лист на равномерной сетке прямо в браузере. Получите PNG и готовые классы CSS со смещениями background-position.

Изображение в Excel

Распознайте таблицу в PNG, JPG или WebP локально и скачайте найденные строки в XLSX или CSV. Файлы до 20 МБ остаются в браузере.

Конвертер ARW в JPG

Конвертируйте фотографии Sony ARW RAW в JPG. Получите универсально совместимый JPEG для обмена из RAW-файла камеры без запуска Lightroom.

Конвертер JPG в Excel

Запустите локальное OCR для таблицы в JPG или JPEG и скачайте предполагаемые строки в XLSX либо CSV UTF-8. Файлы до 20 МБ остаются в браузере.

Инструмент доступен на других языках