Reino Kawaii

Olá! Hoje trouxe um tutorial que já foi pedido por alguns leitores e que sempre tive vontade de postar aqui, mas ficava em dúvidas quanto ao modo de mostrar o passo-a-passo, já que é algo que vai depender da criatividade de cada um; estou me referindo a como criar um layout usando Photoshop, no famoso formato PSD. Isso é legal para quem curte personalizar áreas que, pelo HTML, não seria possível ou difícil; ao criar um layout assim, você pode, por exemplo, adicionar bordas diferentes nas postagens e sidebar, como em um template que usei há muito muito tempo aqui no Reino Kawaii, cheio de babadinhos, lembram (veja a imagem)? Você poderá decorar como preferir, o mais difícil mesmo é codificar, que vou mostrar no próximo post usando esse modelo simples de exemplo sobre como criar um layout em PSD, vamos fazer tudo 'na mão', background, efeito pressionado e tal...

Aqui o resultado:

Vamos lá! Abra seu Photoshop e...ah é! Eu tô usando meu PC velhinho, com Windows antigo, então se virem alguma antiguidade no tema...ignorem :'(...

Clique em Arquivo - Criar imagem - Largura e Altura 1000 pixels por 1000 pixels, transparente.

Agora vamos delimitar uma largura máxima para trabalhar em nosso layout; clique em Visualizar - Nova guia - e deixe um valor de 5px; novamente, clique em Visualizar - Nova guia - deixe um valor de 985px; isso que fizemos foi uma maneira de delimitar com essas duas linhas nosso espaço de trabalho para posts e sidebar, para quando formos passar para o HTML não ficar nada torto.

Agora criaremos nosso background. Com a ferramenta retângulo (U) desenhe (clique e arraste) um retângulo com a cor cinza da paleta, vá em Filtro - Ruído - Adicionar ruído com valor 2,45%.

Agora vamos ampliar a visão do layout, para ir vendo como ficaria em tela cheia; clique em Imagem - Tamanho da Tela de Pintura - mude para uns 1365pixels por 1000pixels. Isso é opcional, mas ajuda a ter uma visão do todo :D Se fizer isso, duplique a camada (clique com botão direito na camada - Duplicar Camada) de background e cubra as áreas transparentes.

Dentro da área que delimitamos com as linhas, vamos desenhar 2 retângulos brancos (posts e sidebar) e outros 2 para topo e rodapé.

Agora vamos criar grupos, para agrupar camadas e facilitar na hora de editar item por item; para isso, clique no ícone de pasta e dê um nome (duplo clique no grupo) a cada grupo, como posts, topo e sidebar, e arraste o retângulo criado, cada um para seu devido grupo.

Vamos decorar o topo; abra o grupo topo, clique na ferramenta Texto (T) e digite um menu, escolha a fonte Gabriela na cor cinza da paleta...esse menu é só para saber onde vão ficar as palavras certinhas, depois vamos ocultá-lo. Agora pegue aquele coração dos pngs, copie e cole entre cada palavra, ou onde preferir. Copie e cole o PNG branco atrás do retângulo que desenhamos; digite sobre ele o nome do seu blog e cole a borboleta dos pngs ao lado :)

Vamos decorar a área de postagem; crie um retângulo com a cor rosa da paleta no topo, duplique a camada e arraste para o rodapé da área de posts; copie e cole o PNG rosa atrás do retângulo do topo. Quando eu digo para copiar e colar, vocês podem usar a ferramenta mover na camada (V) + Ctrl-C + Ctrl-V.

No grupo da sidebar, desenhe um retângulo rosa no topo e rodapé, assim como nas postagens, só que do tamanho da sidebar. Se quiser pode adicionar umas coisinhas, por exemplo, um "rascunho" de como ficaria sua foto na sidebar com descrição, textos nos posts...Eu criei uma camada de texto para ver nos posts mais ou menos como queria que ficasse; na sidebar, colei e redimensionei uma imagem e sobre ela, um retângulo cinza com opacidade.

Para fazer o efeito "costurinha", essas bordas pontilhadas, é só criar uma camada de texto na qual você digita apenas traços "- - - -"; depois colei um símbolo do Twitter e outro do Facebook.

No texto "by Roberta", usei um efeito conhecido como pressionado, que aprendi a fazer graças ao Having Themes e o Cherry Bomb; para fazê-lo, crie uma camada de texto na cor #6e6e6e, clique sobre ela com o botão direito, clique em Opções de Mesclagem e deixe assim:

Nas opções de mesclagem de outras formas, como dos posts, sidebar, títulos, cabeçalho...você pode definir efeitos de sombra, bordas e outras coisas, mas para quem quiser uma coisa básica, acho que não precisa. Uma coisinha legal para fazer é criar o retângulo dos posts e sidebar em novos arquivos do tamanho que você quiser que elas tenham; se você fez que nem eu, que esqueci de definir o tamanho das postagens e da barra lateral e só fui me lembrar quando terminei ~hihihi~, clique com botão direito na camada da sidebar, escolha Rasterizar Camada, clique no retângulo correspondente a sidebar, que desejamos saber a largura (que é o que nos importa) usando a ferramenta Varinha Mágica (W), dê um Ctrl+C, clique em Arquivo - Novo, e o Photoshop automaticamente vai te mostrar a largura certinha na opção de criar novo documento.
Está pronto! Salve seu trabalho como um arquivo PSD (Arquivo - Salvar como); muita gente fatia o layout, mas eu prefiro fazer de outro jeito: recortar parte por parte com a ferramenta Corte Demarcado (C). Depois de ter salvo, vá no seu PSD e recorte o topo, nas áreas que demarcamos, arrastando a ferramenta como se fosse criar um retângulo, dê Enter; vá em Arquivo - Salvar para Web e Dispositivos e salve no formato JPG, otimizado. Faça isso com o rodapé também.

Depois de ter salvo a imagem, o Photoshop volta a tela do PSD; clique em Histórico e a última ação será desfeita quando clicar na anterior.

Recorte o meio do layout, em toda a imagem e não só nos locais que demarcamos, assim (para ocultar certas camadas, clique no ícone olho ao lado delas):

E você terá três imagens como estas:

Algumas coisas ocultas, como o perfil, você pode salvar como imagem e depois usar na sua sidebar; outras coisas, como menus, por exemplo, vamos fazer com CSS e HTML. No próximo post, passaremos para HTML, ou seja, vamos codificar. Espero que gostem e que lhes sirva para inspirar na hora de criar seu layout no Photoshop ;3