Добавление тени на изображение
Оригинал: x
Плоский скриншот продукта приподнимается над страницей благодаря мягкой падающей тени; тот же кадр без неё выглядит будто наклеенным. Этот инструмент добавляет настраиваемую тень с отдельными параметрами: радиус размытия, смещение, разброс и цвет, формируя PNG-файл со встроенной тенью, готовый для маркетинговых страниц, заголовков блогов и документации.
Как добавить падающую тень
-
1
Загрузить изображение
Наилучшим образом работает с файлами формата PNG, уже содержащими прозрачность, или с скриншотом продукта, который необходимо обрамить.
-
2
Настройте параметры тени
Радиус размытия, смещение по осям X/Y, прозрачность, цвет.
-
3
Выберите холст
По размеру изображения вместе с тенью либо фиксированный размер с отступами.
-
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.
Инструмент доступен на других языках
- 画像シャドウ追加ツール [JA]
- Lägg till bildskugga [SV]
- Bildschatten-Generator [DE]
- Penambah Bayangan Gambar [ID]
- أداة إضافة ظل للصورة [AR]
- Afbeeldingsschaduw toevoegen [NL]
- Ajout d'ombre à l'image [FR]
- Dodawanie cienia do obrazu [PL]
- Adicionador de Sombra de Imagem [PT]
- Añadir Sombra a Imágenes [ES]
- Công cụ thêm bóng đổ cho ảnh [VI]
- 이미지 그림자 추가 [KO]
- เครื่องมือเพิ่มเงาให้ภาพ [TH]
- Image Shadow Adder [EN]
- Aggiungi Ombra all'Immagine [IT]
- Resme Gölge Ekleme Aracı [TR]
- 图像阴影叠加器 [ZH]