Desde a chegada da versão CS6, a Adobe implementou no Photoshop uma opção muito útil para layout e desenvolvimento de web designs. A operação é muito simples e especialmente rápido. Através da aplicação poderemos gerar folhas de estilo em cascata tomando como referência nossas formas e camadas de texto. O procedimento é tão simples quanto desenvolver nosso mockup, copiando a versão do código de nossos elementos e colando em nossa planilha.
É uma opção muito boa principalmente porque nos permite ver a evolução do nosso design em termos visuais e em tempo real. Aqui estão algumas dicas para usar esta opção e obter o desempenho máximo:
Tente ser preciso
Para obter um resultado profissional, é recomendável levar em consideração as medidas e proporções do seu site. Defina os valores de largura e altura do modelo que você está projetando e aplique-os à sua maquete. Ao copiar o código CSS colocaremos cada elemento tomando como referência a distância em pixels entre cada elemento e as bordas do canvas. Leve também em consideração os tamanhos e as razões hierárquicas que você irá incluir em seu design, incluindo o alinhamento de cada elemento e o espaçamento entre cada um deles para fornecer legibilidade máxima para seus usuários.
O uso de guias e as regras da interface irão ajudá-lo a construir um modelo limpo e organizado com todos os seus elementos perfeitamente alinhados.
Configure todas as características de cada elemento
A opção de copiar o código CSS nos dá a possibilidade de projetar nosso site com grande precisão usando camadas de forma e texto. O conteúdo de cada camada será copiado para a área de transferência e podemos colá-lo rapidamente em nossa folha de estilo. A partir das camadas de forma, capture os valores para as seguintes configurações:
- tamanho
- Posição
- Cor do traço
- Cor de preenchimento (incluindo gradientes)
- Sombra paralela
A partir das camadas de texto, podemos capturar os seguintes valores:
- Família de fontes
- Tamanho da fonte
- Espessura da fonte
- Altura da linha
- Sublinhado
- Tachado
- Sobrescrito
- Subscrito
- Alinhamento de texto
Tenha isso em mente e defina cada um desses valores para fornecer o estilo que você está procurando.
Trabalhe com grupos de camadas
Esta função traduz nosso trabalho organizado por dois tipos de aula, uma para cada grupo que reúne camadas de formas ou texto e uma aula para cada camada de um desses tipos. Cada classe de grupo representará um elemento div pai que conterá elementos div filhos e que corresponderão às camadas inseridas em cada grupo. Dessa forma, os valores superior e esquerdo dos contêineres filho serão definidos com referência ao contêiner pai. Você deve ter em mente que esta opção não está disponível com objetos inteligentes e não será aplicável a mais de uma camada simultaneamente, a menos que sejam agrupadas.
Passos para converter
Depois de fazer sua maquete, personalizar cada elemento e agrupá-los por grupos, você só terá que seguir estes passos:
- Vá para o painel de camadas e escolha uma destas duas opções:
- Clique com o botão direito em uma forma ou camada de texto ou grupo de camadas e escolha copiar css no menu de contexto.
- Selecione uma forma ou camada de texto ou um grupo de camadas e escolha a opção copiar css no menu do painel Camadas.
-
Cole o código em seu documento de folha de estilo e aplique-o às suas páginas via html5.
