Evidentemente, Adobe Illustrator muitas vezes não é certamente a primeira opção que vem à mente quando se trata de web design. Fireworks e Photoshop são muito utilizados com mais freqüência, e há algumas boas razões para isso. Ainda assim, apesar de Illustrator tem sido tradicionalmente usada para ilustrações e logotipos de desenho, você pode usá-lo para layouts de design e interfaces de usuário, também.
Na verdade, na minha opinião, você pode utilizar o Illustrator para resolver algumas tarefas regulares de design melhor e mais facilmente do que você faria com outras ferramentas. Com as técnicas e dicas que eu gostaria de apresentar neste artigo, tenho certeza que você será capaz de construir sites modulares, flexíveis em menos tempo e com menos trabalho.

Você também irá poupar tempo com duas funções úteis que são únicas no Illustrator:
Como criar componentes reutilizáveis?
Aqui estão as vantagens da preparação do wireframe no Illustrator:
Por exemplo, use um estilo de parágrafo para todo o corpo de texto em seu site que você deseja estilo. Então, quando você faz uma modificação (por exemplo, alterar a fonte de Arial para Verdana), o corpo do texto em cada página de seu projeto irá ajustar imediatamente.
Além de estilos de parágrafo, você pode usar a ferramenta Conta-gotas para aplicar rapidamente estilos de texto para vários pedaços de texto:
Eu sinto que a natureza bitmap do aplicativo não é otimizado para a realização de processos básicos de design web. Por exemplo, suponha que eu quero para arredondar uma forma. Eu precisaria siga estes passos: selecionar a área, use o "Round a seleção função", inverta a seleção e depois cortar a área selecionada para que a área preservada aparecerá arredondado.
Com Illustrator, eu apenas aplicar um efeito arredondado a minha selecção. Além disso, eu posso salvar este estilo gráfico e aplicá-la a outros elementos. Desta forma Illustrator ajuda você a responder rapidamente às necessidades do seu cliente.
Durante minha carreira, eu projetei até 30 telas de todos dentro do arquivo do Illustrator mesmo mantendo o tamanho com menos de 5 MB (excluindo imagens bitmap). Porque Illustrator não é tão exigente em sua CPU e exige menos memória, você pode manter várias aplicações abertas ao mesmo tempo, sem abrandar o seu computador. Você também não precisa mais poderosa máquina (e, portanto, mais caro) para criar, ajustar e exportar seus projetos.
Illustrator previews todos os seus símbolos no painel Símbolos, e você pode criar como muitos painéis que você precisar. Você pode organizar o seu trabalho através da criação de painéis específicos para cada tipo de elemento GUI comum: setas, ícones, botões, etc Desta forma, basta navegar através de seus símbolos, selecione o que deseja, e jogá-lo no projeto em sua prancheta.
Meu humilde conselho para ajudar a organizar o seu trabalho é também usar painéis diferentes para cada grupo de elementos da interface gráfica. Ao longo dos anos, descobri que é melhor ter um painel de setas, uma para ícones e um dos elementos básicos da GUI (botões, elementos de formulários, etc.) Você pode ver um exemplo de uma biblioteca de componentes GUI baixando meu quadro de desenho livre GUI .
Para criar o seu painel de símbolos próprios, em primeiro lugar, adicionar uma forma de vetor para o painel de símbolo por deixá-la cair dentro. Em seguida, salvar esse símbolo biblioteca como um arquivo AI, selecione "Salvar biblioteca de símbolos" nas opções do painel Símbolo:
Você pode adicionar painéis Symbol como muitos a prancheta como você quer, vá em Window → Bibliotecas símbolos.
Todas as configurações do filtro estão localizados no painel Aparência e você pode salvar cada combinação de efeitos como um estilo gráfico, tornando-o fácil de reutilizar ou modificar seus projetos. Lembre-se, com o Illustrator você tem o poder do design modular: quando você atualizar um estilo gráfico, todas as ocorrências do elemento usando esse estilo é atualizado também.
Outro recurso poderoso do Illustrator é o número infinito de linhas que podem ser colocados em torno de elementos do vetor eo número ilimitado de fundo preenche que pode ser adicionado a qualquer objeto. Experiência com estes, e você pode criar alguns estilos complexos em camadas.
Aqui estão três principais métodos de texturização no Illustrator:
Atualmente, o Illustrator ainda carece de algumas opções de gradiente dithering (encontrado em outras aplicações tais como fogos de artifício), que às vezes pode levar ao "efeito banda." Uma solução eficaz é a de adicionar alguma textura e / ou ruído de seus gradientes, como explicado no seção anterior.
Observe que o Fireworks oferece mais tipo de gradientes. Todas as versões (incluindo CS3, CS4, CS5) têm Linear, Retângulo, Radial, Cone, Contour, Elipse, Bares, ondulações e os tipos de gradiente mais alguns. O Fireworks tem muito mais tipos de gradientes, e esses gradientes também são "viver editável" na tela, assim como na última versão do Illustrator.
O recurso de dimensionamento de 9 fatias, não é novidade para a linha de produtos Adobe. Ele apareceu pela primeira vez em Adobe Fireworks CS3 (é aplicado a símbolos apenas em versão CS3). No Fireworks CS4, o recurso tornou-se um novo "9-slice Scaling" de ferramentas, e agora ele pode ser usado em qualquer objeto na tela. Photoshop não tem essa opção em tudo.
Se você precisa de imagens que são transparentes, use o "Lugar de imagem" a função de inserir a imagem e, em seguida, link para o arquivo de origem (arquivo Local →). Como um bônus, cada vez que você atualizar o arquivo original em outro programa de edição de imagem, a imagem no Illustrator vai refletir essas alterações. Isto irá aumentar a sua eficiência e poupar a dor de cabeça de ter que re-importação de imagens.
Você também pode usar uma máscara de corte com gradientes de opacidade desaparecendo, embora Photoshop pode vencer em um presente para facilidade de uso. Você pode aprender todas essas técnicas com este tutorial útil por Vectortuts .
Além do mais, não importa o quão complexa é a tipografia e texto em seus projetos se tornam, eles vão sempre ser editado no Illustrator. Um aspecto a ter em mente, porém, é que este método pode ser do processador e deve ser reservada para os títulos e os elementos importantes.
Como criar uma grade no Illustrator?
Você também pode definir algumas preferências, tais como folhas de estilo de texto, tamanho padrão prancheta (950 pixels), estilos gráficos e símbolos para otimizar seu ambiente de Illustrator para Web design.
Outras ferramentas úteis no Illustrator CS5 são "Alinhar à grade Pixel" e "Pixel Preview" (Ver → Pixel Preview), que ajuda a evitar o efeito embaçado.
Existem duas opções para alinhar à grade de pixels (somente no Illustrator CS5):
Duas últimas dicas:
Então, por que não posso usá-lo? Bem, eu tentei fogos de artifício cada vez que uma nova versão for lançada. Eu ainda prefiro o Illustrator, e aqui estão algumas razões:
Depois de mais de 10 anos de trabalho como web designer, eu não estou mais interessado em produzir o extravagante design. A experiência ensinou-me a concentrar-se em produtividade e flexibilidade. Trabalhe mais rápido, e entregar o trabalho no tempo: que é a minha prioridade. E Illustrator é uma opção sólida para isso. A próxima geração de fogos de artifício pode acabar sendo mais próximo do que eu estou procurando em um conjunto de Web design. Até então, eu estou furando com Illustrator.
Na verdade, na minha opinião, você pode utilizar o Illustrator para resolver algumas tarefas regulares de design melhor e mais facilmente do que você faria com outras ferramentas. Com as técnicas e dicas que eu gostaria de apresentar neste artigo, tenho certeza que você será capaz de construir sites modulares, flexíveis em menos tempo e com menos trabalho.
Razões para usar o Illustrator Para Web Design
Design mais rápido
Ao contrário do paradigma camadas no Photoshop (ou seja, primeiro selecione a camada, e depois trabalhar sobre ele), Illustrator emprega uma "prancheta" paradigma: cada objeto pode ser selecionado diretamente na tela. Com apenas um clique, você pode manipular qualquer objeto na prancheta (redimensionando, movendo, redimensionamento, etc) e torná-lo pixel-preciso com o painel Transform (disponível somente no Illustrator CS5). É mais intuitivo e exige menos cliques do mouse, tornando seu trabalho mais fluido.Você também irá poupar tempo com duas funções úteis que são únicas no Illustrator:
- Criar projetos Web modulares com o painel de símbolos e
- Rapidamente formatar o texto com os painéis de estilo de parágrafo e de texto.

Pense Modular
Usando o painel de símbolos, você pode criar componentes reutilizáveis que você vai economizar tempo quando atualizando os projetos ou começar do zero. Esta técnica é especialmente útil para elementos recorrentes, tais como botões, barras de navegação, elementos de paginação, rodapés, etcComo criar componentes reutilizáveis?
- Criar um componente principal (um botão, barra de navegação, etc), e salvá-lo como um 'símbolo' no painel Símbolos.
- Arraste o componente recém-criado a partir do painel Símbolos e soltá-lo em seu projeto.
- Agora, quando você modifica o botão mestre na biblioteca de símbolos, cada ocorrência ligada do símbolo será atualizado também.

Ferramenta rápida para criar Wireframes
Illustrator é útil para wireframe, permitindo-lhe mostrar rapidamente o layout básico e navegação aos clientes. Eu costumo começar pelo desenho de um mock-up em preto e branco, usando caixas de linhas simples, e tipografia. Depois apresentei o wireframe para o cliente para aprovação, eu criar um design mais sofisticado, com cores e efeitos com base no wireframe (vamos cobrir essa parte em detalhes mais adiante no artigo).Aqui estão as vantagens da preparação do wireframe no Illustrator:
- Illustrator é rápido para desenhar wireframes devido à sua natureza vetorial. Você pode criar caixas, linhas e texto com rapidez e facilidade.
- Você pode usar bibliotecas de elementos commons, como botões e ícones, e soltá-los facilmente no wireframe.
- Uma vez que o wireframe básico foi aprovado, você vai economizar tempo criando o projeto final, porque o layout eo conteúdo já estão no local. Às vezes, ficando o projeto final é tão fácil quanto a formatação de texto com folhas de estilo e aplicar alguns estilos gráficos.

Formatar Texto forma rápida e fácil
Se você usar CSS ou InDesign, então você já vai estar familiarizado com "caráter" e "N" estilos e como são poderosos para rapidamente modificar e controlar o layout de texto. Você pode fazer o mesmo com o Illustrator. A coisa boa é que as ações do Illustrator uma série de funcionalidades do InDesign tipográfico avançado.Por exemplo, use um estilo de parágrafo para todo o corpo de texto em seu site que você deseja estilo. Então, quando você faz uma modificação (por exemplo, alterar a fonte de Arial para Verdana), o corpo do texto em cada página de seu projeto irá ajustar imediatamente.
Além de estilos de parágrafo, você pode usar a ferramenta Conta-gotas para aplicar rapidamente estilos de texto para vários pedaços de texto:
- Selecione o texto cujo estilo você deseja replicar e
- Clique no texto que você deseja, estilo e ... Voila! O estilo é instantaneamente aplicada.

Torne-se um Designer Agile
Ser capaz de mudar rapidamente seu layout sem muito esforço é a chave para a concepção de profissão em rápida evolução de hoje. Depois de anos usando o Photoshop da Adobe para Web design, comecei a sentir como um "alfaiate pixel", usando tesouras cegas e giz.Eu sinto que a natureza bitmap do aplicativo não é otimizado para a realização de processos básicos de design web. Por exemplo, suponha que eu quero para arredondar uma forma. Eu precisaria siga estes passos: selecionar a área, use o "Round a seleção função", inverta a seleção e depois cortar a área selecionada para que a área preservada aparecerá arredondado.
Com Illustrator, eu apenas aplicar um efeito arredondado a minha selecção. Além disso, eu posso salvar este estilo gráfico e aplicá-la a outros elementos. Desta forma Illustrator ajuda você a responder rapidamente às necessidades do seu cliente.

Concentre-se em projeto simples, limpo
Illustrator oferece opções gráficas mais simples que o Photoshop, que podem ajudar você a se concentrar nos princípios de design de som e parar de perder tempo com efeitos desnecessários e filtros. Photoshop continua a ser indiscutivelmente a melhor opção se você quiser interfaces complexas com um monte de efeitos gráficos, tais como fundos de textura e efeitos de iluminação complexos. Mas se seus projetos são simples e limpo, então estou confiante de que você iria completar seu trabalho mais rápido e mais eficiente com o Illustrator. E se você realmente precisa de gráficos complexos e texturizado, você pode fazer isso com o Illustrator também, mas isso leva algum know-how. Mais tarde, vamos discutir como melhorar seus projetos, evitando o demasiado limpo "vector" olha, como visto nos botões abaixo texturizadas.
O trabalho mais leve e rápido
As imagens vetoriais são menores do que as imagens rasterizadas. Assim, o Illustrator vai ajudar você a criar projetos que são mais leves e menos CPU do que aqueles feitos com Photoshop. Isso permite que você agrupar um monte de telas de interface para o arquivo do Illustrator mesmo, evitando o inconveniente de ter que abrir vários arquivos ao projetar.Durante minha carreira, eu projetei até 30 telas de todos dentro do arquivo do Illustrator mesmo mantendo o tamanho com menos de 5 MB (excluindo imagens bitmap). Porque Illustrator não é tão exigente em sua CPU e exige menos memória, você pode manter várias aplicações abertas ao mesmo tempo, sem abrandar o seu computador. Você também não precisa mais poderosa máquina (e, portanto, mais caro) para criar, ajustar e exportar seus projetos.
Como criar projetos modulares
Para tornar a discussão mais interessante em termos de como exatamente se pode usar o Illustrator para tarefas de design regulares, vamos olhar para a técnica Illustrator final para Web designers: criar um projeto modular com símbolos vetoriais.Economize Tempo Com as Bibliotecas de Símbolos
A biblioteca de Símbolos permite que você reutilize e modificar elementos em um site inteiro. Não só poupar tempo, mas ajuda a construir uma biblioteca de itens que podem ser usados repetidamente.Illustrator previews todos os seus símbolos no painel Símbolos, e você pode criar como muitos painéis que você precisar. Você pode organizar o seu trabalho através da criação de painéis específicos para cada tipo de elemento GUI comum: setas, ícones, botões, etc Desta forma, basta navegar através de seus símbolos, selecione o que deseja, e jogá-lo no projeto em sua prancheta.

Mantenha o seu design consistente
Componentes Símbolo ajudá-lo a manter a aparência de um projeto em todo o site inteiro. Pelo projeto componente centralizador com símbolos mestre, você é capaz de exibir todos os seus elementos de uma só vez e certifique-se que o estilo que você está trabalhando no sentido é consistente. Não haverá mais você precisa verificar cada tela para ver se você se esqueceu de atualizar um elemento.
Criar uma biblioteca de componentes para projetos futuros
Como os componentes residem no painel Símbolos, eles estão separados desde o layout do projeto. Continuamente adicionando componentes à sua biblioteca, você vai criar uma coleção de itens que podem ser reutilizados ou alterações em outros projetos. O aumento da eficiência torna-se rapidamente exponencial. Este é o primeiro passo para a construção de sua estrutura própria interface.Meu humilde conselho para ajudar a organizar o seu trabalho é também usar painéis diferentes para cada grupo de elementos da interface gráfica. Ao longo dos anos, descobri que é melhor ter um painel de setas, uma para ícones e um dos elementos básicos da GUI (botões, elementos de formulários, etc.) Você pode ver um exemplo de uma biblioteca de componentes GUI baixando meu quadro de desenho livre GUI .
Para criar o seu painel de símbolos próprios, em primeiro lugar, adicionar uma forma de vetor para o painel de símbolo por deixá-la cair dentro. Em seguida, salvar esse símbolo biblioteca como um arquivo AI, selecione "Salvar biblioteca de símbolos" nas opções do painel Símbolo:

Você pode adicionar painéis Symbol como muitos a prancheta como você quer, vá em Window → Bibliotecas símbolos.

Limitações do Projeto Modular com o Photoshop
Photoshop tem a opção de "formas costumes", que são semelhantes aos "Símbolos" no Illustrator, mas tem três grandes limitações:- Você não pode definir um tamanho exato para os elementos que você criar. Vamos dizer que você desenhar uma área de uma forma personalizada, sem saber o tamanho exato que você deseja. Não há campo editável que permite ajustar as dimensões para o tamanho exato que você necessita.
- Você não pode alterar as dimensões da "forma personalizada", uma vez que ele foi criado. Isto torna a sua inflexível projetos e mão de obra intensiva. Estas formas personalizadas comportar mais como uma escova de vetor de componentes reutilizáveis para Web design.
- Não há um painel específico para gerir as suas formas personalizadas. Adicionando uma forma personalizada para o repositório requer muitos cliques a cada momento: clique no ícone de forma personalizada, ative o painel drop-down para ver as formas aduaneiros, clique para selecionar a forma. Então, finalmente, clique no layout e definir o tamanho da forma, arrastando-o para as dimensões desejadas. Isso é um processo tedioso. Painéis definíveis Illustrator símbolos é muito mais fácil de usar e é a principal razão pela qual eu, sinceramente, Illustrator é a ferramenta de Web design superior.
Criar projetos profissionais
Você pode criar interfaces sofisticadas profissionais, com o Illustrator. Olhe para os botões abaixo. Repare que eles têm uma aparência texturizada e vários efeitos visuais (sombra projetada, brilho interno, etc). Com um pouco de prática e um bom olho, você pode conseguir os mesmos desenhos gráficos que você faria com Photoshop. A clara vantagem, no entanto, é que esses elementos serão completamente editável, redimensionável e reutilizáveis.Adicionar Efeitos Visuais
Embora tenha menos built-in filtros de efeitos gráficos do que o Photoshop, Illustrator inclui os mais úteis: gota-sombra, texturas, ruídos, cantos arredondados, e brilho interior e exterior. Ao focar sua criatividade em menos efeitos, você vai trabalhar de forma mais eficiente e gastar menos tempo brincando com os efeitos.Todas as configurações do filtro estão localizados no painel Aparência e você pode salvar cada combinação de efeitos como um estilo gráfico, tornando-o fácil de reutilizar ou modificar seus projetos. Lembre-se, com o Illustrator você tem o poder do design modular: quando você atualizar um estilo gráfico, todas as ocorrências do elemento usando esse estilo é atualizado também.
Outro recurso poderoso do Illustrator é o número infinito de linhas que podem ser colocados em torno de elementos do vetor eo número ilimitado de fundo preenche que pode ser adicionado a qualquer objeto. Experiência com estes, e você pode criar alguns estilos complexos em camadas.

Texturize seu projeto
Geralmente é melhor para evitar a estéril "vector" olhar em seus projetos, adicionando um pouco de textura para os elementos no layout.Aqui estão três principais métodos de texturização no Illustrator:
- Use bitmaps sem costura e repetitivo. Para fundos de grande porte, importar uma textura selecionando Arquivo → Place, e, em seguida, adicioná-lo como uma amostra no painel Swatch. Depois, você pode usá-lo para preencher toda a forma.
- Utilize os filtros Estilizar (Efeitos → Estilizar) para adicionar um pouco de barulho ou de textura para um fundo.
- Use as amostras de textura incluídos no Illustrator, e colocá-los em cima de um preenchimento de fundo. Alterar o preenchimento de textura para um modo de opacidade como Multiply e ajuste a opacidade para algo entre 15 e 20% para dar-lhe um efeito sutil fundido.


Criar Gradientes Perfeitos
A última versão do Illustrator (CS5) é embalado com alguns gradientes sofisticados, incluindo configurações de opacidade para cada ponto de cor e gradientes elípticos. Você pode clicar diretamente em um objeto para personalizar o gradiente de preenchimento com diferentes preferências: ângulo, localização, controles deslizantes de cores, ponto focal, origem, etc O processo é muito eficiente e é um pouco superior à do Photoshop, em que o fluxo de trabalho é dificultada por uma janela intermediária gradiente edição.Atualmente, o Illustrator ainda carece de algumas opções de gradiente dithering (encontrado em outras aplicações tais como fogos de artifício), que às vezes pode levar ao "efeito banda." Uma solução eficaz é a de adicionar alguma textura e / ou ruído de seus gradientes, como explicado no seção anterior.
Observe que o Fireworks oferece mais tipo de gradientes. Todas as versões (incluindo CS3, CS4, CS5) têm Linear, Retângulo, Radial, Cone, Contour, Elipse, Bares, ondulações e os tipos de gradiente mais alguns. O Fireworks tem muito mais tipos de gradientes, e esses gradientes também são "viver editável" na tela, assim como na última versão do Illustrator.

Efeitos de arredondamento
Adicionando cantos arredondados para qualquer formato, incluindo tipografia, é muito simples no Illustrator. Basta clicar em qualquer objeto na prancheta para selecioná-lo. Em seguida, escolha Efeito → Stylize → Cantos arredondados no menu principal, e definir o raio da curva. Depois, você pode modificar o raio usando o painel Aparência. Photoshop, por outro lado, permite-lhe adicionar apenas os cantos arredondados para rectângulos, e uma vez que o raio é definido, ele não pode ser alterado.
Redimensionamento Inteligente com "9 fatias" Ferramentas Escala
Com Illustrator CS5, você pode redimensionar um objeto sem distorcê-la. Está definir algumas zonas para estender e algumas zonas para preservar (cantos arredondados, por exemplo). Salvar este objeto como um símbolo, e agora você tem um componente GUI reutilizável.O recurso de dimensionamento de 9 fatias, não é novidade para a linha de produtos Adobe. Ele apareceu pela primeira vez em Adobe Fireworks CS3 (é aplicado a símbolos apenas em versão CS3). No Fireworks CS4, o recurso tornou-se um novo "9-slice Scaling" de ferramentas, e agora ele pode ser usado em qualquer objeto na tela. Photoshop não tem essa opção em tudo.

Opções avançadas para Texto
No Illustrator, você pode quebrar o texto em torno de imagens - o texto automaticamente se ajustar às mudanças no tamanho da imagem - e definir margens de fora, assim como você faria em força total texto layout de programas como o InDesign e QuarkXPress.
Inserindo imagens bitmap
Usando fotos em seu layout, como fotos de produtos, ilustrações ou obras de arte, é tão fácil quanto arrastar e soltar os arquivos de imagem para a tela. Isso funciona com PNG, GIF e JPG. Você também pode colar diretamente da área de transferência.Se você precisa de imagens que são transparentes, use o "Lugar de imagem" a função de inserir a imagem e, em seguida, link para o arquivo de origem (arquivo Local →). Como um bônus, cada vez que você atualizar o arquivo original em outro programa de edição de imagem, a imagem no Illustrator vai refletir essas alterações. Isto irá aumentar a sua eficiência e poupar a dor de cabeça de ter que re-importação de imagens.
Você também pode usar uma máscara de corte com gradientes de opacidade desaparecendo, embora Photoshop pode vencer em um presente para facilidade de uso. Você pode aprender todas essas técnicas com este tutorial útil por Vectortuts .

Gradientes de Tipografia e Curso
Você pode usar gradientes em texto editável e golpes de todos os elementos. Você pode querer verificar este tutorial para esses cursos gradientes para saber mais sobre ele. Com um pouco de prática, você vai dominar esta técnica e ser capaz de combinar texturas e efeitos.Além do mais, não importa o quão complexa é a tipografia e texto em seus projetos se tornam, eles vão sempre ser editado no Illustrator. Um aspecto a ter em mente, porém, é que este método pode ser do processador e deve ser reservada para os títulos e os elementos importantes.

Criação de uma grade no Illustrator
Na minha opinião, é sempre uma boa idéia para começar o seu projeto através da concepção da rede e definir as configurações de design fundamentais em primeiro lugar. Isto vai poupar tempo e depois ajudá-lo a criar um projeto estruturado e consistente.Como criar uma grade no Illustrator?
- Criar uma prancheta que seja 950 ou 960 pixels de largura. Estes são os tamanhos de grade comum que eu uso para construir sites que se encaixam os displays 1024-pixels de largura. Nota: a área prancheta é usado para a distribuição do conteúdo. Sinta-se livre para criar fundos maiores, se necessário.
- Definir a grade com base no seu tamanho prancheta. Por exemplo, com uma prancheta 950 pixels, você terá 19 blocos de 50 pixels cada. Cada um destes blocos pode ser ainda mais sub-dividida em blocos de 5, resultando em blocos que são 10 × 10 pixels de tamanho. Ou você pode usar o padrão de fato 960 Grid System . Escolha o tamanho da grade que você está mais confortável ou familiar.
- No menu principal, selecione View → Snap to Grid. Isto faz com que o acto de grade como um íman, forçando cada elemento para bloquear precisamente a uma das linhas de grade.
- No menu principal, selecione Unidades → Preferências, e definir as unidades de "pixels" eo incremento de teclado para 0,5 pixels (sim, 0.5 pixels, esse é um ponta-pixel preciso - por favor leia os detalhes abaixo).

Ajuste Illustrator para caber suas necessidades
Desde que você está usando o Illustrator para Web design, alguns ajustes são necessários para manter seus projetos otimizados para o seu trabalho. Você pode alterar a configuração padrão de fonte Myriad para a fonte usada em seu projeto atual. Aprenda como fazê-lo com este tutorial completo sobre como alterar as configurações de fonte padrão no Illustrator .Você também pode definir algumas preferências, tais como folhas de estilo de texto, tamanho padrão prancheta (950 pixels), estilos gráficos e símbolos para otimizar seu ambiente de Illustrator para Web design.

Não Start From Scratch: Personalize seus modelos
Você não tem que refazer esse processo toda vez que você iniciar um novo design. Ao criar e re-utilizar modelos que você pode aumentar sua eficiência, sem muito esforço. Você pode criar seu próprio modelo em Arquivo → Salvar como Modelo. Configurá-lo com uma largura de 950 pixels prancheta padrão, as configurações de rede, as preferências personalizadas e seus símbolos favoritos e estilos gráficos.Criar um Web Design Pixel Precise-
Um dos meus irrita com versões anteriores do Illustrator era a "borrada efeito" presente em alguns cursos de linha ou textos, bem como a ausência de pixel-precisas ferramentas. Você pode evitar esses problemas com algumas das novas ferramentas introduzidas no Illustrator CS5.Inspetor de propriedades
Use o "Inspetor de propriedades" para verificar rapidamente e editar a posição exata ea dimensão dos objetos até ao pixel. Isso ajudará você a reduzir o tempo que você gasta elementos de posicionamento. Além disso, ao dar valores precisos para as dimensões em pixels, você evita o efeito embaçado porque os cursos serão alinhados à grade de pixels.Outras ferramentas úteis no Illustrator CS5 são "Alinhar à grade Pixel" e "Pixel Preview" (Ver → Pixel Preview), que ajuda a evitar o efeito embaçado.
Existem duas opções para alinhar à grade de pixels (somente no Illustrator CS5):
- Quando você cria um novo documento, marque a opção "Alinhar ao Pixel Grid" opção na parte inferior da janela.
- No painel Transform, consulte "Alinhar à grade de pixels" na parte inferior do painel.

Outlines limpas
O artigo Truque Illustrator: Como evitar Fontes Pixel desfocadas & Shapes mostra como eliminar o efeito borrado para contornos. Eu sugiro que você leia com atenção, mas para aqueles que querem ir direto ao assunto, aqui está um rápido resumo:- Use o esboço e opção padrão Dentro acidente vascular cerebral, em vez do curso Center.
- Posicionar elementos com valores inteiros, e dar-lhes dimensões inteiras. Evitar fracções (2, em vez de 1,9, por exemplo).
- Mover linhas e derrames em 0,5 pixel incrementos quando estão desfocadas.

Duas últimas dicas:
- Para linhas rapidamente de posição, definir um incremento de teclado 0,5-pixel em Preferências (Preferences → Geral). Desta forma, quando as linhas são borradas, você pode simplesmente usar as setas do teclado para movê-los de 0,5 pixel incrementos até que o borrão desaparece.
- Se você já tentou de tudo eo elemento ainda é embaçado, use um tamanho de 0,999-pixel para o acidente vascular cerebral (cortesia corte de Benjamin McDonnell).
Por que não Fireworks?
Fireworks é suposto ser aplicativo dedicado a Adobe CS suíte para Web design. Ele oferece algumas funções poderosas: biblioteca Symbols, páginas do painel (eu adoraria ter isso no Illustrator), pixel precisa de renderização, edição de vetor e bitmap, gradiente de dithering, etc Todas as ferramentas que qualquer Web designer gostaria em um único pacote .Então, por que não posso usá-lo? Bem, eu tentei fogos de artifício cada vez que uma nova versão for lançada. Eu ainda prefiro o Illustrator, e aqui estão algumas razões:
- Em primeiro lugar, é uma questão de gosto. Acho que os fogos de artifício não como interface fácil de usar como ilustrador. Fogos de artifício foi originalmente desenvolvido pela Macromedia (as mesmas pessoas que trouxeram o Flash para o mundo Web), e seu olhar e sentir reter algumas dessas raízes.
- Em segundo lugar, a concepção modular não está tão bem desenvolvido no Fireworks como é no Illustrator. Por exemplo, o painel de fogos de artifício das Símbolos permite que você visualize apenas um item, o que torna difícil e demorado para encontrar o símbolo que você quer e para ver alguns dos símbolos em sua biblioteca.
- No CS3 e versões anteriores, eu experimentei um monte de bugs e falhas. CS4 foi muito melhorada, mas ainda está propenso a alguns bugs. É certo que, agora, estes problemas parecem ser abordados: CS5 é uma das versões mais estáveis de fogos de artifício até à data, como Michel Bozgounov explica em " Adobe Fireworks: Valerá a pena Mudar para CS5? . "Mas se você estiver usando uma versão mais antiga, você ainda pode enfrentar alguns problemas de colisão.
- Fogos de artifício não fornece uma maneira de formatar o texto através da aplicação de estilos de parágrafos, o que é uma deficiência grave porque Web design é, em grande medida sobre tipografia.
Conclusão
A ferramenta perfeita para Web design ainda não existe. Na minha opinião, pouco tem sido feito ao longo dos últimos anos para realmente atender as necessidades dos Web designers. Ainda assim, tenho desenvolvido um bom relacionamento de trabalho com o Illustrator. Ao longo dos anos eu tinha desenvolvido alguns métodos eficazes e truques para otimizar o Illustrator para Web design. É o aplicativo que eu me encontro muitas vezes recomendando para o design modular. Eu desenvolvi o meu próprio usuário Framework Design de Interface para Illustrator, resultando em maior produtividade e consistência (por meio das bibliotecas símbolos e elementos do vetor GUI).Depois de mais de 10 anos de trabalho como web designer, eu não estou mais interessado em produzir o extravagante design. A experiência ensinou-me a concentrar-se em produtividade e flexibilidade. Trabalhe mais rápido, e entregar o trabalho no tempo: que é a minha prioridade. E Illustrator é uma opção sólida para isso. A próxima geração de fogos de artifício pode acabar sendo mais próximo do que eu estou procurando em um conjunto de Web design. Até então, eu estou furando com Illustrator.