Layout pelo Photoshop: Codificação #2


Oi pôneis malditos.:♪*..' (awn Helô, que apelido lindo, até chorei) Como vão? Eu estou péssima. Vamos dizer que hoje foi o primeiro dia de educação física na escola, então vocês já imaginam né. Eu corri muito, muito e muito, muito mais do que eu podia, nunca fiquei tão cansada na minha vida, eu mal conseguia respirar e pra vocês terem uma noção, minha amiga vomitou. Que frescura a sua, ficar cansada só por correr: Não sei porque passei tão mal, eu dei 12 voltas na quadra, e corri acho que mais dois quilômetros em outro lugar tirando a quadra, não foi tanto mas eu e meus amigos passaram muito mal, eu acho que eu fui a mais exagerada pois não faço nenhum exercício físico ç.ç Eu preciso fazer, necessito. Mudando de assunto minhas cabras safadas -qq Eu nunca passei tanto calor na minha vida, eu nunca suo, sério, antes de ontem, ontem (ontem fui na piscina tuts) e hoje foram os dias mais quentes que já vi em uma década e dois anos que já vivi, provavelmente não sou a única que está derretendo, tenho certeza absoluta (╥﹏╥)

Vocês realmente entenderam o post anterior? Estou com medo que disseram que está fácil, e por exemplo, desistiram de fazer. Por favor, me digam que eu não fiz todos os tutoriais atoa :c Mas enfim, vamos falar sobre o post: Essa vai ser a última codificação, e na verdade, acho que 80% das pessoas que estão lendo isso, acham que o post é enorme. Não gente, ele é minúsculo. Desde o post anterior, a codificação estava quase pronta! Nesse, é apenas sobre a codificação do título do post, faixinhas, e cabeçalho. Pra mim, foi o tutorial mais fácil até agora. Mudando totalmente de assunto, muito obrigaaaada pelos seguidores, awn <3



Título do post + faixinhas

Assim como no post anterior, você vai personalizar a escrita exatamente como no layout em PSD. Esse é o título do post que eu fiz (x) Ele é da fonte Tahoma, da cor #ffc6c6 e com uma bordinha da cor #fb9696 . Agora, é só passar para HTML, simples! Precisamos apenas usar o font-family, color, font size e border ( pelo menos para mim ). Vou passar um código de personalização do título do post: Vá em seu HTML, tecle Ctrl + F e procure por: h3.post-title { Ou h3.post-title a { e antes de fechar } cole:
h3.post-title {
font-family: Tahoma; /* fonte */
font-weight: lighter; /* opcional */
font-size: 30px; /* tamanho da fonte */
color: #ffc6c6; /* cor da fonte */
}
E pronto, você já terá um título semi-pronto, mas não se esqueça: Para ficar igual ao do layout, você apenas precisa pegar a cor, tamanho, e fonte, já terá o título bem parecido. Meu resultado: (x). Agora vamos ás faixinhas: Você vai fazer a mesma coisa que as ilustrações: Transformar as faixinhas em PNG, e depois é só coloca-las com esse tutorial do blog Birthday Cake ( créditos vão pra lá ) (x). Meu resultado: (x)
Cabeçalho ( caso você fez ) + dicas extras
Você apenas precisa usar esse tutorial (x) Que ficará tudo certinho, com certeza. Bom, já terminamos! Você terá um layout praticamente inteiramente feito pelo Photoshop, os outros detalhes você mesmo faz! Algumas dicas: Desative a navbar, personalize os links de navegação e o rodapé, são coisas extras mas que realmente fazem diferença. Talvez eu disponibilize o layout, comentem se acham uma boa ideia. Meu resultado final: (x)

LAYOUT EM PSD: (X)
LAYOUT CODIFICADO: (X)

30 comentários:

  1. ponei maldito ponei maldito lá lá lá ,(tenho medo deles -qq)

    nossa Helo voce correu muito mesmo eu so de dar 3 voltas na quadra ja estou com a lingua pra fora de tão cansada XXXXXXXXXX

    sobre a codificação vou ser cincera eu li tods os 2 posts com a explicação (Muito bem ,muito Bem \°/),pelo menos é oque eu axo,mais aconteçe que eu me acostumei a fazer parte por parte no HTML mesmo. e eu não sei se eu gostaria de começar a fazer lays pelo PS ,pelo menos agr ....mais vc não deve se arrependar ora alguma de ter feito este tutorial pois aki foi o 1° blog q se arriscou a fazer esta explicação ((que é trabalhosa por sinal) até hoje !!! Parabens Helo vc mereçe !!




    desculpa pelo texto -oo

    ResponderExcluir
    Respostas
    1. UHEUHEUHE são tão fofinhos <3 q

      Na verdade, eu comecei a terceira volta só andando, aí comecei a correr e quase me matei ç.ç E o pior é que só eu fiquei com dor, aff :c

      Awn *0* Isso depende de cada um, é claro :3 Obrigaaaaada <33

      Oxe, imagina *u*

      Excluir
  2. Poneis malditos *uu* nem vou dormir hj isso grudou do meu cerebro muito obrigada Helo :p
    Bem util esse tuto eu provavelmente vou usar , num espero distante lay pq ne .. vivo mudando kkk


    Geekegirlie.blogspot.com || G² Official

    ResponderExcluir
    Respostas
    1. Perfeitos *u* UHEHUEUH sou má u.u

      Que bom que acha :3 UHEUHE''

      Excluir
  3. Ficou muito lindo! Tentarei seguir o tuto mais tarde -preguiça ueuehuehe :) otimo tuto! Te amei, adorei, quero casar com TÍ MENINA!!!
    ~~
    wearetheroyalty.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada *0* Okey q UHEHEU te entendo q

      Awwwwwn, ~casando~ <3

      Excluir
  4. Amei os tutoriais e você explicou muito bem! Em breve teremos layout novo e layout free e.e
    Aqui tá calor pacas, você soa até tomando banho q
    Obrigada pelos tutoriais, mesmo! Gostaria de retribuir o que você fez, mas não sei como, por enquanto vou deixar os créditos do seu blog ^^
    Beijos!
    Garota Insana // Visite :3

    ResponderExcluir
    Respostas
    1. Obrigaaada *00* Aeeeeee o/
      FALOU TUDO POKAPKOAKPOSOKP
      Awwwwn, que nada *uuu* que fofa você <3

      Excluir
  5. Amei o tuto!!
    Parabéns pelos seguidores...
    www.kawaii-girlscute.blogspot.pt

    ResponderExcluir
  6. Sim está muito calor mesmo, to derretendo, cruz credo! já estou fazendo meu lay pra codificar e acredite eu vou usar o seu tutorial, pois é o mais simples que eu vi de se fazer!

    www.k-awaiicherry.blogspot.com || blog-fly-away.blogspot.com || Follow and Comment || Kissus!

    ResponderExcluir
    Respostas
    1. Somos duas :c Séério? Awn *00* Fiquei muito feliz agora :3

      Excluir
  7. Simplesmente não te culpo por odiar E.F. Isso é um c**
    Você se alonga feito um animal e depois corre feito um animal é ridiculo! E depois te mandão jogar um esporte que consegue superar tudo isso de tão ruim que é! Argh! Odeio isso
    Esse lay de codificação é realmente muito útil. Vou tentar usa-lo

    ha-unting.blogspot.com

    ResponderExcluir
    Respostas
    1. UHEUHEUHEUHEUH'
      THIS! Falou tudo ç.ç
      Que bom que acha, use sim, awn *00*

      Excluir
  8. Aqui o dia todo foi de chuva e está fazendo muito frio ~tuts tuts~
    Ainn o tutorial ainda parece ser bem fácil, depois(quando a preguiça me deixar) vou tentar.

    h-worlds.blogspot.com

    ResponderExcluir
    Respostas
    1. Eike inveja de vosse, mossa :c q

      Que bom que acha UHEUHE' Tente sim fro <3

      Excluir
  9. Sou uma cabra safada (´・ω・`) Não gosto muito de educação física, sou a única da minha sala que não gosta ;-; ~forever alone~ tenho que correr 9 vezes pela quadra e já to chorando na 5 volta.
    Fazer lays codificados, para mim é difícil, mas achei sua explicação bem organizadinha e deixou tudo mais fácil, nem sei mexer direito no photoshop, mas sempre tive vontade, usarei seu tuto >33< já está nos favoritos :3

    >> iam-yuuki.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. UEUHEHUEUHEUHEUH socooooorrr
      Eu gosto mas, o primeiro dia sempre é sacrificante, e já estou acostumada :c Eu também UHEUHE'

      Awwwwwn *u* Espero que use, e obrigada <3

      Excluir
  10. Estou adorando acompanhar esses tutoriais >3< Qualquer dia vou tentar fazer, quem sabe no meu próximo layout :3

    www.b-urning.blogspot.com.br

    ResponderExcluir
  11. Educação física é minha segunda matéria preferida (primeira: gaziar aula ~tuts tuts~) AHSAUSH'
    Minha professora manda no máximo nós darmos três voltas ao redor da quadra e eu já fico quase morta! Moussa, porque você não vira rebelde e diz que não vai dar 12 voltas na quadra? Eu faria isto! :33 AHSUAUAH -parei.


    Enfim, eu estou seguindo o tutorial sim, e estou amando! *u*
    Quando eu terminar te mando ele prontinho para você avaliar! -q

    Beijos!

    www.simplekawaii.tk

    ResponderExcluir
    Respostas
    1. A minha também mas, depende do que vamos fazer q. UHEUHEUHEUH toca o/

      É que ele deu cinco minutos pra correr, e teríamos que fazer o máximo de voltas possível >3< Eu não sabia que ia ser tão cansativo, moça D=

      Awwwn *u* Claro que avalio SAHUASUH' <3

      Excluir
  12. Esses professores acham que podem fazer o que quiserem conosco q. Quando eu não quero fazer, não quero e pronto. Brincadeira, invento uma desculpa, IUHUHIS' Tenho vários atestados médicos e devido à isso, posso dizer que estou com dor. Obrigada, "doenças", amo vocês ♥

    Que tutorial perfeito, tanto quanto o anterior! Bem explicado <3

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
  13. Tenho um pouco de pratica e com esse tutorial, vai me ajudar muito. ♥

    http://katyperrymonitoracao.blogspot.com.br/

    ResponderExcluir
  14. Affee, pq eu nao tenho photoshop? Da pra fazer um monte de coisas legal com ele :( preciso baixar! pft seu blog, seguindo flor
    Sweet Springs >clique<

    ResponderExcluir
  15. Gentei, vou morrer então quando as aulas voltarem D: Não é muita coisa nessa segunda parte, basta prestar atenção e vai ficar impecável o layout >3<

    uns-killed.blogspot.com

    ResponderExcluir
  16. Meu Deus! Minhas aulas começaram segunda e eu ainda não tive minha primeira educação física. De acordo com os rumores, será hoje. Sabe, sou do tipo de aluna que se "da bem" em todas matérias, menos educação física. Eu não sei esporte nenhum! Eu até tento, sabe, mas não dá certo. Boa sorte para você e tome um chazinho de camomila para ver se "relaxa" o corpo.
    Quanto ao tutorial, não se arrependa: tu me ajudou muito. Tu está de parabéns por ter explicado tão bem esse tutorial, afinal, de todos os blogs que pedi para ensinar, somente o seu atendeu o pedido. Muitos não fizeram por achar ser uma coisa banal e outros por pura preguiça de ensinar. Ah, e ainda tem aqueles que ensinaram de um jeito praticamente impossível! kkkk' Parabéns pelo tutorial, sua diva.

    Beijocas,
    Nerd Com Chiclete - Nerd Absoluta.

    ResponderExcluir
    Respostas
    1. Estou atrasadinha mas não pude deixar de responder esse comentário! <3
      Nossa, eu também! Não nasci pra esportes uheuhauhe
      Muito, muuuito obrigada! É muito legal pra mim ver que o tutorial te ajudou, de verdade! Me desculpe por sumir, viu?

      Beijos ♥

      Excluir
  17. Helo, eu não vou mentir, mas os tutoriais não me ajudaram muito :/ Os códigos do post anteriore não tinham no html do meu layout, eu não consegui mudar as fontes dos gadgets e nem colocar bg pois os códigos pareciam não funcionar. Eu juro de mindinho que fiz tudo certo, mas hoje não parece meu dia de sorte. Ah anos eu tento aprender a fazer um layout e eu achei que seu tutorial seria minha salvação, mas alguém está conspirando contra mim. Mas o tutorial está divino, você é ótima explicando e com certeza ajudou muita gente (:

    ResponderExcluir
    Respostas
    1. Oi meu anjo! Então, eu considero que nesse caso, não precisa usar exatamente os meus códigos e os meus tutoriais. Esse post, mesmo que não esteja explícito, eu quis mostrar que a única coisa que você precisa fazer, é: Criar o seu layout pelo Photoshop, e depois cria-lo pelo próprio Blog porém da mesma forma que está no Photoshop. É tão difícil de explicar que me da raiva :( Mas resumindo, você pode usar qualquer tutorial, porém, precisa deixar o seu layout igual ao do Photoshop. Por exemplo, se no layout do seu PS a postagem é branca, você usa tal código que a postagem fica branca. Caso meus códigos não funcionarem, é só pesquisar por outro, tudo bem? Eu espero que tenha entendido e caso contrário, pode me perturbar que me esforçarei pra te ajudar. Muito obrigada <3

      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!