Fazendo um layout pelo Photoshop


Oi gente, tudo bem? Desculpem por estar postando menos do que antes, é por causa da escola. Além dela tirar o meu tempo, ainda tira a minha vontade de postar, juro que só estou postando por obrigação. Todo o dia eu tenho que me esforçar pra não dormir na escola, ontem mesmo eu estava com muito sono e dormi 18:00, acordei 21:00 e dormi de novo, acordei 1:00 e dormi 2:00 UHEHUE meu sono está totalmente desregulado, pois é. Acreditam que eu estou achando matemática fácil demais? Eu odiava, não sabia nada talvez pela professora que explicava super mal, mas agora veio um professor novo que está revisando algumas coisas do ano passado, e eu agora estou com muita facilidade ~tuts tuts qro ver~ parei. Outra coisa sobre a escola: Tá sendo uma delicia acordar cedo ( por enquanto é claro ), não sei, mas eu me sinto bem em dormir num horário vamos dizer "apropriado", e pensar que eu dormia a hora que hoje, eu vou pra escola (seis horas da manhã) HUEUHEU' Agradeço por vocês estarem lendo o post inteiro, sério (*ノ・∇・)ノ

Finalmente comecei a postar esse tutorial, cara, milhares de pessoas estão pedindo a codificação ( você que está entre esses milhares, tome cuidado, hoje não é a codificação para a tristeza de vocês q ). Na verdade, hoje o tutorial é de como fazer um layout pelo Photoshop que seja possível codificar, nunca faça algo em seu layout em PSD que não dê para codificar, nunca exagere e/ou passe dos limites, vá com calma q. O layout que eu fiz é bem simples, mas é só um exemplo mesmo das coisas que tem que ter para a codificação, o layout é esse (x) e ensinarei como faze-lo ou fazer um qualquer passo a passo, vamos ver? ~


Abra um arquivo transparente no Photoshop da medida 1220 de largura e 700 de altura aproximadamente. Agora, siga passo a passo todas as etapas. Recomendo que deixe toda etapa em um grupo, exemplo: (x)

O começo -qq

Primeiro de tudo: Crie sua paleta. Eu recomendo uma paleta de 3 cores no máximo. Essa é a paleta que eu fiz: (x). Em seguida você vai começar a escolher que cor vai usar em cada lugar, vamos começar com o background: Vou fazer ele desse rosinha da minha paleta, porém um pouco mais claro. Escolha também as cores do fundo dos posts e da sidebar, vou usar esse cinzinha. Mas agora que já escolhi, o que faço?  Pinte o fundo do arquivo que abriu da cor do background, e faça os quadradinhos simulando que sejam os posts e a sidebar. Caso não conseguiu, siga esse mini tutorial que eu fiz em prints q. (x) (x) (x) Meu resultado: (x)

Personalização do gadget e posts

Como vocês viram nessa imagem (x) os gadgets e posts estão personalizados com uma bordinha e uma sombra interna. Como eu já havia dito, faça apenas o que você pode passar para o blogger no photoshop, não invente coisas que não seja possível codificar. Então, como vocês sabem, é possível colocar borda e sombra interna nos gadgets/posts pelo HTML, então foi o que eu fiz, coloquei borda e sombra interna ( a partir de um style ). Quer o esse meu style? Baixe em psd aqui!

Faixinhas

Como eu amo por faixinhas em todos os meus lays, vou colocar faixinhas nos gadgets, no própio layout em PSD: Você só precisa criar um quadradinho no topo do gadget, e ir personalizando do seu jeito. Resultado.
Veja algumas faixinhas em PSD que eu fiz/postei para o Blog acessando aqui & aqui.

Fontes + Ilustração

Fontes: Sabia que é possível fazer isso pelo Photoshop? ( acho que sim né -q ) É bem simples: Escolha uma fonte que queira para os posts/sidebar, eu vou escolher a Tahoma. Junto com isso, você vai escolher uma cor  e o tamanho também. Agora, adicione uma camada de texto em cima dos gadgets/posts, coloque até uma sombrinha se quiser, quem sabe ASUHASUH'. E sobre a ilustração, você apenas precisa criar uma quadrado, aí você pega uma imagem, copia e cola no Photoshop, e sem seguida "cria uma máscara de corte", assim: (x) Isso ficou bem confuso então caso não entendeu, avise!. Resultado em geral: (x).

Header, faz quem quiser q

Bom, o header você faz do jeito que quiser, isso eu não vou ensinar porque o tutorial já está muito grande, é só um 'toque' de que é possível faze-lo pelo Photoshop e depois codifica-lo. Meu resultado final: (x)

É, acho que depois de tudo isso seu layout vai estar pronto pra ser codificado, mas isso é só no próximo post, tudo bem? Esse é o meu layout em PSD (x) caso vocês não conseguiram fazer, baixem o meu e modifiquem como quiser, só não esqueça dos créditos! Beijos e queijos e até o próximo post HUUHEEHUH ~

43 comentários:

  1. Helow, Helo! *piadinha fail -q*, seu tutorial foi de GRAAAAAAAAAAAAAANDE ajuda, muito obrigada, mesmo! Acho que consigo um layout decente agora -q
    Por favor, por favor, POR FAVORRRRRRRRRRRRRR poste logo a próxima parte do tutorial, ok? Estou ansiosíssima u3u
    Até logo,
    Wendy | checkm-ate.blogspot.com

    ResponderExcluir
    Respostas
    1. Helow UHEUHEUEHUH Pois é, poxa imagina *0* UHEUHE
      Vai ser no próximo post hihi :3 Amanhã ou depois de amanhã ><

      Excluir
  2. não conhecia o tuto helo ,mais axei ele bem dificil !!

    talvez seja porq eu nunca fiz !! ^^

    ResponderExcluir
    Respostas
    1. e deve q deu muito trabalho fazer uma explicação tão grande assim né Helo ^^

      Excluir
    2. Ah, não é difícil, sério. Você só está "desenhando" um layout pelo Photoshop para facilitar a codificação, mas você tem que ter uma certa experiência com o Photoshop, sabe? UHEUHE ah não muito q

      Excluir
  3. Não estou com ânimo para minha volta as aulas. Até agora o tutorial tá fácil, quero ver quando for codificar :v

    h-worlds.blogspot.com

    ResponderExcluir
    Respostas
    1. Te entendo UHEUHE mas é a vida né ç.ç Não é difícil não UHEUHE eu acho q

      Excluir
  4. Amei o blog, Se eu tivesse vindo aqui antes pegaria as dicas, acabei de criar meu blog, estava perdida, mas vou amar sua visita lá

    https://www.gemices.blogspot.com.br

    ResponderExcluir
  5. Gente que tudo, foi bom você ter avisado que precisa ser algo que possa codificar, fiz umas modificações no meu layout, agora só falta a codificação.
    Estou só vendo o problemas que vai ser quando voltar minhas aulas, eu odeio acordar cedo, acordo com uma mal humor que ninguém aguenta '.'

    Beijos Vices of life(clique)

    ResponderExcluir
    Respostas
    1. Que bom que te ajudou :3
      Eu achava que ia ser horrível acordar cedo, mas é gostosinho q sei lá porque, mijulgui q

      Excluir
  6. Eu estou louca para voltar a estudar, a antiga escola era algo que não ensinava quase nada então estou bem ansiosa. Enfim o tutorial é bem fácil no começo quero ver se o pessoal vai entender na parte da codificação ç.ç masok. Bom tutorial <3

    FH♡

    ResponderExcluir
    Respostas
    1. Então, por incrível que pareça, talvez pelos professores novos, ou porque estou falando menos ( pois é, sou uma mocinha quetinha agora q ) eu estou entendendo toda a matéria que não havia entendido ><

      Verdade UHEUHEUH obrigada <3

      Excluir
  7. Nhaa muito bom esse tuto 0/
    Meu amigo mega nerd disse que é bom fazer um lay assim pelo ps , pq fica mais dificil plagiarem , alem de ficar lindo *uu*


    Geekegirlie.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou :33
      Mega nerd UHUEUHEUH verdade '0' *u*

      Excluir
  8. Apesar de saber tudo o que você disse, eu gostei muito da explicação :-) Não sou muito fã de template psd, mas acho que vou fazer no próximo lay... Só acho...

    http://livedteen.blogspot.com/

    ResponderExcluir
  9. Mds Helô, ajudou muito esse tutorial, é um pouco difícil, tenho que admitir, mas não impossível de conseguir fazer.O jeito agora é tentar, errar, tentar de novo, errar de novo e...finalmente conseguir kk.O layout ficou lindo, adorei mesmo.

    Kissus ♡ | Paradise Kawaii

    ResponderExcluir
    Respostas
    1. Que boom *0* Ah, é que você tem que ter experiência com o Photoshop >< UHEUHE obrigada *uu*

      Excluir
  10. Vish, que chato :/ A matemática estava fácil no começo das aulas, mas agora eu já tô confusa (minhas aulas começaram dia 27). Enfim, adorei o tutorial, vou tentar fazer <3

    Visite o blog | Etc For Me ♥

    ResponderExcluir
  11. Eu estou louca pra voltar pra escola,ficar em casa ta ficando cansativo :/ Adorei o tutorial,ficou bem explicado! Eu até faria um layout pra mim no photoshop,mas eu to sem ele -q Em fim,ficou muito lindo o resultado final *-*

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Verdade né :s
      Obrigada *0* Ah, que pena :c Obrigada de novo *u*

      Excluir
  12. Adorei o tutorial, qualquer dia tento fazer >3< Estou esperando pela codificação ^^

    www.b-urning.blogspot.com.br

    ResponderExcluir
  13. Helo, estou vivendo a sua vida q. Tirando o fato de não conseguir dormir... Esta história de matemática está se repetindo comigo, acredita? Ano passado, eu não entendia absolutamente NADA do que o professor falava. E quando eu perguntava na tentativa dele retirar minhas dúvidas, o mesmo ficava irritado! Se não quer explicar/dar aula, fica em casa. Agora, um novo professor apareceu para me salvar, gente, que sorte.

    Adorei o tutorial! É bem difícil e fácil ao mesmo tempo, AUHSAUH' q.

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
    Respostas
    1. SAUHSAUHSAUH nossa o.o Pois é, esses professores, tinham que gostar de matemática ç.ç q. Eu estou achando tão fácil *0*

      Que bom *u* Pois é HUEUHEU

      Excluir
  14. Muito obrigada por postar, Helo! Você é um amor de pessoa, espero que não deixe de blogar por causa disso. Amo muito o seu blog!
    Beijos!
    Garota Insana // Visite :3

    ResponderExcluir
  15. Amei o tutorial,vou tentar fazer assim num lay free.Percebi que você está comentando no meu blog fico muito feliz,eu admiro muito seu blog é muito lindo por isso eu queria pedir afiliação,aceita?
    cherrykawaii-14.blogspot.com.br
    Beijos <3 flor

    ResponderExcluir
    Respostas
    1. Que bom *0* Tente sim q
      Awn, que fooooooofa! Eu aceitaria com toda a certeza do mundo UHEUHE mas as vagas fecharam :c Se não fosse por isso, eu aceitava, pois assim como você ama meu blog eu amo o seu *u*

      Excluir
  16. Awwnt' Adorei esse layout, me deu uma calma <33 Muiiito obrigada por ensinar a fazer isso. Sempre procuro um bom tuto, mas nunquinha acho ^^

    Beijos, http://diamonds-of-sugar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awwwn que bom *0* UHEHUE sério? Bom, fico muito feliz que gostou :33

      Excluir
  17. Minhas aulas voltam segunda-feira. Não estou com vontade nenhuma. Eu estudo de tarde então, meu tempo vira uma merda. kkk' Mas bem, eu sempre achei matemática fácil. Não sei se esse ano vai ser fácil (sétima série, oitavo ano) ou não mas, tenho certeza que vou conseguir (se eu não conseguir também, minha mãe corta meus pulsos -q). Em que série/ano você está?
    Eu simplesmente adorei o seu tuto. Fui uma das que pediu na sua ask. Estou ansiosa para chegar a parte da codificação. E, outra, tu tem um talento do caramba para mexer no PhotoShop, hein flower! Hahah

    Beijos,
    Nerd Com Chiclete - Nerd Absoluta.

    ResponderExcluir
    Respostas
    1. Viiiishe :s Eu por incrível que pareça estou preferindo estudar de manhã o3o SÉRIO? SCR EU QUERIA SER VOCÊ ç.ç Estou no oitavo ano UHEUHE :3

      Awwwn *u* UHEUHE que legal! Awn, imagina que eu tenho, darling q <3

      Excluir
  18. Vou tentar fazer <3 Ficou bem explicadinho !
    Beijos | Vanity Candy

    ResponderExcluir
  19. Estou muito ansiosa pelas minha aulas, vou estudar pela manhã (como sempre! ) É muito bom estudar de manhã!

    Ahh amei o tutorial, posta logo a segunda partee! AHSUAHSUA'

    Beijos!

    www.simplekawaii.tk

    ResponderExcluir
  20. AMEI,AMEI,AMEI,tava querendo esse tuto ja vou fazendo meu layout no photoshop,ai to esperando a codificação,ta Heloo,bjs sucessos.
    Monster Stay

    ResponderExcluir
  21. Muito bom esse tutorial, o seu ficou muito bom, mas o meu eu achei que ficou uma porcaria.

    Sweet of Cherry

    ResponderExcluir
    Respostas
    1. Que bom que acha :3 Poxa :c Isso depende da experiência com o photoshop :/

      Excluir

Regras:
-Aceito críticas, porém, comentários ofensivos/maldosos serão apagados.
-Não aceito mais: Seguindo, segue de volta?
-Coloque o link de seu Blog no fim do comentário, é garantido que irei visita-lo e dependendo do conteúdo, até posso segui-lo :3
-Comente a vontade!