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:
7 Respostas
[...] Parte 1 do tutorial. [...]
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.
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…
Claro, nem disse o contrário, apenas fiz referência ao facto de terem colocado na “dificuldade” como “intermédio”. Cumps!
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..
Nesse caso tens toda a razão.
http://img534.imageshack.us/img534/1094/weblayout.png ^^ olha ae ;P