Specctr – Plugin para cotas e informações detalhadas no projeto para Adobe Illustrator

Já imaginou criar legendas detalhadas em seus projetos do illustrator com apenas dois cliques e exibir o espaçamento entre objetos, tamanhos e até mesmo as informações de cor de preenchimento do objeto?

Specctr é um plugin para os aplicativos da Adobe. (Atualmente, as versões estão disponíveis para o Fireworks, Illustrator e Photoshop). Ele permite que você especifique informações de formas (espaçamento, largura e altura, cores, fontes, etc) e funções (hover estates, transições, fluxos de usuários, etc.) Ele gera automaticamente uma especificação e cria um modelo para o projeto, o que economiza tempo.

Specctr logotipo

Veja um exemplo deste fantástico plugin em ação:

O plugin Specctr para Adobe Illustrator tem duas versões, Lite e Pro . A versão Lite é gratuita, mas tem algumas limitações. A versão Pro é mais poderosa, é paga e tem um recurso para “Expandir Prancheta”, e você pode mudar o tipo de letra em que a especificação é exibida. Também tem outras configurações avançadas que podem ser configurados na guia Spec Options” no painel, incluindo opções para as cores dos três tipos de especificações, o modo de cores (RGB, CMYK, HSL, HSB), etc

Visão geral do Specctr Para Illustrator

Adobe Illustrator é o aplicativo favorito de muitos designers devido à sua flexibilidade e versatilidade. Se você usa o Illustrator para projetos web, impressão, logotipos ou design de embalagens, o plugin Specctr pode ser muito útil, e neste artigo vamos mostrar como. O plugin inclui:

  • Largura e altura de elementos;
  • Especificações de texto (tipo de letra, tamanho de fonte, cor de fonte).

A largura e a altura de elementos, bem como a especificação de tipos de texto são os recursos mais comuns para o fluxo de trabalho de um designer, e isto está incluído na versão gratuita. Apenas estas duas características já devem te pupar muito tempo. Mas há outras opções como “Expand Canvas” e a opção para mudar a fonte de um determinado tipo de especificação.

Requisitos e Instalação

O plugin pode ser baixado gratuitamente. Para usar o Specctr no Illustrator, você vai precisar de:

  • Um Mac ou computador com Windows;
  • Uma cópia do Adobe Illustrator CS5, CS5.1, CS6 ou CC (versão Creative Cloud).

O processo de instalação é bastante simples :

  1. Baixe o instalador Specctr.
  2. Dê um duplo clique no arquivo baixado ZXP. O Adobe Extension Manager será aberto. Clique em “Install“.
  3. Reinicie Illustrator.
  4. No Illustrator, acesse o menu Window> Extensions> Specctr (Janela > Extensões > Specctr)  para abrir o painel do plugin.

Se você estiver usando o Windows Vista pode ser necessário iniciar o Adobe Extension Manager como administrador, ou então a extensão poderá não conseguir ser instalada (esta é uma limitação conhecida do Adobe Extension Manager).

Aprenda a usar – Guia rápido

Depois de instalar o Specctr, você pode especificar um documento em algumas etapas fáceis:

  1. Ajuste as configurações na guia “Spec Options“.
  2. Selecione as opções que deseja exibir.
  3. Abra espaço para suas especificações (opcional).
  4. Execute!

O processo de trabalho com Specctr Lite e Pro é bastante semelhante. A única diferença é em termos de funcionalidade (Lite tem menos recursos).

1. Ajuste as configurações na guia “Spec Options

Primeiro, é uma boa idéia para personalizar a forma como as especificações vai olhar.Você pode fazer isso na guia “Opções Spec” no painel de Specctr. Lá, você pode fazer o seguinte:

  • Controlar a forma como as suas especificações ficaram ajustando fonte, cor, tamanho e peso da linha.
  • Defina o modo de cor em que você deseja para Spec: : RGB (RGB e HEX estão disponíveis), CMYK , HSL ou HSB
  • Atribuir cores diferentes com base no tipo de especificação: tipo de objeto, a forma do objeto, espaçamento e dimensões.

2. Selecione as opções que deseja exibir

Na guia “Select Details“, você pode definir (usando caixas simples), que propriedades dos objetos o plugin deve exibir.

Por exemplo (como mencionado anteriormente), para objetos de forma, as seguintes propriedades (ou especificações) podem ser geradas pelo plugin: Cor de preenchimento, estilo, cor do contorno, tamanho do contorno e opacidade. E para objetos de texto, as seguintes propriedades podem ser gerados: Família de fonte, tamanho de fonte, cor de fonte, estilo da fonte, alinhamento de texto, altura da linha, espaçamento entre letras, opacidade.

3. Abra espaço para as especificações

Opcionalmente, você pode expandir o tamanho da prancheta (ou tela) para abrir mais espaço para as especificações geradas. Use o campo numérico ao lado do botão “Expand” para aumentar o tamanho (em pixels).

4. Execute

Basta selecionar qualquer objeto(s) na prancheta, e então usar um dos botões de especificação: “Shape/Text,” “Width & Height” ou “Spacing.”  (“Forma/texto”, “largura e altura” ou “Espaçamento”) e as especificações serão geradas automaticamente para os elementos selecionados na prancheta.

Você pode selecionar dois objetos (mantendo pressionada a tecla Shift) para criar a especificação do espaço entre eles. Se apenas um objeto estiver selecionado e você pressionar o botão de espaçamento, então a distância do objeto para as bordas da tela de pintura será exibida.

Outros recursos

Para a máxima economia de tempo, você pode criar especificação de vários objetos de texto e forma com um clique. Basta selecionar vários (ou todos) os objetos e pressionar o botão desejado.

Para melhor legibilidade , o final de linha em das especificações mudam, dependendo do que você está especificando um ponto cheio de texto, um círculo descrito para a forma, e os suportes para a distância.

Finais de linha ajustar automaticamente com base em forma de texto e distância.

Suas especificações são automaticamente organizados e agrupados em camadas de modo que você pode rapidamente mudar a sua visibilidade ou excluí-las.

Especificações organizados em camadas.

Se muitos objetos estão próximos uns dos outros, então há chance de que as especificações se sobreponham. Para corrigir esse problema, basta mover e posicionar as especificações para fora. O braço que a conecta ao seu objeto permanecerá sempre ligado ao objeto, não importa para onde você a mova na prancheta.

Note que se você atualizar um objeto depois que criar sua especificação, ela não vai atualizar automaticamente, você deve criar a especificação novamente. Você não precisa apagar o antigo porque ele irá atualizar com as novas propriedades e permanecer em sua posição atual.

Um aviso sobre unidades

O plugin Specctr usará unidades com base na distância e com base nas configurações do usuário no Illustrator (Edit> Preferences> Units / Editar> Preferências> Unidades) . No caso de documentos para web, ele sempre usará pixels.

De diálogo "Preferências" do Illustrator: Unidades.

Diferentes Cenários de Especificação

Web design

Há muias razões para usar o Illustrator para Web design. Ele é rápido, confiável, reutilizável e especialmente útil para designers que criam tanto wireframes e artes finais.

O plugins foi criado com o Web designer em mente por causa da infinidade de telas de fluxos que têm de ser criadas e especificadas. Embora a especificação geralmente seja um processo que só as grandes equipes de projeto fazem, o plugin é muito útil em pequenas equipes. Com a tecnologia avançada e a nossa capacidade de criar gráficos mais complexos, transições e animações em crescimento, há uma demanda crescente para os designers criar especificações de seu trabalho. Interações, projeto ágil e estados devem tornar-se mais claros com algumas notas e anotações anexadas.

Aqui segue um exemplo de um projeto Web de uma página feita em Illustrator e especificado usando o plugin Specctr. A primeira imagem mostra a versão de tela cheia e a segunda mostra a versão de tela do celular.

Exemplo de um projeto do Web site spec'ed com Specctr

projeto ágil spec'd exemplo.

No Illustrator, você pode usar várias telas de pintura para criar variantes da mesma página Web para diferentes tipos de tela, por exemplo, desktop, tablet, celular, etc.

Certifique-se de configurar o documento corretamente para trabalhos de web design. Criar documentos com a opção “Alinhar novos objetos à grade de pixels” ativada; sempre usar tamanhos de pixel inteiros para todos os objetos, e selecionar o modo de cor RGB.

Configurações da Web

Imprimir Especificações e rótulos

Peças impressas originais (corte, dobras especiais, etc) exigem instruções detalhadas. Aqui está um exemplo de uma pasta personalizada que foi especificada usando o Specctr para Illustrator.

Embalagem exemplo especificação

Configurar o documento corretamente para o projeto de impressão é importante, também. Aqui estão as configurações que podem ser utilizadas.

As configurações de impressão

Manual de identidade visual

A marca é a cara pública da empresa. Ela transmite o humor e o tom da empresa e abrange todos os detalhes de sua comunicação com o público. Um manual de  marca é um passo vital para um projeto de branding porque estabelece as regras e ensina os colaboradores como usar a nova linguagem visual; uma campanha de rebranding só é bem sucedida se for utilizada de forma consistente e ampla.

Um manual de marca geralmente inclui o logotipo, fontes, cores, texturas e padrões, estilos fotográficos e de imagem, linguagem e tom. As orientações podem ficar bastante detalhadas e longas.

Aqui está um exemplo de um manual de marca breve e que usou o Specctr para os pequenos detalhes:

Diretrizes da marca

Abaixo você pode conhecer alguns manuais de identidade visual para se inspirar e conhecer novas técnicas.

Para saber mais recomendo o artigo Como construir um manual de marca (identidade visual)?.

Conclusão

Ser um designer bem-sucedido exige não só criatividade e habilidades em design, mas também acompanhamento para ver um projeto ganhar vida, sair do jeito como você imaginava. Um designer pode criar um site bem elaborado ou um logotipo bonito ou um produto elegantemente embalado, mas as chances são de que só isso não o tragam à vida.

Comunicar e explicar seu projeto tanto verbalmente quanto visualmente é um requisito para resultados precisos e bem-sucedidos. Isto é especialmente verdadeiro para grandes equipes espalhadas pelo mundo. Espero que o plug-in Specctr para Illustrator ajude você com esta importante tarefa.

Planos para o futuro

Veja o que a equipe Specctr está panejando para as próximas atualizações:

  • Exportar CSS (os objetos que você especificou serão aqueles que são adicionados à sua exportação CSS);
  • Relativo (ou seja, com base em porcentagem) espaçamento, para ajudá-lo com tarefas de design responsivo;
  • Mais opções para iOS e Android nas especificações de projeto.

Fonte: Smashing Magazine

Você pode ajudar a equipe de desenvolvimento do plugin com sugestões para as próximas atualizações. Quais recursos você gostaria de ver adicionados na próxima versão do Specctr?

Comente e compartilhe conosco o que achou desta fantástica ferramenta.

Compartilhe este artigo:

Este post tem um comentário

  1. Realmente uma boa ferramenta, a versão free é bastante limitada, a ordem natural é que se pague pra ter esse plugin, não é muito caro e vale a pena!

Deixe uma resposta

Mais artigos pra você ler:
10 dicas para criar ícones impressionantes

10 dicas para criar ícones impressionantes

Hoje, vou falar um pouco sobre o design de ícones a partir de uma perspectiva mais geral. Vou compartilhar com vocês…
Criatividade – Como pensar fora da caixa?

Criatividade – Como pensar fora da caixa?

A criatividade com certeza é a matéria prima de todo bom projeto de design, é ela que estamos buscando constantemente…
Novidades para 2019 do Clube do Design

Novidades para 2019 do Clube do Design

O Clube do Design trás novidades que reforçam o nosso interesse em te ajudar a descobrir a sua profissão criativa.…
Como calcular tamanho de impressão, resolução de imagem e resolução de saída

Como calcular tamanho de impressão, resolução de imagem e resolução de saída

Quantos pixels deve ter uma imagem que vai ser impressa com 10cm a 300dpi de resolução? Tenho uma imagem de…
Fechar Menu