Affinage dans le navigateur obtenez une perfection de pixel avec l'inspecteur visuel

Être «pixel perfect» est devenu moins important pour les concepteurs Web une fois que nous avons tous accepté pouvez semble différent sur différents écrans et appareils. Mais cela ne veut pas dire que l'attention portée aux détails est moins souhaitable. Dans ce tutoriel, je vais vous présenter un outil (une extension Chrome) qui peut vous aider à atteindre la perfection en pixels dans vos conceptions Web..

Présentation de l'inspecteur visuel

 

Utilisation de l'inspecteur visuel

Tout d’abord, rendez-vous sur www.canvasflip.com/visual-inspector pour télécharger l’extension Chrome. Une fois installé, il vous sera demandé de créer un compte (gratuit, mais des mises à niveau sont disponibles à partir de 5 $ par utilisateur et par mois). Tu es debout!

Extension Chrome de l'inspecteur visuel

L'inspecteur vous permet de sélectionner n'importe quel élément de la page et d'examiner ses propriétés. Voici ce que l'inspecteur montre lorsque nous sélectionnons le logo sur la page d'accueil de Tuts +, par exemple:

Nous pouvons voir le balisage utilisé et les différentes classes affectées à l'élément. Nous pouvons également voir les styles de rembourrage, de bordure et autres appliqués. Nous pouvons voir la source de l'image dans ce cas, et en faisant défiler vers le bas, nous pouvons voir beaucoup plus que.

Exportation

À ce stade, nous pouvons exporter tous les actifs visibles. Les fichiers image, bien qu’ils ne soient pas au format SVG, sont facilement accessibles. Même le texte et d'autres styles peuvent être exportés au format JPG ou PNG et transférés à l'application de conception de votre choix, ce qui est très utile.

Des mesures

En déplaçant votre souris dans le navigateur et en cliquant sur divers éléments, vous obtenez des mesures et un alignement, précis et implicite, qui vous aident à avoir une idée précise de la relation entre tout et tout le reste, et à atteindre la perfection en pixels..

Modification et enregistrement des propriétés

Comme avec beaucoup d'autres outils d'inspection pour le navigateur, vous pouvez modifier les propriétés et les styles des éléments de votre choix. Cependant, avec l'inspecteur visuel, comme vous pouvez l'inspecter, tous les styles sont modifiables à l'aide d'outils visuels (curseurs, sélecteurs de couleurs, etc.).. 

Une fois changé, vous pouvez frapper le Sortie CSS bouton pour révéler les nouveaux styles que vous avez créés.

Alternativement, vous pouvez frapper Changements de synchronisation sur le Info onglet et vos modifications seront enregistrées sur votre compte. Cela vous permet de revoir ces modifications dans le futur, ce que les inspecteurs de navigateur ordinaires ne permettent pas par défaut..

Conclusion

Visual Inspector est un excellent outil pour ceux qui aiment raffinage dans le navigateur. Examinez ce qui existe déjà, apportez les modifications souhaitées, puis exportez-les ou enregistrez-les pour plus tard. Et si vous mettez à niveau, vous pouvez également collaborer avec les membres de l'équipe. Allez y faire un tour puis dites-nous ce que vous pensez dans les commentaires!

En savoir plus sur la collaboration pour les concepteurs