7 extensões indispensáveis ​​do Chrome para designers da Web

Propaganda

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

O melhor é que você nem precisa baixá-las. 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 elementos da web, essas extensões do Chrome para web tornam a 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 são designers, que usam o serviço para compartilhar seu trabalho com colegas. Como os arquivos de design geralmente são grandes demais para anexos de e-mail, é mais fácil enviar um link do Dropbox para o arquivo.

O Dropbox for Gmail torna o processo ainda mais conveniente. Quando você vincula seu arquivo usando um botão do Dropbox na parte inferior da nova janela de email, o destinatário recebe uma prévia do que você está enviando. Os links para os arquivos de imagem enviarão as imagens diretamente para o e-mail, e os links para outros tipos de arquivos gerarão uma visualização útil.

Instalar:Dropbox para Gmail

2. FontFace Ninja

Com milhares de fontes disponíveis, suas possibilidades de tipografia são infinitas. Especialmente se você puder identificar uma fonte bonita que você vê em algum lugar e emprestá-la 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 WhatTheFont e 4 alternativas para encontrar fontes de imagensDeseja encontrar fontes de imagens? Existem ferramentas on-line que podem fazer isso por você, incluindo o WhatTheFont e várias alternativas. consulte Mais informação 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 o tipo de cabeçalho e o texto do corpo.

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

Instalar:FontFace Ninja

3. Conta-gotas ColorPick

Não importa a qualidade das cores, é difícil recriar um tom específico que você viu on-line, a menos que 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 Os 5 melhores aplicativos de seleção de cores para MacPrecisa encontrar a cor perfeita no seu Mac? Experimente estes aplicativos de seleção de cores do macOS para identificar, salvar, formatar e copiar cores facilmente. consulte Mais informação , O ColorPick Eyedropper mostrará os valores para qualquer cor apontada. A diferença é que ele está sempre disponível no seu navegador e você não precisa fazer o upload de nada. Basta clicar no ícone e mover o alvo para o local certo.

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

Instalar:Conta-gotas ColorPick

4. Dimensões

Esta extensão de código aberto é um achado para web designers, especialmente se você faz shows únicos para pequenas empresas. Quando um cliente entrega um site sem arquivos ou documentação anteriores e solicita que você crie "uma página como esta, mas com textos e imagens diferentes", descobrir o layout é uma dor.

As dimensões permitem medir facilmente a altura e largura de qualquer elemento da página, bem como as margens entre eles. Isso facilita a recriação de páginas existentes e a verificação dupla de seus próprios designs depois que eles entram em produção.

Instalar:Dimensões

5. Inspetor Visual

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

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

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

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

Instalar:Inspetor Visual

6. Captura de tela fácil

Uma extensão de captura de tela pode parecer redundante, pois tirando uma captura de tela no Mac Como tirar capturas de tela no Mac: dicas, ferramentas e truques para saberPrecisa tirar uma captura de tela no seu mac? Aqui estão os melhores atalhos, dicas e aplicativos para capturas de tela do macOS. consulte Mais informação é uma brisa, e capturando sua tela no Windows Como tirar a captura de tela perfeita no WindowsA melhor maneira de tirar uma captura de tela depende da versão do Windows em que você está. Mostramos as diferenças sutis, fornecemos dicas de solução de problemas e revelamos os melhores atalhos e ferramentas de teclado. consulte Mais informação é apenas um pouco mais aborrecido. Mas o Easy Screen Capture tem alguns pontos de venda.

Mais importante, ele permite capturar a página da Web inteira, não apenas a área que você vê na tela. Isso é inestimável quando você precisa relatar vários problemas em uma página longa, e capturá-los todos levaria de três a quatro capturas de tela.

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

Instalar:Captura de tela fácil

7. Muzli 2

Finalmente, há uma tarefa crucial com a qual você deve lidar todas as manhãs: sacudir os restos de 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 vê lá. Dependendo dos seus interesses, a Muzli selecionará feeds para você, com sites que variam de Dribble e Behance a 99designs e Creative Bloq. Muita inspiração para percorrer enquanto você está tomando seu primeiro café!

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

Instalar:Muzli 2

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

As extensões do Chrome nesta lista não são compatíveis com o seu software de design, mas cobrem todos os pequenas coisas que advêm de ser designer - seja tipografia intel ou colaborando com o seu colegas.

Depois que você perceber 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 Como gerenciar suas extensões do Chrome sem nenhum problemaO gerenciamento adequado de extensões do Chrome pode tornar seu navegador ainda mais poderoso. Aqui estão algumas dicas e truques essenciais que você deve conhecer. consulte Mais informação antes que saiam do controle.