Χρήση διανυσματικών εργαλείων: Η προσέγγιση ενός σχεδιαστή ιστοσελίδων

Εάν είστε σχεδιαστής ιστοσελίδων, υπάρχει μεγάλη πιθανότητα το Photoshop να είναι ανοιχτό και να λειτουργεί στον υπολογιστή σας. Ας το παραδεχτούμε - το Photoshop ήταν πάντα το πρότυπο εργασίας και de facto για το σχεδιασμό ιστοσελίδων. Αλλά τα τελευταία χρόνια, όλο και περισσότεροι σχεδιαστές (και προγραμματιστές!) Κινούνται προς γραφικά που βασίζονται σε διανυσματικά και μακριά από τις χθεσινές παραλλαγές που βασίζονται σε pixel.

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

Λογισμικό σχεδιασμού ιστοσελίδων: Μια σύντομη ιστορία

Η αρχική, πρωταρχική χρήση του Photoshop ήταν για την επεξεργασία φωτογραφιών - όχι για το σχεδιασμό ιστοσελίδων. Στην πραγματικότητα, υπήρχε ένα άλλο πρόγραμμα που δημιουργήθηκε ειδικά για το σκοπό αυτό: Πυροτεχνήματα.



Φυσικά, εάν είστε νέοι στο σχεδιασμό ιστοσελίδων, ίσως να μην γνωρίζετε για τα πυροτεχνήματα. Αυτό οφείλεται στο γεγονός ότι η Adobe έβαλε ένα πάγωμα χαρακτηριστικών - και ουσιαστικά το διέκοψε - το 2013. Προσωπικά, δεν ήμουν ποτέ οπαδός των Fireworks, αλλά γνωρίζω πολλούς σχεδιαστές που το χρησιμοποιούν ακόμα και σήμερα. Ωστόσο, οι περισσότεροι σχεδιαστές χρησιμοποιούν το Photoshop ή κάποιο άλλο λογισμικό σχεδιασμού που βασίζεται σε pixel.

ΕΝΤΑΞΕΙ. Ας υποθέσουμε ότι χρησιμοποιείτε αυτό το λογισμικό σχεδιασμού που βασίζεται σε pixel για να δημιουργήσετε πλήρη κοροϊδεύω. ή ίσως το χρησιμοποιείτε για να δημιουργήσετε μόνο τα στοιχεία όπως κουμπιά, γραμμές εργαλείων και εικονίδια. Αλλά αναρωτηθείτε αυτό: γιατί να μην δημιουργήσετε αυτά τα πράγματα σε πιο εύχρηστη μορφή; Γιατί να μην αξιοποιήσετε τη δύναμη των διανυσμάτων;

πράγματα που πρέπει να σχεδιάσετε με copic δείκτες

Γιατί διανύσματα;

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

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

ρεαλιστικά σχέδια αντικειμένων ασπρόμαυρα

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

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

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

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

Οι εικόνες που βασίζονται σε διανυσματικά παραμένουν παρασιτικές και καθαρές σε κάθε μέγεθος

Οι εικόνες που βασίζονται σε διανυσματικά παραμένουν παρασιτικές και καθαρές σε κάθε μέγεθος

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

Επιλογές λογισμικού

Λοιπόν, τι περιμένετε; Αρχίστε να κάνετε αυτά τα διανύσματα. Αυτό είναι σωστό! Το Photoshop είναι μια εφαρμογή σχεδιασμού που βασίζεται σε pixel. Μην ανησυχείτε, δεν υπάρχει έλλειψη διαθέσιμων εφαρμογών που θα σας βοηθήσουν να ξεκινήσετε με τα διανύσματα. Ωστόσο, υπάρχουν δύο που μπορείτε να θεωρήσετε ως κορυφαίους υποψηφίους.

Adobe Illustrator

η τέχνη των αστεριών πολέμων ξυπνά η δύναμη

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

Σχεδιαστής συγγένειας

πώς να αφαιρέσετε έντονο φως στο photoshop

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

Χρησιμοποιώντας το Affinity Designer για σχεδιασμό ιστοσελίδων

Το Affinity Designer, σύμφωνα με τους κατασκευαστές του, είναι μια «ολοκληρωμένη επαγγελματική εφαρμογή σχεδιασμού γραφικών». Δεν μπορούσα να συμφωνήσω περισσότερο. όταν πρόκειται για UI, UX και web design, αυτό είναι ένα φανταστικό εργαλείο.

Στην πραγματικότητα, με κάθε αγορά του Affinity Designer έχετε ένα δωρεάν GRADE UI KIT , η οποία περιλαμβάνει ελαφριές και σκοτεινές παραλλαγές πάνω από 1000 εικονιδίων και στοιχείων. Διαθέτει όλα όσα χρειάζεστε για να ξεκινήσετε με σχεδιασμούς ιστοσελίδων που βασίζονται σε φορέα.

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

Πιθανώς το καλύτερο χαρακτηριστικό για τους σχεδιαστές ιστοσελίδων είναι περιορισμοί. Με περιορισμούς μπορείτε να δημιουργήσετε κοροϊδεύω που θα αντιδρούν με ψευδοαποκριτικό τρόπο. Δείτε την πραγματική ισχύ των διανυσμάτων: δημιουργία ενός μεμονωμένου στοιχείου και δυνατότητα χρήσης αυτού του στοιχείου σε πολλές συσκευές / αναλύσεις. Όπως μπορείτε να φανταστείτε, αυτή είναι μια τεράστια εξοικονόμηση χρόνου! Για μια πλήρη λίστα χαρακτηριστικών, επισκεφθείτε το Ιστοσελίδα Affinity Designer .

Τώρα ξέρετε για τα διανύσματα, νομίζω ότι είναι καιρός να απορρίψετε αυτά τα pixel!

Σχετικά Άρθρα: