Πώς να εξάγετε μοτίβα SVG

Κάποτε ήταν ότι θα μπορούσατε απλά να ξεδιπλώσετε μια εικαστική εικόνα ως gif ή jpg σε 72dpi και να την κεραμιδίσετε με το CSS. Είναι μια κοινή πρακτική μεταξύ των σχεδιαστών ιστοσελίδων, και έχει εδώ και χρόνια? είναι ένας γρήγορος και εύκολος τρόπος να προσθέσετε ένα σχέδιο ή υφή στη δουλειά σας. Στη συνέχεια, αυτά τα ενοχλητικά σημεία πάνω από την Apple κυκλοφόρησε οθόνες αμφιβληστροειδούς και πριν το ξέραμε α Το εικονοστοιχείο δεν ήταν ένα εικονοστοιχείο πια. Ξαφνικά αυτά τα αγαπημένα σχέδια έγιναν ιστορία.

Τα SVG (Scaleable Vector Graphics) γίνονται γρήγορα το πρότυπο για τα τραγανή γραφικά στον Ιστό. Αντιμετωπίζουν το πρόβλημα της δημιουργίας ξεχωριστών αρχείων εικόνων για να φιλοξενήσουν συσκευές αμφιβληστροειδούς. Είναι πραγματικά διασκεδαστικό και εύκολο στη δημιουργία, και ανοίγουν έναν κόσμο δυνατοτήτων ...

Βήμα 1: Δημιουργήστε ένα μοτίβο

Υπάρχουν δεκάδες διαφορετικές εφαρμογές που θα σας επιτρέψουν να σχεδιάσετε ένα μοτίβο SVG. Το αγαπημένο μου είναι το Illustrator, γι 'αυτό θα χρησιμοποιήσω.

Ανοίξτε το Adobe Illustrator και δημιουργήστε ένα νέο έγγραφο 300px σε 300px. Στη συνέχεια, μεταβείτε στο Αντικείμενο> Μοτίβο> Κάντε και ο καμβάς σας θα αλλάξει. Θα παρατηρήσετε ότι θα υπάρχει ένα μπλε τετράγωνο στη μέση του artboard σας. Επίσης, ο πίνακας επιλογών μοτίβου θα είναι ανοιχτός.

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

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

Στη συνέχεια, σχεδιάστε ένα τετράγωνο, στα 50px με 50px. Ευθυγραμμίστε το με τα επάνω και δεξιά άκρα της πλατείας.

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

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

Μετακινήστε τα δύο σημεία 20px προς τα δεξιά για να σχηματίσουν ένα είδος βέλους.

Στη συνέχεια, αντιγράψτε το σχήμα σύροντάς το σε μια νέα θέση ενώ κρατάτε πατημένο το alt πλήκτρο. (Ή αντιγράψτε και επικολλήστε εάν προτιμάτε.)

Επιλέξτε το νέο σχήμα και σύρετέ το στην κάτω αριστερή γωνία του τετραγώνου.

Με το ακόμα επιλεγμένο σχήμα, πιάστε μια γωνία και περιστρέψτε το 180 μοίρες. (Κρατήστε πατημένο το πλήκτρο αλλαγής ταχυτήτων για να ασφαλίσει ακριβώς 180 μοίρες.)

Από το επάνω μενού επιλέξτε Αντικείμενο> Μετασχηματισμός> Μετακίνηση και μετακινήστε το νέο σχήμα -20px.

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

Βήμα 2: Εξαγωγή του σχεδίου

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

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

Επιλέξτε Αρχείο> Αποθήκευση ως. Αποθηκεύστε το αρχείο σας ως αρχείο .svg.

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

Η τυπική μορφή είναι το SVG 1.1, επειδή είναι η πιο συχνά χρησιμοποιούμενη και πιο υποστηριζόμενη μορφή SVG. Σε αυτό το πλαίσιο, θα ελέγξετε επίσης αν διατηρείτε ή όχι τη δυνατότητα επεξεργασίας του SVG στο Illustrator ή εάν ενεργοποιείτε κείμενο σε μια διαδρομή, η οποία μπορεί να είναι χρήσιμη. Έχετε την επιλογή να χρησιμοποιήσετε το SVG ως πραγματικό αρχείο ή μπορείτε να αντιγράψετε τον κώδικα και να τον επικολλήσετε απευθείας στο έγγραφο html. Αφού τελειώσετε, κάντε κλικ στο OK.

Βήμα 3: Επεξεργαστείτε το πρότυπο SVG

Ανοίξτε το αρχείο .svg σε ένα πρόγραμμα επεξεργασίας κειμένου. Χρησιμοποιώ το Υψηλό Κείμενο, αλλά μπορείτε να χρησιμοποιήσετε το Σημειωματάριο, το Dreamweaver ή ό, τι κωδικοποιείτε στο HTML.

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

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

Θα δείτε: στον πάτο. Αλλαγή των δύο τιμών από 300 έως 100%. Έτσι, ο κωδικός σας θα μοιάζει με:

Δεν πρέπει να παρατηρήσετε ακόμα μια αλλαγή. Θα πρέπει να είναι ακόμα ένα τετράγωνο. Γιατί; Επειδή το πλαίσιο παραστάσεων έχει οριστεί σε 300 x 300, οι οποίες είναι τετράγωνες. Για να γεμίσετε το πλάτος και το ύψος του προγράμματος περιήγησης, αλλάξτε τον κώδικα στη γραμμή 4 από το viewBox = "0 0 300 300" για να δείτεBox = "0 0 100% 100%" .

Όταν ανανεώνουμε το πρόγραμμα περιήγησης, το πρότυπο γεμίζει τον περιηγητή μας από άκρο σε άκρο. Το πρόβλημα είναι, τι κι αν θέλετε να αλλάξετε το μέγεθος του μοτίβου; Πηγαίνετε πίσω στο Illustrator και επαναλάβετε τα πάντα ξανά; Όχι. Αυτή είναι η ομορφιά της δημιουργίας του κώδικα SVG στον Illustrator. Μπορείτε απλά να επεξεργαστείτε τον κώδικα. Μην το σκεφτείτε ως ένα καθαρά γραφικό αρχείο. Σκεφτείτε το ως ένα αρχείο κώδικα που μπορείτε να χειριστείτε και να λυγίσει τη θέλησή σας.

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

Αν κοιτάξετε τον κώδικα θα δείτε ότι το σχέδιο αποτελείται από πολύγωνα. Το πρώτο πολύγωνο έχει ένα πλήθος "none" (το οποίο παράγει λευκό) και το υπόλοιπο έχει τιμές hex.

Για να αλλάξετε τα χρώματα του μοντέλου μας, πρέπει να αλλάξουμε τις τιμές πλήρωσης.

Αν είστε το είδος του ατόμου που θέλει να αντιγράψει και να επικολλήσει, εδώ είναι ο τελικός κώδικας SVG:

Αυτό είναι απολύτως έγκυρο, αλλά είναι λίγο βρώμικο (χάρη στο Illustrator). Θα σας συνιστούσα να το βελτιστοποιήσετε προτού το χρησιμοποιήσετε. Υπάρχουν πολλές διαθέσιμες επιλογές βελτιστοποίησης, αλλά Ο Peter Collingridge είναι ένα από τα καλύτερα, μας δίνει αυτόν τον τελικό κώδικα:

συμπέρασμα

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