Preparar uma ilustração para a Web
16 de junho de 2008 por chriscoyier ° 3 Comentários
A ilustração é uma tendência adorável em web design. Enquadra-se o meio bem. Grandes ilustradores que, muitas vezes não pensam em termos de web quando fazem as suas ilustrações. Dê uma olhada neste muito bom céu / colina ilustração cityscape eu achei no Shutterstock:
Eu acho que esta ilustração faria uma excelente base para um projeto web, mas claramente não está preparada para uma tarefa tão out-of-the-box. Vamos fazer alguma manipulação e prepará-lo na web.
Obtê-lo em Photoshop
É fantástico que a ilustração é vetor. Isso significa que nós podemos fazer isso de qualquer tamanho que precisamos, sem qualquer perda de qualidade. Nosso objetivo será fazer com que esta cena se sentar no centro da parte superior do navegador, então vamos colocá-lo em Photoshop no máximo com a área de conteúdo principal do nosso site. Diga, 960px. Faça um novo documento Photoshop 960px de largura e mais alto do que ele precisa ser para se adequar.
Abra sua ilustração no Adobe Illustrator e Selecionar tudo. Copie e cole em seu documento do Photoshop. Certifique-se de colá-lo como um objeto inteligente. Isso vai deixá-lo manter sua natureza vetorial, permitindo que você é chique sem perder a qualidade. Pode vir como muito pequena. Não se preocupe lá, só escalá-lo para caber em seu documento 960px de largura.
Estendendo as bordas
Ambientes de largura janelas do navegador não são fixos, como documentos do Photoshop são. Precisamos preparar a nossa ilustração para uma boa aparência quando a janela do navegador é mais amplo do que o nosso 960px base. Vamos em frente e aumentar a largura da lona do nosso documento de 1280px para que possamos ter algum espaço para trabalhar.
Nosso objetivo aqui é ter a vantagem de este fim ilustração em algo que vai ser horizontalmente repetível. A pessoa cortando-se este documento vai precisar de algo assim para fazer este trabalho de design para a web. Em última análise, essa fatia será o pano de fundo para o elemento <body> da página, com a nossa ilustração principal sentado em cima.
Vou dar uma pequena lasca da borda direita da ilustração e "float"-lo para seu próprio layer novo (Command-J).
Agora podemos Free Transform esta nova fatia pequena (Command-T) e expandi-lo horizontalmente fora 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 muito muito abrupta, com o morro, mato e estrada a ser cortada de repente.
O disfarce da Transição
Ao invés de fazer nada muito extravagante e tentar mesclar essas duas camadas juntos, vamos obscurecer essa transição dura, colocando um objeto em primeiro plano diretamente por cima. Esta ilustração pode fazer com um pouco de profundidade extra de qualquer maneira.
Esta caixa de correio do vetor vai fazer muito bem.
Excluir tudo, exceto a caixa de correio própria e colá-lo na 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 área de conteúdo principal
Nossa ilustração vai fazer para um cabeçalho bonito e de fundo, mas pelo conteúdo real do site, vamos precisar de algum tipo de bloco grande de branco. Deixa cair um retângulo branco arredondado em cima com um pouco de sombra para a desactivar.
Preenchimento do fundo
Com a aresta horizontal agora bem obscurecido, podemos preencher a cor sobre o resto da parte inferior da mockup site. Amostra de uma cor (com a ferramenta Conta-gotas) do pixel inferior maneira mais da ilustração e, em seguida, encher o nosso mais inferior camada vazia com esta nova cor.
Esta área de conteúdo principal agora vai ser uma brisa para qualquer web designer decente para fatiar.
Toques Finais
Jogue uma mensagem pouco agradável de boas-vindas para o céu e nós temos uma maquete web olhando agradável ilustrado. Porque nós, pensativo cuidado, tanto de expansão horizontal e capacidade de expansão vertical, esta ilustração é agora perfeito para a conversão em marcação web real.
Fique ligado em CSS-Tricks onde será converter isso em uma página real nas próximas semanas.
Por que usar o Photoshop para essa tarefa em tudo?
Por que não usar photoshop? Photoshop é uma boa ferramenta para imagens para web, não por vetores, como esta imagem, mas uma boa idéia para layouts (tutorial).
Obrigado pela dica! Photoshop é mágico!