Regla para Medir Píxeles en Pantalla

Hoy te muestro una herramienta muy útil que utilizo bastante en mí día a día. Sobre todo cuando estoy en la fase inicial de diseño de una web. Se trata de una regla para medir pixeles en pantalla.

Seguramente te hayas encontrado en la situación de tener que crear una imagen con un tamaño determinado como por ejemplo una cabecera para facebook o un banner, o un slide, etc… y no sabías las medidas exactas.

Entonces lo que hacías era buscar información en nuestro amigo Google o simplemente ibas probando tamaños hasta que uno te encajaba como tú querías.

Pues bien, desde hoy eso se va a acabar gracias a la herramienta para medir pixeles en pantalla.

Se trata de una sencilla extensión que puedes instalar gratis en tu navegador preferido:

Instalar Regla para medir pixeles en Firefox
Instalar Regla para medir pixeles en Chrome

Una vez instalada, esta extensión se queda anclada en la barra de tu navegador para que la utilices siempre que quieras. Simplemente tienes que activarla para usarla y desactivarla cuando hayas acabado.

Cómo Medir Píxeles en Pantalla

Como bien sabrás, las imágenes en web no se miden en centímetros ni milímetros sino en píxeles.

Pues bien, esta extensión es una regla para medir pixeles que te indicará el número exacto de pixeles que tiene la zona que selecciones. Te indicará tanto el alto como el ancho.

Veamos un ejemplo: si quiero medir el slide que tiene mi web ahora mismo. Selecciono haciendo clic sobre el icono (regla) y realizo la medición tal y como muestra la imagen.

medir pixeles en pantalla

¿Qué hacemos con esas medidas en píxeles?

Una vez hayamos medido el espacio que queramos, y hayamos copiado el ancho y el alto, vamos a nuestro programa editor de imágenes. Yo en mi caso utilizo Phothoshop.

Abro un nuevo documento y le inserto las medidas. En el caso del ejemplo: 960px ancho y 300px alto. Le asigno una resolución de 72 ppp (Píxeles por pulgada) que es la resolución para las imágenes en web.

Guardar Medidas en Phothoshop
¡Ricemos el rizo! Si además esa medidas que hemos definido, sabemos de antemano que las vamos a emplear mucho, las podemos guardar haciendo clic en “Guardar Ajuste Prestablecido” y seguidamente asignarle un nombre.

medir pixeles en pantalla

Así cada vez que necesitemos un nuevo documento con esas medidas, simplemente tendremos que abrir el desplegable y seleccionar la medida predefinida que habíamos guardado. ¿Mola verdad?

Espero que te haya resultado de utilidad esta herramienta para medir pixeles en pantalla. Ahora te animo a que lo pruebes tú. La mejor forma de aprender es practicar.

Si tienes cualquier duda no tienes más que preguntarme en comentarios o a través del formulario de contacto. También te agradeceré que me ayudas a compartir este contenido a través de los icono sociales, gracias 😀

Un saludo y ¡hasta la próxima entrada!

Opt In Image
¡DESCARGA GRATIS EL PLANNING!
+ LISTADO CON 42 TIPOGRAFÍAS SINGULARES
+ CURSO: APRENDE A DISEÑAR COMO MR. WONDERFUL

ESCRIBE TU EMAIL Y DESCARGA LOS CONTENIDOS

Podrás darte de baja cuando quieras. 100% libre de spam. Dudas en: info@jorgecobos.com

0 Comentarios

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*