Share
Ser "píxel perfecto" es algo que se volvió menos importante para los diseñadores web una vez que todos aceptamos que los sitios web puede Se ven diferentes en diferentes pantallas y dispositivos. Pero eso no significa que la atención al detalle sea menos deseable. En este tutorial, te presentaré una herramienta (una extensión de Chrome) que puede ayudarte a lograr la perfección de píxeles en tus diseños web.
En primer lugar, vaya a www.canvasflip.com/visual-inspector para descargar la extensión de Chrome. Una vez instalado, se le pedirá que se registre para obtener una cuenta (gratis, pero las actualizaciones están disponibles desde $ 5 por usuario al mes). Estas en marcha y funcionando!
Inspector visual de la extensión de ChromeEl inspector le permite seleccionar cualquier elemento en la página y examinar sus propiedades. Esto es lo que muestra el inspector cuando seleccionamos el logotipo en la página de inicio de Tuts +, por ejemplo:
Podemos ver el marcado utilizado y las distintas clases asignadas al elemento. También podemos ver rellenos, bordes y otros estilos aplicados. Podemos ver la fuente de la imagen en este caso, y al desplazarnos hacia abajo podemos ver mucho más además.
En esta etapa podemos exportar cualquier activo que podamos ver. Los archivos de imagen, aunque no están en formato SVG, están disponibles para ser capturados. Incluso el texto y otros estilos se pueden exportar a JPG o PNG y llevarlos a la aplicación de diseño de su elección, lo que es realmente útil.
Mover el mouse alrededor del navegador y hacer clic en varios elementos revelará las medidas y la alineación, especificadas e implícitas, lo que le ayudará a tener una idea sólida de dónde está todo en relación con todo lo demás, y lo ayudará a lograr la perfección de píxeles..
Al igual que con muchas otras herramientas de inspección para el navegador, puede modificar las propiedades y estilos de cualquier elemento que desee. Sin embargo, con Visual Inspector, como puede inspeccionar, todos los estilos son modificables con herramientas visuales (controles deslizantes, selectores de color, etc.).
Una vez cambiado, puedes golpear el Salida CSS Botón para revelar los nuevos estilos que has creado..
Alternativamente, puedes golpear Sincronizar cambios sobre el Información y sus ediciones se guardarán en su cuenta. Esto le permite volver a ver esos cambios en el futuro, algo que los inspectores ordinarios de los navegadores no permiten de forma predeterminada.
Visual Inspector es una gran herramienta para aquellos que disfrutan refinado en el navegador Examine lo que ya existe, realice los cambios que desee, luego exporte esos cambios o guárdelos para más adelante. Y si actualiza, también puede colaborar con los miembros del equipo. Ve y échale un vistazo y dinos qué opinas en los comentarios.!
Accentsconagua