Υπάρχουν μερικά φανταστικά εργαλεία για τους σχεδιαστές ιστοσελίδων εκεί έξω, και με αυτό κατά νου, εδώ είναι οι καλύτερες επεκτάσεις Chrome για web design.

7 Πρέπει να έχετε επεκτάσεις Chrome για τους σχεδιαστές ιστοσελίδων

Διαφήμιση Ως σχεδιαστής ιστοσελίδων, ποιο λογισμικό πρέπει να έχετε στον υπολογιστή σας; Οι πιθανότητες είναι το Photoshop και το Illustrator. Και ενώ αυτά είναι τα βασικά στοιχεία της ροής εργασίας του σχεδιασμού σας, υπάρχουν μικρότερα εργαλεία που ίσως δεν γνωρίζετε ότι χρειάζεστε. Ξεκλειδώστε το φύλλο εξαπάτησης "Συντομεύσεις πληκτρολογίου Google Chrome" τώρα! Αυτό θα σας υπογράψει στο newsletter μας Εισαγάγετε το Email σας Ξεκλειδώστε Διαβάστε την πολιτική απορρήτου μας Το καλύτερο π

Διαφήμιση

Ως σχεδιαστής ιστοσελίδων, ποιο λογισμικό πρέπει να έχετε στον υπολογιστή σας; Οι πιθανότητες είναι το Photoshop και το Illustrator. Και ενώ αυτά είναι τα βασικά στοιχεία της ροής εργασίας του σχεδιασμού σας, υπάρχουν μικρότερα εργαλεία που ίσως δεν γνωρίζετε ότι χρειάζεστε.

Ξεκλειδώστε το φύλλο εξαπάτησης "Συντομεύσεις πληκτρολογίου Google Chrome" τώρα!

Αυτό θα σας υπογράψει στο newsletter μας

Εισαγάγετε το Email σας Ξεκλειδώστε Διαβάστε την πολιτική απορρήτου μας

Το καλύτερο πράγμα είναι ότι δεν χρειάζεται καν να τις κατεβάσετε - απλώς εγκαταστήστε αυτές τις επεκτάσεις Chrome και απομακρύνετέ το. Από την αναγνώριση των γραμματοσειρών στις σελίδες για τη μέτρηση των αποστάσεων μεταξύ των στοιχείων ιστού, αυτές οι επεκτάσεις Chrome για web design θα σας διευκολύνουν.

1. Dropbox για το Gmail

Dropbox για το Gmail, μια επέκταση του Chrome για να δείτε τις συνδέσεις Dropbox

Το Dropbox ξεκίνησε ως υπηρεσία φιλοξενίας αρχείων, αλλά σύντομα ανακάλυψε ότι το μεγάλο κοινό του είναι σχεδιαστές, οι οποίοι χρησιμοποιούν την υπηρεσία για να μοιραστούν τη δουλειά τους με τους συναδέλφους τους. Επειδή τα αρχεία σχεδιασμού είναι συχνά πολύ μεγάλα για συνημμένα μηνύματα ηλεκτρονικού ταχυδρομείου, είναι ευκολότερο να στείλετε ένα σύνδεσμο Dropbox στο αρχείο.

Το Dropbox για το Gmail καθιστά τη διαδικασία πιο βολική. Όταν συνδέεστε στο αρχείο σας χρησιμοποιώντας ένα κουμπί Dropbox στο κάτω μέρος του νέου παραθύρου email, ο παραλήπτης παίρνει μια κρυμμένη ματιά σε αυτό που στέλνετε. Οι σύνδεσμοι σε αρχεία εικόνας θα μεταφέρουν τις εικόνες απευθείας στο μήνυμα ηλεκτρονικού ταχυδρομείου και οι σύνδεσμοι σε άλλους τύπους αρχείων θα δημιουργούν μια εύχρηστη προεπισκόπηση.

Εγκατάσταση: Dropbox για το Gmail

2. FontFace Ninja

FontFace Ninja, μια επέκταση του Chrome που καταγράφει τις γραμματοσειρές σε μια ιστοσελίδα

Με χιλιάδες διαθέσιμες γραμματοσειρές, οι δυνατότητες τυπογραφίας σας είναι ατελείωτες. Ειδικά αν μπορείτε να αναγνωρίσετε μια όμορφη γραμματοσειρά που βλέπετε κάπου και να την δανειστείτε για το δικό σας έργο.

Το FontFace Ninja είναι μια επέκταση του Chrome που σας βοηθά να κάνετε ακριβώς αυτό. Όπως τα εργαλεία που βρίσκουν τις γραμματοσειρές από τις εικόνες WhatTheFont και 4 εναλλακτικές λύσεις για να βρείτε γραμματοσειρές από τις εικόνες WhatTheFont και 4 εναλλακτικές λύσεις για να βρείτε γραμματοσειρές από εικόνες Θέλετε να βρείτε γραμματοσειρές από εικόνες; Υπάρχουν ηλεκτρονικά εργαλεία που μπορούν να το κάνουν για εσάς, όπως το WhatTheFont και διάφορες εναλλακτικές λύσεις. Διαβάστε περισσότερα και σας βοηθά να προσδιορίσετε τις γραμματοσειρές που βλέπετε online. Η μόνη διαφορά είναι ότι το FontFace Ninja διαβάζει τις γραμματοσειρές που είναι κωδικοποιημένες στο CSS της σελίδας, όπως η γραμματοσειρά των επικεφαλίδων και του κειμένου του σώματος.

Όταν ξεκινάτε το FontFace Ninja, θα σας δείξει τις πληροφορίες σχετικά με τη γραμματοσειρά στην οποία το κατευθύνετε - και όχι μόνο το τυπογραφικό, αλλά και το βάρος, το μέγεθος, το ύψος, το πλάτος και το χρώμα. Για να προσθέσετε σελιδοδείκτη τη συγκεκριμένη γραμματοσειρά, θα χρειαστείτε ένα λογαριασμό στην υπηρεσία αδελφών FontFace Dojo.

Εγκατάσταση: FontFace Ninja

3. Πιτυρίδα ColorPick

ColorPick Eyedropper, μια επέκταση του Chrome για την καταγραφή χρωμάτων

Ανεξάρτητα από το πόσο καλό είναι το μάτι για το χρώμα που έχετε, είναι δύσκολο να αναδημιουργήσετε μια συγκεκριμένη σκιά που είδατε στο διαδίκτυο, εκτός αν γνωρίζετε τις τιμές RGB ή HTML. Ευτυχώς, δεν χρειάζεται να μαντέψετε εάν έχετε Colorpick σταγονόμετρο.

Όπως οι καλύτερες εφαρμογές επιλογής χρώματος για Mac Οι 5 καλύτερες εφαρμογές επιλογής χρωμάτων για Mac Οι 5 καλύτερες εφαρμογές επιλογής χρωμάτων για Mac Χρειάζεστε να βρείτε το τέλειο χρώμα στο Mac σας; Δοκιμάστε αυτές τις εφαρμογές επιλογής χρωμάτων macOS για να εντοπίσετε, να αποθηκεύσετε, να μορφοποιήσετε και να αντιγράψετε εύκολα χρώματα. Διαβάστε περισσότερα, το ColorPick Eyedropper θα σας δείξει τις τιμές για κάθε χρώμα στο οποίο εστιάζετε. Η διαφορά είναι ότι υπάρχει πάντα στο πρόγραμμα περιήγησής σας και δεν χρειάζεται να φορτώσετε τίποτα - απλά κάντε κλικ στο εικονίδιο και μετακινήστε τον στόχο στο σωστό σημείο.

Η επέκταση διαβάζει τα χρώματα από κείμενο, εικόνες και σχεδόν οτιδήποτε μπορεί να δει σε μια ιστοσελίδα (ακόμη και τις διαφημίσεις). Αφού καταγράψετε ένα χρώμα, σας δείχνει τις τιμές HTML, RGB και HSL γι 'αυτό.

Εγκατάσταση: Colorpick σταγονόμετρο

4. Διαστάσεις

Dimensions, μια επέκταση του Chrome για τη μέτρηση αντικειμένων σε μια ιστοσελίδα

Αυτή η επέκταση ανοιχτού κώδικα είναι ένα εύρημα για τους σχεδιαστές ιστοσελίδων, ειδικά αν κάνετε ξεχωριστές συναυλίες για μικρές επιχειρήσεις. Όταν ένας πελάτης σας παραδώσει έναν ιστότοπο χωρίς προηγούμενα αρχεία ή τεκμηρίωση και σας ζητά να σχεδιάσετε "μια σελίδα όπως αυτή, αλλά με διαφορετικό κείμενο και εικόνες", η διαπίστωση της διάταξης είναι ένας πόνος.

Οι διαστάσεις σας επιτρέπουν να μετρήσετε εύκολα το ύψος και το πλάτος οποιουδήποτε στοιχείου στη σελίδα, καθώς και τα περιθώρια μεταξύ τους. Αυτό καθιστά εύκολο το να αναδημιουργήσετε υπάρχουσες σελίδες και να ελέγξετε τα δικά σας σχέδια μετά από την παραγωγή τους.

Εγκατάσταση: Διαστάσεις

5. Οπτικός επιθεωρητής

Visual Inspector, μια επέκταση του Chrome για την επιθεώρηση ιστοσελίδων και την παροχή σχολίων

Ο οπτικός επιθεωρητής είναι ένα ισχυρό εργαλείο ανατροφοδότησης και συνεργασίας για τις ομάδες σχεδιασμού, συνδυάζοντας τα χαρακτηριστικά των προηγούμενων τριών επεκτάσεων και προσθέτοντας ακόμη περισσότερα.

Στην καρτέλα Επιθεώρηση, μπορείτε να επιλέξετε οποιοδήποτε στοιχείο στη σελίδα για να λάβετε πλήρεις πληροφορίες σχετικά με αυτό, από τις διαστάσεις στο όνομα του αρχείου. Οι υποκατηγορίες χρωμάτων και τυπογραφίας σάς δίνουν τη δυνατότητα να δείτε την παλέτα χρωμάτων και όλες τις γραμματοσειρές με μια ματιά, ενώ τα στοιχεία ενεργητικού συγκεντρώνουν όλες τις εικόνες στη σελίδα σε μια θέση.

Η καρτέλα Συνεργασία είναι όπου μπορείτε να δώσετε ανατροφοδότηση και να συζητήσετε με την ομάδα σας και είναι εύκολο να αφήσετε ένα σχόλιο κάνοντας κλικ σε οποιοδήποτε στοιχείο της σελίδας.

Όπως τα πιο προηγμένα εργαλεία, το Visual Inspector συνοδεύεται από μια τιμή: θα χρειαστεί να πληρώσετε από $ 9 / χρήστη / μήνα για να προσθέσετε σχόλια και αλλαγές συγχρονισμού. Ωστόσο, τα βασικά χαρακτηριστικά του, όπως η επιθεώρηση χρωμάτων, γραμματοσειρών και εικόνων, είναι ελεύθερα να χρησιμοποιηθούν.

Εγκατάσταση: Οπτικός επιθεωρητής

6. Εύκολη καταγραφή οθόνης

Εύκολη καταγραφή οθόνης, μια επέκταση Chrome για λήψη στιγμιότυπων οθόνης

Μια επέκταση σύλληψης οθόνης μπορεί να φαίνεται περιττή, δεδομένου ότι ένα στιγμιότυπο οθόνης σε Mac Πώς να πάρει Screenshots σε Mac: Συμβουλές, εργαλεία και τεχνάσματα για να ξέρετε πώς να τραβήξετε Screenshots σε Mac: Συμβουλές, εργαλεία και τεχνάσματα για να ξέρετε Ανάγκη να τραβήξετε ένα στιγμιότυπο οθόνης το mac σας; Ακολουθούν οι καλύτερες συντομεύσεις, συμβουλές και εφαρμογές για στιγμιότυπα οθόνης macOS. Διαβάστε περισσότερα είναι ένα αεράκι, και η λήψη της οθόνης σας στα Windows Πώς να πάρει το τέλειο screenshot στα Windows Πώς να πάρει το τέλειο screenshot στα Windows Ο καλύτερος τρόπος για να πάρετε μια εικόνα οθόνης εξαρτάται από την έκδοση των Windows που βρίσκεστε. Σας παρουσιάζουμε τις λεπτές διαφορές, δίνουμε συμβουλές αντιμετώπισης προβλημάτων και αποκαλύπτουμε τις καλύτερες συντομεύσεις και εργαλεία πληκτρολογίου. Διαβάστε περισσότερα είναι μόνο λίγο περισσότερο ταλαιπωρία. Αλλά το Easy Screen Capture έχει αρκετά σημεία πώλησης.

Το πιο σημαντικό, σας επιτρέπει να καταγράψετε ολόκληρη την ιστοσελίδα, όχι μόνο την περιοχή που βλέπετε στην οθόνη σας. Αυτό είναι ανεκτίμητο όταν χρειάζεται να αναφέρετε αρκετά θέματα σε μια μακρά σελίδα και η σύλληψή τους θα πάρει τρία έως τέσσερα στιγμιότυπα οθόνης.

Ένα άλλο τακτοποιημένο τέχνασμα είναι να μπορείτε να αντιγράψετε το στιγμιότυπο οθόνης στο πρόχειρο και να το επικολλήσετε απευθείας σε μια συνομιλία ή ένα μήνυμα ηλεκτρονικού ταχυδρομείου αντί να συσσωρεύσετε άχρηστα αρχεία εικόνας στον υπολογιστή σας.

Εγκατάσταση: Εύκολη καταγραφή οθόνης

7. Muzli 2

Muzli 2, μια επέκταση του Chrome για σχεδιαστική έμπνευση

Τέλος, υπάρχει ένα κρίσιμο καθήκον που πρέπει να αντιμετωπίζετε κάθε πρωί: κουνώντας τα υπολείμματα του ύπνου και μπείτε στο αυλάκι. Το Muzli 2 της InVision θα χρησιμεύσει ως πρωινή εφημερίδα σας με επιμελημένα άρθρα για την τέχνη, το σχεδιασμό, το UX και την τεχνολογία.

Το Muzli αντικαθιστά την προεπιλεγμένη καρτέλα Chrome και σας επιτρέπει να προσαρμόσετε αυτό που βλέπετε εκεί. Ανάλογα με τα ενδιαφέροντά σας, η Muzli θα επιλέξει feeds για εσάς, με ιστότοπους που κυμαίνονται από Dribble και Behance έως 99designs και Creative Bloq. Πολλή έμπνευση για να κάνετε κύλιση κατά τη διάρκεια της πίτας του πρώτου σας καφέ!

Αν νομίζετε ότι μια ολόκληρη καρτέλα του προγράμματος περιήγησης που είναι γεμάτη με περιεχόμενο σχεδιασμού είναι πολύ έντονη, το Muzli έχει επίσης μια έκδοση Lite. Δεν θα αντικαταστήσει την προεπιλεγμένη καρτέλα σας και θα μπορείτε να έχετε πρόσβαση στην ροή όποτε θέλετε ακριβώς κάνοντας κλικ στο εικονίδιο επέκτασης.

Εγκατάσταση: Muzli 2

Αποκτήστε επεκτάσεις Chrome για όλες τις εργασίες σχεδίασης

Οι επεκτάσεις Chrome σε αυτήν τη λίστα δεν ταιριάζουν με το λογισμικό σχεδιασμού, αλλά καλύπτουν όλα τα μικρά πράγματα που έρχονται με το να είναι σχεδιαστής - είτε πρόκειται για τυπογραφική πληροφορία είτε για συνεργασία με τους συναδέλφους σας.

Μόλις καταλάβετε ότι το Chrome Web Store είναι γεμάτο με εργαλεία, μπορεί να είναι δύσκολο να σταματήσετε να προσθέτετε νέα. Μάθετε λοιπόν πώς να διαχειριστείτε τις επεκτάσεις του Chrome Πώς να διαχειριστείτε τις επεκτάσεις του Chrome χωρίς καμία παρενόχληση Πώς να διαχειριστείτε τις επεκτάσεις του Chrome χωρίς οποιεσδήποτε παρενοχλήσεις Η σωστή διαχείριση των επεκτάσεων του Chrome μπορεί να κάνει το πρόγραμμα περιήγησης ακόμα πιο ισχυρό. Ακολουθούν μερικές βασικές συμβουλές και κόλπα που πρέπει να γνωρίζετε. Διαβάστε περισσότερα πριν αποσυρθούν.

Εξερευνήστε περισσότερα σχετικά με: Επεκτάσεις προγράμματος περιήγησης, Google Chrome, Σχεδίαση ιστού.