como fazer base de layout pelo photoshop

 Heey peachys ♥ Hoje por ser uma postagem muito extensa, eu vou evitar comentar muito sobre assuntos terceiros. But, não posso começar essa postagem sem desejar pra você um feliz 2020 e que esse seja o nosso melhor ano da vida. E preciso agradecer você por estar aqui comigo ainda e me fazer companhia mesmo sabendo que eu sou uma baita de uma escritora/blogueira/blogger/whatever meia boca e que sou bem confusa as vezes. Já mereces um prêmio por me suportar, e mereces um segundo por suportar minha mudanças que as vezes vem mais de três vezes em um único mês. Gratidão! ☆ E mais uma terceira coisa que eu preciso dizer é que estou começando o ano de 2020 postando no dia 2, número par, não que isso tenha sido programado, mas vamos profetizar sempre o melhor. É isso! 

 Na postagem de hoje eu vou ensinar como eu faço layouts pelo photoshop. Na realidade eu sempre faço uma base lá e vou passando pro HTML/CSS adicionando e retirando algumas coisas. Eu fiz esse layout em apenas um dia, não demorou muito tempo para finalizá-lo. Se for fazer uma estimativa de quanto tempo eu demorei, são mais ou menos umas 3 horas, sendo que eu fiz o fundo de noite e todo o restante do layout no outro dia. Eu não sou expert, então temos erros aqui, estou aqui apenas para mostrar e ensinar a vocês o que sei, pois acho muito legal essa troca de informação. O que eu sei é só o basicão, então não esperam muito de mim. Vamos ao tutorial?

1º passo 一 background (fundo) do template, no caso eu fiz um fundo degrade

 Para fazer esse degrade é simples, você primeiramente precisa escolher duas cores que na sua opinião vão combinar com seu layout. No caso minhas duas cores escolhidas foram rosa e azul. E meu único conselho para um degrade bonito, e mais harmonioso é escolher tons e cores que juntos ficam bonitos. Eu escolhi tons pastéis, pois vai ser parte, ou talvez, totalmente da estética do layout. Esse passo é um opção sua, escolher entre uma imagem, o estilo degrade ou até mesmo uma cor sólida (uma única cor).

 Prepare a base do seu degrade pintando o seu background com as cores que escolheu, lembrando que pode ser de duas pra cima (exemplo), fica ao seu critério. Depois da escolha das cores e tons, e da pintura você agora irá preparar seu degrade, ou seja, desfocar as cores para que elas se misturem. Pra que isso ocorra siga as seguintes coordenadas usando o menu no topo do programa (veja aqui onde  se encontra o menu):

 一 filtro (filter) > desfoque (blur) > desfoque gaussiano (gaussian blur) > escolha o nível de desfoque que deseja, outro passo que fica a sua preferência, esse será o seu resultado, agora só basta dar um "ok" e seguir o próximo passo.

 Ainda no background, eu recentemente tinha baixado um pack (pacote) de utilitários no Deviantart, esse aqui, e nele vem uns overlays maravilhosos. Então eu disse, 一 ué, porque não usar?, menines, dito e feito, provei alguns, fiz alguns ajustes e não é que ficou uma belezinha?

 Pra você que ainda não sabe como usar overlays, ou que não os conhece. Vou fazer uma pequena explicação sobre esse bebê. Trate overlay como se fosse uma textura, quando se coloca uma textura em uma imagem você pode dar uma outra vida pra sua edição, e adicionar efeitos que não conseguiria fazer desenhando, ou colocando pngs. Os overlays seguem a mesma linha, só que você usa ele para sobrepor sua imagem, ou seja, o fundo ainda aparece, mas tem uma sobreposição ali. E amigos, o efeito de sobreposição é uma das coisas que eu mais me orgulho em ter aprendido a fazer no photoshop, só pra vocês terem noção do meu amor por sobreposições e do quanto elas salvam meus dias.

 Esse é o resultado com o overlay. É um passo opcional não precisa reproduzi-lo se preferir algo mais limpo, já que só o degrade já brilha por si só. Mas caso queira usar, ou até mesmo aprender a fazê-lo, precisamos seguir esses passos:

 Primeiramente você precisa escolher o overlay que vai usar, depois de testar alguns eu preferi usar este aqui, pois achei ele mais suave e com menos informações. Adicione-o no seu fundo degrade, caso não saiba fazer isso eu explico como adicionar outras imagens a sua atual edição no meu tutorial de como fazer gifs de forma simples no Photoshop (segue aqui o link). Caso o overlay fique menor que seu fundo, ou seja, como esse exemplo. Basta você espelhar sua imagem, usando as coordenadas também no menu: 一 imagem (image) > rotação de imagem (image rotation) > e escolher como quer que ela fique, use, por exemplo, rode a tela verticalmente (flip canvas vertical) para espelhar verticalmente, ou seja, a parte de cima vai se tornar a parte de baixo e a de baixo se tornará a de cima, pois ele rodou verticalmente a imagem apenas. O mesmo serve para o horizontal. Quando você colocar sua imagem espelhada junto com a outra parte do overlay, vai conseguir com que eles fiquem dessa forma.

 Com o overlay ajustado, agora precisamos mesclá-lo para que quando formos o sobrepor, não precisemos sobrepor cada imagem por ver. Para mesclar as camadas siga essas coordenadas:

 一 selecione-as (link) > clique com o botão direito do mouse em cima de uma delas > selecione a opção mesclar camadas (merge layers) e pronto, agora as duas se tornaram apenas uma.

 Agora a parte simples, precisamos apenas sobrepor a imagem e a transformar em uma sobreposição (overlay), siga os seguintes passos:

 一 clique duas vezes em cima do seu overlay > nessa janela clique em blend mode e selecione a opção overlay (sobrepor) > se for de seu agrado ajuste a opacidade nessa barrinha ao lado dos dizeres "opacity" > quando finalizado clique em "ok" para salvar sua edição e esse será mais ou menos o seu resultado final.

  Nessa mesma janela onde você fez sua sobreposição, conseguirá editar grande parte do layout, então se atente em guardar como se chega até ela, mas não se preocupe que ao decorrer do tutorial eu vou te alertar sobre como chegar até ela novamente.

 Então assim finalizamos o fundo. Fizemos um degrade maravilhoso e colocamos uma sobreposição maravilhosa por cima dele. Não tem segredo algum sobre isso, e sinceramente é a parte mais simples do layout. O pior está por vir meus queridos, infelizmente.

2º passo 一 header (cabeçalho) do template, essa parte é simples, mas depende

 Eu fiz uma anedota sobre cabeçalho ser simples de fazer só que depende. E sim, depende muito. Da pessoa e do seu temperamento. Se você que está lendo me conhece e lê a um tempo meu blog deve saber que sou bem intensa e não me contento até chegar a uma perfeição que eu não consigo fazer. E o cabeçalho e uma das partes mais importantes do layout quando você vai fazer um, pois geralmente é nele que fica o tema do blog, e/ou o nome do seu blog. E tem todo um problema de alinhar o cabeçalho com a postagem e a sidebar. Enfim, alinhamento em si é um negócio que me tira tanto tempo e tanta paciência, que vocês não tem noção.

 Nessa parte do tutorial eu vou deixar o resultado final como surpresa e vou focar agora apenas em como fazê-lo. São três passos simples, pois como vocês vão perceber ao decorrer da postagem eu não preparei um super cabeçalho, vou explicar apenas o básico, pois geralmente é o que eu faço no meu blog.

 O primeiro passo é fazer uma base do formato do seu cabeçalho, nesse tutorial vamos fazer em formato retangular, mas vale ressaltar que você pode utilizar qualquer formato, ou até mesmo não utilizar formas geométricas e sim formas aleatórias (ex. coração, estrela, sol, nuvem, pinheiro), apenas fazer colagens, tentar fazer uma sobreposição com o fundo ou até mesmo só colocar o nome do seu blog com algum efeito na fonte. São diversas as brincadeiras que você pode fazer com seu cabeçalho, mas hoje vou te ensinar um jeito bem simples, prático e rápido de fazer um.

 Como pode ver na imagem a cima (desculpem a qualidade, estou trabalhando para melhor atendê-los), eu fiz esse retângulo simples, com um tamanho aleatório e na cor preta. A cor do fundo não importa, desde que você não vá colocar um PNG (imagem sem fundo) e que deixe a cor aparente. Como esse não é o nosso caso, já podemos pular a parte de escolher uma cor ~ufa. 

 Nesse segundo passo, eu te aconselho já ter em mente pelo o menos 75%  de qual será a temática do template, pois é muito importante sua decisão nessa parte do tutorial. Eu escolhi uma imagem de um grupo de K-Pop, por achar que ela estava combinandinho com o restante do template. Te aconselho a maneirar nas cores do cabeçalho caso o fundo for escuro demais, e vice e versa. Talvez, muita informação atrapalhe a gente na hora de criar algo. São muitas ideias, muitos tons, e pouco raciocínio.

 Agora que já tem sua imagem escolhida chegou a hora de colocá-la no nosso template, seguindo o mesmo esquema que eu citei um pouco mais acima. Caso não tenha encontrado a parte onde eu faço essa explicação, você pode ir na pasta onde está sua imagem no seu computador mesmo, não precisa abrir pelo Photoshop, e arrastar ela até seu template, ajuste o tamanho que melhor se adequa ao que deseja e clica nesse símbolo de "correto" sinalizando que já finalizou quaisquer edições.

 一 Ok Prima Oceane, essa parte eu já entendi. Mas e agora? Como faço pra colocar a imagem dentro do retângulo? - Ok, essa é mais uma coisa simples e que a gente decora facilmente e que usa bastante no Photoshop, então vale a pena aprender. Primeiramente você deve arrastar sua camada da imagem, pra cima da camada do retângulo desta maneira. Depois disso, e com a camada da imagem selecionada você vai seguir as seguintes coordenadas:

 一 veja essa imagem, clique onde a seta está apontando > selecione a opção criar máscara de corte (create clipping mask) e pronto.

 Se achar que sua imagem não está posicionada em um lugar legal bastante selecionar a camada da imagem e movê-la pro lugar onde deseja. E se por algum motivo sua imagem sumir é porque ela não estava posicionada em cima do retângulo que no caso é a nossa base. Certifique-se disso antes te aplicar a máscara de corte, pra não ter que voltar o processo caso não consigo encontrar onde está a imagem.

 Bom, temos uma base de cabeçalho, mas lembra quando eu disse lá em cima que temos uma janela onde iriamos usar para editar mais algumas coisas do layout. Pois muito que bem, a hora dela chegou. Eu fiz uma edição bem básica, mas que ficou uma graça de bonita. E pra simplificar as coisas e facilitar tudo, tirei print de cada uma das edições, que no caso foram apenas bordas e sombras. Segue cada passo com link do print:

 一 sombra interior (link), brilho interior (link) e sombra externa (link), tirei print das cores, da opacidade, do tamanho e de quais opções que usei para fazer ficar no meu gosto

 Como eu disse é um cabeçalho simples, apenas para demonstrar um pouco do que se consegue fazer no Photoshop. E mais uma ressalva, você pode adicionar mais camadas nesse retângulo, como overlays, texturas, pngs, outras imagens, e etc... Basta usar a sua imaginação e ir testando até chegar a um bom resultado. A edição the never ends, me desculpem por isso ~rindo de solidariedade a mim mesma~.

3º 一 área da postagem e sidebar, easy, você só precisa... 

 Ok, talvez essa seria a parte mais simples do layout se você não fosse precisar a editar. Já adianto que na hora de fazer o layout eu não me atentei a algo bem simples que são as sombras externas/inferiores que será impossível codificar para o html, já que eu não sei como que faz essa sombra sobreposta em códigos e na realidade nem sei se é possível fazer algo do tipo. Então na hora de fazer seu layout use bordas que consigam ser passadas pro layout sem que você tenha muitos problemas. NÃO COMETAM O MESMO ERRO QUE EU!

 Pra área da postagem você precisa prestar atenção em quatro coisas: a distância que vai precisar pra sidebar, a distância entre a área e o cabeçalho, a cor da área e a distância que a fonte vai ter das laterais da área. Se atentando a isso você já sabe o que fazer aqui, crie o tamanho que deseja, e não se preocupe pois você pode editá-lo mais tarde para alinhar o que ficou desalinhado e etc.

 Eu coloquei no passo 2º o lugar onde vocês devem clicar para criar formas (ex.: retângulo, circulo, quadrado, formas que você fez download, polígono e etc...), para ter acesso, caso não tenha encontrado basta apenas clicar na letra "U" do seu teclado e já vai estar selecionada a janelinha de formas. E para ter acesso a outras, você só precisa clicar na parte direita do mouse em cima dessa janelinha, escolher a sua opção e pronto. Não tem muito segredo quanto a isso. E sobre as formas customizadas que o photoshop diz, são formas diferentonas que você pode baixar e colocar ali, mas essa parte eu vou deixar para outra postagem. Chegaremos lá, bebês. Quando você tiver selecionado a forma que deseja, basta ir na sua edição, escolher onde ela irá ficar mais ou menos, clicar e arrastar a mouse até onde deseja. Na hora de alinhar, quando você perceber que um, dois ou mais pixels passaram ou faltaram para ficar certinho, você só precisa clicar em "mostrar controles de transformação", ou algo assim, no meu PS, por estar em inglês a frase é "show transform controls". Depois de selecionada essa opção, que a propósito fica localizada lá em cima abaixo do menu do topo, sua camada selecionada vai pela magia das edições poder ser aumentada, diminuída, girada e enfim. Então não se preocupe em fazer um baita alinhamento, pois você vai conseguir ajeitar mais tarde.

 Acho que daqui você já meio que sabem o que deve ser feito. Nós NÃO vamos usar mais sombra sobrepostas, pois é bem complicado passar elas pro html, sendo que o fundo é degrade. Mas você pode colocar uma borda normal, pelo o menos na área da postagem e sidebar, pois no cabeçalho da pra dar um migué já que ele é pequeno e fica só na parte de cima. Nas próximas postagem eu explico melhor a saída que uso quando quero um fundo degrade e preciso encontrar uma borda que não se sobressaia a uma das cores.

 Como podem ver eu já fiz toda a base da postagem, com a ilustração que no caso é um icon/avatar, uma base de bloco de notas (até agora eu não sei porque fiz, mas fiz), fiz o título da postagem e coloquei a bendita sombra sobreposta nas bordas da área.

 Como podem ver eu fiz um degradê no título, e pra esse passo nós vamos usar aquela janelinha que utilizamos para as bordas do cabeçalho e as bordas das áreas. Eu vou deixar tudo linkado para um melhor entendimento. Nesse passo não tem muito segredo, ou você faz um título com apenas uma cor, ou faz o degradê assim como eu fiz, ou até mesmo não faz fundo algum e deixa apenas a fonte ~fica lindo em layouts simples e sem muitos detalhes~.

 Esse é mais ou menos o resultado que vamos ter. Ele é formado por fundo degradê, sombra interna sobreposta e um "fundo" overlay/sobreposto por cima). Antes de você colocar a sombra e a sobreposição, precisamos preparar o degradê. Temos duas opções, ou você criar uma nova imagem clicando em "arquivo" e logo em seguida em "novo", escolhe o tamanho que deseja, aqui um link com o exemplo, lembrando que você pode fazer aquele esquema de diminuir e aumentar, não muito pra camada não perder muito a sua qualidade. Basta editar a parte do largura/width e altura/height, se caso o seu estiver em "centímetros" e não em pixels, basta apenas clicar na setinha apontada para baixo ao lado da primeira caixa e escolher a opção que melhor te agrada, como tudo que eu faço edito em pixels essa foi a minha escolha. Agora apenas clique em "ok".

 Lembram do esquema de fazer degradê com o fundo? Vamos fazer a mesma coisa nessa camada, pintar > e esfumar, digo, desfocar. Simples como o azul do céu. Agora essa dica é de ouro, vamos precisar jogar essa imagem pro nosso layout, pois agora assim podemos adicionar os efeitos que queremos. A dica é arrastar a janela da camada (essa com os dizeres 'untitled-1', -link- que acabamos de editar) pra algum lugar da sua tela, ir na sua camada (link) selecioná-la e arrastar até o nosso layout. APENAS. Eu juro que pra quem está começando agora isso parece um bicho de sete cabeças e que é muito passo pra montar algo tão simples, mas eu posso jurar que com o tempo essas dicas vão ficando cada vez mais automáticas e a manha se pega facilmente.

 Agora só precisamos começar a adicionar os efeitos, faça o mesmo que fizemos no passo 2 para abrir a janela de estilos de camada/layer style. Vocês já devem saber como funciona pra colocar a sombra interna, então eu vou ensinar agora só como colocar o padrão/pattern. Eu tenho alguns patterns instalados já no meu Photoshop, e vocês podem o encontrar no DeviantArt que é o rei das disponibilizações de utilitários para PS, amo as pessoas de lá com todo meu coração, é isso. Pra adicionar um pattern e fazer com que ele fique sobreposto você só precisa seguir os mesmos passos que eu, dessa forma. Eu ainda deixei de fundo um pedaço do nosso título para vocês verem como ficou, nesse caso eu ainda o editei por fora do layout, ou seja, eu ainda não o arrastei e tal, e você podem fazer o mesmo, apenas o arrastar depois de estar totalmente editado.

 Agora vocês repetem esse mesmo processo na sidebar. Simples:

 一 faça o retângulo > adicione borda > faça o título > adicione efeito no título > respire aliviado, brincadeira, mesmo assim respire, por favor.

 E assim iniciamos uma nova era no Peach Aesthetic. Eu não acho que poderia iniciar de outra forma a não ser trazendo um tutorial bem completo de como eu crio layout no Photoshop. Grande parte das minha edições vem de lá, então nada mais justo do que começar o ano de 2020 com um tutorial de edição. E pra quem ficou curioso de como essa belezinha ficou, vos apresento o resultado final. Eu fiz algo simples, mas bem trabalhado. Espero de coração que tenham gostado do resultado e que de alguma forma eu venha a ajudar alguém. Se a postagem não pareceu completa, ou te resta alguma dúvida não exite em me perguntar logo abaixo nos comentários. Eu terei o maior prazer em ajudá-los.

 Anjos, algum de vocês usam sites para monetizar links? Por exemplo, aqueles links que quando clicamos no link, se abre um anuncio e logo depois de 5 segundos +/- podemos abrir o link original da imagem, site, etc... E uma segunda pergunta, vocês achariam ruim se eu monetizasse alguns links das postagens? Eu estou tentando ganhar uma renda extra de alguma forma aqui pra casa, e mesmo que essa monetização seja pouca (devem ser uns 5¢ por link) faria uma baita diferença e me ajudaria muito com a situação aqui de casa. Se alguém souber algo sobre, eu vou agradecer infinitamente você. (os links dessa postagem não estão monetizados não se preocupem)