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.

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 para Gmail, una extensión de Chrome para obtener una vista previa de los enlaces de Dropbox

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 con 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.

instagram viewer

Instalar en pc:Dropbox para Gmail

2. FontFace Ninja

FontFace Ninja, una extensión de Chrome que captura fuentes en una página web

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. Como el herramientas que encuentran fuentes de imágenes WhatTheFont y 4 alternativas para encontrar fuentes de imágenes¿Quieres encontrar fuentes de imágenes? Existen herramientas en línea que pueden hacerlo por usted, incluyendo WhatTheFont y varias alternativas. Lee mas 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 en pc:FontFace Ninja

3. Cuentagotas ColorPick

ColorPick Eyedropper, una extensión de Chrome para capturar colores

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.

Me gusta las mejores aplicaciones de selección de color para Mac Las 5 mejores aplicaciones de selector de color para Mac¿Necesitas encontrar el color perfecto en tu Mac? Pruebe estas aplicaciones de selección de color macOS para identificar, guardar, formatear y copiar colores fácilmente. Lee mas , 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 en pc:Cuentagotas ColorPick

4. Dimensiones

Dimensiones, una extensión de Chrome para medir objetos en una página web

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 en pc:Dimensiones

5. Inspector visual

Visual Inspector, una extensión de Chrome para inspeccionar páginas web y proporcionar comentarios

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 el Inspeccionar pestaña, puede elegir cualquier elemento de la página para obtener información completa al respecto, desde las dimensiones hasta el nombre del archivo. los Colores y Tipografía Las subpestañas le permiten ver la paleta de colores y todas las fuentes de un vistazo, mientras Bienes Reúne todas las imágenes de la página en un solo lugar.

los Colaborar la pestaña es donde puedes dar tu opinión y tener discusiones con tu 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 en pc:Inspector visual

6. Captura de pantalla fácil

Easy Screen Capture, una extensión de Chrome para tomar capturas de pantalla

Una extensión de captura de pantalla puede parecer redundante, ya que tomando una captura de pantalla en Mac Cómo tomar capturas de pantalla en Mac: consejos, herramientas y trucos para saber¿Necesitas tomar una captura de pantalla en tu Mac? Estos son los mejores accesos directos, consejos y aplicaciones para capturas de pantalla de macOS. Lee mas es una brisa, y capturando su pantalla en Windows Cómo tomar la captura de pantalla perfecta en WindowsLa 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. Lee mas 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 al 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 en pc:Captura de pantalla fácil

7. Muzli 2

Muzli 2, una extensión de Chrome para inspiración de diseño

Finalmente, hay una tarea crucial con la que debes lidiar todas las mañanas: sacudirte 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 en pc: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 todos los pequeñas cosas que conlleva ser diseñador, ya sea tipografía o colaboración con su colegas

Una vez que te das cuenta de que Chrome Web Store está repleta de herramientas, puede ser difícil dejar de agregar nuevas. Entonces aprende cómo administrar tus extensiones de Chrome Cómo administrar sus extensiones de Chrome sin ninguna molestiaAdministrar adecuadamente 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. Lee mas antes de que se salgan de control.

Alice es una escritora de tecnología con una debilidad por la tecnología de Apple. Ha estado escribiendo sobre Mac y iPhone por un tiempo, y está fascinada por las formas en que la tecnología reestructura la creatividad, la cultura y los viajes.