Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Browser Extensions

Perfeccionando en el navegador: Obtén pixeles perfectos con Visual Inspector

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Ser “pixel perfecto” es algo que se vuelve menos importante para los diseñadores web una vez que se acepta que los sitios web se pueden ver diferente a través de distintos dispositivos y pantallas. Pero eso no significa que la atención a los detalles sea menos deseable. En este tutorial te voy a iniciar en una herramienta (extensión de Chrome) la cual te puede ayudar a lograr pixeles perfectos en tus diseños web.

Presentando Visual Inspector

Utilizando Visual Inspector

Primero que nada, ve a www.canvasflip.com/visual-inspector y descarga la extensión de Chrome. Una vez instalada se te pedirá que te registres para una cuenta (gratuita, pero hay cuentas avanzadas disponibles en $5 mensuales, por usuario) ¡Estás en marcha!

Visual Inspector Chrome extensionVisual Inspector Chrome extensionVisual Inspector Chrome extension
Extensión Visual Inspector de Chrome

El inspector te permite seleccionar cualquier elemento de la página y examinar sus propiedades. Por ejemplo aquí está lo que te muestra el inspector cuando seleccionamos el logotipo de la página de inicio de Tuts+.

VIsual Inspector logo selectVIsual Inspector logo selectVIsual Inspector logo select

Podemos ver el markup que se utiliza, y las distintas classes asignadas al elemento. También podemos ver el padding, border y otros estilos aplicados. En este caso podemos ver la fuente de la imagen, y además al desplazarnos podemos ver mucho más.

Exportar

En esta etapa podemos exportar algunos elementos que veamos. Lor archivos de imagen, aunque no en formato SVG, están disponibles para sujetar. Cada texto y otros estilos  pueden ser exportados a JPG o PNG y ser llevados a la aplicación de diseño de tu elección, lo cual es realmente útil.

Mediciones

Al mover tu mouse por el navegador y hacer clic en varios elementos te mostrará alineación y medidas, especificadas e implícitas, ayudándote a obtener una idea sólida de dónde está todo con relación a lo demás, y ayudándote a lograr pixeles perfectos.

Modificando y guardando las propiedades

Al igual que otros inspectores para el navegador, puedes alterar las propiedades y los estilos de cualquier elemento que desees. Sin embargo con Visual Inspector, mientras examinas, todos los estilos se pueden modificar con herramientas visuales (sliders, selectores de color y así).

Una vez cambiados, puedes presionar el botón CSS Output para mostrar los nuevos estilos que has creado.

Como alternativa, puedes presionar Sync Changes en la pestaña Info y tus ediciones serán guardadas en tu cuenta. Esto te permite revisar esos cambios en el futuro, algo que los inspectores de navegador ordinarios no admiten por defecto.

Conclusión

Visual Inspector es una gran herramienta para aquellos que disfrutan refinar en el navegador. Examina lo que ya existe, haz cualquier cambio que desees, luego exporta esos cambios o guárdalos para después. Y si obtienes una cuenta avanzada, también puedes colaborar con miembros del equipo. ¡Ve, revísalo y déjanos saber lo que piensas en los comentarios!

Aprende más sobre colaboración para diseñadores

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.