Añadir sombra a una imagen
Dale una sombra realista a recortes de productos, logotipos, capturas de pantalla y fotos. La sombra sigue el contorno real de los PNG transparentes, el lienzo se amplía automáticamente para que no se corte nada y el resultado se descarga como PNG transparente, listo para cualquier fondo.
Última actualización:
Cómo usar Añadir sombra a una imagen
- Añade tu imagen: suelta un PNG con fondo transparente (un recorte de producto o un logotipo) o cualquier foto, pégala o pulsa Elegir imagen. Primero se carga una taza de ejemplo.
- Elige un ajuste predefinido como Suave, Flotante o Reflejo, o elige tú mismo el tipo de sombra.
- Ajusta la sombra: muévela con los desplazamientos X e Y (o con el ángulo y la longitud en la sombra larga), suavízala con Desenfoque, agrándala o redúcela con Extensión y define el color y la opacidad.
- Configura el lienzo: añade margen, redondea las esquinas de las fotos y elige un fondo transparente o de color.
- Descarga en PNG para conservar la transparencia, o en JPG para una imagen plana con el fondo elegido.
Cómo se crea la sombra
La sombra se crea a partir del propio canal alfa de la imagen, la capa invisible que guarda lo opaco que es cada píxel. En un producto recortado o un logotipo, es su contorno exacto; en una foto sin transparencia es el rectángulo, o un rectángulo redondeado si redondeas las esquinas.
- Extensión usa una transformada de distancia euclidiana exacta del contorno: cada píxel sabe a qué distancia está del borde, así que al agrandar o reducir la forma un número de píxeles las esquinas se mantienen redondeadas y uniformes.
- Desenfoque aplica un desenfoque gaussiano a la silueta, el mismo que usan los navegadores para las sombras CSS (el valor de desenfoque es el doble de la desviación estándar de la gaussiana).
- Opacidad y color tiñen la silueta antes de colocarla debajo de la imagen.
- Sombra larga repite la silueta a lo largo del ángulo elegido (se construye en log₂(longitud) pasos, así que sigue siendo rápida) y la desvanece con un degradado.
- Reflejo voltea la imagen verticalmente debajo de sí misma y la desvanece con una máscara de degradado.
Los desplazamientos, el desenfoque y la extensión se escalan al tamaño de la imagen (los valores en píxeles que se muestran son píxeles reales del resultado), así que un ajuste predefinido se ve igual en un logotipo de 500 px que en una foto de producto de 2400 px.
Ajustes de sombra para usos habituales
| Uso | Tipo | Ajustes recomendados |
|---|---|---|
| Foto de producto para una tienda | Flotante o Suave | Desplazamiento Y de 40 a 70, desenfoque de 40 a 60, extensión −20, opacidad de 35 a 45 % |
| Logotipo en un sitio web | Suave | Desplazamiento Y de 8 a 20, desenfoque de 20 a 40, opacidad de 20 a 30 % |
| Captura de pantalla o tarjeta de foto | Suave con esquinas redondeadas | Esquinas de 3 a 6 %, desplazamiento Y 20, desenfoque 50, opacidad 30 % |
| Icono plano | Sombra larga | Ángulo 45°, longitud de 250 a 400, desvanecimiento 100 %, opacidad 20 % |
| Botella, teléfono o dispositivo | Reflejo | Separación de 0 a 6, altura de 35 a 50 %, opacidad 30 % |
| Pegatina o texto recortado | Dura | Desplazamiento de 10 a 16 en ambos ejes, desenfoque 0, opacidad 30 % |
Consejos para sombras realistas
- La luz viene de arriba en la mayoría de las escenas, así que una sombra ligeramente por debajo del objeto (desplazamiento Y positivo) es la que parece más natural.
- Más lejos significa más suave: cuanto más flota un objeto sobre la superficie, mayores deben ser el desplazamiento y el desenfoque, y más clara la sombra.
- Sombras teñidas: sobre fondos de color, usa un tono más oscuro del color de fondo en lugar de negro puro para un aspecto más natural.
- ¿Necesitas recortar primero? Quita el fondo antes de añadir la sombra para que siga el objeto en lugar del rectángulo de la foto.
Preguntas frecuentes
¿Cómo añado una sombra paralela a un PNG?
Carga el PNG y la sombra se crea automáticamente a partir de su contorno transparente. Usa el ajuste Suave como punto de partida, define los desplazamientos X e Y según la dirección de la luz, añade Desenfoque para un borde más suave y descarga el resultado como PNG. El lienzo se amplía para que quepa la sombra y el fondo sigue siendo transparente.
¿La sombra sigue la forma o solo el rectángulo?
En las imágenes con transparencia, la sombra sigue el contorno alfa exacto, incluidos los huecos y los bordes suaves. Las fotos sin transparencia se tratan como un rectángulo; puedes redondear antes sus esquinas y la sombra también quedará redondeada.
¿Qué hacen el desenfoque, la extensión y la opacidad?
El desenfoque suaviza el borde de la sombra, como una fuente de luz más grande o más lejana. La extensión agranda (positiva) o reduce (negativa) el contorno de la sombra antes de desenfocarla; una extensión negativa con un desplazamiento Y grande da el aspecto suave 'flotante'. La opacidad define lo oscura que es la sombra.
¿Qué es una sombra larga?
Una sombra larga es un efecto de diseño plano en el que el objeto proyecta una sombra sólida que se extiende mucho en una dirección, normalmente a 45 grados, y que a menudo se desvanece. Ajusta el Ángulo, la Longitud y el Desvanecimiento para darle estilo.
¿Por qué la imagen descargada es más grande que la original?
La sombra queda fuera del objeto original, así que el lienzo crece según el desplazamiento, el desenfoque y la extensión de la sombra, más el Margen que elijas. Así se evita que la sombra se corte. Pon el Margen a 0 para obtener el tamaño más ajustado posible.
¿Puedo usar la sombra en un sitio web?
Sí. Descarga un PNG con fondo transparente y colócalo sobre cualquier color de página; la sombra suave se integra de forma natural. Para cajas simples en HTML también puedes usar box-shadow de CSS, pero una sombra en la imagen funciona con cualquier forma y en correos, diapositivas y documentos.
¿Se sube mi imagen?
No. La sombra se genera con la API Canvas en tu navegador y tu imagen nunca sale de tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.