En el diseño web, uno de los aspectos que más importa es el juego de luces y sombras. Los diseñadores que consiguen incorporar las dimensiones a sus interfaces producen UIs más realistas, familiares y centradas en el usuario. Para ello, es necesario conocer bien cómo interactúan la iluminación y las sombras.
Los diseñadores de interfaz de usuario utilizan numerosos métodos para dinamizar sus pantallas. La sombra paralela es un componente vital de estos métodos más avanzados. Aunque casi todas las configuraciones de sombra paralela por defecto no están optimizadas para las aplicaciones del mundo real, todas las herramientas de diseño gráfico proporcionan una capacidad de sombra paralela. Depende del usuario mejorar sus sombras paralelas.
Una vez que hayas dominado la sombra paralela, ya estarás en camino de crear interfaces de usuario realistas, prácticas y, en definitiva, atractivas. Por eso, en esta entrada del blog, nos centraremos en una estrategia de diseño muy utilizada para mostrar detalles: la sombra paralela.
Contenido
¿Qué se entiende por "sombra"?
Las sombras paralelas proporcionan a los objetos un aspecto más completo y ofrecen a su documento un mayor atractivo. Una sombra paralela es un efecto de diseño gráfico en el que una copia negra o gris de un objeto se dibuja en una posición diferente para asemejarse a la sombra del objeto.
Este efecto ofrece la impresión de que el objeto está elevado sobre los que están delante. El texto también se distingue de otras cosas con un fondo de color por la sombra paralela.
Las sombras paralelas son un tipo de sombra proyectada o una sombra producida por un elemento que obstruye una fuente de luz. Si quieres añadir una sombra paralela a un elemento textual, debes empezar dándole un relleno y un pincel.
¿Cuál es el objetivo de utilizar la sombra de caída?
Las sombras paralelas pueden utilizarse para aumentar el contraste de forma rápida y económica. ¿Quieres utilizar un diseño más cálido y suave, como una tarjeta pálida sobre un fondo blanco? Hazlo resaltar añadiendo una sombra paralela. Los efectos de sombra paralela pueden aplicarse a los sitios web mediante los atributos CSS box-shadow y text-shadow. Los dos primeros pueden utilizarse para los componentes y el texto, mientras que el efecto de sombra paralela se utiliza para el contenido de los elementos, lo que permite acomodar elementos con formas extrañas o imágenes translúcidas.
Los diseñadores pueden utilizar las sombras paralelas para los elementos gráficos de la interfaz, como el texto introductorio, los menús y las ventanas. Una sombra paralela, por ejemplo, se utiliza para resaltar el texto del fondo en muchos iconos del escritorio. Se suele dibujar un área negra o gris debajo del objeto, reposicionándolo ligeramente.
Otra forma de hacer que las piezas parezcan más reales es hacer que los colores de los píxeles donde cae la sombra sean más oscuros que el gris. Puedes conseguir este efecto fusionando la oscuridad con el espacio en el que se proyecta. Desenfoque gaussiano en el canal alfa de la sombra antes de la fusión para suavizar los bordes. Las sombras de inserción aplican las sombras dentro de los elementos, haciendo que la interfaz del elemento parezca sumergida.
Conclusión
Puedes utilizar las sombras paralelas de forma eficaz, ya que se utilizan con frecuencia para los elementos gráficos de la interfaz de usuario, como las ventanas, los menús y el texto básico. En muchos escritorios, la descripción textual de los iconos tiene una sombra paralela, que diferencia eficazmente el texto a través de cualquier fondo de color que pueda tener delante. Por lo tanto, puede utilizarla para elementos de su sitio web para hacerlo más atractivo.
Póngase en contacto con nosotros o consulte nuestra página del blog para obtener más información.
