Añadir Sombra a Imágenes

Sombra proyectada

Una captura de pantalla de producto plana se eleva de la página con una sombra suave; la misma toma sin una se ve pegada. Esta herramienta añade una sombra personalizable con controles independientes para el radio de desenfoque, desplazamiento, difusión y color, produciendo un PNG con la sombra integrada, listo para páginas de marketing, encabezados de blogs y documentación.

Cómo añadir una sombra proyectada

  1. 1

    Sube una imagen

    Funciona mejor con PNG que ya tiene transparencia o una captura de pantalla de producto que deseas enmarcar.

  2. 2

    Establece los parámetros de la sombra

    Radio de desenfoque, desplazamiento X/Y, opacidad, color.

  3. 3

    Elige un lienzo

    Ajustar a la imagen más la sombra, o tamaño fijo con relleno.

  4. 4

    Exportar

    La salida PNG preserva los bordes de sombra suave; JPG tendrá un fondo visible.

Configuraciones de sombra que se sienten bien

Las buenas sombras proyectadas suelen ser más suaves y menos opacas de lo que la gente elige instintivamente.

Estilos preestablecidos

Estilo Desenfoque Desplazamiento Y Opacidad Difusión
Elevación sutil (tarjeta UI) 12 px 2 px 8% 0
Elevación de material 2 8 px 2 px 15% 0
Elevación de material 8 24 px 12 px 20% 0
Publicación en redes sociales 40 px 20 px 25% 0
Imagen hero flotante 80 px 40 px 30% 0
Sombra larga (diseño plano) 0 px 40 px 30% 0

Color de sombra

  • El negro es fácil pero a menudo se ve duro. Una versión oscura desaturada del color dominante de la imagen se ve más integrada.
  • El negro puro al 25% de opacidad suele ser mejor que el negro al 70%.
  • Sombras cálidas bajo una imagen cálida, sombras frías bajo una imagen fría.

Dónde está la luz

Si tu imagen tiene un sentido interno de iluminación (un logo con resalte), alinea la dirección de la sombra con esa iluminación. Las capturas de pantalla de fotos genéricas suelen verse mejor con una luz de arriba hacia abajo (desplazamiento de sombra hacia abajo de 2-20 px).

Salida PNG vs JPG

  • PNG: los bordes de sombra se desvanecen a la transparencia de manera limpia. Mejor para colocar la imagen sobre cualquier fondo.
  • JPG: la sombra se aplana contra un color de fondo elegido. Usa cuando conozcas el fondo de colocación final.

Evita apilar efectos

Una sombra proyectada más un borde grueso más esquinas redondeadas más un tinte comienza a verse recargado. Elige uno o dos: un borde sutil más una sombra suele ser suficiente.

Preguntas frecuentes

Casi siempre la opacidad es demasiado alta. Redúcela al 20-30% y aumenta el radio de desenfoque. Las sombras reales a la luz del día son difusas; una sombra nítida y oscura se lee como iluminación de escenario.

La herramienta produce solo sombras proyectadas externas. Para sombras internas (por ejemplo, texto presionado en una superficie), usa un filtro de bisel/emboss dedicado.

Sí, por defecto, el lienzo se expande para incluir las extensiones de la sombra. Puedes bloquear el lienzo al tamaño original si prefieres que la sombra se recorte en los bordes (para mosaicos o fondos continuos).

Sí. La entrada PNG con alfa produce una sombra alrededor de lo que es opaco, no alrededor del rectángulo completo. Recortes de producto con siluetas complejas generan sombras naturales que se ajustan a la forma.

Herramientas relacionadas

Herramienta disponible en otros idiomas