Como passar um layout do Photoshop para xHTML/CSS (parte 2)

, , , , • 15/08/2009

Nesta parte faço todo o design com CSS, e como bônus ainda mostro algumas técnicas no Photoshop e no Firefox sobre como agilizar o trabalho.
Na parte três farei o layout ficar compatível com o falecido internet explorer 6(e também a versão 7 e 8).

Como passar um layout do Photoshop para xHTML/CSS (parte 2)

Baixar Arquivos

Comentários

  1. Jhuan Luiz15/08/2009

    De mais!
    Ao exemplo da primeira parte, o tutorial seguiu muito bom e muito bem explicado!
    Muito obrigado!

    Responder

  2. Anderson Paixão16/08/2009

    Ainda nem assisti mais!…
    .
    Mas parabens e muito obrigado!..

    Responder

  3. Marcelo16/08/2009

    Parabéns cara! seus tutoriais são excelentes. Sempre que possível disponibile mais, pois está demorando muito. Mas você está de parabéns. Tenho aprendido muito. Agora, estou no aguardo dos próximos.
    Muito obrigado pela divulgação do seu conhecimento.

    Responder

  4. marcelo lima17/08/2009

    muito bom mesmo adorei sua video aula, uma aula mesmo e muito bem explicado mesmo parabens e sempre coloque conteudo assim vai nos ajudar muito mesmo..

    Responder

  5. Wallace Pires20/08/2009

    Oi tudo bom? esse tutorial serve pra criar layout pra blogger tbm? quero criar um layout personalizado e depois passar pra xhtml e css como vc nos ensina, mas quero saber se fica compativel com o blogger, e como faço isso,por favor, se possivel me ajude, entre em contato comigo no email, preciso fazer esse blog até o final do mês, já to criando algo no PS..

    Responder

  6. Tutorial City20/08/2009

    @#5
    Esse processo é absolutamente necessário em qualquer caso onde você queira criar um layout. Cada plataforma(WordPress, Blogger, ExpressionEngine…) tem sua própria maneira de escrever os temas, então você tem de estudar um pouco a forma com que o blogger implementa seus temas.
    Muito breve pretendo criar uma série (bastante completa) sobre como criar um tema para o WordPress.
    Seu host é gratuito ou pago? caso seja pago eu recomendo que use o WordPress como plataforma, pois é muito mais completo que o blogger, além de possuir uma comunidade gigantesca.
    Caso tenha mais alguma dúvida, por favor deixe-a aqui.
    Abraços ;)

    Responder

  7. Wallace Pires20/08/2009

    eu ainda não decidi qual deles usar, mais eu estaria disposto a pagar um host pelo wordpress, mas eu estava precisando de algo mais rapido, e não me lembro muito sobre html mesmo tendo feito curso há uns 3/4 anos atrás, mas obrigado, vou reler algumas apostilas que baixei na internet pra tentar fazer isso inicialmente com o blogspot.

    Responder

  8. Tutorial City20/08/2009

    @#7
    Existem dezenas de centenas de temas para wordpress espalhados pela internet, então acho que seria muito mais rápido usar o wordpress.

    Responder

  9. xXx15/09/2009

    Parabéns, acabei de assistir agora esse tutorial “FELOMENAL” 1:18 da madruga hehehe

    Está ótemo hehehe!!!

    abraço!

    Responder

  10. xXx15/09/2009

    alias, eu gostaria de propor um tutorial.
    Tipo, utilizando este mesmo layout, como fazer para funcionar os links de comentarios.

    ex.: qndo há novos comentario o link automaticamente receba o valor de qntidades de comentarios.

    Obrigado pela atenção!

    Responder

  11. Tutorial City15/09/2009

    @xXx
    Para isso é necessário que o site seja dinâmico. Eu tenho a intenção de transformar este layout em um tema para o WordPress em futuros tutoriais, e nele é possível fazer isso com grande facilidade.

    Abraços.

    Responder

  12. xXx15/09/2009

    Obrigado pela atenção…adorei saber que você tem a intenção de fazer este tutorial ai!….

    Fico muito empolgado….e entrarei todos os dias para ver se tem tuto novo! hehe…abração!

    e parabéns ai pela iniciativa!

    Responder

  13. Tutorial City16/09/2009

    @xXx
    Você pode assinar os feeds e sempre saber quando tem algo novo.

    Abraços ;)

    Responder

  14. xXx25/09/2009

    Só pra constar, eu já assinei o feed hehehe!!!

    Responder

  15. Anderson Moraes30/09/2009

    Muito bom, explicação clara.
    PARABÉNS…

    Responder

  16. Trambulhao05/03/2010

    Oi Eduardo, Tudo bem?

    Descobri seu blog no vimeo e gostei muito do pouco que vi. Ensinar bem de forma simples não é fácil, parabéns.

    Bom, falando dessa vídeo aula não seria mais interessante estruturar o HTML assim?

    Topo:

    ..

    Artigos:

    ..

    Menu lateral:

    ..

    Me corrija se tiver errado! Penso que os buscadores dão mais preferência aos sites que sejam feitos como demonstrei no exemplo. Isso pq cada divisão da página vai ganhar um título de importância maior (H1). Além de facilitar a vida dos deficientes visuais. Não obriga percorrer toda página cada vez que vai usar o menu lateral. Salta logo de H1 para H1 (claro, não contando com o tabindex e accesskey ou outras soluções).

    Não é uma critica ao seu tutorial, muito pelo contrário é até uma dúvida minha..

    Responder

  17. Trambulhao05/03/2010

    Estrutura
    ———
    Topo:
    <h1>
    <h2>
    ..

    Artigos:
    <h1>
    <h2>
    ..

    Menu lateral:
    <h1>
    <h2>
    ..

    Responder

  18. Tutorial City05/03/2010

    @Trambulhao
    1º – Fico feliz que gostou dos meus tutoriais!

    2º – Sua ideia de certa forma realmente faz sentido, por que a página seria criada através de pequenos módulos, cada um com h1,h2,h3…
    Mas agora pensando semanticamente, uma página sempre tem um conteúdo principal, e uma forma de você mostrar que ali existe algo que deve ser ressaltado é dando uma maior importância usando h1. Se fizer isso em vários locais da página você está querendo dizer que esses locais tem igual importância, porém não acredito que a barra lateral ou o rodapé tem a mesma importância do conteúdo principal. No caso desse tutorial eu usei o h1 no ‘logo’ da página, mas hoje acredito ser uma ideia muito melhor usar essa tag no título do conteúdo em si. Na barra lateral(que tem importância secundária) você poderia usar um h2(se você já não tivesse usado no conteúdo principal). No rodapé(que tem a menor importância) você poderia usar h3(se não tivesse usado em lugar nenhum) ou h4, e por aí vai.
    A ideia é você começar o módulo com menor importância de onde você terminou o de maior importância, então se no conteúdo principal você usou h1, h2 e h3, então a barra lateral teria que começar com h4, e assim por diante.

    3º – tabindex não deve ser usado, é uma má prática. O mais correto é construir a página na ordem que deve ser lida.

    4º – Fique a vontade pra comentar e sugerir outras soluções, assim todos aprendem, e essa é exatamente a ideia do blog. ;)

    Abraços

    Responder

  19. Trambulhao07/03/2010

    Valeu Eduardo, obrigado pela dicas.

    Analisando o próprio site da W3C (http://www.w3.org) a estrutura é feita exatamente como você explicou.

    <h1> Imagem do Logo e o texto “W3C” oculto ou escondido no span.

    Na coluna esquerda
    <h2> O título “Site Navigation” oculto ou escondido.
    <h3> Os títulos dos menus

    Na coluna dos conteúdos
    <h2>, <h3>,..

    Isso quer dizer, com rara exceção, só devemos utilizar a tag h1 uma vez por página?

    Abraço

    Responder

  20. Tutorial City07/03/2010

    @Trambulhao
    Mais ou menos por aí. Nos últimos tempos tento usar somente uma vez.

    Responder

  21. Wellington Esteves12/03/2010

    Bom cara eu uso Fireworks Cs3
    esse processo se aplica a ele tambem ?
    e boa video aula você poderia falar com mais vontade mas clareza…
    Obrigado..

    Responder

  22. Tutorial City12/03/2010

    @Wellington Esteves
    Se aplica da mesma forma. Existem pessoas que preferem o Fireworks, e não tem nenhum problema nisso.

    Obrigado pelo feedback. Abraços!

    Responder

  23. Wagner C.24/03/2010

    Olá Eduardo!

    Assisti toda video aula, achei formidável e em resolução excelente para o aprendizado e acompanhamento! Desejo aprender esta linguagem, e assistir ao seu video tem me ajudado muito a entender como funciona esta estrutura.

    Meus parabéns e muito obrigado!

    Responder

  24. Eduardo31/03/2010

    Nuosssa!
    Adorei sua didática e paciência bicho!
    Acompanhando suas aulas percebi que você faz algumas anotações para te dar uma sequência na hora de montar o CSS. Coisas como tamanhos, espaçamentos, cores etc.
    Gostaria de poder dar uma olhada em como você faz essas anotações.
    Acho que isso dá uma orientação bacana na hora de trabalhar.
    Organização é tudo, principalmente se tratando de programação.
    Meus parabéns pelo conhecimento, e por difundí-lo.
    Compartilho da mesma conduta que você. Mas no meu caso sou professor de audiovisual.
    Grande abraço do teu xará, Eduardo Le Masson

    Responder

  25. Tutorial City01/04/2010

    @Eduardo
    Eu só imprimi o código que eu já tinha criado, daí fui copiando e explicando.

    Responder

  26. Rodrigo Friche07/05/2010

    Nos links home | about | contact, acho que vc resolve o problema da linha branca acima da linha azul se der um text-decoration: none no link, a:hover. Tenta lá e depois faz o comentário pra gente ok? Parabéns pelo material, tirei muitas dúvidas que num curso PAGO nao consegui tirar! Obrigado!

    Responder

  27. Tutorial City07/05/2010

    @Rodrigo Friche
    Perfeito Rodrigo! eu reparei isso poucos dias depois de publicar o tutorial, mas aí já não dava pra mudar. Muita perspicácia da sua parte.

    Abraços!

    Responder

  28. Fábio11/06/2010

    Nossa Tutorial demais!!!!!!!!!!!!!
    Continue assim!!!

    Responder

  29. Lucas10/07/2010

    Tenho aprendido muito com suas video aulas está de parabéns!

    Responder

Envie Seu Comentário