O tratamento dos detalhes é muito importante no web design. Eu pessoalmente observo frequentemente os sites do Gringo e acho que excelentes designs de sites são muito cuidadosos no tratamento dos detalhes. As dicas que compartilho com vocês hoje são muito simples, mas podem aprimorar muito os detalhes de todo o site. Então acho que essas dicas também são úteis para melhorar o nível de design do seu site.
E você notará que todas essas técnicas giram em torno de uma palavra, que é “pixelação”, que significa simplesmente algumas pequenas linhas de 1px e 2px. Ok, aqui vamos nós.
1. Linha divisória de pixel A primeira introdução é a linha divisória. Observe a barra de navegação na figura abaixo.
Preste atenção nas linhas do círculo vermelho na imagem e nas linhas de separação entre os botões. Essas linhas parecem recuadas, formando uma boa sensação de linha de separação. A seguir, ampliarei esta imagem e vamos dar uma olhada no princípio.
Podemos ver que essas linhas divisórias são compostas por duas linhas retas adjacentes de 1px, sendo que uma cor é mais escura e a outra é mais clara que a cor de fundo. A seguir, observe o método:
Selecione a ferramenta lápis (não escolha o pincel por engano) e defina o tamanho para 1px
Selecione uma cor mais escura que a cor de fundo, como azul escuro na imagem, mantenha pressionada a tecla Shift e desenhe uma linha reta
Escolha uma cor mais clara e desenhe outra linha reta. OK
PS. Durante o processo de desenho de linha, você pode ampliar a tela (Z) para observação.
Que tal? O efeito é muito melhor que um divisor de cor única, certo? Vejamos mais alguns exemplos de uso desta técnica de divisor:
2. Borda de pixel
Primeiro, vamos dar uma olhada em uma imagem original sem “bordas de pixel”:
A seguir está o que é adicionado:
