Trabalhando com desenvolvimento front-end, é muito comum que uma equipe se divida para cada etapa do projeto. Nesses casos, muitas vezes o programador recebe o layout de um projeto no formato de PSD do Photoshop. Quando isso acontece, pode surgir a dúvida: qual a melhor forma de transformar o visual em código?

 

Esse é o seu caso? Tem um arquivo PSD (ou Illustrator, Sketch) pronto para ser codificado em pixel HTML e CSS? Para qualquer projeto de front-end, não é necessário ter um arquivo do Photoshop ou qualquer outro arquivo de design. O mais importante é que você tenha um esboço ou uma ideia do conteúdo e do layout em cada página que está criando.

 

O desenvolvimento do front-end fica exponencialmente mais complexo, com novos requisitos de código, padrões de design e a introdução de web móvel e responsiva. Por isso, aqui vai um tutorial para te ajudar nessa tarefa.

 

Devo usar um conversor de PSD para HTML?

 

Você pode ser tentado a usar um software que promete automatizar o processo. Existem vários sites online que oferecem para converter PSD para HTML através de aplicativos de automação. O problema com essas ferramentas é que você não pode fornecer um código HTML / CSS verdadeiramente personalizado usando software de automação.

 

Além disso, essas ferramentas nem sempre fornecem a conversão perfeita de pixels que pode ser feita por meio de interação codificada manualmente com o arquivo PSD. A menos que você seja bom em consertar bugs e saiba muito bem como escrever código front-end, o software de conversão pode ser mais complicado do que valer a pena.

 

Isso não quer dizer que as conversões automatizadas não tenham lugar no mundo do desenvolvimento de front end. Alguns proprietários de sites se beneficiam dessas ferramentas. Se o objetivo do seu site for ser hospedado em um template, o uso de software de conversão pode ser benéfico. Para qualquer outro site, o design precisa de um toque pessoal de um designer.

 

Softwares que você precisa para converter PSD para HTML no desenvolvimento front-end

 

Assim como qualquer outro trabalho, você precisa das ferramentas certas para começar. Você pode pesquisar na internet e encontrar vários utilitários, ferramentas e softwares de automação. Mas nada é pior do que criar um site com ferramentas desajeitadas que realmente não fazem o que você precisa fazer. Por isso, aqui estão algumas boas ferramentas testadas para te ajudar.

 

Sublime Text

 

Esta ferramenta é um passo em frente ao popular Notepad ++ (que é uma alternativa se você não gosta do Sublime). Essa ferramenta de cor codifica seu texto dependendo do idioma que você usa e converte entre Apple e Windows mais facilmente que outros editores de texto.

 

Adobe Photoshop

 

O Photoshop é o originador dos arquivos PSD. O Adobe Photoshop faz parte do Creative Cloud Suite. Você pode obter este software a um custo fixo ou pode pagar por mês.

 

CSS Hat

 

Poupe algum tempo e obtenha este complemento do Photoshop. Essa ferramenta transformará uma camada do Photoshop em CSS instantaneamente.

 

Avocode

 

Na maioria das tarefas de desenvolvimento de front end, você estará trabalhando em uma equipe, mesmo que sua equipe seja você e um desenvolvedor. O Avocode permite exportar recursos e colaborar com outros desenvolvedores e designers.

 

PNG Hat

 

Se você é um designer de jogos, essa ferramenta ajuda você a dividir recursos para projetos de jogos. Também comprime as imagens durante a exportação para tempos de carregamento mais rápidos, sem que a imagem sofra de má qualidade.

 

CSS3ps

 

Semelhante ao CSS Hat, mas é uma ferramenta baseada em nuvem que converte suas camadas do Adobe Photoshop em CSS3.

 

Escolha uma estrutura (ou não)

 

Estruturas de desenvolvimento front-end estão tão quentes agora. Essas estruturas podem facilitar o desenvolvimento do front-end sem começar do zero. Isso não significa que você precisa se vincular a uma estrutura específica para cada projeto. Escolher nenhuma estrutura é tão aceitável quanto se você souber trabalhar sem ela.

 

Existem centenas de frameworks no mercado. Estruturas de software começaram e são mais comuns em codificação de back-end, como Laravel (PHP), Ruby on Rails (Ruby). Entretanto, frameworks front-end se infiltraram na indústria de design front-end. As estruturas front-end se concentram nas três principais áreas de design: estruturas HTML, CSS e JavaScript.

 

A pergunta que você deve se fazer é se você quer usar um framework. Se você não está acostumado ao que escolhe, precisa aprender a trabalhar com ele enquanto codifica, o que aumenta o prazo do projeto. A maioria das estruturas reduz a quantidade de código para uma página, mas pode adicionar alguma complexidade ao seu projeto se você não estiver familiarizado com a sintaxe e a maneira de fazer as coisas.

 

Prós

 

As estruturas reduzem a quantidade de código usada no site e podem até reduzir o tempo de codificação se você souber usá-las. Se usado corretamente, as estruturas podem aumentar a eficiência e melhorar o design.

 

Contras

 

Com centenas de estruturas no mercado, você pode ser forçado a aprender enquanto está projetando, o que geralmente não produz o melhor código. A estrutura deve ter um bom suporte da comunidade ou você pode ficar preso indefinidamente em uma estrutura que não tem atualizações ou suporte. Consideramos as duas seguintes como as melhores escolhas:

 

Bootstrap

 

O Bootstrap torna o desenvolvimento do front end exponencialmente mais fácil. Conecte os arquivos CSS e JS e comece. É ótimo até mesmo para programadores de back-end que não são muito bons no desenvolvimento de front-end. O Bootstrap também é totalmente responsivo, portanto, você pode inserir facilmente o design responsivo em seus projetos.

 

Foundation

 

O Foundation faz basicamente o mesmo que o Bootstrap, mas é mais personalizável e oferece mais componentes. Por exemplo, essa ferramenta tem validação de formulário.

 

Quer você escolha o Bootstrap ou o Foundation, você não irá errar. Ambos darão a você o design responsivo e o sistema de grade que você precisa para o desenvolvimento.

 

Desenhe o tipo de layout para o projeto

 

Antes mesmo de realizar a conversão, você precisa determinar o layout. Você tem quatro layouts principais para escolher.

 

Responsivo

 

Você não pode se afastar do termo “responsivo” no setor de design. Designs responsivos basicamente mudam o layout de uma página para caber na tela. Esse layout é a base da maioria dos aplicativos da web que atendem a dispositivos móveis.

 

Mobile only

 

Alguns aplicativos não funcionam em computadores. Esses aplicativos móveis precisam apenas de um design que se encaixa em um tablet ou smartphone.

 

Fixo

 

Layouts fixos são úteis para designs somente de desktop. Os designs fixos têm largura e altura estáticas, e os elementos contidos no layout não mudam para o tamanho da tela ou quando o usuário minimiza a janela.

 

Fluido

 

Os designs de fluidos são benéficos para dispositivos móveis e desktops. Os elementos dentro de seus contêineres mudam conforme o usuário minimiza o navegador ou usa uma tela menor.

 

Você pode pensar que o design fluido e responsivo são iguais. Eles são parecidos, mas o responsivo é muito mais útil para segmentar dispositivos móveis. O fluido é usado mais para diferentes tamanhos de navegador em aplicativos de desktop. O design responsivo usa consultas de mídia CSS para alterar o tamanho e a localização dos elementos quando o tamanho da tela é alterado.

 

O design do fluido movimenta os elementos quando o tamanho da tela muda, mas os elementos ainda usam as mesmas porcentagens de largura e altura, independentemente do tamanho da tela. O resultado é que os designs fluidos nem sempre mudam os elementos de uma maneira amigável para o usuário na tela, por isso é melhor ficar com o responsivo aos designs para celular.

 

Comece cortando imagens do seu arquivo PSD

 

Em qualquer arquivo PSD, você tem as imagens de que precisa, como imagens de plano de fundo para o cabeçalho, e outras coisas que não podem ser replicadas com CSS. Este é o ponto de partida para sua conversão. Pegue seu arquivo PSD e recorte as imagens que não podem ser recriadas usando ferramentas padrão de exportação de CSS. Exporte esses recursos para PNG ou qualquer formato de arquivo que você achar necessário.

 

Costumava funcionar assim: você precisava cortar as sombras e colocá-las cuidadosamente ao lado de suas imagens. Mas lembre-se de que o CSS3 tem efeitos de sombra. Você só precisa das imagens, e o CSS3 pode fazer o resto do sombreamento.

 

Escreva o HTML para cada seção

 

Um bom designer sabe que uma página pode ser dividida em várias seções. Para manter seus designs uniformes e facilmente dispostos em termos de código HTML, você deve escrever as seções HTML de cima para baixo. O HTML5 tornou o seccionamento do seu código muito mais eficiente.

 

Header: A parte superior da página é o cabeçalho. Geralmente, ele contém o logotipo e qualquer item do menu principal que fica na horizontal na parte superior da página. Também contém uma linha de separação entre o cabeçalho e o conteúdo principal.

 

Hero: Nem toda página tem uma seção de hero. Esta seção é uma área grande no topo que faz com que uma determinada imagem ou oferta se destaque do resto da página. Está localizado logo abaixo da seção do cabeçalho.

 

Apresentação de slides: alguns proprietários de sites preferem uma apresentação de slides na parte superior da página. Você codifica esta seção ao lado, pois ela também inclui uma lista de imagens que deslizam pela página.

 

Conteúdo: Esta seção é a área de texto principal que contém todo o conteúdo, incluindo texto, imagens, botões e basicamente todos os componentes que compõem a parte dinâmica do site.

 

Rodapé: a seção do rodapé está na parte inferior da página. Ele geralmente contém informações de contato, alguns links para conteúdo, como um blog ou sobre a página, e quaisquer links de mídia social para a empresa quando você está criando páginas de marketing.

 

Depois de criar suas seções HTML, você deve revisá-las para obter precisão de sintaxe. Nada é pior do que construir um site apenas para descobrir que o HTML principal está sem uma tag de fechamento. Pode levar horas para solucionar um pequeno erro de sintaxe em HTML, mas isso pode causar grandes problemas de usabilidade para seus usuários. Aproveite o tempo agora para revisar o código em busca de erros.

 

Para ajudar a acelerar a revisão de código, use um validador de HTML. Se você não é especialista em codificação HTML, pode ler alguns tutoriais detalhados.

 

Em seguida, adicione seu estilo com CSS

 

Agora que você tem sua casca em HTML, é hora de adicionar alguns estilos com CSS. Se você estiver usando uma estrutura como o Bootstrap, talvez já tenha um pouco de estilo configurado, mas é hora de adicionar seus próprios toques pessoais ao código. Um tutorial de CSS é um guia por si só. Por isso, você pode vinculá-lo a alguns lugares onde pode aprender melhor a programar em CSS.

 

Smashing Magazine: A revista online para designers e codificadores.

 

Guia de CSS da Mozilla: aprenda o estilo CSS dos próprios especialistas em navegador.

 

CodeCademy: Codifique e pratique enquanto você aprende CSS.

 

Mastertech: O imersivo de front-end da Mastertech te dá uma boa base para começar.

 

Você pode até mesmo ir com um compilador CSS, também chamado de pré-processador. Assim como os frameworks front-end, você também tem várias opções. No entanto, os três principais pré-processadores são SASS, LESS e Stylus.

 

Os pré-processadores em CSS são semelhantes aos usados ​​em linguagens interpretadas, como o PHP e a antiga linguagem ASP Clássica. Os pré-processadores têm vários benefícios, mas um dos mais notáveis ​​é que você pode usar variáveis. Tradicionalmente, o CSS não permite que você use variáveis.

 

A única limitação de usar um pré-processador é que seu projeto seja vinculado diretamente a esse pré-processador. Toda a sua equipe deve usá-lo, o que significa que, se ninguém souber como usá-lo, todo mundo precisa aprender.

 

Pessoalmente, preferimos SCSS e Bootstrap. O SCSS é um pré-processador criado em Ruby que gera CSS. O Bootstrap permite que você configure rapidamente um modelo de layout que seja totalmente responsivo sem qualquer esforço de sua parte.

 

Lista de verificação PSD em HTML

 

Se você já passou por todo este manual passo a passo do PSD para HTML, você tem uma boa base para o seu projeto. Ainda temos algumas dicas para você ao mergulhar no mundo do PSD para conversões em HTML.

 

  • Suas imagens são bem cortadas e representam a qualidade da marca e do site?
  • Você testou todos os aspectos do código, incluindo HTML, CSS e JavaScript (lembre-se de que você pode usar um validador)?
  • O código está limpo para que outros designers e desenvolvedores possam continuar de onde você parou? Os clientes corporativos costumam ter outros freelancers ou codificadores internos trabalhando com seu trabalho, portanto, o código deve ser limpo e organizado.
  • O código é amigável? Embora seja sempre bom codificar e escrever para os usuários, é importante que o código seja projetado de maneira amigável para os bots.
  • E quanto à experiência do usuário? O designer deve ter um bom senso de experiência do usuário para criar uma boa navegação e controles intuitivos.
  • Não se esqueça da acessibilidade para conexões mais lentas e usuários com deficiências. Suas imagens e layouts devem ser responsáveis ​​por conexões mais lentas, especialmente dispositivos móveis.
  • Teste o tempo de carregamento das páginas do site. Isso é importante para as taxas de celular e de conversão. Os usuários não esperam muito para que uma página seja carregada, por isso você deve testar o desempenho. O Google tem uma ferramenta para ajudar você a testar o desempenho do site.

 

As conversões de PSD para HTML são exponencialmente mais difíceis do que há alguns anos, porque devem ser compatíveis com vários navegadores e dispositivos diferentes, além de perfeitamente responsivas.

 

O olho do design nem sempre é natural, mas alguns dos processos de design podem ser aprendidos por meio de treinamento e prática. É importante praticar o que você aprendeu para aprimorar seu ofício. A prática ajudará você a desenvolver o olho do design. Até mesmo o trabalho em rede com designers ajuda você a construir seu conjunto de habilidades e a se tornar um designer melhor.

 

Quer treinar mais suas habilidades? Vem conhecer o imersivo de desenvolvimento front-end da Mastertech!

 

Do visual ao código: como transformar um layout PSD para HTML e CSS
Avalie esse post
Você pode também gostar