7 extensiones imprescindibles de Chrome para diseñadores web

• Creativo

Anuncio

Como diseñador web, ¿cuál es el software que debes tener en tu computadora? Lo más probable es que sea Photoshop e Illustrator. Y si bien esos son los elementos esenciales de su flujo de trabajo de diseño, existen herramientas más pequeñas que probablemente no sepa que necesita.

¡Desbloquee la hoja de trucos "Atajos de teclado de Google Chrome" ahora!

Esto lo suscribirá a nuestro boletín

Lo mejor es que ni siquiera tiene que descargarlos, solo instale estas extensiones de Chrome y listo. Desde la identificación de fuentes en las páginas hasta la medición de distancias entre elementos web, estas extensiones de Chrome de diseño web le facilitarán la vida.

1. Dropbox para Gmail

Dropbox comenzó como un servicio de alojamiento de archivos, pero pronto descubrió que su mayor audiencia son los diseñadores, que usan el servicio para compartir su trabajo con sus colegas. Debido a que los archivos de diseño a menudo son demasiado grandes para archivos adjuntos de correo electrónico, es más fácil enviar un enlace de Dropbox al archivo.

Dropbox para Gmail hace que el proceso sea aún más conveniente. Cuando se vincula a su archivo usando un botón de Dropbox en la parte inferior de la nueva ventana de correo electrónico, el destinatario obtiene un adelanto de lo que está enviando. Los enlaces a archivos de imágenes subirán las imágenes directamente al correo electrónico, y los enlaces a otros tipos de archivos generarán una vista previa práctica.

Instalar: Dropbox para Gmail

2. FontFace Ninja

Con miles de fuentes disponibles, sus posibilidades de tipografía son infinitas. Especialmente si puede identificar una fuente hermosa que ve en algún lugar y tomarla prestada para su propio proyecto.

FontFace Ninja es una extensión de Chrome que te ayuda a hacer exactamente eso. Al igual que las herramientas que encuentran fuentes de imágenes WhatTheFont y 4 alternativas para buscar fuentes de imágenes WhatTheFont y 4 alternativas para encontrar fuentes de imágenes ¿Desea encontrar fuentes de imágenes? Existen herramientas en línea que pueden hacerlo por usted, incluyendo WhatTheFont y varias alternativas. Leer más te ayuda a identificar las fuentes que ves en línea. La única diferencia es que FontFace Ninja lee las fuentes codificadas en el CSS de la página, como el tipo de letra de los encabezados y el texto del cuerpo.

Cuando inicie FontFace Ninja, le mostrará la información sobre la fuente a la que lo dirige, y no solo el tipo de letra, sino también el peso, el tamaño, la altura, el ancho y el color. Para marcar esa fuente, necesitará una cuenta en el servicio hermano, FontFace Dojo.

Instalar: FontFace Ninja

3. Cuentagotas ColorPick

No importa cuán bueno sea el color que tenga, es difícil recrear un tono particular que vio en línea a menos que conozca sus valores RGB o HTML. Afortunadamente, no tienes que adivinar si tienes ColorPick Eyedropper.

Al igual que las mejores aplicaciones de selección de color para Mac Las 5 mejores aplicaciones de selección de color para Mac Las 5 mejores aplicaciones de selección de color para Mac ¿Necesita encontrar el color perfecto en su Mac? Pruebe estas aplicaciones de selección de color macOS para identificar, guardar, formatear y copiar colores fácilmente. Leer más, ColorPick Eyedropper le mostrará los valores de cualquier color al que apunte. La diferencia es que siempre está ahí en su navegador y no tiene que cargar nada: simplemente haga clic en el icono y mueva el objetivo al lugar correcto.

La extensión lee los colores del texto, las imágenes y casi cualquier cosa que pueda ver en una página web (incluso los anuncios). Una vez que captura un color, le muestra los valores HTML, RGB y HSL para él.

Instalar: Cuentagotas ColorPick

4. Dimensiones

Esta extensión de código abierto es un hallazgo para diseñadores web, especialmente si realizas conciertos únicos para pequeñas empresas. Cuando un cliente le entrega un sitio web sin ningún archivo o documentación previa y le pide que diseñe "una página como esta, pero con diferentes textos e imágenes", descubrir el diseño es una molestia.

Dimensiones le permite medir fácilmente la altura y el ancho de cualquier elemento de la página, así como los márgenes entre ellos. Eso hace que sea fácil recrear páginas existentes y verificar sus propios diseños después de que entren en producción.

Instalar: Dimensiones

5. Inspector visual

Visual Inspector es una poderosa herramienta de colaboración y retroalimentación para equipos de diseño, que combina las características de las tres extensiones anteriores y agrega aún más.

En la pestaña Inspeccionar, puede elegir cualquier elemento de la página para obtener información completa al respecto, desde las dimensiones hasta el nombre del archivo. Las subfichas Colores y Tipografía le permiten ver la paleta de colores y todas las fuentes de un vistazo, mientras que Activos reúne todas las imágenes de la página en un solo lugar.

La pestaña Colaborar es donde puede dar su opinión y tener discusiones con su equipo, y es fácil dejar un comentario haciendo clic en cualquier elemento de la página.

Al igual que la mayoría de las herramientas avanzadas, Visual Inspector viene con una etiqueta de precio: deberá pagar desde $ 9 / usuario / mes para agregar comentarios y sincronizar los cambios. Sin embargo, sus características básicas, como la inspección de colores, fuentes e imágenes, son de uso gratuito.

Instalar: Inspector visual

6. Captura de pantalla fácil

Una extensión de captura de pantalla puede parecer redundante, ya que tomar una captura de pantalla en Mac Cómo tomar capturas de pantalla en Mac: consejos, herramientas y trucos para saber Cómo tomar capturas de pantalla en Mac: consejos, herramientas y trucos para saber Necesito tomar una captura de pantalla en tu mac? Estos son los mejores accesos directos, consejos y aplicaciones para capturas de pantalla de macOS. Leer más es muy fácil, y capturar su pantalla en Windows Cómo tomar la captura de pantalla perfecta en Windows Cómo tomar la captura de pantalla perfecta en Windows La mejor manera de tomar una captura de pantalla depende de la versión de Windows en la que se encuentre. Le mostramos las diferencias sutiles, brindamos consejos para la solución de problemas y revelamos los mejores métodos abreviados de teclado y herramientas. Leer más es solo un poco más de molestia. Pero Easy Screen Capture tiene bastantes puntos de venta.

Lo más importante, le permite capturar toda la página web, no solo el área que ve en su pantalla. Eso no tiene precio cuando necesita informar varios problemas en una página larga, y capturarlos a todos tomaría de tres a cuatro capturas de pantalla.

Otro buen truco es poder copiar la captura de pantalla en el portapapeles y pegarla directamente en un chat o un correo electrónico, en lugar de acumular archivos de imágenes inútiles en su computadora.

Instalar: captura de pantalla fácil

7. Muzli 2

Finalmente, hay una tarea crucial con la que tiene que lidiar todas las mañanas: sacudirse los restos del sueño y entrar en la rutina. Muzli 2 de InVision servirá como su periódico matutino con artículos seleccionados sobre arte, diseño, experiencia de usuario y tecnología.

Muzli reemplaza su pestaña predeterminada de Chrome y le permite personalizar lo que ve allí. Dependiendo de sus intereses, Muzli elegirá feeds para usted, con sitios web que van desde Dribble y Behance hasta 99designs y Creative Bloq. ¡Mucha inspiración para desplazarte mientras tomas tu primer café!

Si crees que una pestaña completa del navegador llena de contenido de diseño es demasiado intensa, Muzli también tiene una versión Lite. No anulará su pestaña predeterminada, y podrá acceder al feed cuando lo desee simplemente haciendo clic en el icono de extensión.

Instalar: Muzli 2

Obtenga extensiones de Chrome para todas sus tareas de diseño

Las extensiones de Chrome en esta lista no coinciden con su software de diseño, pero cubren todas las pequeñas cosas que conlleva ser diseñador, ya sea información de tipografía o colaboración con sus colegas.

Una vez que te das cuenta de que Chrome Web Store está repleta de herramientas, puede ser difícil dejar de agregar nuevas. Aprenda cómo administrar sus extensiones de Chrome Cómo administrar sus extensiones de Chrome sin ninguna molestia Cómo administrar sus extensiones de Chrome sin ninguna molestia La administración adecuada de las extensiones de Chrome puede hacer que su navegador sea aún más potente. Aquí hay algunos consejos y trucos esenciales que debes conocer. Lea más antes de que se salgan de control.

Explore más sobre: ​​Extensiones de navegador, Google Chrome, Diseño web.