Resenha: Do Photoshop ao HTML
Se você é novo na criação de designs de sites usando o Photoshop, aprender a transformar esses arquivos .PSD em arquivos CSS e HTML semânticos e compatíveis com os padrões pode ser um pouco intimidador.
Afinal, existem muitos serviços excelentes por aí que podem dividir e codificar seus arquivos para você. Mas há casos em que você pode preferir fatiar esses desenhos por conta própria.
Isso e onde Do Photoshop ao HTML: como cortar seus desenhos como um profissional por Jeffrey Way, editor do Nettuts +, entra.
Neste livro de 145 páginas, todo o processo de converter um arquivo .PSD em um design de site de trabalho é abordado, em detalhes, com exemplos de código.
Um site modelo é usado para percorrer os leitores durante todo o processo, passo a passo, com um único exemplo. Tudo, desde a codificação básica até a compatibilização de seus designs compatíveis com navegadores.
Em uma base diária - se você ouvir atentamente - gritos podem ser ouvidos em todo o mundo de codificadores sem sucesso tentando forçar um projeto a se posicionar. Não é apenas uma questão de aprender a língua; a memorização é uma tarefa fácil. Os pontos indutores de gritos ocorrem quando você visualiza seu site em dez navegadores diferentes, e todos eles transformam seu site em níveis diferentes de consistência.
O livro pressupõe que você tenha um conhecimento básico de trabalho de CSS e HTML, bem como um design já criado no Photoshop. O design usado no livro é simples, mas os conceitos usados para criar o design podem ser facilmente aplicados a designs mais complexos.
O livro começa com uma seção sobre como olhar para um design antes de mergulhar no processo de criação do código HTML.
Embora possa parecer natural começar imediatamente a trabalhar nos recursos visuais do nosso site, isso na verdade não poderia estar mais longe da verdade. Em vez disso, devemos primeiro construir nossa base, ou o mark-up, e somente depois de concluído, podemos passar para o visual.
Escolhendo as três seções básicas, a maioria dos websites contém: um cabeçalho, a área de conteúdo principal e um rodapé, são abordados e, em seguida, o livro pula direto para o processo de configuração do seu arquivo HTML básico. Novamente, qualquer pessoa com conhecimentos básicos de HTML não terá problemas com essa parte.
Uma vez que seu código HTML básico esteja completo, Do Photoshop para HTML cobre como dividir seus arquivos .PSD.
Reserve um momento para examinar o design no Photoshop. Tente identificar cada imagem que será necessária. Lembre-se, os recursos podem ser recriados com CSS; então seja criativo.
Enquanto os dois métodos para fatiar seus arquivos são mencionados, o livro usa uma combinação de corte e recorte e colagem para capturar as imagens necessárias, em vez de usar a ferramenta de fatia.
Ambos os métodos são perfeitamente válidos. Eu recomendo que você tente ambos, e escolha o que prova ser o mais rápido… para você.
Atalhos de teclado para acelerar este processo são abordados em profundidade. Salvar essas imagens para a web, incluindo todas as configurações que você deve usar e qual tipo de arquivo de imagem usar para quais tipos de imagens, também é discutido extensivamente, assim como os sprites CSS. Por último, mas não menos importante, nesta seção, há algumas anotações sobre ajustes que precisarão ser feitas no arquivo HTML com base nas imagens de fundo que estão sendo usadas.
Quando seu HTML e suas imagens estiverem prontos, é hora de mergulhar no CSS do seu site. As redefinições do navegador são enfatizadas e abordadas em profundidade, bem como a reconstrução de um arquivo CSS padrão e padronizado.
Cada navegador utiliza um pouco de “CSS padrão” para estilizar automaticamente sua marcação. À primeira vista, você pode pensar que isso é extremamente útil ... Se cada navegador os implementasse de forma idêntica, isso não seria um problema. Infelizmente, este não é o caso.
Há vários princípios de CSS, incluindo posicionamento relativo versus absoluto e formas CSS, abordados de maneira prática e útil. Para aqueles que não são especialistas em CSS, essas seções serão particularmente informativas, enquanto aqueles que são podem querer pular essas partes. Outra ótima parte do código CSS abordado é como criar rodapés fixos, algo que pode ser frustrante para novos designers de CSS.
A codificação de páginas adicionais além da nossa home page é coberta, incluindo como fazer pequenos ajustes no layout e no conteúdo, e o que você precisará adicionar aos seus arquivos CSS. Quando terminar esta seção, você terá todos os modelos de página necessários para um site de portfólio totalmente funcional.
O último capítulo regular do livro aborda como tornar seu design compatível com vários navegadores, especificamente quando se trata de navegadores mais antigos, como o Internet Explorer 6 e 7. Um dos maiores problemas abordados é a falta de transparência na manipulação de imagens no IE6. , com uma variedade de soluções para superá-lo.
A visualização do seu site no Internet Explorer 7 e inferior pela primeira vez fará você se encolher. Você pode ter sorte, mas na maioria das vezes, você encontrará vários problemas que precisam ser corrigidos.
Um capítulo de bônus no final mostra como criar efeitos de transição do jQuery, que são incorporados ao design do site. Para qualquer um novo em JavaScript e jQuery, é um projeto interessante que ensina algumas técnicas básicas.
No geral, se você terceirizou a conversão de seus arquivos .PSD para HTML, ou se quisesse testar o design de sites no Photoshop, este livro definitivamente vale a pena ser lido.
Com instruções completas, passo a passo, que podem ser facilmente aplicadas a muitos projetos e toneladas de código de exemplo, Do Photoshop ao HTML é certo para você começar a converter seus próprios projetos. Com um pouco de prática, os conceitos abordados podem ser usados em praticamente qualquer projeto!
O livro também vem com os arquivos de origem do site criado, que você pode usar em seus próprios projetos como quiser.
Download do capítulo de amostra
Escrito exclusivamente para WDD por Cameron Chapman .
O que você acha deste livro? Por favor, deixe-nos saber na área de comentários ...