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
