Continúa nuestras novedades por e-mail

Home » » Criando um layout com o tema de estudos

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.



Free Image Hosting at www.ImageShack.us
(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.



Free Image Hosting at www.ImageShack.us

(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:



Free Image Hosting at www.ImageShack.us

(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.



Free Image Hosting at www.ImageShack.us

(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'.



Free Image Hosting at www.ImageShack.us


(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.



Free Image Hosting at www.ImageShack.us
(Clique para ampliar)



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



Free Image Hosting at www.ImageShack.us

(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.



Free Image Hosting at www.ImageShack.us

(Clique para ampliar)



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



Free Image Hosting at www.ImageShack.us

(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



Free Image Hosting at www.ImageShack.us

(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.



Free Image Hosting at www.ImageShack.us
(Clique para ampliar)



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



Free Image Hosting at www.ImageShack.us

(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.






Free Image Hosting at www.ImageShack.us

(Clique para ampliar)



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



Free Image Hosting at www.ImageShack.us

(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
إذا أعجبك الموضوع اضغط هنا , أو ضع إيميلك هنا ليصلك كل جديد

0 commentaires :