
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:











Março 29th, 2009
13:23
Bom tutorial, e a iniciativa é boa. Só não concordo com uma coisa, o nível de dificuldade. Essa template é bastante fácil de se fazer. 1 hora de trabalho não se compara às 8 ou mais horas que normalmente se leva a desenhar e planificar uma template. Fica a dica!
De qualquer da forma, bom trabalho. É de louvar ver tutoriais em português de web design.
Março 29th, 2009
15:54
edumicro, exacto o tutorial é fácil de se fazer, mas eu decidi mesmo que iria ser de fácil criação, pois este tutorial, é destinado às pessoas que se querem iniciar neste ramo, ou começar a mexer no photoshop, e entender as suas ferramentas e tudo mais…
Março 30th, 2009
0:26
Claro, nem disse o contrário, apenas fiz referência ao facto de terem colocado na “dificuldade” como “intermédio”. Cumps!
Março 30th, 2009
2:53
pois exacto, mas eu nesse caso coloquei intermédio, pois como disse era para os iniciantes neste ramo, logo para eles, supostamente não será fácil…. é a minha maneira de pensar…. também posso estar errado..
Março 30th, 2009
12:29
Nesse caso tens toda a razão.