7 extensões obrigatórias do Chrome para designers da Web

7 extensões obrigatórias do Chrome para designers da Web

Como um web designer, qual é o software que você absolutamente deve ter no seu computador? As chances são de que seja o Photoshop e o Illustrator. E embora esses sejam os elementos essenciais de seu fluxo de trabalho de design, existem ferramentas menores que você provavelmente não sabe que precisa.





A melhor coisa é que você nem precisa baixá-los --- basta instalar essas extensões do Chrome e pronto. Desde a identificação de fontes nas páginas até a medição de distâncias entre os elementos da web, essas extensões de web design do Chrome tornarão sua vida mais fácil.





1. Dropbox para Gmail

O Dropbox começou como um serviço de hospedagem de arquivos, mas logo descobriu que seu principal público-alvo são designers, que usam o serviço para compartilhar seu trabalho com colegas. Como os arquivos de design geralmente são muito grandes para anexos de e-mail, é mais fácil enviar um link do Dropbox para o arquivo.





O Dropbox para Gmail torna o processo ainda mais conveniente. Quando você cria um link para seu arquivo usando um botão Dropbox na parte inferior da janela do novo e-mail, o destinatário obtém uma prévia do que você está enviando. Links para arquivos de imagem farão o upload das imagens direto para o e-mail e links para outros tipos de arquivos irão gerar uma visualização útil.

Instalar: Dropbox para Gmail



2. FontFace Ninja

Com milhares de fontes disponíveis, suas possibilidades tipográficas são infinitas. Especialmente se você puder identificar uma bela fonte que está vendo em algum lugar e pegá-la emprestada para seu próprio projeto.

FontFace Ninja é uma extensão do Chrome que ajuda você a fazer exatamente isso. Muito parecido com o ferramentas que encontram fontes de imagens ajuda a identificar as fontes que você vê online. A única diferença é que o FontFace Ninja lê as fontes codificadas no CSS da página, como a fonte dos títulos e o corpo do texto.





Quando você inicia o FontFace Ninja, ele mostra as informações sobre a fonte para a qual você o direciona --- e não apenas a fonte, mas também o peso, tamanho, altura, largura e cor. Para marcar essa fonte, você precisará de uma conta no serviço da irmã, FontFace Dojo .

Instalar: FontFace Ninja





3. Conta-gotas ColorPick

Não importa o quão bom olho para as cores você tenha, é difícil recriar uma determinada tonalidade que você viu online, a menos que você conheça seus valores RGB ou HTML. Felizmente, você não precisa adivinhar se possui o conta-gotas ColorPick.

Gostar os melhores aplicativos de seleção de cores para Mac , O conta-gotas ColorPick mostrará os valores de qualquer cor para a qual você apontar. A diferença é que ele está sempre lá no seu navegador e você não precisa fazer upload de nada --- basta clicar no ícone e mover o alvo para o local certo.

A extensão lê cores de textos, imagens e praticamente qualquer coisa que você possa ver em uma página da web (até mesmo os anúncios). Depois de capturar uma cor, ele mostra os valores HTML, RGB e HSL dessa cor.

Instalar: Conta-gotas ColorPick

4. Dimensões

Esta extensão de código aberto é um achado para web designers, especialmente se você faz apresentações únicas para pequenas empresas. Quando um cliente lhe entrega um site sem nenhum arquivo ou documentação anterior e lhe pede para projetar 'uma página como esta, mas com texto e imagens diferentes', descobrir o layout é uma dor de cabeça.

como transferir programas de uma unidade para outra

Dimensões permite medir facilmente a altura e a largura de qualquer elemento da página, bem como as margens entre eles. Isso torna mais fácil recriar as páginas existentes e verificar novamente seus próprios designs depois de entrarem em produção.

Instalar: Dimensões

5. Inspetor Visual

Visual Inspector é uma ferramenta poderosa de feedback e colaboração para equipes de design, combinando os recursos das três extensões anteriores e adicionando ainda mais.

No Inspecionar guia, você pode escolher qualquer elemento na página para obter informações completas sobre ele, desde as dimensões até o nome do arquivo. o Cores e Tipografia as subguias permitem que você veja a paleta de cores e todas as fontes de relance, enquanto Ativos reúne todas as imagens da página em um só lugar.

o Colaborar A guia é onde você pode dar feedback e discutir com sua equipe, e é fácil deixar um comentário clicando em qualquer elemento da página.

como saber se alguém me bloqueou no snapchat

Como a maioria das ferramentas avançadas, o Visual Inspector vem com um preço: você precisará pagar a partir de US $ 9 / usuário / mês para adicionar comentários e sincronizar alterações. No entanto, seus recursos básicos, como a inspeção de cores, fontes e imagens, são de uso gratuito.

Instalar: Inspetor Visual

6. Fácil captura de tela

Uma extensão de captura de tela pode parecer redundante, já que fazer uma captura de tela no Mac é muito fácil, e capturando sua tela no Windows é um pouco mais incômodo. Mas o Easy Screen Capture tem alguns pontos de venda.

Mais importante ainda, ele permite que você capture toda a página da web, não apenas a área que você vê na tela. Isso não tem preço quando você precisa relatar vários problemas em uma página longa e, para capturá-los todos, seriam necessárias três a quatro capturas de tela.

Outro truque interessante é poder copiar a captura de tela para a área de transferência e colá-la em um bate-papo ou e-mail, em vez de acumular arquivos de imagem inúteis em seu computador.

Instalar: Captura de tela fácil

7. Icy 2

Finalmente, há uma tarefa crucial com a qual você precisa lidar todas as manhãs: sacudir o resto do sono e entrar no ritmo. O Muzli 2 da InVision servirá como seu jornal matinal com artigos selecionados sobre arte, design, UX e tecnologia.

Muzli substitui sua guia padrão do Chrome e permite que você personalize o que você vê lá. Dependendo dos seus interesses, a Muzli escolherá feeds para você, com sites que vão desde Dribble e Behance a 99designs e Creative Bloq. Muita inspiração para percorrer enquanto você toma seu primeiro café!

Se você acha que uma guia inteira do navegador repleta de conteúdo de design é muito intensa, o Muzli também tem uma versão Lite. Ele não substituirá sua guia padrão e você poderá acessar o feed sempre que desejar, apenas clicando no ícone da extensão.

Instalar: Icy 2

Obtenha extensões do Chrome para todas as suas tarefas de design

As extensões do Chrome nesta lista não são páreo para o seu software de design, mas cobrem todas as pequenas coisas que vêm com ser um designer --- seja intel tipografia ou colaboração com seus colegas.

Quando você percebe que a Chrome Web Store está repleta de ferramentas, pode ser difícil parar de adicionar novas. Então aprenda como gerenciar suas extensões do Chrome antes que fiquem fora de controle.

Compartilhado Compartilhado Tweet O email Vale a pena atualizar para o Windows 11?

O Windows foi redesenhado. Mas isso é suficiente para convencê-lo a mudar do Windows 10 para o Windows 11?

Leia a seguir
Tópicos relacionados
  • Internet
  • Criativo
  • Google Chrome
  • Designer de Web
  • Extensões de navegador
Sobre o autor Alice Kotlyarenko(28 artigos publicados)

Alice é uma escritora de tecnologia com uma queda pela tecnologia da Apple. Ela tem escrito sobre o Mac e o iPhone há algum tempo e está fascinada com as maneiras como a tecnologia reformula a criatividade, a cultura e as viagens.

Mais de Alice Kotlyarenko

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever