Criando um layout com o tema de estudos

Olá Galera!

Bom, vou começar este tutorial logo falando que foi um dos MELHORES tutoriais
que já vi na internet, e resolvi traduzir para você, visitante do meu humilde
blog. :D

Se trata de um tutorial completo que ensina a fazer um layout de web no estilo
de uma mesa de estudos, muito criativo, podendo ser usado em seu portfolio, ou
em sites com o tema, lembrando que este tutorial ensina uma BASE, porque,
claro, se todos que virem esse tutorial, fizerem igual e publicarem, vai ficar
chato, e perder a graça, então, pegue as técnicas aplicadas aqui para
desenvolver seu design.



Veja que belo o resultado final:




Bom.. cortando o papo furando, vamos ao que interessa! ;)



1º Passo: Crie um documento em 700x550 px, e pinte o fundo com uma cor
meio "azul piscina escuro" (:S), após isso, faça uma seleção
horizontal e pinte de "azul piscina claro". Após isso, aperte CTRL+D
para desmarcara seleção, de um CTRL+T e estique o retangulo, deixando ele bem
comprido, mesmo que fora da imagem. Isso é para fazermos o efeito do
background todo cruzado. Acompanhe as imagens a seguir para se situar melhor.



A seleção com a linha horizontal:




Esticando a linha horizontal:




2º Passo: Agora, ainda com a Transform Tool (Ctrl+T) ativada, gire 45º
a linha deixando-a na diagonal do documento, e crie uma nova pasta chamada stripes.



  



3º Passo: Duplique as linhas e vá espalhando-as por toda o espaço,
mantendo uma regularidade, como mostra a figura. Depois clique na pasta stripes
e transforme-a em uma layer indo em Layer>Merge Layer Set







>>


4º Passo: Reduza a opacidade das linhas para 30%. Duplique a layer e a
inverta horizontalmente (Edit>Transform>Flip horizontal).



  



5º Passo: Bom.. O fundo já foi criado, agora vamos começar a
criaçãodo layout em si. Crie uma nova layer e, com a ferramenta Rectangular
Marquee Tool, desenhe um retângulo e pinte-o de branco, e crie uma nova pasta
com o nome de "paper 2", com a layer anteriormente criada.






6º Passo: Duplique essa pasta e nomeie para "paper 1", e
deixe-a invisível. Na pasta "paper 2", crie uma nova layer e, usando
a ferramenta Rectangular Marquee tool, faça uma linha de 2px e pinte de roxo,
na parte de cima do 'papel'. Estas serão as linhas de nossa folha de caderno.




(Clique para ampliar)



7º Passo: Duplique a layer da linha roxa varias vezes e vá criando
varias linhas, com certa regularidade, para deixar bem real, e depois, como no
passo 3, selecione a pasta "paper 2" e vá em Layer>Merge Layer
Set para transformá-la em um só layer.





(Clique para ampliar)



8º Passo: Deixe a pasta "Paper 1" visível novamente e
transnforme-a em uma layer, como no passo anterior. Após isso entre nas
Blending Options e configure da seguinte forma:





(Clique para ampliar)



9º Passo: Selecione a layer da folha com linhas e de uma leve entortada
nela, girando-a com Ctrl+T, para dar um ar de bagunça.





(Clique para ampliar)



10º Passo: Duplique a layer do papel em branco e de uma outra
entortadinha, alterando um pouco sua posição, levemente, para dar enfase a
'bagunça'.






(Clique para ampliar)



11º Passo: Duplique novamente a layer e de mais uma bagunçada. Isto
não é essencial, mas enfeita um pouco mais, deixa mais caprichado. Agora
vamos fazer a parte amarela, que seria um papelzinho de anotações, como o
menu. Então crie uma nova layer por cima de todas as dos papeis, e com o
Rectangular Marquee Tool, faça uma seleção parecida com a da imagem.




(Clique para ampliar)



12º Passo: Pinte essa nova layer com amarelo (#F9EEB3)





(Clique para ampliar)



13º Passo: Faça uma selação na parte que 'sobra' pra fora do papel e
ajuste a Hue/Saturation (CTRL+U) e acordo com a figura.





(Clique para ampliar)



14º Passo: Dê uma leve entortada na layer amarela, com o CTRL+T, como
a figura.





(Clique para ampliar)



15º Passo: Agora vamos adicionar o conteúdo. A fonte utilizada no site
foi a font angelina, que pode ser baixada em http://dafont.com/angelina.font 





(Clique para ampliar)



16º Passo: Segue as configurações utilizadas nos textos:



Texto do menu:


  



Texto do título:




17º Passo: Agora entramos na reta final de nosso layout. Vamos
adicionar os objetos, que darão mais realidade a nossa interface de estudos.
Você pode pegar as imagens
dos objetos, ou então pegar o psd
pronto, com as imagens já tratadas. Aconselho a pegar o psd já tratado,
para facilitar nosso processo. 

Então copie a imagem da borracha e gire ela mais ou menos 50º com o CTRL+T,
como na figura.




(Clique para ampliar)



18º Passo: Mude a cor com o CTRL+U, e acordo com as configurações:





(Clique para ampliar)



19º Passo: Reduza o tamanho em 50% com a Transform Toll (CTRL+T) e
depois, com um zoom de 200%, remova os restos do background da borracha com a
Polygon Lasso Tool.








(Clique para ampliar)



20º Passo: Volte com o zoom normal e posicione, bonitinho, como na
figura :D





(Clique para ampliar)



21º Passo: Aplique uma sombra discreta (blending Options), com as
configurações mostradas na figura.



 

\/




22º Passo: Repita o mesmo processo com as outras imagens, mas use uma
entonação diferente nas sombras.




\/







\/




E é isso.. Nosso layout está feito! :D

Veja novamente o resultado final! ;)






É isso aí. Um tutorial completo, que te dá bases para você desenvovler o
SEU layout, com a SUA criatvidade. ;)

Até a proxima pessoal.. e comentem ;)



Fonte: http://www.flash-game-design.com/tutorials/dtWebLayout-photoshop-tutorial-1.html
Download do PSD: http://rapidshare.com/files/39441140/desktop-layout.psd