Novidades para Web Designers no Illustrator CC
Em 6 de maio, a Adobe anunciou suas últimas atualizações em seu software criativo. Algumas dessas atualizações têm grandes implicações em como os usuários trabalham com suas ferramentas. Neste artigo, gostaria de analisar o que a Adobe mudou no Illustrator e, especificamente, como isso afeta os web designers.
É claro que existem vários recursos novos, como bibliotecas do AutoCAD, impressão branca, troca de proxy de preenchimento e traçado para texto, geração automática de canto, suporte a tags, arquivos de pacote, imagens não acopladas, local de arquivo múltiplo, ferramentas de digitação e ferramentas de transformação livre. imagens em pincéis. Se você é um viciado em Illustrator, todos esses recursos valem a pena, mas o que eu quero focar especificamente são os principais aprimoramentos que ajudarão qualquer pessoa a criar arte para entrega na tela.
Suporte HiDPI
Com o surgimento de telas de alta resolução (como o Macbook Pro com tela Retina), o Illustrator CS6 e anteriores pareciam borradas. A arte e os ícones pareciam pixelados e o texto parecia sem serrilhado. A própria natureza do Illustrator é fornecer uma arte rica e nítida, portanto, essa experiência era menos do que desejável. Felizmente, a Adobe aprimorou o Illustrator CC para aproveitar esses monitores de alta resolução. A obra de arte ficará melhor, o texto ficará nítido, os elementos da interface do usuário (ícones, cursores, etc) ficarão mais suaves. Eles também fizeram algumas melhorias no processo de renderização. Agora, ele aproveita as máquinas de vários núcleos e usa a renderização encadeada para renderizar a arte. Você deve ver algumas melhorias em tarefas como zoom, panning, copiar, arrastar e soltar, etc.
Guias de aprimoramentos
Guias são amplamente utilizados no planejamento e layout de páginas. Criar mock-ups no Illustrator usando guias permite colocar o conteúdo de maneira precisa. No Illustrator CC, há quatro aprimoramentos nos guias:
- Clicar duas vezes em uma régua cria um guia nesse local específico na régua.
- Quando você segura Shift e, em seguida, clica duas vezes em um local específico em uma régua, o guia criado no ponto se encaixa automaticamente na marca (divisão) mais próxima da régua.
- Se você ocultar guias (Ctrl / Cmd +;) e, em seguida, optar por exibi-las, as guias não serão bloqueadas automaticamente, como fizeram nas versões anteriores.
- Crie guias horizontais e verticais em uma ação. Veja como: no canto superior esquerdo da janela do Illustrator, clique na interseção das réguas e pressione Ctrl (ou Cmd em um Mac) e arraste o ponteiro do mouse para qualquer local na janela do Illustrator; o ponteiro do mouse se transforma em mira para indicar onde uma guia horizontal e vertical pode ser criada; solte o ponteiro do mouse para criar os Guias.
Melhorias na pesquisa de fontes
A típica pesquisa de digitação antecipada procura apenas a primeira palavra no nome da fonte, que geralmente não produz os melhores resultados imediatamente. Além disso, procurar e navegar por um grande número de fontes pode ser difícil. Uma nova opção de função de pesquisa “Pesquisar todo o nome da fonte” foi adicionada aos painéis de controle e de caracteres. Além disso, a integração do TypeKit para fontes de desktop foi anunciada recentemente no MAX. Isso significa que você pode projetar facilmente os mock-ups usando as mesmas fontes que você pretende usar na web.
Melhorias na pesquisa de cores
Encontrar uma determinada cor de várias cores pode ser demorado e frustrante. No Illustrator CC, foram feitas alterações para tornar a tarefa de pesquisar e encontrar uma cor muito mais fácil. A caixa de diálogo Color Picker (clique duas vezes no proxy Fill na barra de ferramentas) agora tem um widget de pesquisa na janela Color Swatches. Quando você clica em Color Swatches, uma barra de pesquisa é exibida abaixo da lista de cores predefinida. Digite o nome de uma cor ou um valor RGB (ou CMYK para impressão). Se você digitar 'azul', todas as amostras de cores com a palavra azul no nome serão exibidas. Digitar R = 77 exibirá todas as amostras de cores com cor vermelha com um valor de 77 na escala RGB. O widget de pesquisa está ativado por padrão.
A opção de pesquisa no painel Amostras foi aprimorada também. O campo não impõe um preenchimento automático. Os caracteres digitados não são mais substituídos automaticamente pela correspondência de cores mais próxima encontrada. Você pode digitar um nome de uma cor ou simplesmente digitar os valores de cor RGB (ou CMYK para impressão) para pesquisar se essa combinação de cores existe. O campo Localizar não está ativado por padrão e deve ser ativado pela primeira vez no submenu do painel.
Também é importante notar que o Kuler foi incluído no Illustrator. Portanto, se você usar esse serviço da Adobe para criar temas e grupos de cores, poderá acessar facilmente esse conteúdo diretamente dentro do Illustrator CC.
Painel de propriedades CSS
Claro, o maior recurso para a web são as melhorias feitas nos fluxos de trabalho CSS e SVG. Agora, se você for um usuário hardcore do Illustrator, talvez tenha usado algo no CS5 chamado pacote HTML5, que estava disponível no AdobeLabs. Por alguma razão, ele nunca apareceu no CS6, mas muitos desses recursos retornaram com essa atualização do CC. Esses recursos lembram o que já foi disponibilizado para o Photoshop CS6 por meio de atualizações e recursos da Creative Cloud encontrados no Fireworks CS6.
O painel de propriedades CSS mostra como você extrairá o CSS do documento do Illustrator e fornece várias maneiras de fazer isso. No entanto, o principal passo para fazer todo esse trabalho é nomear suas camadas dentro do painel de camadas. Certamente, o Illustrator pode gerar CSS sem que o objeto tenha um nome dentro do painel de camadas, mas você está se abrindo para uma maneira desorganizada e potencialmente desleixada de gerar código. É essencialmente assim que o Illustrator nomeará as regras de classe que cria para você. O CSS gerado pode ter prefixos de navegador para Webkit, Firefox, Opera e Internet Explorer. Ele pode capturar aparências suportadas por CSS, como gradientes e cantos arredondados.
Você pode controlar como o CSS é gerado acessando a caixa de diálogo Opções de exportação de CSS. Você pode acessar a caixa de diálogo clicando no botão Opções de exportação de CSS, que é o primeiro de quatro botões no canto inferior direito do painel. O painel fornece várias funções para fluxos de trabalho CSS:
- Visualizar o CSS de um objeto selecionado
- Copiar o código CSS para um objeto selecionado
- Exportar o objeto selecionado para um arquivo CSS junto com as imagens usadas no CSS
- Exportar código CSS para todos os objetos no documento para um arquivo CSS
Além disso, você pode exportar o código CSS para todos os objetos dentro do documento acessando o menu Arquivo e selecionando Exportar. Isso abrirá uma caixa de diálogo e, a partir daí, você poderá escolher CSS no menu de formatação.
Se você tiver um objeto, selecione-o e verifique se ele está identificado corretamente no painel Camadas. Com ele selecionado, você verá o CSS necessário para gerar o trabalho artístico em um navegador no painel de propriedades CSS.
Código SVG
Nas versões anteriores do Illustrator, você teria que salvar um documento como SVG. Aqui na atualização do CC você tem a capacidade de copiar algo dentro do documento, então vá para o seu editor de HTML favorito e simplesmente faça uma pasta; todo o código SVG será colocado dentro do documento. É um fluxo de trabalho surpreendentemente bom. Se isso não for suficiente para você, o método mais tradicional de salvar o documento como um SVG ainda estará disponível.
Além disso, a Adobe adicionou suporte para exportar estilos não utilizados. Ao projetar, muitas vezes você criará vários estilos gráficos ao criar obras de arte. Você não pode usar todos os estilos disponíveis. Quando você exporta arte-final no formato SVG, os estilos não utilizados não são exportados. Além disso, no código CSS exportado, estilos gráficos não têm nomes associados a eles e pode ser difícil identificar o estilo gráfico correto.
O Illustrator CC oferece dois recursos que foram adicionados para aprimorar a experiência de trabalhar com estilos no formato SVG que abordam esses problemas:
- Nome do estilo gráfico. Quando você escolhe exportar estilos gráficos, o nome de cada estilo é exportado com a definição do estilo na nomenclatura CSS.
- Exportar estilos não utilizados. Quando você exporta arte-final no formato SVG, pode optar por exportar estilos não utilizados. Isso permite que outro designer ou desenvolvedor que esteja importando os estilos use os estilos gráficos não utilizados em outras peças de arte.
Como você vai usá-lo
Isso certamente não é uma ferramenta para codificar páginas da web completas. O que eu vejo é usar o Illustrator para criar mock-ups, então codificar manualmente a estrutura em HTML e o código de layout em CSS. Quando for necessário um sombreamento, gradiente, padrão ou mesmo logotipo, usar essas novas opções de extração de CSS e SVG será muito útil e economizará muito tempo.
Se você estiver interessado em aprender mais sobre os novos recursos do Illustrator CC, visite a página do produto do Illustrator.
Você é um aficionado do Illustrator? Quais recursos do Illustrator CC você mais se empolga? Deixe-nos saber nos comentários.