La luz y la sombra existen en todas partes en la vida real. Todo lo que ves se refleja en luces y sombras. Visualmente, la luz y la sombra nos ayudan a identificar las cosas y reconocer su material , escala y perspectiva .
Por tanto, si queremos que nuestro diseño web sea más natural, dinámico, real e intuitivo, es muy importante entender correctamente los efectos de luces y sombras. Aquí hay cinco consejos que le ayudarán a aprovechar mejor la luz y las sombras. Usarlas bien puede hacer que su diseño sea más refinado y se destaque de otras páginas.
Un rápido análisis de los principios de iluminación y sombras.
En la imagen de abajo, la fuente de luz proviene de la izquierda. Las luces son las partes más iluminadas y las sombras se encuentran más alejadas de la fuente de luz. La existencia de luces y sombras nos ayuda a percibir una gran cantidad de información sobre el material de la superficie de un objeto . Pero te preguntarás, ¿qué tiene esto que ver con el diseño web?
Si planea crear interfaces y sitios web ricos y texturizados, las luces y las sombras pueden ayudarlo. Así como muchos artistas tradicionales usan la luz en sus pinturas, usted también puede usarla para darle profundidad e interés visual a sus diseños.
1. Utilice una fuente de luz
Cabe decir que a la hora de utilizar iluminación, saber dónde está la fuente de luz es la cuestión básica más importante. La posición de la fuente de luz determina la ubicación de las luces y las sombras (aunque en diseño web puedes romper estas reglas). En Photoshop, puede utilizar "Iluminación global" en los estilos de capa para asegurarse de que las fuentes de luz de todos los efectos de luz y sombra que cree estén en la misma posición.
Controlar la posición de la fuente de luz puede crear una atmósfera única para el diseño de su página (incluso un simple degradado lineal o radial puede lograr el efecto). Los efectos de luces y sombras también pueden guiar el cambio del centro visual.
Campaign Monitor utiliza fuentes de luz divergentes para crear un efecto de amanecer.
Icebrrg utiliza iluminación para crear páginas bajo el agua.
Mike Precious utilizó más de una fuente de luz para agregar interés visual y utilizó iluminación con lámparas de mesa en todas partes.
Deaxon tiene una fuente de luz tenue detrás del logotipo, que centra la atención de la página en el logotipo.
2. gradiente
En el mundo real, nada es siempre plano. La luz y la sombra se aferran a todo. Usar degradados es una excelente manera de crear profundidad y autenticidad.
La clave para utilizar degradados es no exagerar . Al dibujar degradados en Photoshop, superponga el degradado en el estilo de capa. Esto garantizará que el degradado sea editable y, a medida que se escala la capa, el degradado también se puede escalar sin pérdidas.
El sitio web de nclud utiliza gradientes sutiles pero efectivos para diferenciar y organizar el contenido.
A primera vista, CSS Ninjas parece utilizar colores planos. Sin embargo, cada área de color tiene en realidad un ligero degradado, lo que crea un fascinante efecto material.
3. Lo más destacado
Las luces equilibran las sombras y deben ubicarse en los bordes de los objetos cercanos a la fuente de luz . Los aspectos más destacados se ignoran en su mayoría porque, si se usan bien, apenas se nota que están ahí. Sin embargo, no todas las situaciones son propicias para la existencia de mechas. Una sutil iluminación puede provocar una gran diferencia en el brillo de la superficie de un objeto. Cuanto más "nítido" sea el brillo, más fuerte será el brillo de la superficie del objeto.
Para apreciar los aspectos más destacados, debemos ampliar estos detalles. Al hacer diseños de alto brillo, es una buena idea duplicar el tamaño de su diseño, porque es posible que no pueda darse cuenta de lo que está haciendo cuando se muestra en su escala original.
Tanto Icon Dock como Newism utilizan blanco translúcido en el borde superior de la página para crear un efecto de resaltado. Aunque es muy discreto, proporciona un gran brillo al diseño.
Todo el mundo debería estar familiarizado con el sitio web de Apple. Pero probablemente no hayas notado el sutil resaltado en la parte inferior del menú de navegación. Es este punto destacado el que le da al menú una sensación de prominencia.
4. Sombras básicas
Al igual que los degradados, los diseñadores web también utilizan ampliamente las sombras paralelas. Cuando se usan correctamente, las sombras paralelas realmente pueden agregar profundidad visual y textura a un diseño. La clave es no exagerar ni abusar de él.
La profundidad de la sombra depende de la dirección y la intensidad de la luz, así como de la distancia del objeto a la superficie de proyección. Cuanto más fuerte es la luz, más nítida y oscura es la sombra; cuanto más débil es la luz, más débil es la sombra.
Hay demasiados ejemplos de proyección en Internet.
LinkedIn agrega una sombra extremadamente sutil en la parte inferior de la barra lateral para crear una sensación de profundidad.
Google, quizás la página más difícil de diseñar en Internet, todavía utiliza una sombra sutil en su página de búsqueda.
5. Sombras avanzadas
Para darle a un objeto una sensación tridimensional, tienes muchas opciones además de la simple proyección. Las sombras largas pueden cambiar drásticamente las relaciones espaciales de los objetos en la página.
En el siguiente ejemplo, después de que a la misma lata de Coca-Cola se le dan diferentes sombras y partes oscuras, toda la posición espacial parece completamente diferente .
Emotions by Mike utiliza sombras (e iluminación) de manera inteligente para transformar literalmente una página plana en un piso.
Superkix usa sombras paralelas para hacer que las zapatillas floten sobre la página. Cuando haces zoom en la página, la sombra también puede moverse, al igual que la fuente de luz también cambia. Sofa crea un suelo sobre un fondo blanco puro mediante un excelente uso de luces y sombras. Más recursos El siguiente contenido está en inglés:
Sobre el autorRob Morris es un diseñador australiano que trabaja en Japón. Como diseñador independiente, se llama Digitalmash y tiene clientes en todo el mundo. Puedes seguir sus aventuras en Twitter. |