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

Διαφήμιση

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

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

1. Dropbox για Gmail

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

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

Εγκαθιστώ:Dropbox για Gmail

2. FontFace Ninja

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

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

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

Εγκαθιστώ:FontFace Ninja

3. ColorPick σταγονόμετρο

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

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

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

Εγκαθιστώ:ColorPick σταγονόμετρο

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

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

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

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

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

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

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

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

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

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

6. Εύκολη λήψη οθόνης

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

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

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

Εγκαθιστώ:Εύκολη λήψη οθόνης

7. Μούσλι 2

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

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

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

Εγκαθιστώ:Μούσλι 2

Λάβετε επεκτάσεις Chrome για όλες τις εργασίες σχεδίασης

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

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