7 Extensions chromées super usures pour les concepteurs en 2017

7 Extensions chromées pour améliorer l'efficacité de la conception Web

Points de base:

• Les extensions de chrome simplifient le processus de conception et fournissent des outils pour vérifier et modifier les éléments Web, les vérifications de liens et générer du code CSS complexe sans quitter le navigateur.
• Les extensions telles que Page Ruler, WhatFont, CSS3 Generator, vérifiez mes liens, Gravit Designer, Colorzilla et StyleBot sont particulièrement utiles aux concepteurs, offrant des fonctionnalités telles que l'échantillonnage des couleurs, la reconnaissance des polices et la personnalisation du site Web en temps réel.
• L'utilisation de ces extensions peut gagner du temps et réduire le besoin d'autres logiciels, ce qui en fait une ressource précieuse pour les concepteurs et les développeurs.

Chaque designer a sa propre façon de travailler. Que vous conceviez directement dans votre navigateur (en utilisant du code) ou que vous testiez la conception Web en temps réel en utilisant uniquement le navigateur, il existe de nombreuses extensions de chrome qui peuvent simplifier considérablement votre flux de travail. Quelle est la chose que je déteste le plus? J'ai dû ouvrir une énorme application de bureau pour accomplir une tâche relativement petite, donc j'ai recherché des extensions de chrome qui peuvent rapidement résoudre des problèmes de conception courants.

Voici mes sept extensions de chrome essentielles, ainsi que six extensions de concepteurs pour Firefox (si vous êtes un développeur Web, vous devrez peut-être être testé dans tous vos navigateurs!).

1. Règle de page

La règle de page est une extension chromée utile pour trouver l'emplacement et / ou la taille de tout élément de votre navigateur - il est plus rapide que d'utiliser un inspecteur de code Chrome, ou pire, des fichiers CSS traversant maladroits. Tout d'abord, utilisez le réticule pour dessiner une boîte de sélection autour de l'élément cible. La barre en haut du navigateur affichera la longueur et la largeur de l'élément, ainsi que sa distance de chaque côté de l'écran (il semble avoir un positionnement fixe / absolu appliqué).

Astuce: utilisez les touches fléchées pour affiner votre sélection pour une précision maximale.

2. whats-ouvrants

Comme j'ai souvent besoin de vérifier les polices sur les pages Web pour voir les tailles de police, les noms de police réels et leurs couleurs utilisées dans certains blocs de texte, l'extension WhatFont Chrome est très utile pour moi.

Cliquez sur n'importe quelle section de texte pour trouver des valeurs hexadécimales / RGBA, d'épaisseur, de hauteur de ligne, de style de police et de séries de polices.

Parfois, l'ajout d'une fenêtre de contrôle Chrome en bas de votre navigateur peut provoquer des interférences lorsque vous travaillez, donc pouvoir obtenir toutes ces informations sans ouvrir toute la fenêtre de chèque facilite les choses!

3. générateur CSS3

Le générateur CSS3 est une application chromée qui vous aide à générer des extraits de code CSS complexes ou difficiles à retenir. Pour des choses simples dont vous n'en avez pas besoin, mais avouons-le, certaines valeurs CSS sont difficiles à écrire à partir de zéro (comme la création de gradients compatibles entre le navigateur ou des conversions CSS requises). En quelques clics, vous pouvez générer des CSS très utiles, l'apercevoir dans l'aperçu de l'extension, puis copier le CSS et coller le code dans votre fichier CSS réel.

Ce qui suit est une liste de contenu pris en charge:

• Plusieurs ombres de texte
• Code hexadécimal / rgba
• Conversion CSS
• Radius de bordure
• plusieurs ombres de boîte
• COLONNE CSS
• flèche (pour les info-bullets)
• gradial (linéaire, radial… même rayures)

4. Vérifiez mes liens

Erreurs de frappe d'URL (ou oublier de les inclure complètement, mais c'est une autre chose) est assez facile, donc que vos clients aient besoin d'aide d'un site Web existant ou que vous créez un site Web à partir de zéro, consultez mes liens pour tout essentiel pour les concepteurs de sites Web.

Vérifier que mes liens analyseront la page Web et recherchent des liens cassés - c'est aussi simple que cela. Cela vous évite des tracas de les vérifier manuellement. L'interface utilisateur est très intuitive. Vérifiez mes liens ne répertorie pas les liens non valides, mais transforme simplement le lien corrompu sur la page Web réelle en rouge, tandis que le lien valide apparaîtra en vert, afin que vous puissiez voir en un coup d'œil ce qui doit être corrigé. Simple!

5. Designer gravit

Si vous avez besoin de concevoir des graphiques mais que vous ne souhaitez pas ouvrir une application de conception à forte intensité de ressources (ou si vous ne voulez pas en acheter un), téléchargez l'extension gratuite de concepteur gravit pour Chrome.

Étonnamment, c'est très rapide. Il est très facile de commencer à concevoir avec des tailles artistiques communes, y compris des graphiques de blog, des graphiques de médias sociaux et des préréglages pour les tailles d'impression couramment utilisées. Gravit est une application de conception vectorielle, ce qui facilite la conception de conceptions indépendantes de la résolution évolutives.

J'ai été surpris par les nombreuses options et fonctionnalités - ce n'est pas très différent de l'utilisation d'applications de conception avancées comme Sketch, bien que l'interface utilisateur visuelle ressemble plus à Affinity Designer.

Il y a des éléments évidents attendus, tels que les formes, les alignements, les flips, les rotations, les floues, les projections, la création de formes composites, etc. Il est également capable d'exporter vers PNG, JPG, SVG et PDF, des fonctionnalités symboliques telles que Sketch et Adobe XD, des outils d'édition SVG complexes avec des courbes Bezier et Bezier, et même des filtres, la gravité du concepteur est en fait une option très attrayante pour le professionnel, et même Designers, photographes et concepteurs amateurs qui souhaitent créer des graphiques marketing.

Je veux dire, imaginez pouvoir créer une conception dans Google Chrome sans ouvrir Photoshop, illustrateur, croquis ou Adobe XD. En fait, vous n'avez pas à imaginer que vous pouvez télécharger GRATUITEMENT DÉPARTEMENT GRATUITEMENT GRATUITEMENT!

6. colorzilla

Colorzilla est l'outil de paille de Google Chrome - il vous permet d'échantillonner n'importe quelle couleur à partir d'une page Web en quelques clics. Tout d'abord, cliquez sur l'icône d'extension Colorzilla dans Chrome et survolez le curseur sur la zone que vous souhaitez goûter. Vous obtiendrez les valeurs HSL, HexaDecimal et RGBA pour cette couleur. Normalement, vous devez prendre une capture d'écran de votre site Web et l'importer dans Photoshop, mais Colorzilla est plus rapide. Colorzilla peut également générer des palettes de couleurs à la demande en fonction de n'importe quel site Web et économiser vos couleurs récemment utilisées en utilisant la fonction d'historique des couleurs, ce qui le fait se démarquer parmi des concurrents comme ColorPick Eyedropper.

7. Stylebot

StyleBot est une extension chromée pratique pour ceux qui souhaitent essayer rapidement CSS personnalisés sur un site Web en direct. Il vous permet d'essayer différentes polices, différentes couleurs, différents styles, etc. sans basculer entre l'éditeur de code et Google Chrome. Nous avons trouvé que Stylebot était très utile comme moyen de prototyper les petits ajustements et les modifications sur un site Web en temps réel avant de s'engager réellement dans la base de code.

Conclusion

Les tâches qui utilisent ces extensions de réduction du temps sont généralement fastidieuses ou vous obligent à ouvrir / acheter plus de logiciels peuvent être complétés en quelques clics, et vous n'avez même pas besoin de laisser votre navigateur Web. Les concepteurs et les développeurs trouveront ces extensions chromées très utiles.

L'extension chromée est certainement utile pour ceux qui développent des sites Web, mais les concepteurs qui souhaitent extraire des informations visuelles d'un site Web en direct pour l'utiliser dans Sketch, Adobe XD ou Photoshop verront également les avantages évidents de réduction de temps très rapidement. .

(La partie FAQ a été omise car elle ne correspond pas à l'objectif pseudo-original et est plus long. La partie FAQ peut être générée séparément si nécessaire.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!