Σχεδιάστε ένα θέμα Tumblr εμπνευσμένο από το δάσος στο Photoshop
Το Tumblr είναι μια πλατφόρμα μικρο-blogging που επιτρέπει στους χρήστες να δημοσιεύουν εύκολα αποσπάσματα πληροφοριών στον ιστό, όπως μια φωτογραφία ή σετ φωτογραφιών, ένα βίντεο, μια προσφορά ή μια μόνο παράγραφο.
Χρησιμοποιείται συχνά ως ηλεκτρονικό ημερολόγιο λόγω της ευκολίας χρήσης του σε σύγκριση με άλλες πλατφόρμες blogging όπως το WordPress.
Πολλά θέματα Tumblr είναι έξω, τόσο δωρεάν όσο και premium, αλλά έχετε αναρωτηθεί ποτέ πώς θα σχεδιάζετε το δικό σας;
Σε αυτό το σεμινάριο, θα μάθετε πώς να δημιουργήσετε ένα θέμα Tumblr εμπνευσμένο από τα δάση, χρησιμοποιώντας τις υφές του ξύλου, τα λεπτά σχέδια και τις σύγχρονες τεχνικές-ένα ωραίο μείγμα φυσικών και σύγχρονων στοιχείων.
Τι σχεδιάζουμε
Το θέμα που σχεδιάζουμε στο Photoshop αποτελείται από τέσσερις τομείς: ξύλινη πλαϊνή μπάρα, κύρια περιοχή περιεχομένου, δεξιά πλαϊνή μπάρα και κεφαλίδα.
Βήμα 1
Το πρώτο βήμα, όπως θα έπρεπε να είναι με όλα τα πράγματα που σχεδιάζετε, είναι το σκηνικό. Χρησιμοποιώντας το γραφικό γραφικό μου Wacom Bamboo και έναν κενό καμβά στο Photoshop, σχεδίασα τον ακόλουθο σχεδιασμό, με μερικά μεγαλύτερα στοιχεία, για να βγάλω τις ιδέες μου πάνω στο (ψηφιακό) χαρτί.
Βήμα 2
Με την ιδέα να σκοντάψει, δημιουργήστε ένα νέο έγγραφο στο Photoshop. (Λάβετε υπόψη ότι αυτό δεν έχει τεθεί σε πέτρα, είναι κάτι στο οποίο μπορείτε να αναφερθώ, αν κολλήσετε στο σχεδιασμό. Προσωπικά, τείνω να πειραματιστώ και να αλλάξω πολλά από αυτά που αρχικά σχεδίαζα.) Χρησιμοποίησα τα παρακάτω ρυθμίσεις στο Photoshop:
Βήμα 3
Το επόμενο στάδιο είναι να βάλετε κάποιους οδηγούς κάτω στον καμβά. Αυτό θα σας βοηθήσει να κρατήσετε τη δομή του θέματος καθαρή καθώς το σχεδιάζετε. Θέλω ότι η αριστερή πλαϊνή μπάρα θα είναι 200 εικονοστοιχεία, η κύρια περιοχή περιεχομένου θα είναι 600 pixels και η δεξιά πλαϊνή μπάρα θα είναι 160 pixels, δίνοντάς μας ένα πλάτος 960 pixels.
Εάν έχετε χρησιμοποιήσει τις ίδιες ρυθμίσεις, μπορείτε να τοποθετήσετε τους οδηγούς σας στα 200, 800 και 960 pixels οριζόντια. Αυτός ο σχεδιασμός θα ευθυγραμμιστεί προς τα αριστερά, έτσι ώστε η ξύλινη πλαϊνή μπάρα να κάθεται πάντα στην αριστερή πλευρά του παραθύρου προβολής του χρήστη.
Έβαλα επίσης οδηγούς 200 pixel κάτω από την κορυφή του καμβά και 200 pixels πάνω από το κάτω μέρος του καμβά. Έτσι φαίνεται το έγγραφό μου:
Βήμα 4
Ας προσθέσουμε τώρα κάποιο πρότυπο στο παρασκήνιο μας. Μεταβείτε στο Αρχείο → Νέο και δημιουργήστε ένα νέο έγγραφο που έχει 8 × 8 εικονοστοιχεία. Σχεδιάστε ορισμένες κάθετες γραμμές με πλάτος 2 εικονοστοιχείων. Ο καμβάς σας θα πρέπει τώρα να είναι 2 εικονοστοιχεία μαύρο, 2 εικονοστοιχεία λευκό, 2 εικονοστοιχεία μαύρο, 2 εικονοστοιχεία λευκό. Μεταβείτε στην Επεξεργασία → Ορισμός μοτίβου. Αποθηκεύστε το μοτίβο σας ως "Κάθετες γραμμές 2px".
Στο αρχικό σας έγγραφο, μεταβείτε στο Layer → New Fill Layer → Pattern. Επιλέξτε το μοτίβο που μόλις δημιουργήσατε και κάντε κλικ στο κουμπί OK. Αφαιρέστε την αδιαφάνεια του στρώματος μέχρι να φανεί κάτι τέτοιο:
Συγκεντρώστε το μοτίβο με το στρώμα φόντου, το οποίο αυτόματα θα το ραστερίσετε στη διαδικασία. Μεταβείτε στο στοιχείο Φίλτρο → Θόρυβος → Προσθήκη θορύβου. Αλλάξτε την τιμή στο 5% και κάντε κλικ στο OK. Αυτό θα προσθέσει κάποια λεπτές υφή στο παρασκήνιο:
Δημιουργήστε ένα νέο στρώμα και συμπληρώστε το με λευκό. Τοποθετήστε το κάτω από το αρχικό στρώμα φόντου. Μειώστε την αδιαφάνεια του μοτίβου στρώματός σας σε περίπου 40% και, στη συνέχεια, συγχωνεύστε το με το στρώμα φόντου μεταβαίνοντας στο Layer → Merge Layers.
Βήμα 5
Επιλέξτε το εργαλείο Rectangle και σχεδιάστε ένα σχήμα πλάτους 200 pixel.
Πάμε να κόψουμε το κάτω μέρος του σχήματος μας χρησιμοποιώντας το εργαλείο Polygonal Lasso, κάνοντάς το να μοιάζει με κορδέλα. Δημιουργήστε μια επιλογή πάνω από το σχήμα σας, ραστερίστε το στρώμα σχήματος και στη συνέχεια πατήστε το πλήκτρο Delete για να αφαιρέσετε την επιλεγμένη περιοχή.
Τοποθετήστε το σχήμα στην αριστερή περιοχή της πλευρικής γραμμής που σημειώσαμε χρησιμοποιώντας τους οδηγούς μας.
Δημιουργήστε μια επιλογή του κορυφαίου τμήματος του σχήματος και μεταβείτε στην Επεξεργασία → Ελεύθερη μετασχηματισμός. Τεντώστε το σχήμα έτσι ώστε να επικαλύπτεται με την κορυφαία γραμμή του καμβά.
Βήμα 6
Επιλέξτε το εργαλείο σχήματος ελλειψοειδούς και, κρατώντας πατημένο το πλήκτρο Shift για να το κρατήσετε στρογγυλό, σχεδιάστε έναν κύκλο γεμάτο με λευκό. Τοποθετήστε το στο επάνω μέρος της πλαϊνής γραμμής και μετονομάστε το σε "Πορτραίτο".
Κάντε δεξί κλικ στο νέο στρώμα σχήματος και επιλέξτε την επιλογή "Ράστερη στρώση" για να την μετατρέψετε από ένα έξυπνο αντικείμενο σε εικονοστοιχεία. Κρατήστε πατημένο το πλήκτρο Command και κάντε κλικ στην εικόνα προεπισκόπησης του στρώματος στον πίνακα Layers. Αυτό θα κάνει μια επιλογή του κύκλου σας.
Εντοπίστε μια εικόνα του εαυτού σας (ή ό, τι αφορά τον ιστότοπό σας) και αντιγράψτε τον. Επικεφαλίδα πίσω στο Photoshop και, με την επιλογή κύκλου ακόμα ενεργή, μεταβείτε στην Επεξεργασία → Επικόλληση Into. Αυτό θα επικολλήσει το αντικείμενο στην επιλογή του κύκλου σας.
Αφού το κάνετε αυτό, δημιουργήσατε αυτόματα μια μάσκα επιπέδων στην εικόνα (δηλαδή σε ένα νέο επίπεδο, όχι το υπάρχον στρώμα κύκλου). Μεταβείτε στην Επεξεργασία → Ελεύθερη μετασχηματισμός για να αλλάξετε το μέγεθος και / ή να περιστρέψετε την εικόνα. Θα παραμείνει ένας κύκλος. βεβαιωθείτε ότι δεν είναι πολύ μικρό. Αφού γίνει αυτό, διαγράψτε το επίπεδο με το όνομα "Πορτρέτο" και μετονομάστε το νέο σας επίπεδο.
Βήμα 7
Επιλέξτε το εργαλείο τύπου και δημιουργήστε ένα πλαίσιο κειμένου στην περιοχή κεφαλίδας. Έχω δώσει το θέμα μου ένα εντελώς τυχαίο όνομα: "Kabooom". Χρησιμοποιούσα μια γραμματοσειρά που ονομάζεται Reklame Script. Μπορείτε να κατεβάσετε μια επίδειξη της γραμματοσειράς ή να την αγοράσετε για $ 30 από MyFonts .
Κάντε δεξί κλικ στο στρώμα τύπου και επιλέξτε "Επιλογές ανάμειξης". Εφαρμόστε μια επικαλύψεως χρώματος στο κείμενο. Χρησιμοποιούσα ένα ανοιχτό γκρι που είναι λίγο πιο σκούρο από το φόντο, με τον κωδικό hex # D6D6D6.
Εφαρμόστε μια εσωτερική σκιά στον τύπο, χρησιμοποιώντας αδιαφάνεια 10%, απόσταση 2 εικονοστοιχείων και μέγεθος 1 pixel. Αφήστε όλα τα υπόλοιπα σε 0. Αυτό θα κάνει τον τύπο να μοιάζει με το χαραγμένο στο παρασκήνιο.
Για να ολοκληρώσετε το χαραγμένο αποτέλεσμα, θα προσθέσουμε μια σκιά σταγόνας στον τύπο, χρησιμοποιώντας το λευκό χρώμα με κανονική λειτουργία ανάμειξης. Δώστε τη σκιά σε απόσταση 2 εικονοστοιχείων και μέγεθος 1 pixel. Αυτές οι ρυθμίσεις θα κάνουν την σκιά να εμφανίζεται ως ένδειξη στο κάτω μέρος του τύπου, προσθέτοντας περισσότερο βάθος στον τύπο και ενισχύοντας την εσωτερική σκιά.
Βήμα 8
Επαναπροσδιορίστε το εργαλείο τύπου και δημιουργήστε ένα πλαίσιο κειμένου που συμπληρώνει το πλάτος της δεξιάς πλευρικής γραμμής, την οποία έχουμε επισημάνει με οδηγούς. Βάλτε μια ποικιλία κατηγοριών κάτω από την κατηγορία κατηγορία, όπως φαίνεται παρακάτω:
Επιλέξτε την επικεφαλίδα της κατηγορίας και αλλάξτε την γραμματοσειρά σε μία της επιλογής σας. Χρησιμοποίησα το Minion Pro. Πειραματιστείτε με υπο-γραμματοσειρές (έντονους χαρακτήρες, πλάγια γραφή κλπ.) Και μεγέθη σημείων.
Αλλάξτε τη γραμματοσειρά για τις κατηγορίες ("Ειδήσεις", "Ημέρες έξω", "Φωτογραφία" κ.λπ.). Χρησιμοποίησα το Myriad Pro. Μειώστε το μέγεθος σημείων του τύπου και ρυθμίστε την κορυφή (δηλαδή το διάστημα μεταξύ των γραμμών του κειμένου), έτσι ώστε η πάνω γραμμή να είναι χαμηλότερη από εκεί που είναι από προεπιλογή.
Αντιγράψτε την πρώτη επικεφαλίδα και τους συνδέσμους και επικολλήστε τα παρακάτω στο ίδιο πλαίσιο κειμένου. Αλλάξτε την επικεφαλίδα και τις κατηγορίες. Χρησιμοποίησα τις επικεφαλίδες "Τα έργα μου" και "Οι φίλοι μου". Χρησιμοποιήστε ό, τι είναι σχετικό με την ιστοσελίδα σας, φυσικά.
Βήμα 9
Τώρα θα κάνουμε λίγο πιο ελκυστικό το κείμενο στη δεξιά πλευρά. Επιλέξτε το κείμενο για υποκατηγορίες (δηλαδή όχι τις επικεφαλίδες) και αλλάξτε το χρώμα από το μαύρο σε σκούρο γκρι. Χρησιμοποίησα # 333333. Κάντε κλικ στο κουμπί OK.
Κάντε δεξί κλικ στο στρώμα τύπου και επιλέξτε "Επιλογές μίξης". Εφαρμόστε μια λευκή σκιά σταγόνας με μια κανονική λειτουργία ανάμειξης. Αλλάξτε τη γωνία σε 120 ° και η απόσταση και το μέγεθος σε 1 εικονοστοιχείο. Αφήστε όλα τα υπόλοιπα να ρυθμιστούν σε 0 εικονοστοιχεία. Αυτό θα προσθέσει μια ένδειξη στο κάτω μέρος του κειμένου, όπως ακριβώς κάναμε και με την επικεφαλίδα.
Βήμα 10
Επιλέξτε το εργαλείο Γραμμή και, κρατώντας πατημένο το πλήκτρο Shift για να το κρατήσετε ίσιο, σχεδιάστε μια γραμμή κάτω από την επικεφαλίδα "Κατηγορίες".
Κάντε δεξί κλικ στο στρώμα γραμμής και επιλέξτε "Επιλογές μίξης". Εφαρμόστε μια λευκή σκιά σταγόνας με μια κανονική λειτουργία ανάμειξης. Ρυθμίστε τη γωνία σε 90 ° και η απόσταση σε 1 εικονοστοιχείο. Ορίστε όλα τα άλλα σε 0 εικονοστοιχεία.
Διπλασιάστε το στρώμα γραμμής και τοποθετήστε το κάτω από κάθε μία από τις επικεφαλίδες.
Βήμα 11
Εάν έχετε τον ίδιο αριθμό επικεφαλίδων με εμένα, τότε θα πρέπει να έχετε τρία επίπεδα γραμμής. Επιλέξτε όλα και αντιγράψτε τα. Με τα τρία επίπεδα γραμμής που έχουν επιλεγεί, τους ωθήστε 10 pixels κρατώντας πατημένο το πλήκτρο Shift και πατώντας μία φορά το πλήκτρο Down. Μειώστε την αδιαφάνεια των νεότερων στρωμάτων γραμμής σας στο 25% για να καταλήξετε με κάτι τέτοιο:
Βήμα 12
Πιάσε το εργαλείο σχήμα ορθογωνίου και σχεδιάστε ένα ορθογώνιο παρόμοιο με αυτό που φαίνεται παρακάτω. Κάντε το ορθογώνιο πλάτος ακριβώς 570 pixel. Αυτό θα επιτρέψει ένα κενό 10-pixel μεταξύ της αριστεράς πλευρικής γραμμής και της άκρης του νέου ορθογωνίου και ένα διάκενο 20 pixel μεταξύ της δεξιάς πλευρικής γραμμής και της άκρης του νέου ορθογωνίου, όπως φαίνεται στο παρακάτω σχολιασμένο στιγμιότυπο οθόνης:
Βήμα 13
Επανατοποθετήστε το εργαλείο σχήμα ορθογωνίου και δημιουργήστε ένα πολύ μικρότερο γκρι ορθογώνιο, όπως το παρακάτω. Τοποθετήστε το στο πάνω δεξιά μέρος του μεγάλου ορθογωνίου, μετατοπίζεται από το μεγάλο ορθογώνιο κατά 10 pixel. Τοποθετήστε το σχήμα 30 pixel μακριά από την κορυφή του ορθογωνίου.
Βήμα 14
Διπλασιάστε τη στρώση τύπου στη δεξιά πλευρική γραμμή και, χρησιμοποιώντας το πλήκτρο Shift και το συνδυασμό πλήκτρων δρομέα, ωθήστε το επίπεδο διπλότυπου τύπου πάνω από την κύρια περιοχή περιεχομένου. Κάντε το ίδιο με τα δύο στρώματα γραμμής για την επικεφαλίδα "Κατηγορίες".
Επιλέξτε το εργαλείο Τύπος και κάντε κλικ στο επίπεδο διπλότυπου τύπου. Καταργήστε όλο το κείμενο στο πλαίσιο και αλλάξτε την επικεφαλίδα σε κάτι πιο κατάλληλο. Απλώς χρησιμοποίησα κάποιο ψεύτικο κείμενο εδώ: "Αυτό ακριβώς εδώ ονομάζεται τίτλος."
Βήμα 15
Μεταβείτε στο αρχείο → Τοποθετήστε και εντοπίστε μια φωτογραφία που θα τοποθετηθεί στο έγγραφο ως σύμβολο κράτησης θέσης. Η χρήση πραγματικών εικόνων εδώ είναι πάντα καλύτερο επειδή κάνουν τη μακέτα να φαίνεται πιο πραγματική και ελκυστική. Χρησιμοποίησα ένα φωτογραφία της αδερφής μου .
Μεταβείτε στην επιλογή Επεξεργασία → Ελεύθερη μετασχηματισμός για να μειώσετε το μέγεθος της φωτογραφίας και να την τοποθετήσετε στο σωστό σημείο. Κάντε το σύνολο των 20 εικονοστοιχείων μικρότερο τόσο σε πλάτος όσο και σε ύψος, έτσι ώστε να ταιριάζει όμορφα στο μαύρο ορθογώνιο, όπως έτσι:
Βήμα 16
Ανοίξτε τις επιλογές Blending για το μεγάλο μαύρο ορθογώνιο. Εφαρμόστε μια λευκή επικάλυψη χρώματος και μια σκιά σταγόνας με αδιαφάνεια 10% και μέγεθος 3 pixel.
Βήμα 17
Επιλέξτε ξανά το εργαλείο σχήμα ορθογωνίου και τραβήξτε ένα μακρύ σχήμα κάτω από το λευκό φόντο. Βεβαιωθείτε ότι έχει το ίδιο πλάτος. Γεμίστε το με ένα γκρι ανοιχτό.
Ανοίξτε τις επιλογές Blending για το νέο γκρι ορθογώνιο και εφαρμόστε μια σκιά σταγόνας. Ορίστε το χρώμα σε λευκό, με κανονική λειτουργία ανάμειξης, την αδιαφάνεια έως 100% και την απόσταση έως 1 εικονοστοιχείο. Αφήστε όλα τα υπόλοιπα να ρυθμιστούν σε 0 εικονοστοιχεία.
Επίσης, εφαρμόστε μια εσωτερική σκιά, χρησιμοποιώντας το μαύρο χρώμα, με αδιαφάνεια 10%. Αλλάξτε το μέγεθος σε 13 εικονοστοιχεία και αφήστε όλα τα υπόλοιπα να είναι 0 pixel. Αυτά τα δύο στρώματα στυλ θα κάνουν το νέο σχήμα να μοιάζει σαν να έχει χαραγμένο στο φόντο, όπως η τυπογραφία τίτλου μας:
Βήμα 18
Προχωρώντας στην πλαϊνή μπάρα, κατεβάστε κάποιες επαναλαμβανόμενες υφές ξύλου. Χρησιμοποιώ ένα από το GraphicRiver που περιλαμβάνει τρεις διαφορετικές υφές ξύλου: ελαφρύ, μεσαίο και σκοτεινό.
Μόλις εγκαταστήσετε τα μοτίβα στο Photoshop (ανοίγοντας κάθε εικόνα και καθορίζοντάς την ως μοτίβο), επιλέξτε την πλαϊνή μπάρα στο έγγραφο του Photoshop. Μεταβείτε στο Layer → New Fill Layer → Pattern. Επιλέξτε μία από τις υφές του ξύλου σας (επιλέξαμε τη μεσαία έκδοση) και κάντε κλικ στο OK. Επιλέγοντας πρώτα την πλαϊνή μπάρα, το μοτίβο θα πρέπει να συμπληρώνει μόνο αυτή την περιοχή.
Κάντε δεξί κλικ στο στρώμα μοτίβου και επιλέξτε "Επιλογές μίξης". Εφαρμόστε μια επικάλυψη κλίσης, πηγαίνοντας από μαύρο σε διαφανές έως μαύρο:
Αλλάξτε την αδιαφάνεια της επικάλυψης κλίσης στο 10% και δώστε τη γωνία 0 °. Αυτό θα προσθέσει μια λεπτή σκιά στην πλαϊνή μπάρα, καθιστώντας την λίγο πιο ρεαλιστική και λιγότερο επίπεδη.
Επίσης, εφαρμόστε μια σκιά σταγόνας στην πλευρική γραμμή. Χαμηλώστε την αδιαφάνεια έως 30% και αλλάξτε τη γωνία στους 180 °. Αλλάξτε την απόσταση σε 1 εικονοστοιχείο και το μέγεθος σε 5 εικονοστοιχεία, αφήνοντας ό, τι άλλο έχει οριστεί σε 0 εικονοστοιχεία. Αυτό θα προσθέσει μια μικρή και λεπτή σκιά στην πλαϊνή μπάρα.
Βήμα 19
Ανοίξτε τις επιλογές "Blending" για το πορτρέτο κύκλου που δημιουργήσαμε κοντά στην αρχή αυτού του εκπαιδευτικού προγράμματος. Εφαρμόστε μια λευκή σκιά σταγόνας χρησιμοποιώντας τις παρακάτω ρυθμίσεις:
Επίσης, εφαρμόστε μια εσωτερική σκιά χρησιμοποιώντας τις παρακάτω ρυθμίσεις. Αυτό θα κάνει το πορτρέτο του κύκλου να μοιάζει σαν να ήταν τοποθετημένο στο δέντρο, αντί να κάθεται πάνω του.
Βήμα 20
Διπλασιάστε το στρώμα τίτλου στα κύρια περιεχόμενα. Τοποθετήστε το ξανά στην πλευρική γραμμή και αλλάξτε το κείμενο σε "Σχετικά με μένα". Επίσης, επανατοποθετήστε και αλλάξτε το μέγεθος των δύο γραμμών κάτω από την επικεφαλίδα.
Ανοίξτε τις επιλογές "Blending" για το νέο σας στρώμα τύπου και αλλάξτε τις ρυθμίσεις σκίασης στα εξής:
Προσθέστε κάποιο κείμενο στην ενότητα "Σχετικά με μένα", χρησιμοποιώντας την ίδια γραμματοσειρά και μέγεθος που χρησιμοποιήσαμε στο κείμενο της δεξιάς γραμμής πλευρικής γραμμής. Ανοίξτε τις επιλογές "Blending" για αυτό το νέο κείμενο και κάντε κλικ στην καρτέλα "Εξωτερική λάμψη" για να εφαρμόσετε μια εξωτερική λάμψη. αλλάξτε την αδιαφάνεια έως 30%, το χρώμα σε λευκό και το μέγεθος σε 18 pixels.
Αυτό θα κάνει το κείμενό μας πιο ευανάγνωστο από το ξύλινο υπόβαθρο.
Παίξτε γύρω με το μέγεθος της γραμματοσειράς για να διευκολύνετε τη σάρωση του κειμένου.
Βήμα 21
Μετά από κάποιους πειραματισμούς, αποφάσισα ότι ολόκληρη η πλαϊνή μπάρα φαινόταν πολύ καλύτερα στο πιο σκοτεινό από τα τρία υφάσματα που αναφέρθηκαν παραπάνω. Αλλάξα το μοτίβο της πλαϊνής γραμμής και τα χρώματα του κειμένου. Χρησιμοποιήστε τις τεχνικές που έχετε ήδη μάθει για να κάνετε κάτι τέτοιο.
Εδώ φαίνεται το σχέδιο μου μέχρι τώρα:
Βήμα 22
Όσο πολύ έχετε προγραμματίσει, θα πρέπει να κάνετε αλλαγές κατά τη διάρκεια της διαδικασίας σχεδιασμού. Με την εξέταση του σχεδίου ως συνόλου (και όχι αποσπασματικά), κατέληξα στο συμπέρασμα ότι 10 pixels μεταξύ των πλευρικών ράβδων και της κύριας περιοχής περιεχομένου δεν ήταν αρκετά κοντά.
Χρησιμοποιώντας το πλήκτρο Shift και το συνδυασμό πλήκτρων δρομέα, προωθήστε το περιεχόμενό σας, κάνοντας τα δύο κενά 40 εικονοστοιχεία αντί για 10. Αυτό θα κάνει το σχέδιο πιο χρήσιμο και ελκυστικό.
Βήμα 23
Επίσης, αποφάσισα να αλλάξω το στυλ της κεφαλίδας του θέματος.
Αλλάξτε το χρώμα (χρησιμοποιώντας μια επικάλυψη χρωμάτων στο παράθυρο "Επιλογές ανάμειξης") σε ένα επιλεγμένο από το πορτρέτο κύκλου. Πήρα ένα σκούρο πράσινο-μπλε.
Αφαιρέθηκα επίσης την εσωτερική σκιά και άλλαξα τις ρυθμίσεις της σκιάς, πράγμα που σημαίνει ότι η κεφαλίδα κάθεται πάνω από το φόντο και όχι τοποθετείται σε αυτήν.
Βήμα 24
Προχωρώντας στο βασικό banner περιεχομένου (δηλ. Το ορθογώνιο που δημιουργήσαμε νωρίτερα, το οποίο βρίσκεται στην επάνω δεξιά γωνία της περιοχής εικόνας του κύριου περιεχομένου), επιλέξτε το ορθογώνιο κάνοντας κλικ στην προεπισκόπηση μικρογραφιών του επιπέδου ενώ κρατάτε το πλήκτρο Command.
Μεταβείτε στο Layer → New Fill Layer → Pattern και επιλέξτε την ίδια υφή που χρησιμοποιήσατε για την πλαϊνή μπάρα.
Κάντε δεξί κλικ στο στρώμα γεμίσματος μοτίβου και επιλέξτε την επιλογή "Ράστερ στρώμα". Χρησιμοποιώντας τα εργαλεία Dodge και Burn, προσθέστε τις λεπτομέρειες στο αριστερό και το επάνω μέρος του σχήματος και τις σκιές στο δεξιό και το κάτω μέρος του σχήματος.
Αυτό θα προσθέσει βάθος και θα δώσει μια μικρή τρισδιάστατη αίσθηση στο σχήμα. Το εργαλείο Burn θα σκουρύνει την εικόνα, ενώ το εργαλείο Dodge θα το φωτίσει.
Επιλέξτε το εργαλείο Polygonal Lasso. Επιλέξτε ένα σχήμα παρόμοιο με το παρακάτω και γεμίστε το με ένα σκούρο καφέ, που επιλέγεται από την υφή σας.
Χρησιμοποιώντας το εργαλείο ορθογώνιας γραμμής, επιλέξτε τις περιοχές στο νέο σχήμα που δεν χρειάζεστε και πατήστε το πλήκτρο Διαγραφή για να τις αφαιρέσετε. Θα πρέπει να καταλήξετε σε κάτι παρόμοιο με αυτό:
Βήμα 25
Πιάσε το δικό μας αποκλειστικό σύνολο εικονιδίων που ονομάζεται "Αντανάκλαση". Θα χρησιμοποιήσουμε πολλές από αυτές τις εικόνες στο σχεδιασμό μας.
Τοποθετήστε τα εικονίδια που χρειάζεστε στο έγγραφο, μεταβαίνοντας στο Αρχείο → Τοποθετήστε. Επιλέξαμε την κάμερα, την καρδιά, την επαναφόρτωση, την επεξεργασία και τα εικονίδια ρολογιού, τα οποία θα χρησιμεύσουν ως φωτογραφία μου, όπως reblog, σημειώσεις και εικονίδια χρόνου στο θέμα.
Βήμα 26
Επιλέξτε το εικονίδιο κάμερας και αλλάξτε το μέγεθος. Τοποθετήστε το στη γραμμή τύπου post που μόλις δημιουργήσαμε. Εφαρμόστε μια εσωτερική και πτώση σκιά σε αυτό, χρησιμοποιώντας ρυθμίσεις παρόμοιες με αυτές που έχουμε χρησιμοποιήσει σε όλο αυτό το σεμινάριο.
Προσθέστε κάποια τυπογραφία στη γραμμή τύπου post. Χρησιμοποίησα το ίδιο διαφημιστικό script που χρησιμοποιήσαμε στην επικεφαλίδα και τις ίδιες επιλογές ανάμειξης που χρησιμοποιήσαμε για τις επικεφαλίδες του αριστερού πλευρικού πίνακα.
Βήμα 27
Επιλέξτε τα άλλα τέσσερα επίπεδα εικονιδίων. Κάντε δεξί κλικ και επιλέξτε "Ράστερ στρώματα" για να τα μετατρέψετε από έξυπνα αντικείμενα σε αντικείμενα εικονοστοιχείων.
Χρησιμοποιήστε το εργαλείο ορθογώνιας γραμματοσειράς για να επιλέξετε όλες τις αντανακλάσεις του εικονιδίου.
Χτυπήστε το πλήκτρο Διαγραφή σε κάθε στρώμα εικονιδίων για να αφαιρέσετε την αντανάκλαση του.
Βήμα 28
Επανατοποθετήστε και τα τέσσερα επίπεδα εικονιδίων. Μεταβείτε στην επιλογή Επεξεργασία → Ελεύθερο μετασχηματισμό και ενώ κρατάτε πατημένο το πλήκτρο Shift για να διατηρήσετε τα εικονίδια αναλογικά, μειώστε το μέγεθος τους και τοποθετήστε τα στη γραμμή κάτω από την κύρια περιοχή περιεχομένου που δημιουργήσαμε νωρίτερα.
Τοποθετήστε τα εικονίδια ομοιόμορφα χρησιμοποιώντας τα πλήκτρα δρομέα.
Βήμα 29
Κάντε δεξί κλικ στο στρώμα εικονιδίων καρδιάς και επιλέξτε "Επιλογές μίξης" από το μενού. Αλλάξτε το χρώμα στο ανοιχτόχρωμο χρησιμοποιώντας μια επικάλυψη χρωμάτων και εφαρμόστε μια εσωτερική σκιά χρησιμοποιώντας τις ακόλουθες ρυθμίσεις:
Τώρα εφαρμόστε μια σκιά σταγόνας χρησιμοποιώντας αυτές τις ρυθμίσεις:
Μόλις εφαρμοστούν οι ρυθμίσεις στο επίπεδο εικονιδίου καρδιάς, κάντε δεξί κλικ και επιλέξτε "Αντιγραφή στυλ επιπέδου". Επαναφέρετε και τα τέσσερα εικονίδια, κάντε δεξί κλικ και επιλέξτε "Επικόλληση στυλ στρώματος." Όλα τα εικονίδια σε αυτήν την γραμμή θα πρέπει τώρα να έχουν το ίδιο αποτέλεσμα.
Βήμα 30
Επιλέξτε το εργαλείο τύπου και δημιουργήστε ένα μικρό πλαίσιο κειμένου δίπλα στο εικονίδιο της καρδιάς. Πληκτρολογήστε "Σας αρέσει αυτή η ανάρτηση". Εφαρμόστε μια εσωτερική σκιά και σκιά πτώσης χρησιμοποιώντας ρυθμίσεις παρόμοιες με εκείνες που χρησιμοποιούμε σε αυτό το σεμινάριο.
Επαναλάβετε το προηγούμενο βήμα για τα υπόλοιπα εικονίδια χρησιμοποιώντας τις ακόλουθες φράσεις: "Reblog this post", "1052 notes" και "Δημοσιεύθηκε στις 19/03/2011". Βεβαιωθείτε ότι έχετε αντιγράψει και επικολλήσει το ίδιο στυλ στρώματος σε κάθε στρώμα τύπου.
Μπορεί επίσης να θέλετε να επανατοποθετήσετε μερικά από τα εικονίδια με το νέο κείμενο, βεβαιώνοντας ότι το χάσμα μεταξύ του κειμένου και των εικονιδίων είναι συνεπές. λόγω των διαφόρων μήκους κειμένου, αυτό μπορεί να έχει αλλάξει.
Βήμα 31
Διπλασιάστε όλα τα επίπεδα στην κύρια περιοχή περιεχομένου και τοποθετήστε τα κάτω από το πρωτότυπο. Αλλάξτε το ορθογώνιο τίτλου, εικόνας και ταχυδρομικού τύπου. Όπως αναφέρθηκε, όσο πιο ρεαλιστική είναι η μακέτα, τόσο το καλύτερο.
Βήμα 32
Διπλασιάστε την επικεφαλίδα και το κείμενο στην πλαϊνή γραμμή και εισαγάγετε μερικά εικονίδια. Χρησιμοποίησα τα εξαιρετικά εικονίδια κοινωνικών μέσων ενημέρωσης γνωστά ως Buddycons , ένα άλλο σύνολο αποκλειστικά για το Webdesigner Depot.
Το τελικό προϊόν
Μετά από κάποιες περισσότερες επαφές (αφαίρεσα την οδοντωτή κορδέλα που κόπηκε στο κάτω μέρος της πλαϊνής μπάρας), είμαι τελειωμένος! Εδώ είναι ο τελικός σχεδιασμός μας, έτοιμος να κωδικοποιηθεί ή να αποσταλεί σε έναν προγραμματιστή για να το κάνει.
Αυτό το σεμινάριο δημιουργήθηκε αποκλειστικά για το Webdesigner Depot από Ο Callum Chapman , έναν ανεξάρτητο σχεδιαστή διεπαφής χρήστη που διαπραγματεύεται με το όνομα Creative του Circlebox . Ο Callum εργάζεται επίσης σε ένα πηγή έμπνευσης έργο που ονομάζεται Vinspires.
Θα θέλατε να δείτε ένα άλλο σεμινάριο για το πώς να περικόψετε και να κωδικοποιήσετε αυτό το σχέδιο σε ένα πλήρως λειτουργικό θέμα Tumblr;