Me atrevería a suponer que la mayoría de nosotros estamos tan acostumbrados a mirar luces y sombras que rara vez nos tomamos el tiempo para pensar en cómo funcionan. Pero seamos o no conscientes de ellas, la luz y la sombra son señales visuales con las que todos interactuamos todos los días: nos brindan información sobre la forma, la distancia, la posición, la textura y otras cualidades físicas y táctiles.
¿Alguna vez te has tomado un momento para notar un rayo de sol que entra por una ventana y has visto cómo la luz cambia los colores de los objetos en la habitación y proyecta sombras?
Usando Light & Sombra en el diseño: ventajas y desventajas Contras
Prestar atención a la interacción de luces y sombras en la vida real puede brindarnos una gran inspiración para hacer que nuestros diseños parezcan más reales. A menos que tenga una impresora 3D en su sótano, la mayoría de nosotros sólo tenemos la capacidad de diseñar en dos dimensiones. Pero todos estamos acostumbrados a ver cosas en tres dimensiones y, a veces, eso crea una desconexión visual entre lo que estamos acostumbrados a ver en la vida cotidiana y lo que vemos en papel o en la pantalla. Agregar elementos de luz y sombra a sus diseños puede ayudar a cerrar esa brecha, dándole a sus diseños 2D una apariencia más realista, casi 3D.
Pero (y este es un gran “pero”), si has pasado algún tiempo en Internet, seguramente habrás notado que los efectos de luces y sombras son fáciles de exagerar. Como admitió un diseñador en su divertida publicación de blog “Confesiones de un adicto a las sombras paralelas”, en nuestro mundo moderno de hacer clic y listo al instante Una vez hecho el diseño, es muy fácil agregar un efecto tras otro sin pensar realmente si son necesarios o beneficiosos para su proyecto de diseño.
Dicho esto, veamos algunos pros y contras:
La luz y la sombra pueden agregar cualidades como profundidad, dimensión, perspectiva, realismo e interés visual a sus diseños. Esto puede atraer simultáneamente a los espectadores hacia su diseño y hacer que parezca salirse de la página o de la pantalla.
Pero… es fácil dejarse llevar. Exagerar los efectos es una forma infalible de hacer que un buen diseño parezca amateur y de mal gusto.
En resumen, el secreto para utilizar la luz y la sombra de forma inteligente pasa por tener dos cosas en mente: propósito y sutileza. Primero, asegúrese de que cualquier efecto que esté utilizando tenga un propósito práctico y específico y que tenga sentido para su proyecto; luego, adopte un enfoque de “menos es más” para aplicarlo a su diseño. Si está utilizando un efecto que viene con su programa de diseño, la configuración predeterminada siempre es más dramática que realista (particularmente para las sombras); No confíes en ellos, probablemente querrás hacerlos más suaves, ligeros y sutiles.
Cómo funcionan la luz y la sombra: una descripción general rápida
Antes de entrar en sugerencias sobre cómo integrar luces y sombras en sus diseños, será útil tener una comprensión básica de su anatomía. Esto es algo que los artistas y fotógrafos estudian para crear composiciones bien iluminadas, pero también puede ayudar a los diseñadores gráficos y web a crear efectos realistas de luces y sombras.
En el diagrama anterior, señalé algunos términos clave. Los definiremos brevemente aquí:
Fuente de luz:
Si ves sombras o luces, entonces debe haber una fuente de luz. Suena obvio, pero en la mayoría de los proyectos de diseño (aparte de las ilustraciones que incluyen un sol, una luna, una lámpara, etc.) esa fuente de luz no será visible. Sin embargo, si determinas la posición de una fuente de luz imaginaria y configuras tus efectos para que parezcan todos causados por esa misma fuente de luz, obtendrás una apariencia más realista y consistente, en lugar de solo una aplicación especial al azar. efectos.
Resaltado:
Aquí es donde la luz brilla más sobre un objeto (más cerca y de frente a la fuente de luz).
Sombra/Sombra central:
Esta es la parte más oscura del objeto (más alejada de la fuente de luz). Pero las sombras no son todas una mancha de color oscuro; varían en sombra. La parte más profunda de una sombra, donde el objeto está completamente alejado de la fuente de luz, se conoce como sombra central.
Proyectar sombra:
A diferencia de la sombra central (que está en el objeto), esta se crea por el objeto. Cuando el objeto bloquea la fuente de luz, proyecta una sombra sobre la superficie sobre la que se encuentra. Las sombras proyectadas apuntan en la misma dirección que la fuente de luz, justo en el lado opuesto del objeto.
Esta es una descripción general muy básica que le brindará un punto de partida para utilizar correctamente la luz y las sombras. Ahora, vayamos al grano; Continúe con los consejos de diseño que estaba esperando:
01. Usa el color para crear profundidad
El color por sí solo puede ser una excelente manera de crear la ilusión de claridad u oscuridad, sin recurrir a efectos prefabricados. En particular, superponer varios tonos del mismo color puede crear la apariencia de profundidad o distancia. Esto se debe a que, ante nuestros ojos, los colores claros retroceden mientras que los colores oscuros avanzan.
Las ilustraciones siguientes demuestran perfectamente esta idea. Observe cómo las montañas comienzan más oscuras más cerca del primer plano, pero luego se aclaran y parecen estar alejadas en la brumosa distancia del fondo.
También hay muchas otras luces y colores fantásticos aquí. Las temperaturas de color que el diseñador eligió para cada panel contribuyen en gran medida a mejorar la impresión de luz y oscuridad. Los sutiles gradientes en el cielo también crean la impresión de diferentes horas del día y tipos de luz (por ejemplo, el cálido resplandor del amanecer frente a la fría y blanca luz de la luna). Hablando de degradados, pasemos al siguiente consejo…
02. Agrega un degradado a tu fondo
Enciende una lámpara en tu casa y mira la pared más cercana… No es todo un color plano, ¿verdad? La parte de la pared más cercana a la lámpara puede parecer de color más claro o más cálido, mientras que cuanto más te alejas de la luz, más oscura se ve. Podrías pensar que estás mirando una pared azul y sencilla, pero si miras de cerca, es posible que veas tonos de gris, verde, azul o morado. La cuestión es que rara vez la luz hace que un objeto o superficie parezca de un color uniforme e invariable.
Y una forma de crear ese tipo de variación de color dinámica es agregar un degradado a un fondo u otra área grande de su diseño. Ahora bien, los degradados pueden hacerte pensar en un horrible fondo multicolor en un sitio web de los años 90 que hace que el texto sea imposible de leer, pero ese es un degradado que salió mal. Cuando se hacen bien, los degradados pueden agregar alguna variación sutil de color (como ya se mencionó), ayudar a suavizar/difuminar las sombras o crear la apariencia de luz brillando en un área determinada de su diseño (particularmente con degradados radiales o redondos).
A continuación, este degradado radial en la página de destino de un sitio web tiene múltiples propósitos. La parte más clara del degradado hace que parezca que una luz brilla desde arriba y también hace que la sombra que proyecta el teléfono sea más visible. Combinados, estos efectos hacen que la escena aquí parezca real: parece como si pudieras extender la mano y tocar ese teléfono; tiene forma y dimensión. Observe también cómo el resaltado en la esquina superior derecha, junto con la sombra, realmente ayuda a darle al teléfono una apariencia 3D.
03. Utilice resaltado para llamar la atención
La luz que brilla en algo siempre te llama la atención, ¿no? En un diseño, las luces pueden actuar como un foco sutil, haciendo que ciertos elementos sean un poco más visibles, además de ayudar a que los elementos parezcan más realistas, como se discutió en el punto anterior. Si desea resaltar varias cosas en su diseño, recuerde pensar en su fuente de luz imaginaria y hacer que sus reflejos sean consistentes.
Vea el simple resaltado del logotipo «801» en el empaque del producto a continuación. En realidad, son solo líneas de color que son ligeramente más claras que el color primario de los números, pero le dan visibilidad adicional e interés visual al punto focal del diseño.
04. Maestro de las sombras: sombreado
Sombreado es otro término para las sombras en un objeto, como la sombra central que definimos en la parte superior del artículo. El sombreado puede dar forma y dimensión a elementos de diseño plano o letras.
Aquí, el sombreado texturizado de un logotipo tipográfico plano y blanco lo hace parecer complejo y en capas:
05. Maestro de las sombras: reparto y amp; Sombras paralelas
¿Recuerdas el diagrama de la manzana que aparece anteriormente en este artículo? La sombra proyectada era la sombra que la propia manzana causaba al bloquear la luz, creando una sombra a un lado. Las sombras paralelas son solo un tipo particular de sombra proyectada donde la fuente de luz está más o menos directamente sobre la cabeza, lo que proyecta una sombra detrás o debajo de un objeto. Esto hace que parezca que el objeto está flotando sobre una superficie.
Desde el punto de vista del diseño, las sombras paralelas pueden ayudar a que los elementos o la información “suban” a la parte superior de un diseño, haciéndolos resaltar. También son útiles para mejorar la visibilidad de elementos de diseño de colores claros, especialmente texto. Por ejemplo, en el diseño de esta página web, las sombras paralelas ayudan a que el contenido destacado sea más destacado:
Las sombras paralelas son muy comunes en proyectos de diseño de todo tipo, pero también suelen usarse incorrectamente. Un paso en falso típico de las sombras paralelas es hacerlas demasiado grandes, demasiado oscuras y/o demasiado nítidas. El uso de sombras en un diseño generalmente no debería hacer que los espectadores piensen: «¡Oh, mira, hay una sombra!» En cambio, deberían combinarse perfectamente con el resto del diseño.
06. Ajustar la opacidad
En la vida real, las sombras no son opacas y la luz no es una capa plana de blanco o amarillo: son transparentes; Debería ser el mismo en tus diseños. Para una apariencia sutil y realista, los ajustes de opacidad y transparencia son sus mejores amigos al aplicar efectos. Es una buena práctica comenzar con una aplicación realmente sencilla y luego desarrollarla ligeramente según sea necesario; Esto hará que sea menos probable que te excedas accidentalmente.
07. Combina luz y brillo. Sombra para una tipografía llamativa
Tu tipografía es un excelente lugar para agregar efectos de luces y sombras, ya sea dentro o fuera de las letras. Especialmente para diseños donde la tipografía es el punto focal, esto realmente puede hacer que las palabras cobren vida de una manera llamativa.
Tome este logotipo tipográfico como ejemplo: utiliza resaltados y sombreados en las letras que aparecen y desaparecen (degradados) para crear un logotipo 3D cincelado. mira. También hay una bonita sombra debajo. (Observe el uso constante de una fuente de luz imaginaria proveniente del lado superior izquierdo: las luces principales caen en los lados superior e izquierdo de las letras, y la sombra paralela apunta hacia abajo y hacia la derecha, lejos de la luz, como debería) . Algunas texturas sutiles unen todo.
08. Más opciones de sombras de tipografía: pruebe los estilos elevados y empotrados
Tus fuentes son un lugar donde realmente puedes ser creativo con los estilos de sombras. En su mayor parte, son fáciles de aplicar (algunas fuentes incluso vienen con un estilo de sombra incorporado) y pueden darle a tu tipografía un aspecto personalizado. Veamos dos opciones más:
1) Elevado: El estampado en relieve es una técnica de impresión que eleva físicamente una característica de diseño (generalmente texto) sobre la superficie del papel (u otro material). Esto generalmente se hace con algún tipo de sello de metal. Puedes copiar ese efecto digitalmente con algunas sombras bien colocadas (fuera de los límites de las formas de las letras) y luces (en las propias letras).
2) Empotrado: la gente usa una variedad de palabras para describir el texto grabado o presionado en una superficie. La tipografía es una técnica común: es una técnica de impresión que utiliza placas de metal para presionar un diseño (con o sin tinta) en un papel suave y grueso, pero la palabra también se aplica con frecuencia a los efectos digitales que replican ese aspecto. Por ejemplo, este diseño de logotipo:
Las sombras y las luces se colocan en posiciones opuestas como una apariencia de relieve: las sombras están dentro de las letras y las luces afuera, marcando dónde se presiona la superficie.
09. ¿Qué pasa con el diseño plano?
El diseño plano se ha convertido en una tendencia que perdura: desde la transición de Apple a un diseño móvil plano hasta el nuevo logotipo plano de Google, Parece que llegó para quedarse, al menos por un tiempo. Una de las características que definen el diseño plano es su falta de profundidad, lo que generalmente significa que no verás muchas sombras ni luces. Pero, ¿qué sucede si desea mantener el minimalismo del diseño plano y al mismo tiempo agregar iluminación o sombras dinámicas? Los diseñadores han estado modificando la tendencia para permitir eso; Aquí hay un par de enfoques comunes:
- Color: el uso de variaciones de color o degradados puede agregar una sensación de dimensión o interacción de luz/sombra sin dejar de ser técnicamente fiel a un concepto de diseño plano.
Este diseño de página 404 aplica capas de colores más claros y más oscuros para crear la apariencia de profundidad (una técnica que analizamos en el punto 1).
- Sombras largas: este estilo de sombra particular suele combinarse con un diseño plano, especialmente para texto e íconos. Las sombras largas generalmente se extienden fuera del borde del diseño.
10. Para la Web: haga que se pueda hacer clic en las cosas
Para el diseño web, la forma en que los usuarios interactúan con el sitio es, naturalmente, una consideración importante. La interfaz de usuario (o UI) debe ser fácil de usar y comprender, y saber en qué puedes y en qué no puedes hacer clic es una gran parte de eso. Ahí es donde las sombras y las luces pueden resultar útiles, especialmente al diseñar botones.
Observe cómo los botones siguientes utilizan una combinación de muchas de las funciones que hemos analizado a lo largo del artículo (degradados, luces, sombreados, sombras) para crear forma y dimensión. Los aspectos más destacados hacen especialmente un buen trabajo aquí; en el botón izquierdo, el resaltado delgado en el borde hace que parezca que el botón se eleva ligeramente por encima de la superficie (se puede presionar), y el resaltado redondeado en la mitad superior le da una forma convexa. El botón izquierdo utiliza una técnica de sombra interior para que parezca presionado.
Este tipo de opciones de diseño pueden ser pequeñas y sutiles, pero inconscientemente ayudan a los espectadores a interactuar con su diseño.
Revisemos…
Los efectos de luces y sombras generalmente aportan más a su diseño cuando se aplican cuidadosa y estratégicamente, no al azar o simplemente con el fin de agregar «campanas y silbatos» adicionales a su proyecto.
