03 junho 2015

#TutoriaisDaJaque: Fazendo meu Layout #2

 BOOOOOA NOITE, tesudos da Jaquuuue õ/
 Hoje é dia de "Fazendo meu Layout Parte 2".

 Irei ensinar como fazer a base do Layout usando o PhotoShop CS6. Eu recomendo muito o uso do PS para fazer qualquer coisa. Vou confessar aqui que eu não me dava nada bem com o senhor PS, baixei ele há uns anos atrás e não sabia mexer em nada então desisti mesmo sabendo que ele é o #TheBest. Resolvi dar mais uma chance a ele e não me canso de dizer: Por qual motivo eu não gostei dele? Gente, ele é o melhor para tudo, não sou expert em PS mas todos os dias eu do uma fuçada para poder aprender cada vez mais.
 Fiz um post aqui no blog (clique aqui para ver) e nele coloquei o link da onde eu baixei o Photoshop!

 1. Como coloquei na imagem, abra o Photoshop dê CTRL + N e irá abrir a janela na primeira imagem. Essa parte é bem delicada pois existem vários modelos de monitores, tablets e celulares então se você fizer uma imagem muito grande, ou muito pequena, talvez não se adapte ao seu monitor. Recomendo que a imagem seja na largura de 1000px ou 1500px. A largura pode ser o tamanho que você preferir. Recomendo que você faça seu logotipo bem no centro da imagem.

 2. Para fazer o Cabeçalho de nosso blog eu utilizei o efeito aquarela, ensinei como usar neste post. Selecione a letra no teclado e escreva o nome do seu blog ou o que mais você preferir, esse será o nosso Header (Cabeçalho). A arte do cabeçalho vai do gosto pessoal de cada um. 

 3. Dê Shift + CTRL + S e salve a imagem em dois formatos. Um em .PNG e o outro em Photoshop (*.PSD;*PDD). É muito importante que você salve em formato Photoshop (*.PSD;*PDD) para que caso você queira alterar algo futuramente você não tenha que começar tudo de novo!
 Clique em abaixo em "Mais informações »"

 4. Abra um novo arquivo CTRL + N e abra uma imagem 1500px x 610px. Será necessário separar a imagem em seis partes: cabeçalho, rodapé, sidebar, área das postagens, background e menu fixo. Como vocês puderam notar na imagem acima, eu utilizei a ferramenta de régua do PS para que tudo ficasse de um tamanho certo e organizado.  
 Gente, isso é muito importante para que quando você estiver editando o HTML/CSS do seu blog você já saiba o que deseja em seu Layout. 

5. Então abra a imagem do header que você fez e cole nessa imagem (CTRL + A, CTRL + C, cole na base do Layout CTRL +V), basta você ir adaptando tudo do jeito que vocês quiserem, coloque tudo o que você quiser que tenha na sua Widget, área das postagens, rodapé...

 O nosso Blog ficará assim:

  Disponibilizei o link para download do Arquivo completo no Midiafire. No arquivo contem tudo separadamente o que contem na imagem acima. Apenas peço que caso você queira usar os materias coloquem os créditos.

Estou editando todos os posts de tutoriais aqui do OAB ♥ 04.01.2016 





11 comentários:

  1. Jaquee! Estou completamente apaixonada nessas personalizações que você fez no seu layout! Lindo demais ! E sobre os #TutoriasDaJaque não vejo a hora de ver os outros posts, um beijão!

    ResponderExcluir
    Respostas
    1. Kaaaaaaaaay, suua lindooona <3
      Você que me deu essa idéia de criar essa série aqui no blog, lá no começo do ano (ou foi no final do ano passado?) kkkk
      Muito obrigada viu? Semana que vem sai mais tutoriais ;)

      TrêsBeijoooos :***

      Excluir
  2. Que blog lindo <3
    Estou acompanhando o tutorial e estou AMANDO!
    Posta logo a 3º parte ;) <3
    Beijooosss

    ResponderExcluir
    Respostas
    1. Obrigada pelo carinho <3
      Essa semana sai a parte 3, fica de olho ;)
      três beijoos :***

      Excluir
  3. Geeeente, para tudo isso aqui! Estou amaaaando o seu blog. Além de lindooooooo, está cheio de tutoriais que estava necessitando ♥ hahahh Esse do efeito aquarela e do PS 6 , é tudo que eu precisava hahaha. Ameeei de paixão *-*

    http://primaveraconstante.blogspot.com

    ResponderExcluir
    Respostas
    1. Thais, hahaha MUUUITO obrigada por gostar do meu cantinho, cada vez mais estou fazendo coisas para ajudar vocês.
      Que bom que serviu para você, lembro que eu vivia procurando como fazer mas nunca encontrei ninguém para ensinar.
      Três super beijos para você <3

      Excluir
  4. Jaqueee, amei!
    Sou super curiosa pra aprender como montar um blog do zero! Já vi vários tutoriais, mas as pessoas deixam de postar rs
    Não deixe de postar, viu? Tô acompanhando tudo e vou montar o meu *-*

    Beijos!
    Eu Rabisco ♥

    ResponderExcluir
    Respostas
    1. Deyze, obrigada pelo comentário *o*
      Não vou deixar de postar não kkkkkk me dá uma raiva quando eu começo a acompanhar e a pessoa para, não vou fazer isso com vocês <3
      Monta siiim e depois vem aqui e me mostra *o*
      Três beijos, lindaaa

      Excluir
  5. Você está me ajudando muito, obrigada de verdade!! Eu tenho uma duvida, eu to pensando em começar um layout com ajuda desse tutorial ( fazendo meu layout 2), e pegar algumas imagens do outro layout( o pra colorir) que você disponibilizou ,colocando os créditos daqui no rodapé,mas antes queria pedir sua permissão e se não puder eu não faço. Beijos!

    ResponderExcluir