El manejo de los detalles es muy importante en el diseño web. Personalmente, observo a menudo los sitios web de Gringo y encuentro que los diseños de sitios web excelentes son muy cuidadosos en el manejo de los detalles. Los consejos que comparto contigo hoy son muy sencillos, pero pueden mejorar enormemente los detalles de todo el sitio web. Por eso creo que estos consejos también son útiles para mejorar el nivel de diseño de su sitio web.
Y notarás que todas estas técnicas giran en torno a una palabra, que es "pixelación", que simplemente significa algunas líneas pequeñas de 1px y 2px. Bien, allá vamos.
1. Línea divisoria de píxeles La primera introducción es la línea divisoria. Mire la barra de navegación en la siguiente figura.
Preste atención a las líneas en el círculo rojo en la imagen y a las líneas de separación entre los botones. Estas líneas parecen hundidas, formando una buena sensación de línea de separación. A continuación, ampliaré esta imagen y echemos un vistazo al principio.
Podemos ver que estas líneas divisorias están compuestas por dos líneas rectas adyacentes de 1 px, y un color es más oscuro y el otro es más claro que el color de fondo. A continuación, mira el método:
Seleccione la herramienta lápiz (no elija el pincel por error) y establezca el tamaño en 1px
Seleccione un color más oscuro que el color de fondo, como el azul oscuro en la imagen, mantenga presionada la tecla Mayús y dibuje una línea recta.
Elige un color más claro y dibuja otra línea recta. DE ACUERDO
PD: Durante el proceso de dibujo lineal, puede ampliar el lienzo (Z) para observarlo.
¿Qué tal? El efecto es mucho mejor que un divisor de un solo color, ¿verdad? Veamos algunos ejemplos más del uso de esta técnica de divisor:
2. Borde de píxel
Primero, veamos una imagen original sin "bordes de píxeles":
Lo siguiente es lo que se agrega:
