1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Ajuda e dicas para elaborar um site em Photoshop + CSS

Discussão em 'Web Development' iniciada por chantas, 23 de Setembro de 2006. (Respostas: 25; Visualizações: 4338)

  1. chantas

    chantas Power Member

    Boas pessoal!

    Tou a tentar fazer um site para um amigo, o layout já está práticamente feito em Photoshop, agora na parte de CSS ainda estou muitooooooo verde :-D

    O layout será este:
    [​IMG]

    O meu objectivo é que o layout apareca sempre centrado com aquela parte branca no meio e com aquele background cinzento em qualquer resolução.

    O layout tem uma dimensão de 900x800...E agora gostava de saber qual o "next step" que devo tomar??

    Obrigado a todos!
     
  2. shello

    shello Moderador
    Staff Member

    Boas!
    Bom, pegando nessa imagem (soponho que aquele menu do topo será feito em texto), cortaria (com aquela tecnica que falei do Seleccionar » Copy Merged » Nova Iamgem » Save (PNG, se preferencia)) desta forma: http://img109.imageshack.us/img109/4688/slicesanteface2sf2.png
    Veja-se que está *MUITO* impreciso - foi feito agora no paint.

    O slice de cima (header), 1 + 2 + 3, seria um div (de id header) e lá dentro teria dois divs, um correspondente ao logotipo e outro ao lado direito; estes estariam com posição relativa, alinhados à esquerda e à direita, respectivamente.
    O div #header teria como background o que está em 2 (têm apenas um pixel de largura - chega para este pattern).
    Depois, teríamos a parte de conteúdos. Faria o mesmo que no 2 para fazer um pattern vertical daquelas zonas de sombra à esquerda (4) e à direita. Isto sempre dentro de um div correspondente ao conteúdo, com a tecnica que descrevi para o header. E usava outro para por o footer (5), que também usava um pattern horizontal para preencher.

    Isto dos patterns compreenda-se que é para permitir que a página faça o load mais rapidamente...

    Claro que isto é na teoria, e depois à medida que os problemas vão surgindo, ajusta-se as coisas...

    Espero que o que escrevi seja compresível :P
    Cumps ;)
     
    Última edição: 23 de Setembro de 2006
  3. chantas

    chantas Power Member

    Obrigado pelo trabalho que tiveste para me explicar o copy merged :)

    Só não percebi uma coisa...a parte do background!Não percebi qual vai ser o corte que me vai permitir manter o background cinzento :(

    Cumps!
     
  4. keoshi

    keoshi Power Member

    Se vais ter o site com um tamanho fixo aconselho-te a cortar um pixel vertical da parte do conteúdo para simplificar as coisas.

    E eu aí há tempos estive para fazer um tutorial completo de Photoshop para HTML (com divs e CSS), mas sendo assim fica este :)
     
  5. keoshi

    keoshi Power Member

    Tomei a liberdade de cortar a imagem e mostrar um código de exemplo: http://dev.keoshi.com/anteface/

    O código de exemplo:
    Código:
        background:#E3E3E3 url(background.gif) 50% 50% repeat-y;
    
    
     
    Última edição: 23 de Setembro de 2006
  6. chantas

    chantas Power Member

    Não percebi! Podes tentar explicar-me melhor essa do pixel sff?? :)

    Em relação ao corte que fizeste e ao código, tenho uma pequena questão:

    "50% 50% repeat-y;" <----O que quer dizer esta parte ao certo??


    Cumps!
     
  7. [N]

    [N] Power Member

    em vez de teres um fundo 694 x 400 por exemplo. ficas com um fundo 694 x 1 e faes repeat-y para ele repetir o fundo verticalmente. assim poupas largura de banda e tempos de loading. qt ao 50% 50% já tens que esperar pelo keoshi
     
  8. Bio Shadow

    Bio Shadow Banido

    Essas percentagens são o espaço que a imagem vai ocupar, em vez de colocares um tamanho fixo (500px por exemplo) colocas a percentagem da janela que vai ser ocupada por essa imagem, 50% horizontais e 50% verticais, penso ser isto.

    Mas nada melhor que ires ao www.w3schools.com e verificares por ti próprio, tem lá excelentes exemplos.
     
  9. keoshi

    keoshi Power Member

    Os 50% 50% é a posição da imagem relativamente ao espaço que vai ocupar (neste caso, o div 'corpo') - Estes valores indicam que a imagem vai ser posicionada 50% na vertical e 50% na horizontal. Neste exemplo específico não tem muito uso porque:

    - Verticalmente: a imagem vai ser repetida;
    - Horizontalmente: o div tem o mesmo tamanho, em pixels, que a imagem portanto esta nunca vai 'fugir' do div

    Imagina que querias este mesmo div mas só com uma imagem em cima e ao centro. Terias que usar: 0% 50%

    Em primeiro lugar vem o valor vertical, em segundo o horizontal (quando em valores numéricos). Estes valores podem ser relativos (%) ou absolutos (por exemplo: pixels); podes também indicar, por exempo, top center.
     
  10. chantas

    chantas Power Member

    Ok, vou então tentar fazer os copy merged e vou tentar comecar a aplicar o CSS...o notepad chega certo?? ;)
     
  11. chantas

    chantas Power Member

    Já agora outra questão, pq se deve usar PNG?É mais leve que JPG ou GIF?
     
  12. shello

    shello Moderador
    Staff Member

    Eu uso PNG porque é leve, suporta cores de 32bits, tem uma boa compressão sem perdas.
    Para mim, é o melhor formato de imagem que anda por aí.

    Cumprimentos
     
  13. keoshi

    keoshi Power Member

    O gif é bom se tiveres a certeza que obtens as cores que queres. Faz cores exactas sem compressão. O PNG é o melhor para imagens mais complexas - mas cuidado porque como é lossless pode tornar-se grande para web, por vezes. O JPG tem uma compressão manhosa e é preciso saber utilizar bem.

    Já agora, notepad chega mas bom, bom é o notepad2
     
  14. chantas

    chantas Power Member

  15. chantas

    chantas Power Member

    Nos slices que o Shello fez pq não estão incluidos os botões nos cortes??É mais simples adicionar depois no código??
     
  16. keoshi

    keoshi Power Member

    Como ele próprio te disse:


    Se for em imagem também é fácil de adicionar, separa sempre o mais que puderes (com um certo limite, claro) ;)

    edit: separa sempre os elementos - queria deixar isto claro. Não separar ao máximo à toa mas duma forma organizada - o menu seria, por exemplo, um ul (unordered list)
     
    Última edição: 24 de Setembro de 2006
  17. chantas

    chantas Power Member

    Caso optasse em cortar o menu tinha que deixar um espaço entre cada botão não era?Para haver uma zona sem links?
     
  18. keoshi

    keoshi Power Member

    Com images podes fazer os 'botões' com o tamanho que quiseres. Em texto podes definir tudo pelo CSS com margins e paddings.

    E mesmo o posicionamento do menu pode ser definido. De preferência com posicionamento relativo dentro do header.
     
  19. keoshi

    keoshi Power Member

    Estive a ver o video e só me ocorre uma palavra: NÃO. :P

    Basicamente ele faz tudo no notepad...mas por tabelas (pelo ficheiro gerado pelo photoshop/image ready). Se queres aprender bem escreve tudo de raíz e tableless se possível.
     
  20. chantas

    chantas Power Member

    Pois já percebi que para fugir às tabelas vou ter mesmo que fazer o copy merged :)
     

Partilhar esta Página