Preparar uma ilustração para a Web
16 de junho de 2008 por chriscoyier »3 Comentários 
A ilustração é uma tendência para alugar em web design. Ele se encaixa bem no meio. Grandes ilustradores, porém, muitas vezes, não pensam em termos de web, quando eles fazem suas ilustrações. Dê uma olhada neste céu muito agradável / ilustração colina cityscape eu encontrei na Shutterstock:
Acho que esta ilustração tornaria uma grande base para um projeto web, mas claramente não está preparado para tal tarefa out-of-the-box. Permite fazer alguma manipulação e prepará-la na web.
Obtê-lo no Photoshop
É fantástico que a ilustração é vetor. Isso significa que podemos fazer qualquer tamanho que precisamos, sem qualquer perda de qualidade. Nosso objetivo será fazer com que esta cena se sentar na parte superior central do navegador, então vamos buscá-la no Photoshop, no máximo, com a área de conteúdo principal do nosso site. Digamos, 960px. Faça um novo documento do Photoshop 960px de largura e mais alta do que ele precisa ser para se ajustar.
Abra sua ilustração no Adobe Illustrator e Selecionar tudo. Copiar e colar no seu documento do Photoshop. Certifique-se de colá-lo como um Objeto Inteligente. Isso irá deixá-lo a reter é a natureza do vetor, permitindo que você é chique sem perder qualidade. Pode vir como muito pequeno. Não se preocupe, só escala-lo para caber em seu documento de 960px de largura.
Estendendo o Edges
Janelas do navegador não são fixos ambientes de largura, como documentos do Photoshop são. Precisamos preparar a nossa ilustração para uma boa aparência quando a janela do navegador é maior do que 960px nossa base. Vamos em frente e aumentar a largura da tela do nosso documento de 1280px para que tenhamos algum espaço para trabalhar.
Nosso objetivo aqui é fazer com que a borda de tal ilustração em algo que será horizontalmente repetível. A pessoa corte até este documento vai precisar de algo como este para fazer este trabalho de design para a web. Em última análise, esta fatia será o pano de fundo para o elemento <body> da página, com a nossa ilustração principal sentado em cima.
Vou levar uma pequena lasca da borda direita da ilustração e "flutuar" sobre a camada até seu próprio novo (Command-J).
Agora podemos Free Transform esta nova fatia pequena (Command-T) e expandi-lo horizontalmente, para ambos os lados do documento. Porque os gradientes foram criados agradável e vertical, esta extensão funciona muito bem fora do lado direito. O lado direito, porém, parece demasiado abrupto, com o morro, mato e estrada sendo cortada de repente.
Obscurecendo a Transição
Ao invés de fazer nada muito extravagante e tentar juntar essas duas camadas em conjunto, vamos obscuro que dura transição, colocando em primeiro plano um objeto diretamente sobre o alto. Esta ilustração poderia fazer com um pouco de profundidade extra de qualquer maneira.
Esta caixa de entrada do vetor vai fazer muito bem.
Excluir tudo, exceto o próprio caixa e colá-lo a ilustração como um Objeto Inteligente como colocamos a ilustração original. Um pouco de redimensionamento e posicionamento, e temos o elemento perfeito para obscurecer a transição em fundos.
A principal área de conteúdo
A nossa ilustração vai fazer para um cabeçalho adorável e de fundo, mas para o verdadeiro conteúdo do site, vamos precisar de algum tipo de bloco grande de branco. Deixa cair um direito retângulo branco arredondado no topo com um pouco de sombra para a desactivar.
Preenchimento do fundo
Com a borda horizontal bem agora obscurecida, podemos preencher a cor do resto do fundo da maquete site. Uma amostra de cor (com a ferramenta Conta-gotas) do fundo maneira mais pixel da ilustração e, em seguida, encher nossos bottom-camada mais vazio, com esta nova cor.
Esta área de conteúdo principal vai agora passar a ser uma brisa para qualquer web designer decente para cortar acima.
Retoques finais
Jogue uma pequena mensagem de boas vindas no céu e nós temos uma maquete nice looking web ilustrada. Porque temos pensativo cuidado, tanto de expansão horizontal e vertical de expansão, esta ilustração é agora perfeito para conversão de marcação da web real.
Fique atento a CSS-Tricks, onde será converter isso em uma página real na próximas semanas.
Por que usar Photoshop para esta tarefa em tudo?
Por que não usar o Photoshop? O Photoshop é uma boa ferramenta para imagens para web, não para vetores, como esta imagem, mas uma boa para layouts (idéia tutorial).
Obrigado pela dica! Photoshop é mágico!