Projetando um site pode ser muito divertido , mas desafiador . Talvez a parte mais difícil do projeto é decidir como dispor cada segmento do site. Enquanto isso pode ser feito em muitos editores web , que muitas vezes não são as melhores ferramentas nesta fase inicial do projeto . Adobe Photoshop fornece uma maneira mais fácil e mais eficiente para criar layouts web, pois permite que você visualize o layout sem lidar com o código HTML. Este tutorial vai ensinar você a criar um layout web no Photoshop CS3 , outras versões do Photoshop deve ser semelhante . Coisas que você precisa
Adobe Photoshop
Show Mais instruções
1
Abra um novo documento. Se você estiver usando o Adobe CS3 ou superior, Adobe disponibilizou uma predefinição para páginas da web que é de 640 x 480 pixels. Na caixa de diálogo "New" , selecione "Web" no menu drop -down "Preset" . Se você não tem uma predefinição web ou o seu layout web é um tamanho diferente , digite o tamanho da sua página web em a "largura " e "altura " caixas .
2
Encha o fundo com a cor de fundo. Selecione a ferramenta " Paint Bucket ". Dê um duplo clique sobre o " Foreground Color " para abrir o "Color Picker ". Selecione a opção " Somente Cores da Web " . Em seguida, escolha a sua camada de fundo . Selecione "OK".
3
Coloque o banner. Crie uma nova camada . Selecione " Arquivo> Inserir ... " Navegue até a imagem do banner e clique em " OK". Coloque seu banner se o desejar. Se você não tem um banner de imagem , você pode criar um lugar para o seu banner , como mostrado na próxima etapa .
4
Adicione os restantes segmentos do layout web. Crie uma nova camada para cada parte da página web. Selecione uma ferramenta de forma a partir do menu ferramentas. Selecione uma cor de fundo para o segmento. Desenhe o layout do restante para seu site.
5
Slice o layout web para prepará-lo para a web. Selecione a ferramenta " Slice" . Desenhe uma caixa em torno de cada segmento.
6
Salve para web. Selecione "Arquivo > Salvar para Web ". Pressione "Control A" para selecionar todas as fatias . Em seguida, pressione " Salvar". Selecione "HTML e Imagem " no menu drop- down " Format" . Certifique-se de que " todas as fatias " é selecionado e salvar o layout de sua pasta site. O layout web está pronto para adicionar conteúdo em um programa de edição de web , como o Dreamweaver .
