Δημιουργία μιας απόκρισης εικόνας

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

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

με μια μεγάλη εικόνα sprite ως φόντο. Μόλις άκουσα μια ομιλία στο Smashing Conference από το @MikeRiethmuller με τίτλο: Beyond Media Queries, έχω ενδιαφερθεί περισσότερο για αυτό το θέμα. Εκτός από τη συζήτηση, συνιστώ ανεπιφύλακτα να διαβάσω το άρθρο του "Το SVG έχει περισσότερες δυνατότητες".

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

  1. Όταν χρησιμοποιείτε το SVG, μπορείτε να αφαιρέσετε το χαρακτηριστικό viewBox και να δημιουργήσετε ένα νέο σύστημα συντεταγμένων στα ένθετα στοιχεία συμβόλων SVG εφαρμόζοντας ένα νέο πλαίσιο απεικόνισης. (Ναι, ξέρω, ακούγεται μπερδεμένος, θα εξηγήσω λεπτομερέστερα.)
  2. Όταν χρησιμοποιείτε ερωτήματα μέσων μέσα στα αρχεία SVG και στη συνέχεια εισάγετε την εικόνα μέσω ετικέτας img ή ως εικόνα φόντου CSS, τα ερωτήματα μέσων είναι συνδεδεμένα με το πλάτος της εικόνας. Σχεδόν η ίδια συμπεριφορά με τη χρήση των Ερωτημάτων Container.

Η ιδέα γεννήθηκε

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

Το τελικό αποτέλεσμα

Αν είστε ήδη ενθουσιασμένοι, κατεβάστε το τελικό αρχείο DEMO ή δείτε το σε δράση σε αυτό το CodePen.

Βήμα προς βήμα (... uuh Baby ♬)

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

1. Σχεδιασμός του λογότυπου

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

Παραλλαγές λογότυπων: 1. Skyscraper - 2. Πορτραίτο - 3. Πλατεία - 4. Τοπίο

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

Όπως μπορείτε να δείτε, το λογότυπο αποτελείται από ένα οπτικό στοιχείο και το όνομα της εταιρείας. Μόνο στην τετράγωνη έκδοση, επέλεξα να μην εμφανιστεί το όνομα. Ο λόγος για αυτό είναι ότι ήθελα να είναι αναγνωρίσιμος, ακόμα και όταν χρησιμοποιείται ως μικροσκοπική μικρογραφία ίσως μόνο περίπου 32px x 32px.

2. Εγκατάσταση του αρχείου SVG

Προτού εξαγάγουμε τις εικόνες, πρέπει να δημιουργήσουμε ένα νέο αρχείο SVG. Ίσως είναι λίγο τρομακτικό να ξεκινήσετε το SVG με τον κώδικα γραφής, αλλά τελικά δεν είναι πολύ περίπλοκο. Pinky υπόσχεση. Το μόνο που χρειαζόμαστε είναι μια ετικέτα ανοίγματος και κλεισίματος, όπως αυτή:

Αν κοιτάξετε τα χαρακτηριστικά, θα παρατηρήσετε ότι δεν υπάρχει χαρακτηριστικό viewBox. Το πλάτος και το ύψος ρυθμίσαμε μόνο στο 100%.

(Σημείωση: Υπάρχουν επίσης δύο ιδιότητες xmlns. Για να είμαι ειλικρινής, δεν ξέρω ακριβώς γιατί πρέπει να είναι εκεί, θα έπρεπε να το λέω google ... ούτως ή άλλως αν τα διαγράψετε, δεν θα μπορείτε να χρησιμοποιήσετε οποιαδήποτε σύμβολα μέσα το SVG και αντ 'αυτού πάρτε κάποια άσχημα μηνύματα σφάλματος.)

3. Εξαγωγή συμβόλων SVG

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

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

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

Τώρα ας δούμε τι φαίνεται ο εξαγόμενος κώδικας:

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

Εάν όλα είναι σωστά, θα δείτε μια ομάδα που έχει το όνομα του artboard σας σαν αναγνωριστικό. Μέσα σε αυτήν την ομάδα είναι το περιεχόμενο που ενδιαφέρει. Σε αυτή την περίπτωση είναι ένα ορθογώνιο που χρησιμεύει ως φόντο και ένα περίπλοκο μονοπάτι που χτίζει το IX (ρομαντικό 9 περιστρεφόμενο αριστερόστροφα κατά 90 μοίρες ... μόνο σε περίπτωση που ζητούσατε).

4. Οικοδόμηση των συμβόλων

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


  
    
  
  
    
  

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

5. Χρησιμοποιώντας τα σύμβολά μας

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

Τώρα ας δούμε τι ακριβώς συμβαίνει εδώ.

Πρώτον, το xlink: href δείχνει ένα σύμβολο με ένα μοναδικό αναγνωριστικό και θα κάνει το περιεχόμενό του ... καλά, δεν είναι πραγματικά παραγόμενο, αλλά κλωνοποιείται και ξαφνικά υπάρχει ένα περίεργο πράγμα που έρχεται, που ονομάζεται Shadow DOM. Μπορεί να ακούγεται σαν κάτι από το Stranger Things, αλλά δεν χρειάζεται να φοβάσαι. Εφόσον δεν θέλετε να αλλάξετε τίποτα μέσα στο συμβολικό παράδειγμα μέσω του CSS, δεν υπάρχει τίποτα να ανησυχείτε.

Έπειτα έχουμε τα χαρακτηριστικά x, y, πλάτος και ύψος. Μπορεί να έχετε ήδη υποθέσει ότι αυτά τα χαρακτηριστικά καθορίζουν τη θέση και τις διαστάσεις του επεξεργασμένου συμβόλου. Αλλά δεν υπάρχει καμία μονάδα, έτσι πόσο μεγάλο θα είναι το σύμβολό μας; Μέσα σε ένα SVG οι μονάδες ορίζονται από το χαρακτηριστικό viewBox που έχει οριστεί στην ετικέτα SVG. Δεδομένου ότι δεν έχουμε ορίσει ένα viewBox και καθορίζεται μόνο το πλάτος και το ύψος (100%), μια μονάδα αντιστοιχεί σε ένα εικονοστοιχείο και το σύμβολό μας θα έχει πλάτος 100px. Και δεν έχει σημασία αν αλλάζετε το πλάτος του SVG. Θα παραμείνει πάντα σε πλάτος 100px.

Δοκιμάστε να αλλάξετε τις ιδιότητες πλάτους και ύψους μέσα σε αυτό το CodePen. Θα παρατηρήσετε ότι το σύμβολο θα διατηρεί πάντοτε τον λόγο διαστάσεων του. Ευτυχώς αυτό ακριβώς χρειαζόμαστε για το λογότυπό μας. Εάν θέλετε να αλλάξετε τη συμπεριφορά αλλαγής μεγέθους, χρειάζεστε ένα χαρακτηριστικό που ονομάζεται preserveAspectRatio. Ανατρέξτε στο άρθρο του άρθρου SaraSoueidan σχετικά με την κατανόηση των συστημάτων συντεταγμένων SVG και του μετασχηματισμού αν θέλετε να μάθετε περισσότερα γι 'αυτό.

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

6. Συνδυασμός συμβόλων μέσα σε ένα νέο σύμβολο

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

Πορτραίτο-Έκδοση: Μωβ: προβολή - Κόκκινο: Θέση - Τυρκουάζ: Πλάτος και ύψος

Τώρα, πρέπει μόνο να μεταφράσουμε όλους τους αριθμούς στο νέο μας σύμβολο SVG, το οποίο θα φαίνεται ως εξής:


  
  

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

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