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

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

Плоский скриншот продукта приподнимается над страницей благодаря мягкой падающей тени; тот же кадр без неё выглядит будто наклеенным. Этот инструмент добавляет настраиваемую тень с отдельными параметрами: радиус размытия, смещение, разброс и цвет, формируя 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 с альфа-каналом создаёт тень вокруг непрозрачных участков, а не по всей области прямоугольника. Вырезанные изображения товаров со сложными силуэтами формируют естественные тени, повторяющие форму объекта.

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

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

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

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

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Генератор миллиметровой бумаги

Создавайте бумагу в клетку для печати онлайн: выберите сетку или точки, задайте шаг в мм, укажите A4 или Letter и свой цвет линий, затем распечатайте или скачайте чёткий SVG.

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

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

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

Локально распознайте текст на изображении PNG, JPG или WebP с OCR на 18 языках. Проверьте его в браузере и скачайте редактируемый DOCX или TXT.

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