Estar querendo criar aquelas páginas iniciais onde tem em vários fóruns com uns menus,que redireciona para registros,eventos,inicio do fórum,login e entre varias coisas? Neste tutorial iremos aprender a como fazer um layout para uma pagina inicial do fórum.

--> SP Design <--
Layout para paginas iniciais de Fóruns.

1º - Abra seu photoshop,vá em ‘Arquivo -> Novo’ abra um arquivo de tamanho 800x800.

Indicação tamanho da imagem que você terá que abrir.

Indicação clicar em OK depois de colocar as dimensões que você quis.

2º - Após abrir o arquivo,você ira diminuir a imagem para o seu tamanho de preferência.No meu caso o tamanho foi 800x431.

Indicação Tamanho que irei cortar,o tamanho que cortei foi 800x431.

Indicação Após cortar,clique duas vezes no cadeado,e depois em Ok,para desbloquear a camada.

3º - Após recortar o tamanho que você preferiu,crie uma nova camada e apague a camada branca.Após isso podemos começar a fazer o layout da página.

Indicação Local onde se deve clicar para criar uma nova camada.

Indicação Resultado final que deu após clicar no 1°.

Indicação Primeiramente teremos que clicar na camada branca.

Indicação Após ter clicado na camada branca,você deve clicar no ícone onde tem uma lixeirinha,lá ira apagar a camada branca,após apagar a camada ira ficar transparente ( vários quadradinhos branco e cinza ).

4º - Após fazer isso podemos começar a fazer nosso design,bem irei mostrar o design completo,pois o tutorial ira ficar enorme caso eu mostre passo a passo como eu fiz o meu layout.Olhe a imagem a baixo da finalização do layout.( eu fiz um extremamente básico ).

5º - façam como quiser.Após isso iremos recortar as áreas.Para recortar Iremos utilizar as ferramentas “Ferramenta Fatia e Ferramenta Seleção de Fatia”

Ferramenta Fatia : serve para selecionar os locais onde quer fatiar
Ferramenta Seleção de Fatia : Ela seleciona a respectiva fatia que já fez,para move-la,apagá-la e etc....

6º - Após descobrimos onde isso ficha iremos selecionar os locais onde querermos fatiar,isso começaremos pelos menus,pois nele iremos colocar um link para redirecionar a Atal local.


7º - Após isso se quiser não e necessário fazer mais cortes,pois iremos fazer o upload de tudo mesmo,então creio,quanto menos cortes tiver,menos imagens será fatiada.Bem no meu caso e só isso,após selecionar os locais de fatia,iremos salvar.Para salvar devemos ir em “Arquivo Salvar para web e dispositivos...”.


8º - Após clicar ira aparecer uma nova janela que é a mostrada abaixo


9º - Após isso antes de salvar clique nas partes que selecionou como fatia e veja sua “Predefinição”.Recomendo que esteja como ‘PNG’.

Indicação fatia selecionada.

Indicação local onde muda a ‘Predefinição’

10º - Após isso clique em salvar e ira parecer uma nova janela,nela você terá que escolher um local para salvar.Colocar um nome se quiser e mudar o “Salvar como tipo:” para “HTML e imagens”.Com isso o photoshop ira fatiar as imagens,e lhe da o código HTML do layout.

Indicação caso queira,coloque um nome.

Indicação Mude esta opção para “HTML e imagens (* .HTML)”.

11º - Após isso ele parecerá em um arquivo assim.

Indicação pasta onde estarão todas as imagens.

Indicação HTML,onde ira juntar todas as imagens para navegador.

11º - após isso e só clicar no HTML que abrira uma nova ‘aba’ ou ‘janela’ do seu navegador

Resultado final:

© SP-Design & Netinho

Se tiver alguma dúvida relacionada com este tutorial, crie um tópico com o seguinte título:
[Dúvida] Layout para pagina inicial do fórum

Aceito