Δημιουργήστε τις δικές σας γραμματοσειρές χρησιμοποιώντας το Inkscape και το Fontastic.me

Σε αυτό το σεμινάριο, θα σας δείξω πώς μπορείτε να δημιουργήσετε τη δική σας γραμματοσειρά χειρογράφου χρησιμοποιώντας το Inkscape και το fontastic.me.

Αν δεν είστε εξοικειωμένοι με αυτές, το Inkscape είναι μια εφαρμογή γραμμής διανυσμάτων ελεύθερης και ανοιχτής γραμμής που διατίθεται για Windows, OS X και Linux. Το Fontastic.me είναι ένας ιστότοπος που προσφέρει μια ποικιλία γραμματοσειρών εικονιδίων, αλλά σας επιτρέπει επίσης να ανεβάσετε τα δικά σας γραφικά SVG και να τα μετατρέψετε σε μια γραμματοσειρά δωρεάν.

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

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

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

01 από 05

Εισαγάγετε μια φωτογραφία της γραμματοσειράς σας

Κείμενο και εικόνες © Ian Pullen

Θα χρειαστείτε μια φωτογραφία με κάποια σύντομα γράμματα αν θέλετε να ακολουθήσετε και αν δεν θέλετε να δημιουργήσετε τη δική σας, μπορείτε να κατεβάσετε και να χρησιμοποιήσετε το a-doodle-z.jpg που περιέχει τα κεφαλαία γράμματα AZ.

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

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

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

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

02 του 05

Παρακολουθήστε τη φωτογραφία για να δημιουργήσετε γραμματοσειρές διάνυσμα γραμμής

Κείμενο και εικόνες © Ian Pullen

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

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

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

03 του 05

Διαχωρίστε την ανίχνευση σε μεμονωμένα γράμματα

Κείμενο και εικόνες © Ian Pullen

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

Για να το κάνετε αυτό, απλώς κάντε κλικ και σύρετε ένα marquee επιλογής γύρω από ένα γράμμα και μετά πηγαίνετε στο Object> Group ή πατήστε Ctrl + G ή Command + G ανάλογα με το πληκτρολόγιό σας.

Προφανώς, πρέπει να το κάνετε μόνο με γράμματα που περιέχουν περισσότερα από ένα στοιχεία.

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

04 του 05

Ορίστε το μέγεθος εγγράφου

Κείμενο και εικόνες © Ian Pullen

Πρέπει να ρυθμίσουμε το έγγραφο σε κατάλληλο μέγεθος, γι 'αυτό πηγαίνετε στο Αρχείο> Ιδιότητες εγγράφου και στο παράθυρο διαλόγου ρυθμίστε το πλάτος και ύψος ανάλογα με τις ανάγκες. Έβαλα το δικό μου σε 500px με 500px, αν και ιδανικά θα ορίσατε το πλάτος διαφορετικά για κάθε γράμμα έτσι ώστε τα τελικά γράμματα να ταιριάζουν μαζί πιο τακτοποιημένα.

Στη συνέχεια, θα δημιουργήσουμε τα γράμματα SVG που θα μεταφορτωθούν στο fontastic.me.

05 του 05

Δημιουργήστε μεμονωμένα αρχεία SVG για κάθε γράμμα

Κείμενο και εικόνες © Ian Pullen

Το Fontastic.me απαιτεί κάθε γράμμα να είναι ξεχωριστό αρχείο SVG, οπότε θα πρέπει να τα παράγουμε πριν πιέσουμε.

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

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

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

Μπορείτε τώρα να μετακινήσετε ή να διαγράψετε το πρώτο γράμμα και να τοποθετήσετε το δεύτερο γράμμα στη σελίδα και πάλι να μεταβείτε στο File> Save As. Πρέπει να το κάνετε αυτό για κάθε επιστολή. Εάν έχετε περισσότερη υπομονή από μένα, μπορείτε να προσαρμόσετε το πλάτος της σελίδας καθώς προχωράτε για να ταιριάζει καλύτερα σε κάθε γράμμα.

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

Τώρα μπορείτε να επισκεφθείτε το fontastic.me και να δημιουργήσετε τη γραμματοσειρά σας. Έχω εξηγήσει λίγο για αυτή τη διαδικασία σε ένα συνοδευτικό άρθρο που εξηγεί πώς να χρησιμοποιήσετε αυτόν τον ιστότοπο για να κάνετε τη γραμματοσειρά σας: Δημιουργήστε μια γραμματοσειρά χρησιμοποιώντας το Fontastic.me