Layout pelo Photoshop: Codificação #1


Oi gostosos amados da dona Heloísa q Tudo ok? Eu estou derretendo, e vocês? Espero que não, é claro ç.ç A escola está sendo legal, mas assim, eu até falaria o motivo pra enrolar a introdução e etc. Mas, eu realmente não sei o porquê de estar sendo legal. Primeiro: Acordar cedo é chato. Segundo: Eu não conheço quase ninguém. Terceiro: Está tirando minha inspiração e a vontade para postar. O que tem de bom nisso Heloísa? Eu não sei gente UHEUHE. Mudando de assunto como sempre, eu tenho picolés aqui e vocês não ~chupasociedade q Não, não é esse o assunto HUEUHE o assunto é: Eu provavelmente irei começar a postar a cada 3 ou 2 dias, devido ao tempo e pela inspiração também. Mas eu continuarei respondendo e retribuindo os comentários normalmente, é claro. Estou muito feliz pois já tem bastante gente usando os layouts que eu postei, vocês lembram? Saber que gostam dos meus lays é tão perfeito, vocês são perfeitos, me beijem dlçs (∪3∪). Estou anormal hoje, então é melhor você pular para o próximo parágrafo.

Aleluia, aleluia ♫♪ ~Lembrei de Shrek~ Pois é, depois de um milênio, sete séculos, duas décadas e cinco anos o tutorial mais esperado do ano q. Eu aposto que muitos não irão entender, e talvez alguém daqui já viu um tutorial de codificação que não tenha nada a ver com o meu. Bom, eu nunca vi um tutorial então esse é apenas o meu jeito, e que funciona ( eu espero ). O mais importante de tudo: Nesse tutorial é uma simulação de codificação, eu estou codificando aquele meu layout que fiz em PSD pra vocês entenderem o que é codificar. Trouxe junto a isso, códigos para te ajudar na codificação. Finalmente vamos ver? (●ω●☆)



Bom gente, nesse tutorial irei ensinar como codificar tudo o que eu fiz no layout, qual é o segredo? Você apenas personaliza o seu layout com os "dados" do layout em PSD. Cara, isso é super simples, se pensar bem! Por exemplo, os códigos principais como a cor do fundo dos posts/sidebar, borda, cabeçalho, fontes, você irá passar para o Blogger, e como? Mágica/download? Nunca, jamais! Você só irá personalizar o seu layout com tudo igual ao lay em PSD, não tem nenhuma mágica gente, é simples! Veja como eu fiz tudinho:

Codificando o post e sidebar

Bom, vá em seu HTML e pesquisa por ]]></b:skin>. Acima dessa tag cole esse código abaixo:


.post-outer {
background: #ededed;  /* cor do fundo, que você colou no bloco de notas */
border: 1px solid #ffc4c4 ;/* cor da borda */
box-shadow: inset 0px 5px 15px #c6c6c6; /* cor da sombra interna */
}
.sidebar .widget {
text-shadow: 0px 1px 0px #fff; /* cor da sombra do texto */
font-family: Tahoma; /* fonte da sidebar */
font-size: 11px; /* tamanho da fonte */
color: #a6a6a6; /* cor da fonte  */
background: #ededed;  /* cor do fundo */
border: 1px solid #ffc4c4 ;/* cor da borda */
box-shadow: inset 0px 5px 15px #c6c6c6; /* cor da sombra interna */
}

Agora, você apenas precisa substituir os códigos por os de seu lay. Por exemplo, a cor do fundo, cor da borda, com da sombra, tem que ser todas iguais a de seu layout para ficar tudo parecidinho. Como eu posso saber qual é o código de cor de tudo que fiz?  Com essa ferramenta (x) capite a cor de tudo: Background, da bordinha, e da sombra interna. Agora clique duas vezes aqui (x) e irá abrir essa janelinha (x), e então, você copiará o código que eu apontei com a setinha, esse é o código da cor. Agora, é só substituir as cores do código que passei, por todas as do seu layout. Não é um tutorial ao certo, você tem que passar tudo de seu layout para códigos, entendeu? É realmente difícil de explicar :s

EXPLICAÇÕES:

Todos os códigos a partir de .post-outer { até fechar a chave } é da personalização dos posts. Já os códigos dentro de .sidebar .widget { até fechar a chave } são da personalização dos gadgets.

background: A cor do fundo, tem que ser igual a do seu layout.
border: 1px solid: Borda, 1px é a grossura dela, e solid é a linha reta. Caso a do seu layout for pontilhada é dotted, e tracejada é dashed.
box-shadow: É a sombra dos posts, esse "Inset" é porque ela é interna.

Agora, vamos personalizar o texto dos posts. Pesquise por /* Posts, e abaixo dele cole esse código:

.post {
text-shadow: 0px 1px 0px #fff; /* cor da sombra do texto */
font-family: Tahoma; /* fonte do post */
font-size: 11px; /* tamanho da fonte */
color: #a6a6a6; /* cor da fonte  */
}

Text shadow é a sombra do texto. Caso não tiver, apague essa linha.
Font-family é o nome da fonte. Você irá substituir "Tahoma" pela fonte que escolheu para o texto dos posts
Font-size é o tamanho da fonte e color, a cor.

Esse foi apenas o comecinho. Meu resultado: (x)


Codificar o Background

Abra um arquivo em seu Photoshop em qualquer tamanho. Agora, pinte-o da cor de seu background e salve em png. Agora, hospede em algum lugar (x). Em seguida, vá em seu HTML e procure por: body {, você vai achar mais ou menos isso:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

Substitua o trecho destacado por esse código:

background:  url('COLE O LINK DO BACKGROUND') fixed repeat top left;

Você vai colar o link do background hospedado entre os dois parênteses ( ).  Meu resultado: (x)

Codificar Ilustração

É bem simples: Você apenas precisa cortar sua ilustração (x) e depois transforma-la em PNG. Depois disso, é só hospeda-la em algum site (x) e usar como quiser. Caso ela ficar desalinhada use esse tutorial (x) :3

Fim da primeira parte + explicação das dúvidas

GEEEEENTE, quem tiver confuso, eu só passei cada dado do lay em PSD para o blogger, como cores/background/ilustração. Aí, quando for "passando", ele vai ficando igual ao layout em PSD. RESUMINDO: Tudo o que fiz agora, foi personalizar um layout normalmente, porém eu personalizei de um modo que fique igual o layout em PSD, ou melhor, passando tudo dele para os códigos. Mas é claro, o resto da codificação é apenas no outro tutorial.
Meu resultado: (x)

62 comentários:

  1. Adorei o tutorial, estou esperando pela próxima parte >33<

    www.b-urning.blogspot.com.br

    ResponderExcluir
  2. Nossa , achei que era tão complicado , mais é muito fácil . Embora não tenha muita paciência de mexer nessa área do Photoshop , vou experimentar fazer um layout por lá. <3

    Um beijo meu , Miih . <3
    Visita ? | Colorful Rainbow

    ResponderExcluir
    Respostas
    1. Sério? Ai que bom! Achei que iriam se complicar :3 Experimente sim, vale a pena *u*

      Excluir
  3. Helo, nunca pensei que fosse tão fácil! Ok, eu nem li ainda, só estou comentando porque certamente eu vou sair daqui sem comentar q Sério, todos deviam seguir seu blog de tão mara que ele é <33
    Beijos
    Garota Insana // Visite :3

    ResponderExcluir
    Respostas
    1. *0* UHEHUEHUEUH Espero que você ache fácil -q
      Awwwn, não me deixe sem graça >3< ~abraçando~

      Excluir
    2. Helo, eu entendi tudo e e está ficando perfeito! Queria avisar também, que mudei a url do blog. Agora é http://g-insana.blogspot.com.br/
      O nome é o mesmo, apenas encurtei ^^
      Beijos

      Excluir
  4. Isso também aconteceu comigo, a escola tira a vontade de postar :/ Adoro a escola :3 HAduahduahdauhduada, é sério. Enfim, aqui não está calor não. NORDESTE <3 Ok, adorei o tutorial. A cada 2 ou 3 dias? NÃOOOOOOOOOOOOOOOOOOOOOOOOO! É O FIM DO MUNDO. AHdaudhaudhuadhaudhad, tudo bem, eu entendo.

    Visite o blog | Etc For Me ♥

    ResponderExcluir
    Respostas
    1. Que raiva né :c Eu também estou adorando UHEUHEUH sortuda!
      Fico muito feliz que gostou Karla <3 UHEUHE awwwwwn *u*

      Excluir
  5. Cara, isto acontece contigo também? Meu Deus, não sou a única q. A escola anda tirando toda a minha vontade de postar e inspiração! E o pior é que está sendo legal, IAUHSAUIH' :3 Adorei o tutorial! É bem complicado, mas explicaste muito bem! ♥

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
    Respostas
    1. Estamos em uma situação totalmente igual UHEUHEUHEUH
      Que bom *3* Muito obrigaaada <3

      Excluir
  6. Adorei, talvez eu faça um lay no ps. Outra, o GR voltou <3 Esperando sua visita, tá?
    http://golden--resources.blogspot.com.br/

    ResponderExcluir
  7. Esse ano pra mim vai ser muito difícil postar, ninguém merece estudar o dia todo. Nunca pensei que fosse tão facinho codificar, pelo menos até aqui tá fácil haha, ansiosa para segunda parte <3

    h-worlds.blogspot.com

    ResponderExcluir
    Respostas
    1. Pois é, awn :c É a vida q
      Aaaah que bom que achou fácil, me sinto bem melhor *3*

      Excluir
  8. Estou derretendo aqui.É frente do ventilador 24 horas.
    Eu moro em cima de um sorveteria kkkkkk
    O tutorial é muito bom!
    Obrigada por postar ele.
    Minhas aulas não voltaram ainda (graças) mas está chagando o dia.
    Espero que tenha muitas inspirações!!!

    Sarang Cute!

    ResponderExcluir
    Respostas
    1. Somos duas UHEUHEUH'
      TROQUE DE LUGAR COMIGO AGORA, SEM TEIMOSIA qq
      Que bom que acha, e imagina! <3

      UHEUHEU que sorte, eu acho q
      Obrigada :3 UHEUH

      Excluir
  9. HAHA , ainda to de férias bleeeee ~~agoraeudeinacaradasocicedade~~
    E eu tenho picolés aqui *uu* 0/
    Onde voçe mora? pq aq em Salvador choveu , tava mto frio e.e
    Cara como voçe explica bem *uu* ,meu proximo lay vai ser todo pelo ps . Serio mal coloquei o novo lay ja to pensando em outro? serio? uhuathuht , cuidado vio Helo acho que isso pega kkk.


    Geekegirlie.blogspot.com || G² Official

    ResponderExcluir
    Respostas
    1. Sambou apenas com duas frases ç.ç UHEUHEUH
      Limeira/SP, ai que inveja, sambou com três :c

      Awn, sério? *0* Espero que dê tudo certo UHEUHEUH' Eu sempre faço isso :c Eu já tenho isso ~tuts tuts~ q

      Excluir
  10. Aqui tá muito calor também, e não é só você que tem picolés, eu também tenho e sorvete também muahahaha #chupa Adorei o tutorial :33

    Unskilled

    ResponderExcluir
    Respostas
    1. Aceito sim afiliação, já te coloquei na elite. Depois eu passo aqui pra conferir!

      Excluir
  11. Q bom q esta tudo certo na sua escola fico feliz por isto : p

    .Não parece tão dificil assim,estou começando a entender >.< vc explica muito bem viu dona Helo sz


    kissu || {Temos novidades}

    ResponderExcluir
  12. Eu também já estou começando a derreter! AHSAUSH'
    Mas é verdade, a escola tira a vontade de postar, não sei porque, masok.

    O tutorial está sendo super fácil! Uhull! Não vejo a hora da próxima parte! :3

    Beijos!

    www.simplekawaii.tk

    ResponderExcluir
  13. To aprendendo aos poucos, obrigado por estar ensinando *-*

    http://www.heltonnunes.com/

    ResponderExcluir
  14. Está tudo muito kawaii,
    parabéns *~*
    Realmente é preciso saber mexer em PS
    coisa que eu não me ajeito :P

    Convido a a visitar o meu cantinho,
    Words-by-Ricci.blogspot.pt
    e a seguir se gostar (:
    Obrigado! *o*

    ResponderExcluir
  15. Eu também estou meio que assim, falta de inspiração pra postar.
    Glória deus nas alturaaaas o tutorial mais esperaaaaaaaaado :3

    Belo post ♥

    www.k-awaiicherry.blogspot.com

    ResponderExcluir
  16. Nossa todo mundo reclamando do calor e eu aqui tranquila, pois moro num lugar que faz calor todo santo dia e frio é de vez em quando.
    Muito bom esse tutorial.

    Sweet of Cherry

    ResponderExcluir
  17. Cara me apaixonei vou tentar fazer mais acho que eu não conseguiria :c , mais enfim ameii , vou acompanhar todos <3

    Bjs | http://h-piece.blogspot.com

    ResponderExcluir
  18. Minhas aulas nem começou, mais minhas aulas de Judô me deixa inspirada! Porque só eu sou diferente? Affz :\
    Aqui está de boa, calor : Siim! --- Insuportável : Nãoo! Então não estou muito precisada de um ar-condicionado! Não acredito que vai ficar esse tempo todo longe :OOOOOOOOO, Vai não, fica aqui! :( Fazer oque, lamento! Vou sentir sua falta :3

    Super legal o Tutorial! Adorei.

    Obrigado e Desculpe.
    Um beijo e Um cheiro.

    ResponderExcluir
    Respostas
    1. Awn, que bom *u*
      UHEUHEU ser diferente sempre é bom o/
      Aqui hoje, na minha cidade, fez 45ºC graus ç.ç que ódio :s
      Awww, não vá, por favor UHEUHEUH' :/ Eu também, awn <33

      Que bom amor :333

      Excluir
  19. Estou acompanhando *-----*

    -
    snowing-wishes.blogspot.com

    ResponderExcluir
  20. Vou acompanhar esse tutorial, quero aprender a fazer >3<

    Mas às vezes a escola é divertida sim q Minhas aulas voltam dia 17.

    Beijos ~
    garotas-cupcakes

    ResponderExcluir
  21. Heloísa help-me!! Não estou entendo o inicio é para pesquisar no hmtl por ]]> mas tipo em qual template? em um do próprio blogger? é que eu sempre pensei que nós iriamos ''criar'' tipo >html< , >head<, etc e irmos colocando e tal.. E sobre a escola eu só começo daqui um mês heuehuehue

    ResponderExcluir
    Respostas
    1. Então, na verdade você procura por " ]]> ", aí é só colar aquele código e modifica-lo de acordo com seu layout em PSD :3

      Excluir
    2. Mas onde??? Isso que eu não entendi em um template do proprio blogger normal? ~~sou meio lerda :P ~~

      Excluir
  22. Isso é complicado demais pra minha cabeça, gente!

    Visite-nos!
    XOXO

    ResponderExcluir
  23. É um pouco difícil fazer layout pelo photoshop eu só faço o cabeçalho e as faixas u.u
    Novo aqui, amei as faixas da side :3 ^^
    h-holiday.blogspot.com.br

    ResponderExcluir
  24. Estou acompanhando tá? *U*
    Voltei *-* / querendo-voar.blogspot.com.br

    ResponderExcluir
  25. O tutorial é bem útil! Eu já vi vários tutoriais, mas nunca consegui fazer exatamente como eu quero T^T' na próxima vez, irei testar com o guia aqui, é um guia não é?! ç_ç' ~ afinal está bem explicado *o*

    write down || write--down ♡

    ResponderExcluir
    Respostas
    1. Que bom que acha :3 Ah, entendo :/
      Acho que sim UHEUHEUEUH' Awn, obrigada *0*

      Excluir
  26. MINHAS AULAS COMEÇARAM FAZ TEMPO AUSHAUSH, Aqui está na época de chuvaa ~AEEE o/! Tutorial maravilhosoooo, e tu Helo, explicando então :333 Beijos sálinda >3<

    ~ http://7-roses.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. UHEUHEU' Afe, troca de lugar comigo D:
      Awwwn, que bom que gostou, sério <3 Beijos ságata q

      Excluir
  27. Você é confusa, que nem eu, estou com 50% de vontade de voltar pra escola e 50% não [a única coisa que te a ver com o assunto foi a palavra ''escola, mas ok.] Eu alterno os dias das postagens também, me ajuda a respirar -q. O tutorial ficou ótimo, mesmo que eu não vá fazer por que eu morro de preguiça HUEHEUEHEU (qual a graça). Sumi, mas já voltei, estava me matando pra fazer um lay.

    www.wh-asia.net | [☆WHA☆]

    ResponderExcluir
    Respostas
    1. Você disse exatamente o que eu sinto UHEHUEUH' Teve sim, ué u3u. UHEUHEUH, obrigada *u* Te entendo qq Bem-vindaaaa \o

      Excluir
  28. Adorei o tutorial, eu tava esperando muuuito por isso. Pois eu nunca entendi muito sobre esse negócio kk. Está bem explicado e eu vou esperar pela segunda parte.

    Beijos, ~ Sun-Hi
    ~ inventyourhappiness.blogspot.com

    ResponderExcluir
  29. Oi , adorei o tuto! Embora a preguiça tenha tentado me seduzir, vou tentar fazer um kk, e tbm amei o blog. .>< sz
    Beijos :) ;*

    ResponderExcluir
    Respostas
    1. Que bom amor! Sei como é uheuhauhe. Muito bom saber *u* E obrigada!

      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!