Quem conhece o desenvolvimento de sites sabe que geralmente não se começa com a estrutura HTML. Em vez disso, pega-se um programa gráfico e cria-se o layout da página lá. (Quem trabalha em uma agência recebe o layout do designer gráfico ou do cliente). Depois, a tarefa é construir a página a partir desse layout. É exatamente sobre isso que vamos falar agora.
No contexto de reconstruir layouts, os termos desmembramento e corte de imagens serão constantemente mencionados. Na verdade, isso significa simplesmente pegar o modelo ou design, cortá-lo em seu programa gráfico e depois recompor novamente usando HTML.
O programa gráfico certo
Bem, cada um tem suas preferências em relação ao software que prefere usar. Isso também se aplica aos programas gráficos. No contexto do web design profissional, a situação é um pouco diferente. Quase exclusivamente é utilizado o Photoshop. Na verdade, a maioria dos projetos de design são entregues como arquivo PSD. E esse formato PSD não é possível de ser aberto ou editado em todos os programas.
Se você não tem o Photoshop, não está completamente perdido. Uma possível alternativa é o GIMP. Vocês podem baixar gratuitamente o programa do site http://www.gimp.org/. Vou mostrar a vocês os passos básicos para criar um layout usando o GIMP. Isso funcionará de maneira semelhante no Photoshop também.
Criando seu próprio layout
Primeiramente, você precisa pensar nos aspectos básicos do design:
• Quão largura o layout deve ter?
• Quantas colunas deve conter?
Em seguida, crie a área de trabalho em Arquivo>Novo e defina as dimensões. Embora o layout que estou criando seja "tela cheia", o conteúdo real terá apenas uma largura de 1000 pixels. Defino a altura do layout como 887 pixels. (A altura da página será definida posteriormente com base no conteúdo).
Clique em OK para confirmar as informações. Assim, a área de trabalho está pronta e pode ser preenchida com conteúdo. (Para facilitar, estou trabalhando no esboço com um fundo cinza. Na página da web, isso não será visível).
Um elemento muito comum que deve estar presente na página é o logo, que geralmente é um gráfico. Para inseri-lo no layout, vá em Arquivo>Abrir e selecione seu logo, que deve estar em um dos formatos PNG, GIF ou JPEG. Confirme a seleção com Abrir. Pressione Ctrl+C para copiar o logo para a área de transferência. Em seguida, vá para o design da web e pressione Ctrl+V. O logo inserido ainda não estará na posição desejada. Mas com a ferramenta Mover, é possível movê-lo facilmente para a posição correta.
Se a imagem não pode ser movida, primeiro você deve ativar a camada. As configurações correspondentes podem ser encontradas em Janela>Painéis>Camadas.
Para uma melhor divisão, é recomendável exibir as réguas. Para isso, clique com o botão do mouse na régua e arraste para a posição desejada com o botão do mouse pressionado.
Vocês podem desenhar quantas réguas quiserem, onde poderão alinhar os elementos do site.
Agora crie outra camada. Essa camada deve conter o menu superior.
Como nome, poderiam usar Menu Superior. Crie a camada com OK. Selecione a Régua de Seleção e desenhe a área onde a navegação será inserida.
No exemplo atual, estou considerando que o fundo do menu superior terá um degradê. Para isso, clico em Gradiente: Preencher seleção com gradiente.
O degradê deve ser do cinza para o preto. As cores correspondentes podem ser ajustadas nos campos de cor. Defino o tipo de gradiente como do superior para o inferior, ele vai do primeiro plano para o fundo. Mantenham pressionado a tecla Ctr e arrastem uma linha de cima para baixo na área selecionada. Uma vez que o botão do mouse esquerdo é solto, a área terá o gradiente desejado.
Basicamente, agora vocês têm duas opções:
• Deixar a área de navegação como está.
• Inserir os itens de menu para poder ver com mais precisão quais fontes estão sendo usadas no esboço.
Qual dessas duas variantes escolher, fica inteiramente a seu critério. No entanto, se você planeja apresentar o layout para seus clientes, eu recomendaria incluir os itens de menu. Na prática, muitos clientes têm dificuldade em visualizar aqui.
Primeiro, escolha uma fonte. No GIMP, vocês podem encontrar as configurações correspondentes em Janela>Painéis>Fontes.
Ao longo desta série, já falamos sobre o problema das fontes em relação ao CSS e HTML. Como web designer, teoricamente, vocês podem especificar qualquer fonte. No entanto, vocês não sabem se ela está realmente presente nos computadores dos visitantes do site e, portanto, pode ser exibida. Portanto, os resultados - especialmente se vocês usarem fontes muito exóticas - são difíceis de controlar. Voltarei a este aspecto ao longo desta série, quando falarmos sobre as fontes do site de exemplo. Para o layout atual, escolho as seguintes configurações:
• Verdana em negrito
• 20 pixels
• Cor da fonte branca
Agora você pode inserir os itens de menu desta maneira. A melhor maneira é copiar o nível em que o primeiro item de menu está contido e colá-lo como um novo nível. Você pode então ajustar o texto do nível. Crie assim o menu superior.
O menu superior deve receber um efeito de hover. Quando você passa o cursor do mouse sobre os itens de menu individuais, a cor de fundo muda. Este aspecto também deve ser visualizado no projeto. Para isso, defina a cor de hover desejada e copie um dos níveis de menu existentes. Atribua essa cor a esse nível. No exemplo atual, estou assumindo um degradê de azul. Em seguida, insira o texto do item do menu. Então você já terá uma ideia de como o menu final será.
