Recebo muitos comentários no blog, Twitter (@juduartt) e e-mail perguntando como faço meus layous, se faço encomendas e quanto cobro… Como a rotina da faculdade é bem pesada, fica impossível atender todos os pedidos, então não faço para não deixar ninguém de fora. Foi pensando nisso que criei a tag design no blog, assim disponibilizo alguns de meus trabalhos (gratuitamente) para vocês.
Porém, sei que muitos curtem ter o blog com sua cara, mais personalizado. Então, aqui vou eu (tentar) ajudá-los novamente: a partir deste post, vou fazer um tutorial passo-a-passo de como eu crio meus layouts. Além de guiar vocês, ainda vai ajudar (ou assim espero) quem está louco para aprender.
A primeira parte já está no ar e fiquei super feliz de saber que vocês gostaram da ideia e ficaram ansiosos pelos próximas aulas. Quem está perdido e só está vendo esse post, vale dar uma olhada no primeiro. Dei muitas dicas legais por lá. Mas agora, vamos ao que interessa: a continuação.
O layout que nós vamos fazer juntos vai ficar mais ou menos assim:
Digo “mais ou menos” porque preparei esse somente como base. E claro: vocês podem modificar o que quiserem. Fiz ele de uma forma super simples, assim não fica tão difícil pra vocês entenderem. E antes que me culpem por não fazer algo super legal e cheio de coisas (hahaha), vou explicar: isso vem com o tempo e com a prática. Pra quem está começando, os primeiros layouts vão ser bem simples e desastrosos, pois existe aquela barreira com o programa e a falta de costume com as ferramentas. É normal. Os meus foram horríveis. Comecei a fazê-los em 2006 e hoje, após seis anos, ainda tenho muito o que aprender e melhorar. Estou apenas explicando para não receber comentários maldosos e coisas do tipo. Bom, aviso dado, agora vamos deixar de blá blá blá e começar a trabalhar!
Nesse “tutorial”, vou usar técnicas que uso em todos os meus layouts, ou seja: fazer as nuvens que sempre faço, colocar desenhos, escrever, aplicar efeitos nos textos, usar pincéis e etc. Vou explicando no decorrer das aulas. Com o tempo, vocês vão achar tudo isso que falei no design do JDB. A técnica é a mesma, só resta a vocês aplicarem da melhor forma possível e sair fuxicando o Photoshop em busca de ferramentas novas (acreditem: aprendi tudo assim).
Materiais que vamos precisar:
Background usado na nuvem – imagem principal – fonte
Ainda lembrando que vocês estão livres para usar o que quiserem!
Ainda lembrando que vocês estão livres para usar o que quiserem!
Os pincéis de coração que usei no layout já são antigos e não lembro onde fiz o download. Por isso, vocês podem procurar outros no DeviantArt (link direto para pinceis de coração) ou no post aqui do blog que coloquei alguns links. Vale usar outros, também!
Primeiro passo: criando um novo documento no Photoshop
Vamos começar criando o documento onde vamos fazer nosso layout. Para isso, basta ir em File/Arquivo > New/Novo ou pelo atalho Ctrl + N. Configure deste jeito:
Claro que vocês podem colocar um número diferente na largura e altura. Geralmente, uso o 1080px para a largura e a altura depende do que faço. Nem sempre fica em 500px.
Após clicar em Ok, o documento será aberto no Photoshop. Seguindo o layout que criei, vocês vão usar a ferramenta Paint bucket tool (atalho: G) e escolher a cor e6eae1 para pintar o fundo. Assim:
Com a ferramenta (item 3) selecionada, pinte o documento que nós criamos. Ele ficará assim:
Segundo passo: “desenhando” a nuvem
Agora nós vamos criar uma nova camada para adicionar a nuvem. Para isso, há duas maneiras:
1) No menu Layer/Camada > New/Novo > Layer/Camada
2) Pelo atalho Shift + Ctrl + N
Com a layer criada, vamos fazer a nuvem. Para isso, selecione a ferramenta de Shapes/Formas (atalho: U).
Com a shape de círculo selecionada, vamos começar a montar a nuvem. Segurando a tecla Shift, vá desenhando vários círculos juntos até formar uma nuvem a seu gosto. Assim:
Continue assim até sua nuvem ficar pronta. Ela ficará desse jeito:
Terceiro passo: adicionando efeito na nuvem
Antes de tudo, você deve abrir aquele background que pedi para salvar no começo do post. Para isso, vá em File/Arquivo > Open/Abrir e procure a pasta onde o salvou.
Com o documento aberto, vamos transformá-lo em pattern/padrão no Photoshop. Vá em Edit/Editar > Define Pattern/Definir Padrão. Coloque um nome para ele e clique em Ok.
Na camada da nuvem, clique com o lado direito do mouse e vá em Blending Options/Opções de Mesclagem.
Vai abrir uma janelinha. Ao lado esquerdo há várias opções. Procure por Pattern Overlay/Sobreposição de Padrão. Veja o print:
Selecione o Pattern Overlay/Sobreposição de Padrão (item 1) e clique na setinha (item 2). Vai abrir uma pequena caixa com as opções de pattern/padrão. Procure o que acabamos de abrir (o background, lembra?). Se ele foi o último a ser adicionado, estará no final. Assim:
Agora vamos adicionar a “sombra” abaixo da nuvem. Nessa mesma janela, clique no item Drop Shadow (o primeiro). Deixe assim:
Cor usada: c6bfaf
Agora é só clicar em Ok.
Quarto passo: adicionando o espaço onde irá o nome do blog
Vamos criar aquele “traço” atrás do nome do blog. Para isso, use a cor e6eae1 (ensinei lá em cima como trocar a cor) e selecione a ferramenta de shapes (atalho: U).
Eu usei a largura (weight) em 50px. Mas você pode alterar o tamanho.
Vou usar na diagonal, mas também é escolha sua. Basta clicar na página e arrastar. Ficará assim:
Quinto passo: adicionando o nome do blog
Vamos escrever o nome/título do blog nessa caixinha que acabamos de criar. Para isso, selecione a ferramenta de texto (atalho: T). A cor é opcional, porém vou usar a b2abb3, ok?
Com a ferramenta Texto selecionada, clique e arraste para formar uma “caixa” perto da caixinha que criamos e escreva o nome/título do seu blog. Ficará assim:
Quem fez a caixinha reta, basta posicionar o texto em cima. Quem criou na diagonal, como eu, basta virar o texto. Para isso, posicione o cursor perto de uma ponta da caixinha, segure com o mouse e arraste. Assim:
Sexto passo: adicionando efeito ao texto
Na camada do texto, clique com o botão direito e vá em Blending Options/Opções de Mesclagem. Nós vamos fazer o mesmo processo da sombra na nuvem. Porém, a cor que vamos usar é a 867289, ok? Ficará assim:
Sétimo passo: adicionando o desenho ao layout
Abra a o desenho que vocês salvaram, seja o que disponibilizei aqui no post ou o que vão querer usar. O método é o mesmo: File/Arquivo > Open/Abrir.
Com o desenho aberto, vamos recortá-lo antes de colocar no layout. Desta vez, como o fundo é todo branco, vamos usar a ferramenta varinha mágica (atalho: W).
Clique no fundo branco da imagem para selecioná-lo. Assim:
Agora vá em Select/Selecionar > Inverse/Inverso. Aperte ctrl+c para copiar. Vá até o documento do layout que estamos criando e, adivinhem? Ctrl+v haha.
Para mover o desenho, vamos usar a ferramenta Move Tool (atalho: V). No painel de ferramentas, ela é a primeira do lado direito.
Vou posicionar o desenho assim:
Oitavo passo: criando os espaços para perfil, posts e menu
Agora vamos criar a sidebar e a coluna dos posts. Para isso, vamos criar uma nova camada (Layer/Camada > New/Novo > Layer/Camada).
Com a cor branca (código: ffffff), selecione a ferramenta de shapes. Iremos usar o retângulo:
Clique e arraste para criar a parte do post. Ela deve terminar no fim do documento, assim:
Agora crie outra camada (Layer/Camada > New/Novo > Layer/Camada) para a área do perfil. Vou usar a cor d6ddcc, mas fiquem a vontade para trocar. Ficará assim:
Com as colunas do post e da sidebar prontas, agora é hora de criar o espaço onde ficará o menu. Essa parte é opcional, pois nem todo mundo quer ou tem páginas no blog para colocar aí. Só para explicar: essa é a área onde vamos colocar os links para início, perfil, blogroll, contato e etc.
Ainda com a ferramenta de shapes selecionada e com a mesma cor que usamos na sidebar, nós vamos usar o retângulo que tem as pontas arredondadas. O ícone dele está ao lado do que usamos anteriormente.
Clique e arraste no local desejado para colocar o menu. Ficará assim:
Nono passo: finalizando com os brushes/pincéis
Para não ficar um espaço muito vago entre o desenho e a sidebar, vou colocar pincéis de corações ali. Fiquem a vontade: vale adicionar uma frase que você goste, ou colocar créditos do layout ou até usar outros pincéis. E claro: se curtiu assim, também pode deixar do jeito que está e parar por aqui!
Vamos selecionar a ferramenta Brush Tool (atalho: B). Para o post não ficar muito grande, vou aproveitar que já ensinei a importar pincéis pro Photoshop neste post. Deem uma lida lá.
Depois de carregar os brushes que baixou, escolha o seu favorito e a cor desejada (vou usar a c1a99a). Clique no espaço e pronto! A figura já estará lá.
Décimo passo: salvando a imagem
Nosso layout está pronto (pelo menos a parte gráfica). Agora vamos salvar a imagem de duas formas: uma em formato .PSD (do Photoshop, caso precise alterar algo mais tarde) e em .JPG (a que vai para o blog depois).
Para salvar, vá em File/Arquivo > Save As/Salvar como. Uma janela irá abrir e lá você vai colocar o nome do seu arquivo. Certifique-se que abaixo, em format/formato, esteja Photoshop (.PSD;* .PDD). Clique em save/salvar. Agora faça o mesmo processo, porém, no format/formato, procure por JPEG (*.JPG;* .JPEG;* .JPE). Salve e pronto.
Ufa! Após mais de três horas criando o post, finalmente chegamos ao fim. A parte gráfica está pronta! Guarde os dois documentos (o .PSD e o .JPG) que, na próxima aula, vamos começar com os códigos. E continue com o Photoshop (ou o programa de edição que você usou) instalado aí, pois ainda temos outras imagens para criar, viu?
Espero que vocês tenham gostado da aula. Já disse isso, mas não custa repetir: somente o tempo e a prática vão te fazer melhorar. Criei um layout simples com vocês para não ficar muito chato, longo e difícil. Porém, vale usar as técnicas para criar coisas diferentes e mais elaboradas. Tudo depende de vocês, viu? E uma dica: fuxiquem MUITO o Photoshop. Foi assim que aprendi tudo o que sei.
E vocês? Curtiram a aula? Estão ansiosos para começar com o HTML? Conta pra gente! Qualquer dúvida, deixem por comentário que respondo (aqui mesmo).
Leave a Reply to Pérola Santiago Cancel reply