Σχεδιασμός SVG γραφικά στο πρόγραμμα περιήγησής σας

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

Το GUI για αυτόν τον επεξεργαστή αισθάνεται παρόμοιο με το λογισμικό της Adobe, οπότε αν χρησιμοποιείτε ήδη το Photoshop ή το Illustrator, θα έχετε έναν ευκολότερο χρόνο να μάθετε τα σχοινιά. Αλλά ακόμη και οι πλήρεις αρχάριοι μπορούν να βουτήξουν σε αυτό και να πάρουν τα βασικά από το μηδέν.

• Πάρτε το Adobe Creative Cloud

Θα χρησιμοποιήσουμε αυτά τα εικονίδια αγορών από το Vecteezy.

Απλά επισκεφθείτε τη σελίδα εικονιδίων και κάντε κλικ στο "Επεξεργασία & AMP; Κάντε λήψη. Αυτό ανοίγει τον επεξεργαστή ακριβώς στο πρόγραμμα περιήγησής σας, ώστε να μπορείτε να προσαρμόσετε και να δημιουργήσετε αυτά τα γραφικά. Για αυτό το σεμινάριο, θα σας δείξουμε πώς να nab μερικά από αυτά τα εικονίδια και να τα μετατρέψουμε σε ένα μεγαλύτερο γραφικό γραμμής προόδου - την τέλεια επιλογή για οποιαδήποτε αρχική σελίδα ηλεκτρονικού εμπορίου.

Έτσι με αυτά τα εικονίδια αγορών ανοίγουν στον επεξεργαστή Vecteezy, μπορούμε να ξεκινήσουμε!

01. Επιλέξτε τα εικονίδια

Κάντε διπλό κλικ στην ομάδα εικονιδίων για να επιλέξετε όλα τα εικονίδια (ίσως χρειαστεί να κάνετε διπλό κλικ δύο φορές). Θα χρησιμοποιήσω τρία συγκεκριμένα εικονίδια για αυτό το σεμινάριο: οι τσάντες αγορών, η πιστωτική κάρτα και το κουτί δώρου.

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

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

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

02. Καθαρίστε τα σκουπίδια

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

Για να το κάνετε αυτό, απλά μεγεθύνετε πολύ κοντά και επιλέξτε τον κύκλο φόντου. Στη συνέχεια, πατήστε DELETE και θα πρέπει να εξαφανιστεί.

Εάν το σύνολο του εικονιδίου εξαφανιστεί - μην πανικοβληθείτε. Απλά κάντε κλικ στην επιλογή Αναίρεση κοντά στην κορυφή ή πατήστε CTRL / CMD + Z και δοκιμάστε ξανά. Ίσως χρειαστεί να κάνετε διπλό κλικ για να μπείτε μέσα στην ομάδα εικονιδίων.

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

03. Προσθήκη κειμένου

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

Για να τονίσουμε αυτή τη διαδικασία, ας προσθέσουμε ετικέτες κάτω από κάθε εικονίδιο. Στην αριστερή γραμμή εργαλείων, βρείτε το εργαλείο κειμένου (δεύτερο κουμπί), στη συνέχεια, κάντε κλικ κάτω από το εικονίδιο της τσάντας για να προσθέσετε ένα μπλοκ κειμένου. Προσθέστε το κείμενο 'Shop' και πατήστε Εισάγετε στο πληκτρολόγιό σας.

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

Χρησιμοποιώ ανοικτά SANS ημι-τολμηρής μεγέθους 30 με διάστημα -1,50 επιστολή. Το χρώμα του κειμένου είναι # 525252.

Διπλασιάστε αυτό το κείμενο δύο φορές και τοποθετήστε τα αντίγραφα με τα άλλα εικονίδια. Χρησιμοποιήστε το κείμενο 'Pay' κάτω από το εικονίδιο της πιστωτικής κάρτας και 'λαμβάνετε' κάτω από το κουτί δώρου.

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

04. Ρύθμιση γραφικών

Πριν δημιουργήσετε τη γραμμή προόδου, μπορείτε να αλλάξετε τα χρώματα που σας αρέσουν στα εικονίδια.

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

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

Στον πίνακα επιλογής (πρώτο εικονίδιο στο αριστερό μενού) Βρείτε τις ρυθμίσεις πλήρωσης. Θα δείτε το προεπιλεγμένο χρώμα είναι # 2E3192. Κάντε κλικ σε αυτό το πλήκτρο πλήρωσης για να αποκτήσετε πρόσβαση σε ένα αναπτυσσόμενο χρωματικό τροχό. Εδώ, μπορείτε είτε να μεταφέρετε για να βρείτε το χρώμα που θέλετε ή να εισάγετε απευθείας έναν εξάγωνο κώδικα.

Εισάγετε # 518531 και πατήστε ENTER. Αυτό θα πρέπει να σώσει το αποτέλεσμα και να ενημερώσει και τα τρία σχήματα ταυτόχρονα. Μη διστάσετε να παίξετε γύρω με οποιεσδήποτε άλλες ρυθμίσεις χρώματος που θέλετε να αλλάξετε!

05. Ξεκινώντας τη γραμμή προόδου

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

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

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

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

Εισάγετε 100 και στα δύο πεδία και σύρετε τον πρώτο κύκλο σας κάτω από το πρώτο εικονίδιο.

06. Αντιπροσώπευση κύκλων

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

Τώρα, αν κρατάτε τη μετατόπιση και κάντε κλικ, μπορείτε να σύρετε αυτόν τον διπλανό κύκλο σε μια ευθεία γραμμή οριζόντια. Αυτό σας επιτρέπει να ευθυγραμμίσετε απόλυτα όλους τους κύκλους σας μαζί σε μια ευθεία γραμμή (ή αρκετά κοντά σε ένα).

Κάνετε αυτό μέχρι να έχετε τρία διαφορετικά σχήματα κύκλου στα 100 x 100, το καθένα τοποθετημένο κάτω από τα τρία εικονίδια.

07. Προσθέστε μερικές γραμμές σύνδεσης

Μετακινήστε πίσω στο πάνελ στοιχείων και βρείτε το τετράγωνο σχήμα. Κάντε κλικ για να προσθέσετε ένα τετράγωνο πάνω στον καμβά.

Με αυτό το σχήμα επιλέγεται ξανά στο εργαλείο επιλογής και βρείτε τον πίνακα μεγέθους πλάτους / ύψους. Δεδομένου ότι αυτό το ορθογώνιο θα πρέπει να καλύπτει ολόκληρο το πλάτος της γραμμής προόδου, χρειαζόμαστε μόνο ένα πολύ μακρύ σχήμα. Έτσι, αλλάξτε το ύψος σε 10 και το πλάτος σε οποιοδήποτε αριθμό πρέπει να συνδέσετε όλους τους κύκλους σας μαζί. Το ορυχείο είναι 750 ευρέως.

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

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

08. RECOLOURING

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

Κάντε κλικ για να επιλέξετε το μακρύ ορθογώνιο και βρείτε τις ρυθμίσεις πλήρωσης στον πίνακα Εργαλεία. Αλλάξτε το χρώμα στο # C5C5C5 και πατήστε Enter.

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

Κρατήστε τη μετατόπιση και κάντε κλικ σε κάθε έναν από τους τρεις κύκλους. Ρυθμίστε το χρώμα πλήρωσης στο # F5F5F5, πατήστε ENTER και, στη συνέχεια, κάντε κλικ στο εικονίδιο X για να κλείσετε τον πίνακα επιλογής χρώματος πλήρωσης. Παρακάτω, θα βρείτε ρυθμίσεις εγκεφαλικού επεισοδίου. Αλλάξτε το εγκεφαλικό επεισόδιο συμπληρώστε το # C5C5C5 και πατήστε Enter.

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

09. Προσθέτοντας βήματα προόδου

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

Κάντε κλικ στο εργαλείο κειμένου και εισάγετε τον αριθμό 1 στον πρώτο κύκλο. Χρησιμοποιώ ανοιχτό Sans Extra-Bold, μέγεθος 45 με το χρώμα # C5C5C5 για να ταιριάζει με τα σύνορα. Σύρετε αυτό το κείμενο, ώστε να είναι τοποθετημένο στο κέντρο του κύκλου.

Αντιγράψτε το στοιχείο κειμένου και μετακινήστε το στον δεύτερο κύκλο με το κείμενο '2'. Κάνετε το ίδιο για τον τρίτο κύκλο με κείμενο '3'.

10. Επισημάνετε το πρώτο βήμα

Ως φινίρισμα αφή, ας επισημάσουμε το πρώτο βήμα χρησιμοποιώντας ένα ελαφρύτερο μπλε περίγραμμα. Πρώτα επιλέξτε τον αριθμό '1' που μόλις δημιουργήσατε και αλλάξτε την πλήρωση προς # 4976A3. Στη συνέχεια, κάντε κλικ για να επιλέξετε τον κύκλο πίσω από το κείμενο. Βρείτε τις ρυθμίσεις εγκεφαλικού επεισοδίου και αλλάξτε το χρώμα εγκεφαλικού επεισοδίου στο # 4976A3. Αυτό θα πρέπει να προσθέσει ένα σκούρο μπλε περίγραμμα γύρω από τον κύκλο. Με τον κύκλο ακόμα επιλεγμένο, κάντε κλικ στις ρυθμίσεις πλήρωσης και αλλάξτε το χρώμα στο # E2EBFA.

Και αυτό είναι! Τώρα μπορείτε να το εξάγετε αυτό ως PNG / JPG χρησιμοποιώντας τη λειτουργία λήψης στην επάνω δεξιά γωνία. Μπορείτε επίσης να αποκρύψετε το λευκό φόντο για να το εξάγετε αυτό ως διαφανές png και να αλλάξετε το συνολικό μέγεθος εγγράφου χρησιμοποιώντας τον πίνακα φόντου (τρίτο κουμπί στο αριστερό μενού).

Ή αν θέλετε να το αποθηκεύσετε για μελλοντικές αλλαγές, απλά μεταβείτε στο αρχείο & gt, εκτός από αργότερα. Θα πρέπει να δημιουργήσετε έναν δωρεάν λογαριασμό Vecteezy, αλλά είναι ένας πολύ καλός τρόπος για να διατηρήσετε τη σκληρή δουλειά σας για μελλοντική αναφορά.

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 295. Αγοράστε το εδώ .

Διαβάστε περισσότερα:

• 10 χρυσοί κανόνες για την ανταποκρινόμενη SVGS
• Εξερευνήστε τα συναρπαστικά νέα χαρακτηριστικά στο SVG 2
• Supercharge SVG Animations με GSAP