La gestion des détails est très importante dans la conception de sites Web. Personnellement, j'observe souvent les sites Web de Gringo et je trouve que les excellentes conceptions de sites Web sont très réfléchies dans la gestion des détails. Les conseils que je partage avec vous aujourd'hui sont très simples, mais ils peuvent grandement améliorer les détails de l'ensemble du site Web. Je pense donc que ces conseils sont également utiles pour améliorer le niveau de conception de votre site Web.
Et vous remarquerez que ces techniques tournent toutes autour d'un seul mot, qui est « pixellisation », qui désigne simplement quelques petites lignes de 1px et 2px. Bon, c'est parti.
1. Ligne de séparation des pixels La première introduction est la ligne de séparation. Veuillez regarder la barre de navigation dans la figure ci-dessous.
Faites attention aux lignes dans le cercle rouge sur l'image et aux lignes de séparation entre les boutons. Ces lignes semblent en retrait, formant une bonne sensation de ligne de séparation. Ensuite, je vais agrandir cette image et jeter un œil au principe.
Nous pouvons voir que ces lignes de démarcation sont composées de deux lignes droites adjacentes de 1 px, et qu'une couleur est plus foncée et l'autre est plus claire que la couleur d'arrière-plan. Ensuite, regardez la méthode :
Sélectionnez l'outil Crayon (ne choisissez pas le pinceau par erreur) et définissez la taille sur 1px
Sélectionnez une couleur plus foncée que la couleur d'arrière-plan, comme le bleu foncé sur l'image, maintenez la touche Maj enfoncée et tracez une ligne droite.
Choisissez une couleur plus claire et tracez une autre ligne droite. D'ACCORD
PS Pendant le processus de dessin au trait, vous pouvez agrandir la toile (Z) pour l'observation.
Qu’en est-il ? L’effet est bien meilleur qu’un seul séparateur de couleur, n’est-ce pas ? Examinons quelques autres exemples d'utilisation de cette technique de diviseur :
2. Bord des pixels
Tout d’abord, regardons une image originale sans « bords de pixel » :
Voici ensuite ce qui est ajouté :
