Criatividade Visual

Continuamos assim com a parte 2 do nosso tutorial, Criar um weblayout. Esta é a última parte do nosso tutorial, e no fim do tutorial vão poder encontrar o ficheiro .psd para fazerem download. Este layout pode ser usado por qualquer pessoa, desde que o seu fim não seja para fins comerciais. Qualquer erro que encontrem é favor avisar, e caso tenham dúvidas digam, que eu responderei o mais breve possível.

- Agora vamos escrever os diferentes menus que vão estar disponíveis (Home, sobre, galeria, etc). Para isso vamos seleccionar a ferramenta Horinzontal Type Tool (T), depois de seleccionada vamos carregar no nosso documento para ele criar uma nova layer de texto, e começamos a escrever os nossos menus.

- Num menu fica sempre bem as divisões dos menus em si…. Agora vou mostrar como criar uma simples divisão. Criam uma selecção de 1px por 20px, numa nova layer e depois preenchem essa selecção com a cor: #7ec2cc. Agora com essa layer seleccionada façam a seguinte combinação de teclas: Ctrl+J, para duplicar essa layer e com as setas do teclado movam-a para o lado direito até que esta fique ao lado da outra. Depois seleccionem a layer duplicada e façam Ctrl+Clique do rato para seleccionar a área de layer. Feito isso mudem a cor para #64b2c0.

- Aqui fica o exemplo:

- Agora repitam o mesmo processo para os outros menus e divisões.

- Hoje em dia, quase todos os sites têm notícias, como é óbvio, por isso vamos criar uma parte para as notícias. Vamos criar um novo grupo (independente), como o nome de notícias.

- Criem uma nova layer dentro do novo grupo, chamada notícias barra.

- Criem uma nova selecção com as dimensões 225px x 60px. Preencham-na de uma cor que queiram e apliquem-lhe os seguintes efeitos:

Gradiente Overlay:

Propriedades do Gradiente:

- Agora coloquem a barra no lado direito por baixo do menu. (Atenção que podem mudar a ordem das coisas, isso fica ao vosso critério e ao gosto de cada um)

- Escrevam na barra Notícias como título e podem adicionar mais algo caso queiram.

- Vamos agora criar o sitio onde vão aparecer os títulos das últimas notícias. Para isso criem uma nova layer com o nome de fundo notícias. Criem uma nova selecção com o tamanho de 225px x 240px e preencham-no de branco.

- Feito isso, vamos fazer a divisão das notícias. Criem uma layer com o nome de divisão, depois criem uma nova selecção com as dimensões de 225px x 1px. Preencham-na com a cor que quiserem, eu no meu caso usei a cor #e4ebdb.

- Seleccionem da ferramenta de texto (T), e escrevam o título da vossa notícia. Repitam este passo e o anterior para criarem vários tópicos para as notícias. Sugestão: Aconselho a colocarem cada notícia num grupo. Por exemplo um grupo com o nome Notícia 1 em que neste grupo estaria o título da notícia, a divisão da mesma e tudo que pertença à notícia 1.

- Agora, ao lado das notícias, vamos criar uma parte onde irá aparecer as imagens correspondentes à notícia que se está a ver. Para isso criem uma nova layer com o nome imagem notícia e nessa layer coloquem um exemplo de uma foto correspondente a uma notícia.

- Vamos agora criar também uma área para os links, contacto e sobre. Nesta parte vou entrar em detalhes como fiz anteriormente, visto que se baseia tudo praticamente na mesma coisa.

- Por fim, basta colocar no fundo do site, um texto onde informa sobre o criador do website e outros afins. Aqui fica o meu exemplo.

Parte 1 do tutorial.

Download: Psd

Atenção: Proibido a sua utilização para fins comerciais. Caso encontrem algum erro façam favor de avisar.