(Receita de Wireframe e Criação de Background com Efeito Multiply)

Para construir o nosso site, é importante que nós tenhamos um conteúdo definido. Como iremos tratar de um site de caráter pessoal (para divulgação de portifólio), é importante que tenhamos os seguintes links: home, contato, quem sou eu?, portifólio, telefone e endereço nas páginas.

Com o Wireframe, nós construiremos o esqueleto, a estrutura de nosso site. Ele serve para nós posicionarmos a navegação do site e a navegabilidade. Para construir um esqueleto básico, faça o seguinte: Abra no Photoshop um arquivo 1024 x 768, no Preset Web. Alguns atalhos do Photoshop serão extremamente úteis por aqui.

CTRL + E = Achata a camada.

CTRL + R = Régua

CTRL + D = Pinta a cor da camada com a cor de baixo.

ALT + D = Pinta a cor da camada com a cor de destaque.

Pegamos uma página de internet destas dimensões e colamos no documento. Utilizamos a ferramenta de seleção retangular de espaço, cortamos as áreas a delimitar com a régua (ativada pelo CTRL + R), e ajustamos a página no template que desejamos. Devemos exportar nosso logo originalmente feito no Corel Draw, para o formato .eps.

Sempre levamos o Wireframe para o cliente, para estar sujeito a aprovação. Depois desenvolvemos o produto final. No wireframe não existe norma ABNT para os elementos da página: isso depende do cliente. Criamos o wireframe em algum programa de Diagramação. Por exemplo, no Corel Draw, utilizando uma página A4, na disposição paisagem, por exemplo, desenhando as áreas com as ferramentas de desenho disponíveis, como por exemplo, retângulo, círculo, etc.

Após realizar o wireframe, passamos à etapa do Photoshop. Façamos a seguinte "receita de bolo":

a) vamos abrir um documento de 10 cm x 10 cm, com 200 px de resolução e modo RGB.

b) Devemos escolher a seguinte cor Foreground: RGB, com valores respectivamente de 222, 199, 150.

c) Em seguida, dentro das layers do Photoshop, nós deveremos criar aproximadamente umas cinco Paths, na pasta correspondente, criando formas vetorizadas de diferentes dimensões e curvas, com a Caneta (Pen Tool).

d) Faça o desenho principal na primeira Path, meio que "cortando" a área que estamos trabalhando, no meio. Para "esconder" a seleção, usemos o CTRL + H. Depois, devemos usar a lupa preta e a mãozinha (nossas queridas "Burn Tool" e "Dodge Tool"). Para invertermos a seleção da área a mudar as tonalidades, deveremos usar o atalho CTRL + Shift + I.

e) Além disso, modificando as cores possíveis nesta mesma área, devemos utilizar a ferramenta Color Replacement Tool, não esquecendo de ajustar o hardness para zero.

f) Vá aos layers e crie nova camada, chamada Círculo. Faça um círculo e pinte de branco.

g) Faça uma sombra, pelo Drop Shadow, zere a distância, e no size amplie entre 70 a 75.

h) Spread é a distribuição da sombra, ajuste para zero.

i) Dica: Sempre coloque a sombra suave, não coloque escura demais.

j) Mude o blend normal para multiply. Duplique (CTRL + J) e dê shift para mudar a proporção.

k) Crie outra camada vazia, logo acima. Utilize a seleção quadrado pouco menor que o círculo.

l) Pinte com CMYK C=9, M=9, Y=35 e K=-0.

m) Apliquemos então a textura. Filter=Artistic=Film Grain. Aplique 3, 0 e 10 (grain, highlight e intensity).

n) Faça sombra no papel, sem jamais dobrar o papel, apenas a sombra.

o) Quero nova camada entre o quadrado e o círculo. Crio a nova camada. Quero a mesma seleção, sem mudar de camada. Dou ctrl na camada de cima. (Fabiano, é esta parte que tenho dúvidas)

p) Agora, vamos dar CTRL+T. Vamos no Warp (canto sup. direito). Arrasto, criando uma pequena dobra para baixo a parte superior direita. O mesmo com a inferior e o mesmo com a esquerda. Dou enter.

q) Quanto mais longe da sombra, mais embaçado. Pegue a gota. Vá em Strenght e ajuste em 90%. Passe para dar o efeito da sombra sem tirar efeito do mouse.

r) Mude a camada para multiply. Ajuste a opacidade para mais claro. Duplique a sombra. Pegue a borracha, ajusta o hardness para 0 (isso na layer 2 copy).

Isso finaliza o nosso trabalho. O arquivo gerado (exportado para .jpg), resultou mais ou menos nisso aqui:

Até porque dupliquei a última camada (do quadrado com a textura) e ajustei o blend para Darken.

Até a próxima postagem, pessoal!