Construindo um layout do site é uma tarefa desafiadora que leva designers gráficos anos para dominar . Para ambos os experientes e inexperientes , o Photoshop da Adobe fornece uma série de ferramentas que ajudam no processo de criação de um layout do site. Antes de começar, você deve ter uma boa idéia de como você quer seu Web site para olhar. Esboçar algumas amostras de papel antes de começar , para que você já tem um ponto de partida sólido. Começando com um logotipo já projetado também irá acelerar a sua criação layout. Instruções
1

Crie um novo arquivo no Photoshop , clicando no menu "Arquivo" e escolha " Novo". O tamanho da sua imagem irá determinar o tamanho final de seu site, para escolher uma largura que é apropriado para a maioria das telas. A largura de 750 pixels irá garantir que seu site pode ser visualizado por qualquer pessoa usando uma resolução de tela igual ou superior a 800 por 600 . Insira um valor para a altura de aproximadamente 500 pixels. Esta pode ser ajustada mais tarde . Pressione " OK".
2

Projete cabeçalho do seu site, que é a área que aparece no topo de sua página. Esta área deveria ser limitada a não mais de 200 pixels de altura . Incluir o nome do seu site e logotipo nesta área , bem como alguns gráficos ou fotografias que destacam a finalidade do seu site . Por exemplo, layout do site de uma empresa sem fins lucrativos podem incluir fotografias de indivíduos que têm ajudado .
3

Criar uma barra de navegação em seu cabeçalho que é de cerca de 50 pixels de altura. Selecione a ferramenta "Tipo de Texto" na barra de ferramentas à esquerda, e clique na imagem para digitar . Digite os nomes dos diferentes principais páginas do seu site (como " Home", "About Us ", " Contato", " produtos ", etc.)
4

Faça uma caixa sob o seu barra de navegação para representar a área que o texto em seu site irá. Você pode deixar esta área em branco para agora, mas você precisa ter a área reservada para que você não adicionar projetos a ele. A área pode ser tão grande como o seu cabeçalho e barra de navegação, ou ser mais estreita para acomodar barras laterais à esquerda, direita ou ambos.
5 Projeto barras laterais

se você deixou espaço para eles . Estas barras laterais começará em seu cabeçalho e vai cair todo o comprimento da página até o rodapé. Sua barra lateral pode incluir gráficos ou fotografias , ou pode ser uma outra área para o texto. Se você está reservando para as áreas de texto, você pode deixá-los em branco. Caso contrário, começar a projetar os gráficos que aparecem em suas laterais .
6

Criar um rodapé na parte inferior da imagem. O rodapé deve ser tão grande como o cabeçalho, mas pode ser tão alto ou baixo como você deseja. Você não precisa se ​​preocupar em deixar um espaço adequado entre o cabeçalho e rodapé para o texto como seu projeto irá crescer e encolher para acomodar mais ou menos texto automaticamente. Incluir informações sobre direitos autorais em seu rodapé , bem como todos os avisos legais que você deseja adicionar .
7

Continuar a trabalhar em todos os aspectos do layout do site até que esteja satisfeito com a sua aparência . Salve o arquivo , clicando no menu "Arquivo" e escolha " Salvar". Salve a imagem no formato Adobe Photoshop (*. Psd ) para que você possa mais tarde voltar a ele e fazer edições adicionais , sem qualquer perda de qualidade.
8

Selecione a ferramenta " Slice" a partir da barra de ferramentas no à esquerda , e as seleções de arrasto em torno das várias áreas de sua imagem. Se você estiver usando apenas um cabeçalho, área de texto e rodapé, fazer três seleções em torno dessas três áreas. Se você incluiu barras laterais , criar fatias adicionais em torno dessas áreas. Arrastar uma caixa de seleção ao redor de uma área com a ferramenta fatia selecionada é tudo o que é necessário para criar uma fatia.
9

Clique em " Arquivo" e escolha "Salvar para Web ". Photoshop irá solicitar nomes de arquivos para cada uma das fatias que você criou , e irá gerar uma imagem separada para cada uma das fatias. As fatias podem, então, ser reconectado para o seu layout do site usando um programa de design do site como o FrontPage ou Dreamweaver, ou à mão usando o código HTML.