Como construir um modelo de página da Web a partir do zero
A ferramenta padrão em agências digitais e departamentos internos para a construção de gráficos do Web site é o Adobe Photoshop. Apesar de fogos de artifício é otimizado e propositadamente construído para produzir arquivos de origem web gráfico, ele só não pegou, provavelmente por causa do enorme esforço de re-treinamento que implicaria fazer departamentos inteiros fazer a troca. Para configurar um novo modelo de web-comp:
Lançar Photoshop.
Escolha Arquivo-Novo.
Na caixa de diálogo que aparece, digite uma dimensão tela de 1200 pixels de largura por 1.000 pixels de altura. A resolução deve ser ajustada para 72 dpi (píxeis por polegada, na verdade). O modo de cor deve ser de cor RGB. A cor de fundo pode ser branco. Clique em OK.
A partir do menu Photoshop, selecione Preferências-Geral.
À esquerda, selecione as unidades opção governantes. Em seguida, na área da janela principal, para os governantes, selecione # 147 pixels # 148- a partir do menu drop-down. Clique em OK.
Você estará usando guias. Para fazer isso, você deve primeiro ativar os governantes a partir do menu View, como mostrado no Passo 4.
Selecione Exibir-governantes a partir do menu.
Depois de ver os governantes, clique na régua do lado esquerdo e arraste uma guia vertical e soltá-lo na marca de 100 pixel.
Redefinir o marcador 0,0.
No canto muito superior esquerdo do seu documento, na intersecção das duas réguas é um pequeno quadrado com linhas pontilhadas na mesma. Clique nesse quadrado e arraste para o seu guia na marca de 100-pixel, mas tenha cuidado para permanecer no topo da página. O que você está tentando fazer é manter a 0 no topo da sua página (onde está agora), mas definir a sua marca atual guia 100-pixel a 0 em seu lugar. Se você fizer isso corretamente, você verá a atualização numeração em sua régua superior.
Defina o segundo marcador guia.
Clique na régua esquerda novamente e arrastar para fora um outro guia. Arraste este novo guia através da página e solte-o na marca de 1.000 pixel. Se você já fez Passos 1-6 corretamente, você deve ter uma margem de 100 pixels de cada lado de seus dois guias. Salve o documento.
Vire o fundo em uma camada.
No painel Camadas, você deve ter apenas uma camada chamada # 147 Background # 148- em itálico. Dê um clique duplo-lo para transformá-lo em uma camada que é capaz de transparência e ser posto em conjuntos de camadas que você vai criar. Na janela que aparece, deixar o nome como camada 0 para agora e clique em OK.
Criar quatro conjuntos de camadas.
Na parte inferior do painel Layers, você verá um ícone de pasta. Clique nele quatro vezes para criar quatro distintas conjuntos de camadas (Pastas que podem conter camadas). Eles são uma ótima maneira para ajudar a mantê-lo organizado. Aqui estão os passos:
Clique duas vezes no Grupo 1 texto do bottommost conjunto de camadas e renomeá-lo para FUNDO em todos os tampões.
Use todas as letras maiúsculas para nomes de pasta e minúsculas para nomes de camadas para ajudar a distingui-los.
Clique e arraste a camada Camada 0 para o conjunto de camada de fundo.
Clique duas vezes o texto Grupo 2 e renomeá-lo rodapé.
Renomeie os outros dois camada de conjuntos de conteúdo e navegação.
Estes conjuntos de camadas são apenas o ponto de partida, e você pode precisar de menos ou mais que você vá. Salve o modelo.
Você agora tem uma tela em branco pronto para suas inspirações criativas. Como você criar novas camadas para trabalhar em diferentes partes do seu comp, nomeá-los imediatamente e verifique se eles são arrastados para o conjunto de camadas apropriado. Só que não vai ajudá-lo a ficar mais organizada, qualquer outro designer que capta a sua amostra para fazer mudanças - bem como o desenvolvedor que tem que usá-lo para construir a versão HTML dela - vai ser melhor capaz de fazer sentido.