Criatividade Visual

Como todos sabem, hoje em dia cada vez mais se criam sites. Um site para ser “construído” tem que ser primeiro desenhado no papel e a seguir passar esse esboço para um programa de edição de imagem. Neste tutorial que vos trago pretendo ensinar a todos como criar um simples weblayout, pois já várias pessoas me perguntaram como fazer, para esclarecer todos aqueles que me perguntaram e também aqueles que possam estar interessados no assunto. O tutorial é de nível médio mas é relativamente fácil se seguirem todos os passos.

Data: 28/02/09
Autor: NgM_Me_KuRtE (Flávio Proença)
Programa necessário: Adobe Photoshop
Tempo: 1 hora
Nível: Intermédio
Resultado Final:

- Abrir o photoshop.

- Criem um novo documento, o tamanho depende do tipo de animação que vocês vão criar. No meu caso eu vou criar com o tamanho de 1488 x 986. (Desde já aviso que não deverão criar um site com tal dimensão, devido ao simples facto, de esta resolução ser um pouco “elevada”, sendo que a resolução mais usada mundialmente é a de 1024 x 768 pixels.

-Depois de terem criado um novo documento, coloquem o fundo como branco, caso não esteje e mudem da layer para Fundo, para uma melhor organização do nosso projecto.

-Vamos agora criar uma nova layer (Ctrl+Shift+N), e no nome da layer coloquem Fundo site.

-Feito isto, seleccionamos a ferramenta Rectangular Marque Tool (M), e nas propriedades da ferramenta vamos à opção Style e escolhemos a opção Fixed Size. No campo widht coloquem 750px e no campo height coloquem 968px. (Ver imagem abaixo)

- Agora dêem um clique no documento, para ele fazer a selecção (com a layer fundo site seleccionada), e façam a seguinte combinação de teclas (Alt + Delete), para ele preencher a selecção. Certifiquem-se que a cor “principal” é branco (#FFFFFF).

- Desta vez vamos seleccionar a layer Fundo, para isso pressionamos a tecla Ctrl + clique rato, para esta se seleccionar ou então podem ir ao menu Select » Load Selection… e basta clicar ok para a layer se seleccionar. Agora vamos seleccionar a layer Fundo site (não fazer duplo clique nesta, apenas seleccionar), seleccionamos a ferramenta Move Tool (V) e vamos centrar o fundo do site.

- Agora façam duplo clique na layer Fundo site, para irmos para as Blending Options, ou então vão a Layer » Layer Style e escolhemos Blending Options. Vamos aplicar agora o seguinte efeito:

Stroke:

Propriedades do Gradiente:

- Vamos agora criar um novo grupo, onde irá ficar todos os ficheiros relativos ao header. Para criar um novo grupo vamos a Layer » New » Group. No campo Name coloquem o nome Header, para saber que este grupo é o do header.

- Vamos criar uma nova layer (Ctrl+Shift+N), dentro do grupo com o nome de imagem banner. Nesta layer vamos colar a imagem que queremos usar no nosso header. Eu nom meu caso vou usar o logo do Criatividade Visual, mais uma imagem. O tamanho da minha imagem é de 750px x 200 px. Na minha imagem eu dei ainda uns pequenos efeitos, coisa que você também poderá faer, indo às Blending Options.

- Feito isto, dentro do grupo do header vamos criar outro novo grupo que irá ser para o campo de pesquisa no site. Vamos então criar um novo grupo, desta vez com o nome de Search.

- Criem uma nova layer dentro do grupo Search, e coloquem o nome de caixa de texto. Seleccionem de novo a ferramente Rectangular Marque Tool (M), e nas propriedas da ferramenta vamos à opção Style e escolhemos a opção Fixed Size. No campo widht coloquem 150px e no campo height coloquem 20px. Feito isto escolham onde desejam colocar a vossa caixa de pesquisa, e preencham a selecção com uma cor à vossa preferência e efeitos se quiserem. No final adicionem um “botão – imagem” que irá ser o botão para se efectuar a pesquisa.

- Vamos passar agora ao menu. Vamos criar mais um grupo, desta vez fora dos outros (independente), com o nome de Menu. Criamos uma nova layer, com o nome de fundo menu.

- Criamos uma selecção de 750px x 30px e vamos aplicar o seguinte efeito.

Gradiente Overlay:

Propriedades do Gradiente:

Stroke:

Parte 2 do tutorial.