Como Criar Cotas no Illustrator

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.

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:

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 :

Baixe o instalador Specctr.
Dê um duplo clique no arquivo baixado ZXP. O Adobe Extension Manager será aberto. Clique em “Install“.
Reinicie Illustrator.
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:

Ajuste as configurações na guia “Spec Options“.
Selecione as opções que deseja exibir.
Abra espaço para suas especificações (opcional).
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.

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

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.

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 pluginSpecctr. A primeira imagem mostra a versão de tela cheia e a segunda mostra a versão de tela do celular.

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.

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.

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

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 rebrandingsó é 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:

Espero que tenham gostado da dica.

Fonte: clubedodesign.com