5 tips de luces y sombras en el diseño web

Simplemente no hay luz y la sombra escapar - es donde se mire. Todo lo que ves refleja la luz y arroja una especie de sombra. Visualmente, la luz y la sombra nos ayudan a dar sentido a lo que vemos y nos ayudan a entender la textura, dimensión y perspectiva.

Por lo tanto, cuando tratamos de hacer nuestros diseños en la Web más natural, en movimiento e intuitiva, una buena comprensión de la luz y la sombra es muy importante. Aquí hay 5 formas de utilizar mejor la luz y la sombra para pulir sus diseños de página y hacer que se destaquen en la pantalla.




En el simple diagrama siguiente, podemos ver que la fuente de luz proviene de la izquierda. Lo más destacado es que la luz es más fuerte, y caen las sombras en el lado más alejado de la fuente de luz. La aparición de la luz y la sombra nos dice mucho acerca de las superficies y texturas en la imagen.



Pero, ¿qué tiene esto que ver con el diseño Web, usted pregunta?

Si usted está tratando de diseñar interfaces ricas, táctiles y sitios web, la luz y la sombra son tus amigos. De la misma manera que muchos artistas clásicos hicieron sus pinturas saltar del lienzo, se puede utilizar la luz para dar a sus diseños de interés y la profundidad visual. Vamos a entrar en ella.




Quizás la parte más importante del trabajo con la iluminación es saber que la luz (s) está viniendo. La fuente de luz lo más probable es determinar dónde las luces y las sombras caen (aunque con un diseño Web que usted puede permitirse el lujo de doblar las reglas de los lugares). Si está trabajando en Photoshop, puede utilizar la "luz global" efecto fin de que todos los efectos de la iluminación seguir la dirección misma luz.

El control de la fuente (s) de la luz en sus diseños (aunque sólo sea con un degradado lineal o radial) puede ayudar a crear una atmósfera en el diseño de su página. También puede ayudar a dirigir los ojos a un punto focal en el diseño.













En el mundo real, muy pocas cosas tienen un tono plano. Luces y sombras están en todo. Sutilmente el uso de gradientes es una excelente manera de dar profundidad y hace que las cosas cobran vida en la pantalla.

La clave con gradientes es no exagerar. Si estás usando Photoshop, hacer uso de estilos de capa para los degradados. Esto le da la libertad para editar en cualquier momento, sino que también significa que si cambia el tamaño del elemento, el gradiente escalará también.











Pone de relieve puede ayudar a equilibrar las sombras y se debe utilizar en los bordes de los objetos más cercanos a la fuente de luz. Pone de manifiesto a menudo se pasa por alto, porque cuando se utiliza con eficacia, no se dan cuenta que están ahí. Y si bien no se adapta a cada situación, un punto culminante pequeños puede hacer toda la diferencia en el pulido de una interfaz. El "más aguda" el punto culminante, el más brillante de la superficie aparecerá.

Para apreciar realmente pone de manifiesto, tenemos que acercar un poco estrecha. Un buen truco para los toques de la adición es trabajar al 200% o más, porque al 100% puede ser difícil de ver lo que está haciendo claramente.










Como gradientes, sombras de abandono se han convertido en un elemento básico de la mayoría de los diseñadores Web. Sombras realmente puede añadir profundidad y la textura si se utiliza de la manera correcta. La clave es no exagerar.

Las cualidades de una sombra depende de la dirección de la luz y la intensidad, así como la distancia entre el objeto y la superficie donde se proyecta la sombra. Cuanto más fuerte sea la luz, más oscura y más nítida será la sombra. La más suave es la luz, más suave es la sombra.










Usted puede hacer mucho más estrictas que caer las sombras para dar elementos de una tercera dimensión. Ya las sombras son una gran manera de cambiar la relación espacial entre objetos en una página.