Qual é a melhor maneira de passar de uma maquete do Photoshop para HTML e CSS semânticos?

Question

Geralmente uso um processo manual:

1. Olhe a página, descubra os elementos semânticos e construa o HTML
2. Divida as imagens que acho que vou precisar
3. Comece a escrever CSS
4. Ajuste e repita etapas diferentes conforme necessário

Tem uma abordagem melhor ou uma ferramenta?

Answer 1

Eu tenho uma maneira bastante natural de codificar.O segredo é tratar a página como um documento ou artigo.Se você pensar assim, o seguinte fica logicamente claro:

1. O título da página é um título de nível superior

   • Se você cria o título do site ou o título da página real, o h1 é com você - pessoalmente, eu faria Sobre nós o h1 em vez do Stack Overflow.

2. A navegação é um índice e, portanto, um lista ordenada - você também pode usar um ol sobre um ul.

3. Os cabeçalhos das seções são h2, as seções dentro dessas seções são h3s etc.Empilhe-os.

4. Use citações e citações sempre que possível.Não apenas cerque-o com ".

5. Não use b e i.Use forte e em.Isso ocorre porque o HTML é uma marcação estrutural e não de apresentação. Forte e elestags de fase devem ser usadas onde você colocaria ênfase na palavra.

6. <label> seus elementos de formulário.

7. Usar <acronym>areia <abbr>s sempre que possível, mas apenas em primeira instância.

8. O mais fácil:sempre, sempre dê às suas imagens algum texto alternativo.

9. Existem muitas tags HTML que você pode usar e provavelmente não usou - endereço para endereços postais, saída de código de tela.Dê uma olhada em Cachorro HTML para alguns, é minha referência favorita.

Essas são apenas algumas dicas, tenho certeza que poderia pensar em mais.

Ah, e se você quiser um desafio, escreva primeiro seu XHTML e depois escreva o CSS.Ao usar CSS, você não tem permissão para tocar no HTML.Na verdade, é mais difícil do que você pensa (mas descobri que me tornou mais rápido).

Answer 2

Bem, quando eu construo um site, tendo a tentar esquecer completamente o design enquanto escrevo o HTML.Faço isso para não acabar com nenhuma marcação específica de design e para poder me concentrar no significado semântico dos elementos.

Algumas dicas sobre como marcar coisas:

• menu - use o elemento UL (lista não ordenada), pois é exatamente isso que é um menu.uma lista não ordenada de escolhas.exemplo:

  <ul id="menu">
      <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
      <li id="about"><a href="/about" title="More about us">About</a></li>
  </ul>
  

  se você quiser um menu horizontal, você pode fazer isso:

  #menu li {
      display: block;
      float: left;
  }
  

• Logotipo - use um elemento H1 (título) para o logotipo em vez de uma imagem.Exemplo:

  <div id="header">
      <h1>My website</h1>
  </div>
  

  E o CSS (a mesma técnica pode ser aplicada ao menu acima se desejar um menu com itens gráficos):

  #header h1 {
      display: block;
      text-indent: -9999em;
      width: 200px;
      height: 100px;
      background: transparent url(images/logo.png) no-repeat;
  }
  

• IDs e classes - use IDs para identificar elementos dos quais você possui apenas uma instância.Use class para identificar elementos dos quais você obteve várias instâncias.

• Use um navegador textual (por exemplo, lynx).Se faz sentido navegar dessa forma, você se saiu bem no que diz respeito à acessibilidade.

Eu espero que isso ajude :)

Answer 3

Basicamente, faço a mesma coisa que Jon faz, mas aqui estão algumas outras ideias:

1. Use guias no Photoshop (e fixe-os).Descubra todas as suas dimensões para cada caixa/região com antecedência.

2. Colete todas as suas dimensões e valores hexadecimais de cores em um arquivo de informações (eu uso um arquivo txt) que você pode consultar facilmente.Isso reduzirá a taxa de alt-tab e a seleção de cores no Photoshop várias vezes.

3. Depois que todos os meus guias estão no lugar, eu separo todo o site em minha pasta de imagens, começando com fotos e elementos agrupados, e terminando com os vários blocos/imagens de fundo, caso existam.(Dica:Usar CtrlClique na visualização da camada para selecionar o conteúdo dessa camada).

Notas sobre o uso do Photoshop:

• Use guias ou a grade.
• Use o recurso Notas para qualquer informação pertinente
• Sempre use grupos de camadas para elementos semelhantes.Precisamos ser capazes de desligar regiões inteiras com um clique.Coloque todo o conteúdo do 'cabeçalho' em um grupo de camadas.
• Sempre nomeie suas camadas.
• Você pode colocar cada modelo de página em um arquivo PSD e usar grupos de camadas aninhados para organizá-los.Dessa forma, não precisamos configurar todos os nossos guias e notas para cada modelo de página de um site.

Answer 4

Sem atalhos :) mas todo mundo trabalha de maneira um pouco diferente.

Este tutorial que apareceu no meu feedreader ontem mostra o processo do início ao fim e pode ajudar pessoas que nunca fizeram isso antes, mas como você é experiente, trata-se apenas de simplificar seus próprios métodos.

EDITAR:O link listapart certamente é mais automatizado para designs 'planos', onde tanto o imageready quanto o fireworks tiveram um suporte muito bom desde o primeiro dia e ficou melhor e mais semântico a cada lançamento, mas se você tiver um design mais complexo, são as partes complicadas que fazem o projete o que é e isso deve ser feito manualmente.

Answer 5

Apenas pensei que valeria a pena ressaltar que, além dos excelentes conselhos que você recebeu até agora, eu recomendaria obter uma versão impressa do design, usando uma caneta vermelha para marcar todos os elementos do bloco no design que você acha. podem conversar com o designer por meia hora e conversar sobre como eles imaginaram seu design funcionando para os casos de uso que não se enquadram no design estático.

• O que acontece quando mais texto é colocado na navegação?
• Essa largura é fixa ou fluida?
• Este painel de conteúdo tem a altura fixa correta ou é fluido?Se é fluido, por que você colocou um fundo que não pode ser repetido?
• Você tem uma borda estendendo-se pela página que quebra dois elementos conectados.Visualmente faz sentido, mas semanticamente não posso simplesmente usar um li para abrigar esses dois elementos.O que você acha que é mais importante?

Isso também o ajudará a identificar problemas em potencial que, de outra forma, você não teria percebido que seriam problemas até o início do CSS.

Isso não apenas torna seu trabalho mais fácil depois de fazê-lo algumas vezes, como também o designer terá uma noção muito mais forte do que está envolvido na marcação de seu trabalho - alguns designers têm dificuldade real em compreender por que algo que eles acham que parece visualmente muito simples levará alguns minutos. dias de ajustes de CSS para fazer funcionar.

Answer 6

Alguns dos designers que conheço costumam usar o Illustrator para fazer os elementos de design.

Answer 7

Esta página mostra como fazer isso de forma um pouco mais automatizada.

Answer 8

Além disso, conheça o recurso "Layer Comps".Eu uso isso para alterar os estados dos botões.

1. Crie composições de camada para normal, flutuante e ativo.
2. Em cada um deles, configure os efeitos/sobreposições de cores e as camadas visíveis que pertencem a esse estado.
3. Salvar para web:vá para uma pasta diferente para cada estado, a menos que seja mais fácil renomear cada fatia (caso contrário, as fatias do botão suspenso substituirão as fatias normais).