Πώς να φτιάξετε θέματα Tumblr με σχεδιασμό PSD

Το Tumblr συνδυάζει την έμφαση στην οπτική δημιουργικότητα με το μήκος της ανάρτησης που κυμαίνεται μεταξύ της συντομίας του Twitter και του ανοιχτού μήκους μιας παραδοσιακής καταχώρησης ιστολογίου. Όταν χρησιμοποιείτε ένα προσαρμοσμένο θέμα Tumblr που επεκτείνει την εμφάνιση της ταυτότητάς σας εντός και εκτός σύνδεσης, ένα tumblelog ταιριάζει σε μια στρατηγική που περιλαμβάνει άλλα διαδικτυακά και κοινωνικά μέσα. Οι σχεδιαστές ιστοσελίδων συχνά αρχίζουν να αναπτύσσουν προσαρμοσμένα θέματα στο Adobe Photoshop, χρησιμοποιώντας την πολυεπίπεδη μορφή αρχείου PSD του προγράμματος ως οπτικό χώρο εργασίας τους.

Καθορισμός διαστάσεων

Οι οδηγοί χάρακα του Adobe Photoshop και οι δυνατότητες επίστρωσης απλοποιούν το έργο δημιουργίας της βάσης ενός θέματος Tumblr, με ένα πλέγμα διάταξης που καθορίζει τις διαστάσεις των περιοχών περιεχομένου. Εάν ορίσετε ομάδες επιπέδων για κάθε πτυχή του σχεδιασμού σας, συμπεριλαμβανομένης της κύριας περιοχής περιεχομένου και της πλευρικής γραμμής, μπορείτε να τοποθετήσετε όλους τους οδηγούς για κάθε στοιχείο σε ένα επίπεδο σε κάθε ομάδα. Αυτή η ρύθμιση σάς δίνει τη δυνατότητα να κάνετε τους οδηγούς σας ορατούς επιλεκτικά, αντί να εμφανίζετε και να αποκρύβετε όλους τους με μια συντόμευση πληκτρολογίου Photoshop ή στοιχείο μενού και διατηρεί τα σχετικά στοιχεία οδηγού μαζί. Ονομάστε τις ομάδες και τα επίπεδα σας για να προσδιορίσετε τη λειτουργία κάθε τμήματος του σχεδίου σας. Οι στιγμές που επενδύετε σε στοιχειώδεις εργασίες ονομασίας αποδίδονται στο χρόνο που δεν χρειάζεται να ξοδέψετε για να ενεργοποιήσετε και να απενεργοποιήσετε τα επίπεδα για να προσδιορίσετε τι περιέχουν. Για να βρείτε γρήγορα τις διαστάσεις οποιουδήποτε στοιχείου διάταξης, πατήστε "F8" για να ανοίξετε τον πίνακα πληροφοριών και, στη συνέχεια, "Ctrl-κλικ" στη μικρογραφία του πίνακα "Επίπεδα" για να φορτώσετε μια επιλογή με βάση τα pixel σε αυτό το επίπεδο.

Επιλογή χρωμάτων

Είτε χρησιμοποιείτε τη δοκιμασμένη έγχρωμη επιλογή χρώματος για να επιλέξετε αποχρώσεις για το θέμα σας, να φορτώσετε επιλογές από μια έγχρωμη βιβλιοθήκη για να ταιριάξετε ένα τυπωμένο κομμάτι ή λογότυπο ή να βασιστείτε στο εργαλείο Eyedropper για να δείτε δείγματα αποχρώσεων από άλλο αρχείο ή γραφικό, το Adobe Photoshop προσφέρει ένα ποικιλία τρόπων επιλογής χρωμάτων θέματος. Όταν γεμίζετε ένα στρώμα με ένα συμπαγές χρώμα για να προσομοιώσετε το χρώμα φόντου ενός θέματος Tumblr ή άλλων στοιχείων του σχεδιασμού σας, μπορείτε να αντιγράψετε τον τύπο χρώματος ως κείμενο από τη δεκαεξαδική ανάγνωση του Color Picker και να επικολλήσετε την αναγνώριση χρώματος στο όνομα του επιπέδου για γρήγορη αναφορά. Οι έξι αλφαριθμητικοί χαρακτήρες σε δεκαεξαδικό χρώμα εμφανίζονται στον κώδικα Tumblr καθώς και σε σχέδια Ιστού για ιστολόγια και άλλες διαδικτυακές μορφές.

Δημιουργία γραφικών

Η κεφαλίδα που προσδιορίζει ένα tumblelog μπορεί να χρησιμοποιήσει ένα γραφικό bitmapped ως θεματικό γραφικό. Μπορείτε να δημιουργήσετε αυτό το κρίσιμο στοιχείο χρησιμοποιώντας έναν συνδυασμό στοιχείων που βασίζονται σε κείμενο και pixel ή διάνυσμα μέσα στο αρχείο PSD. Εάν το γραφικό περιλαμβάνει προσαρμόσιμα στοιχεία που πληκτρολογείτε στο Photoshop, αφήστε τα ως ζωντανό τύπο στο αρχείο θεμάτων που βασίζεται στο PSD και τα ραστερίστε μόνο σε αντίγραφα του αρχείου που παρέχετε σε άλλα άτομα που δεν διαθέτουν άδεια για τα απαιτούμενα αρχεία γραμματοσειρών στο θέμα σας. Όταν χρησιμοποιείτε διανυσματικά εργαλεία για να σχεδιάσετε στο Photoshop, συμπεριλαμβανομένων των εργαλείων πένας και σχήματος, σχεδιάστε χρησιμοποιώντας κανόνες οδηγούς που ευθυγραμμίζονται με την υποκείμενη ανάλυση του αρχείου προτύπου. Αυτή η τεχνική βοηθά στη διατήρηση του έργου σας όσο το δυνατόν πιο ευκρινές όταν αποθηκεύετε ή εξάγετε ραστεροποιημένες εκδόσεις του.

Επόμενα βήματα

Εάν γνωρίζετε πώς να κωδικοποιήσετε HTML και CSS και κατανοήσετε τις εξειδικευμένες μεταβλητές που χρησιμοποιεί το Tumblr στη δομή κώδικα, μπορείτε να μεταφράσετε τις διαστάσεις, τις προδιαγραφές χρώματος και τα γραφικά που δημιουργείτε σε ένα PSD σε ένα προσαρμοσμένο θέμα Tumblr που λειτουργεί. Εάν η κωδικοποίηση Ιστού δεν εμπίπτει στο skillet σας, μπορείτε να παρέχετε το PSD σας σε έναν προγραμματιστή για να δημιουργήσετε το θέμα για εσάς. Μαζί με μια οπτική επεξεργασία, ένα θέμα Tumblr πρέπει να περιλαμβάνει μεταβλητές και μπλοκ. Οι μεταβλητές δέχονται δυναμικές τιμές για τη δημιουργία τυπικών οπτικών στοιχείων Tumblr. Τα μπλοκ σχηματίζουν κομμάτια κώδικα που συνδυάζουν μεταβλητές με HTML. Τα μπλοκ δημιουργούν αναρτήσεις και τους μόνιμους συνδέσμους που φτάνουν σε αυτούς, συνδέσμους που κινούνται ανάμεσα σε κομμάτια χρονολογικά οργανωμένου υλικού και στοιχεία που φιλοξενούν άτομα που τους αρέσουν ή ακολουθούν ένα μεμονωμένο tumblelog.

Πληροφορίες έκδοσης

Οι πληροφορίες σε αυτό το άρθρο ισχύουν για τα Adobe Photoshop CC και Adobe Photoshop CS6. Μπορεί να διαφέρει ελαφρώς ή σημαντικά με άλλες εκδόσεις ή προϊόντα.