como crio layouts #2 – faça um lay comigo

 Yikes! Peache, como vai você? Alguém aqui sentiu minha falta? Eu sei que não dou as caras aqui faz um bom tempo e como de costume eu sempre apareço inesperadamente pra dar o ar da minha graça. Acontece que dessa vez eu não sumi por qualquer motivo bobo, na verdade deu ruim família. Primeiramente, saudades <3 Segundo, gripei! Eu estava 70% em um dia e no outro já acordei não me sentindo muito bem. Estou quase sarando da gripe, graças ao bom Pai eu não tive sintomas de covid já tive corona 1 vez e foi uma experiência péssima. No segundo dia, que alias era o dia em que eu tinha já pronto parte do conteúdo de uma postagem, eu resolvi deitar a descansar o máximo que eu conseguisse. Pra quem não sabe eu tenho uma saúde mental bem ferrada pra não dizer outra coisa e grande parte do meu dia eu estou desanimada, então quando essa gripe começou eu fiquei 5x mais pra baixo e dominada pela fadiga.

 Nesse meio tempo eu não fiz nada produtivo e sinceramente nesses últimos 5 anos eu não tive muitos momentos em que me senti verdadeiramente produtiva. Passei meus últimos dois meses em um limbo tremendo onde meu único ponto de paz e alegria era a internet, por mais que eu queira ~e eu quero~ ainda não consegui dar aquela volta por cima em que todo mundo diz ser só "correr atrás", minha mente ainda está negativa sobre tudo e todos. Eu tentei diversas vezes fazer coisas que me animassem mas falhei, de novo, já que grande parte do tempo eu estive chorando. BUT pelo menos eu tentei fazer algo além de quebrar a cara.

 Caras, nesse meio tempo eu fiz algumas mudanças pequenas no layout do blog e como eu estava com muito tempo livre também resolvi finalmente abrir o portfólio do blog, caso tenha interesse em rever os antigos layouts do blog você pode clicar aqui e ir direto pra ele. Ele ficou um amorzinho e deu muito trabalho pra ficar pronto, então por favor deem muito biscoito pra ele aqui nos comentários. 

 Como prometido chegou a parte 2 de como eu crio os meus layouts e dessa vez eu resolvi refazer do zero um layout com vocês. Antes de iniciarmos preciso pedir que por favor não copiem o layout na intenção de se inspirar ou de pegá-lo para si, eu demoro muito tempo pra criar algo novo e eu fiz esse layout especialmente pra essa postagem. Como vocês sabem tudo o que eu faço carrega um sentimento muito forte dentro de mim pois criar é algo que me faz bem em diversos sentidos diferentes. Caso precise de ajuda com algum layout eu terei o prazer em te ajudar, essa é apenas a parte 2 e prometo que vou trazer mais partes daqui pro final do ano. Eu só demorei um pouco pra aparecer porque realmente não estava passando por um bom momento.

 Outra coisa, eu coloquei no título "refaça comigo", mas o resultado final é completamente diferente da base, ou seja, só finjam que não notaram esse meu desequilíbrio. Esse layout provavelmente vai ser passado pra frente e eu tenho duas ideias na cabeça sobre isso (1) disponibiliza-lo como free ou (2) modifica-lo para alguém. Nessa segunda opção eu também pensei em entrar em contato com a pessoa por meio de alguma rede social pra conversar sobre cores, como seria menu, mudar o tema e etc... Um layout totalmente exclusivo pra pessoa e óbvio já em HTML.

 Eu prometo que esse é o último recado ~ou não. A única coisa que eu preciso dizer é que esse NÃO é um tutorial de como usar o photoshop, ou seja, eu apenas expliquei tudo bem por cima. Pra quem tiver interesse em saber como eu crio essas coisinhas todas cheias de tons pastéis e da onde surge os resources que eu uso vai ter que esperar os próximos posts, pois provavelmente na parte 4 eu comente sobre. E sim a parte 3 é de como eu codifico <3 a parte que eu mais odeio, mas Deus conhece a nossa índole. 

(++) clique na imagem para visualizar o nosso "layout base" em tamanho real

 Antes de tudo vamos conversar um pouco sobre essa "base". Esse layout foi feito pra ser usado no blog, mas como vocês já sabem eu sou bem chata quanto aos layouts que eu trago pra cá e esse foi um dos que eu simplesmente coloquei aqui e me arrependi semanas depois. E por este motivo, e outros, eu decidi que iria refazer ele totalmente. Vale lembrar que eu já tinha refeito ele dias antes de começar esse post e agora só estou mostrando pra vocês o passo a passo.

passo 01 – escolha ou faça uma paleta de cores para usar durante a criação do seu layout

  Esse por mais que simples é um passo que eu sempre pulo e isso só complica a minha vida. A escolha prévia das cores vai te ajudar a fluir melhor durante o processo de criação. Um bom exemplo é o nosso layout base que tem cores que particularmente não me agradam por não combinarem uma com a outra. Dessa vez indo contra a minha mesmice eu decidi usar tons terrosos (e sim eu pensei bem em voltar atrás e recomeçar o layout com tons pastéis):

 Choquei um total de quantas pessoas agora?! Essa paleta é baseada no photoshoot de Hot Sauce (versão Chilling Jalapeno + Boring Jalapeno) do grupo e unit NCT Dream e as imagens usadas dele foram pegas do DB Kpop (link). Tirando a cor verde, marrom, laranja e roxa, também vamos usar bege e cinza no fundo e em alguns detalhes.

passo 02 – comece a fazer o rascunho em um papel ou já no seu editor

  Com as cores já escolhidas já podemos partir pro nosso arquivo. O editor que eu uso pra fazer todas as minhas edições é o Photoshop CS6 e as vezes eu passo alguma imagem pro PhotoScape caso ela esteja dando erro no PS. Na maioria das vezes eu inicio o arquivo com as resoluções da tela do meu notebook (1366px) pra facilitar caso eu precise ter noção de espaço coisa que normalmente eu não tenho. 

 Com o arquivo criado, agora é a hora crucial de começar a rascunhar. Esse parte eu também pulo, confesso. Eu sou o tipo de pessoa que já começa fazendo um retângulo, colocando imagem, texto e repetindo esse processo até conseguir uma sidebar/box bonitinha, mas como isso aqui é um tutorial vou fingir costume e dizer pra vocês fazerem um bom rascunho antes de sair inventando. PS.:: Vale lembrar que esse rascunho que vocês vão ver foi feito em cima do nosso layout já refeito, por isso cada área já está bem bonitinha ~na vida real eu fico inventando por horas até chegar em algo.

(++) clique na imagem para visualizar o rascunho em tamanho real

 Nesse rascunho eu fiz apenas três coisas. A primeira foi escolher alguma cor sólida pro fundo, um cinza bem clarinho. A segunda foi fazer os retângulos com a opção rounded rectangle tool (retângulo arredondado), vale lembrar que eu arredondei apenas 1px deles porque o fundo (branco) e a borda das colunas/sidebars (cinza) a gente faz aqui no HTML mesmo. A terceira foi colocar as bordas em volta dos retângulos com um cinza mais escuro que o fundo mais claro.

 Nesse passo algumas pessoas usam a régua e as grades do próprio PS pra alinhar tudo (caso você não saiba onde encontrar e/ou como usar essas opções leia esse tutorial da própria Adobe). Eu parabenizo quem é acostumado a usar a régua pra alinhar o layout, eu uso apenas no meu currículo e olhe lá. Nos layouts eu vou sempre pro lado mais noob de todos, tudo que eu faço é criar um quadradinho com os pixels necessários pra espaçar as camadas, ou seja, se eu preciso de 10 pixels de distância de uma área pra outra eu uso um quadradinho de 10x10. E sim eu sei que eu sou a definição de stonks noob.

 PS.:: Caso você tenha um tamanho fixo de ilustração e/ou sidebar, aconselho que já faça o rascunho pensando nisso, faz o teste com uma ilustração, coloca um print da sua sidebar pra fazer a medida e etc... Isso vai te livrar de uma dor de cabeça enorme daqui pra frente, vai por mim.

passo 03 – edite o cabeçalho à sua maneira

 Na verdade você pode começar por onde achar melhor, não necessariamente precisa ser pelo cabeçalho. Dessa vez eu optei por fazer um cabeçalho simples, sem menus e etc, apenas uma imagem, como você pode ver na preview:

(++) clique na imagem para visualizar como ficou o header em tamanho real

 Novamente o tema do layout são os teasers de Hot Sauce então tudo o que eu fiz foi escolher uma imagem que ficasse legal pro espaço que eu separei pro header. Essa imagem não estava no post do DB Kpop, então eu fucei um pouco o Google Imagens e encontrei essa. Mais uma vez eu usei o esquema do quadradinho pra fazer essa borda e deixar a imagem alinhada. Tem diversas maneiras de você fazer um header e caso tenha certa dificuldade nesse passo eu posso trazer uma segunda parte dessa postagem explicando melhor como eu faço os meus. Tudo depende do que você irá fazer, se ele vai ser apenas uma imagem (como no nosso exemplo), se vai ser o título do seu blog, se vai pegar só a parte da sidebar, se vai ser grande ou pequeno, enfim, isso quem delimita é você e a necessidade do seu blog.

 Agora sim vamos começar a falar sobre cores. Eu fiz esse header depois de já ter finalizado o restante do layout então eu já tinha uma ideia maior do que eu queria, depois só precisei editar mais algumas coisinhas. Como já visto lá em cima eu tinha 4 opções de cores e pra diferenciar um pouco do restante do layout eu decidi que a borda poderia ter todas elas, afinal um degrade que mal tem? Como vocês sabem eu costumo colocar uma textura em tudo e nesse header eu precisei me segurar pra manter apenas o degrade. (+aqui um exemplo da borda com overlay, ata que eu ia me segurar sem ver como essa borda ficaria com textura, até parece que vocês não me conhecem)

 Ainda sobre cabeçalho e essa parte você pode simplesmente pular se quiser. Como na nossa base tinha aquele espacinho da data do post eu resolvi trocar ela por um box abaixo do header com uma parte de Hot Sauce. E esse é o resultado:

(++) clique na imagem para visualizar a frase em tamanho real

 AHH, fica um amor não é mesmo? Eu já coloquei pedacinhos de algumas músicas em dois dos meus layouts o "Secret Story of the Swan" e o "Take it! I'm your angel", é aquele tipo de coisa que sempre encaixa naquele espaço vago que você não faz ideia do que colocar. Por ser bem simples eu resolvi colocar uma textura bem clarinha ~sim, eu não consigo criar algo sem tacar textura, a falta dela me faz achar as coisas vazias demais.

passo 04 – editar a área da postagem, data, ilustração e etc...

(++) clique na imagem para visualizar o título e data em tamanho real

 Com o rascunho feito tudo fica bem mais simples e a partir daqui tudo é questão de alinhamento e paciência da nossa parte. Seguindo a paleta de cores e também as margens, agora é hora de criar o nosso título, a data é opcional e é algo que eu não coloco em todos os meus layouts, mas como na base tinha eu resolvi mantê-la e apenas mudar a sua posição pra não bater muito com a frase e ficar muita informação. Na data e título eu usei laranja e marrom e pra não passar em branco usei a mesma textura que usei na frase.

 PS.:: A fonte é outra coisa que você vai editar apenas no seu código, então não invente muito nela e nem no fundo do título, evite degrades caso queira colocar shadow/sombra nas letras, pois pra editar depois não fica nada fácil. 

(++) clique na imagem para visualizar a ilustração em tamanho real

 Sim eu fiz mais uma colagem e por favor não me perguntem o por quê. Eu já tenho um tamanho fixo de ilustração que é de 600px de largura e como dito anteriormente o nosso espaçamento/acolchoamento/padding/margem é de 10px, então tudo que eu tinha que fazer é criar mais um retângulo seguindo alinhamento (mas isso depende de como são as suas ilustrações, óbvio). O estilo de ilustração que eu uso é "larguinha", mas você pode criar a sua com o formato que mais te agrada, ou até mesmo não ter uma, são infinitas as opções e tudo é questão de criatividade e paciência.

passo 05 – agora vamos partir para a construção dos gadgets e das colunas

 A partir daqui é onde eu costumo ter menos criatividade, então o que vocês vão ver daqui em diante é um marco histórico porque SIM eu consegui mais uma vez sair da mesmice e fazer algo diferenciado. ~clap clap nos comentários, gracias. 

(++) clique na imagem para visualizar a coluna da esquerda em tamanho real

 Vamos começar com a coluna da esquerda. O primeiro gadget é de boas vindas, com imagem dentro do quote, texto e o menu. O segundo é do menu com os marcadores. O terceiro é o status do blog, ali você pode colocar uma agenda das próximas postagens, informações do blog ou informações sobre você. Já o espaço em branco foi só pra preencher espaço mesmo.

 Um PS.:: esse segundo gadget aconteceu sem querer, mas por lembrar muito os gadgets coloridos da Anilyan (do Forever Sapo, Chuva de HTML e etc... ~Deus, que saudade desses blogs :c) eu resolvi manter ele com o fundo verdinho.

(++) clique na imagem para visualizar a coluna da direita em tamanho real

  Na coluna direita eu fiz o mesmo esquema, só que como vocês podem notar eu não finalizei. O legal de criar um layout primeiro pelo PS é que você pode inventar muita coisa e ir jogando fora aquilo que não deu certo, pra só depois codificar ele. No gadget de about me ~aka bonjour, je suis Océane, eu troquei a posição da imagem – agora fora do quotezinho – e também as cores do menu. E é sobre! Daqui pra frente é só focar no que você já criou e ir seguindo a mesma estética e cores, pensa bastante no que você precisa, no que quer e usa toda a sua criatividade. 

 Ahhh! Felizmente chegamos ao fim do tutorial, but antes de finalizar eu preciso conversar com vocês sobre uns pontos. Primeiramente, agradeço a paciência de quem conseguiu acompanhar até aqui, você é um ser de luz! Segundo, esse post foi um resumo, ou seja, a minha vida criando layout pelo PS não chega nem perto de ser esse mar de rosas, eu fico semanas pra começar um template que eu realmente goste e sinta que vai ser aquele, então não se encante com esse post e caia do cavalo achando que eu consigo e você não, acredite todos estamos no mesmo barco. No que eu puder te ajudar eu estarei aqui, como eu já disse nunca fiz curso ou estudei a fundo, então o que eu sei é aquilo que aprendi sendo curiosa.

 Agradeço por estarem aqui ainda mais depois de uma postagem tão grande. Daqui a pouco eu apareço no blog de cada um retribuindo a visita e o carinho, só não apareci ainda pois fiquei todos esses dias bem mal. Ah, na ilustração é uma das integrantes do (g)-idle, eu não faço ideia de qual seja o nome dela pois não acompanho muito os grupos mais novos de kpop, pra ser mais sincera não tenho acompanhado nem os antigos, quem direi os novos. Até a próxima bebê, se cuida <3  Caso encontre algum erro no portfolio me avisa anjo aaa eu não tive tempo de pedir pra alguém :(