Αν σας άρεσε να παίζετε με το Lego ως παιδί (ή συνεχίζετε να παίζετε με αυτό ακόμα και ως ενήλικας), πιθανότατα θα σας ενδιαφέρει η ισομετρική τέχνη με pixel. Μπορεί να είναι τεχνικό και να μοιάζει περισσότερο με επιστήμη παρά με εικονογράφηση. Αλλά σε μια τέτοια τέχνη δεν υπάρχει τρισδιάστατη προοπτική, μπορείτε να μετακινήσετε στοιχεία περιβάλλομε μέγιστη απλότητα.
Θα δημιουργήσουμε τον χαρακτήρα ως λογική αφετηρία για την τέχνη των εικονοστοιχείων, καθώς θα βοηθήσει στον προσδιορισμό των αναλογιών για τα περισσότερα από τα άλλα αντικείμενα που ενδέχεται να δημιουργήσουμε. Ωστόσο, πρώτα πρέπει να μάθετε μερικά βασικά στοιχεία της ισομετρικής τέχνης pixel και στη συνέχεια να προχωρήσετε στη δημιουργία ενός χαρακτήρα. αν δεν θέλετε να μάθετε τα βασικά και να σχεδιάσετε έναν κύβο, μεταβείτε στο βήμα 3. Τώρα ας ξεκινήσουμε.
1. Γραμμές pixel
Αυτές οι γραμμές αποτελούν τη βάση για το πιο κοινό (και ενδιαφέρον) στυλ ισομετρικής τέχνης pixel, το στυλ που θα χρησιμοποιήσουμε σε αυτό το σεμινάριο:
Αντιπροσωπεύουν δύο pixel κατά μήκος για κάθε pixel down. Αυτές οι γραμμές φαίνονται σχετικά απαλές και χρησιμοποιούνται για τετράγωνες επιφάνειες:
Οι πιο συχνά χρησιμοποιούμενες δομές γραμμής (όπως η παρακάτω) θα λειτουργήσουν καλά, αλλά το σχέδιο θα γίνεται πιο γωνιακό και πιο τραχύ με κάθε προσαύξηση που αυξάνετε:
Για αντίθεση, εδώ είναι μερικές άνισα δομημένες γραμμές:
Πολύ γωνιακό και δεν φαίνεται
Ομορφος. Αποφύγετε τη χρήση τους.
2. Τόμοι
Ο χαρακτήρας μας δεν θα ακολουθεί ακριβώς τους νόμους της ισομετρίας, οπότε ας δημιουργήσουμε πρώτα έναν απλό κύβο για να αποφασίσουμε για τις αναλογίες.
Δημιουργήστε ένα νέο έγγραφο στο Photoshop με ανάλυση 400 x 400 px.
Μου αρέσει να ανοίγω ένα επιπλέον παράθυρο για το ίδιο αρχείο χρησιμοποιώντας το μενού Παράθυρο > Τακτοποίηση > Νέο παράθυρο/μαθήματα.(Παράθυρο > Τακτοποίηση > Νέο παράθυρο…). Αυτό επιτρέπει την εργασία σε μεγέθυνση 600% παρακολουθήστε τα αποτελέσματα στο παράθυρο ζουμ 100% . Η χρήση του πλέγματος εξαρτάται από εσάς, αλλά μερικές φορές το βρίσκω περισσότερο ενοχλητικό παρά χρήσιμο.
Ας κάνουμε μεγέθυνση στο έγγραφο και ας δημιουργήσουμε μία από τις γραμμές 2:1
Προτιμώ να χρησιμοποιώ 5% γκρίαντί για μαύρο, ώστε στη συνέχεια να προσθέσετε σκιές (μαύρες και χαμηλής αδιαφάνειας) και να μπορείτε να επιλέξετε κάθε χρώμα ξεχωριστά χρησιμοποιώντας το μαγικό ραβδί.
Υπάρχουν διάφοροι τρόποι για να τραβήξετε μια γραμμή:
1. Χρησιμοποιώντας Εργαλείο γραμμής(Εργαλείο γραμμής) με λειτουργία Pixels(Pixels), μη επιλεγμένο Εξομάλυνση(Anti-alias) και πάχος 1 εικονοστοιχείο. Κατά τη σχεδίαση, πρέπει να εμφανίζεται η γωνιακή επεξήγηση 26,6°. Στην πραγματικότητα, το εργαλείο Line δεν μπορεί να ονομαστεί βολικό ευθείες γραμμές, εάν η γωνία δεν είναι ακριβής.
2. Πρέπει να δημιουργήσετε μια επιλογή 20 x 40 pxκαι μετά επιλέξτε K μολύβι(Εργαλείο μολυβιού) πάχος 1 εικονοστοιχείοκαι σχεδιάστε μια κουκκίδα στην κάτω αριστερή γωνία της επιλογής και, στη συνέχεια, κρατήστε πατημένο το πλήκτρο Αλλαγήκάντε κλικ στην επάνω δεξιά γωνία. Το Photoshop θα δημιουργήσει αυτόματα νέα γραμμήμεταξύ δύο σημείων. Εάν εξασκηθείτε, μπορείτε να δημιουργήσετε ευθείες γραμμές με αυτόν τον τρόπο χωρίς να τονίσετε.
3. Πρέπει να σχεδιάσετε δύο pixel με ένα μολύβι, να τα επιλέξετε, να κάνετε κλικ Ctrl + Alt, στη συνέχεια σύρετε την επιλογή σε μια νέα θέση έτσι ώστε τα εικονοστοιχεία να συναντώνται στις γωνίες. Μπορείτε επίσης να μετακινήσετε την επιλογή χρησιμοποιώντας τα πλήκτρα βέλους στο πληκτρολόγιό σας ενώ κρατάτε πατημένο Alt. Αυτή η μέθοδος ονομάζεται Alt-offset(Alt-Nudge).
Έτσι δημιουργήσαμε την πρώτη γραμμή. Επιλέξτε το και μετακινήστε το όπως στο βήμα 3 ή απλώς αντιγράψτε και επικολλήστε, μετακινώντας το νέο επίπεδο προς τα κάτω. Μετά από αυτό, γυρίστε τη δεύτερη γραμμή οριζόντια μέσα από το μενού Επεξεργασία > Μετασχηματισμός > Αναστροφή οριζόντιας(Επεξεργασία > Μετασχηματισμός > Αναστροφή οριζόντιας). Χρησιμοποιώ αυτή τη δυνατότητα τόσο συχνά που έφτιαξα μια συντόμευση πληκτρολογίου για αυτήν!
Τώρα ας συνδυάσουμε τις γραμμές μας:
Στη συνέχεια, ξανά Alt-Offset, γυρίστε το αντίγραφο κάθετα και συγχωνεύστε τα δύο μισά για να ολοκληρώσετε την επιφάνειά μας:
Ήρθε η ώρα να προσθέσουμε την «τρίτη διάσταση». Εναλλακτικά μετατοπίστε την τετράγωνη επιφάνεια και μετακινήστε την σε 44 εικονοστοιχείακάτω:
Συμβουλή: Εάν κρατάτε πατημένα τα πλήκτρα βέλους ενώ μετακινείστε Αλλαγή, η επιλογή θα μετακινηθεί στο 10 pixel αντί για ένα.
Για να φτιάξουμε έναν πιο τακτοποιημένο κύβο, ας μαλακώσουμε τις γωνίες αφαιρώντας τα πιο αριστερά και δεξιά pixel από τα τετράγωνα. Στη συνέχεια, προσθέστε κάθετες γραμμές:
Τώρα αφαιρέστε τις περιττές γραμμές στο κάτω μέρος του κύβου. Για να αρχίσουμε να χρωματίζουμε τη φιγούρα μας, επιλέγουμε οποιοδήποτε χρώμα (κατά προτίμηση ανοιχτόχρωμο) και γεμίζουμε με αυτό το πάνω τετράγωνο.
Τώρα αυξήστε τη φωτεινότητα του επιλεγμένου χρώματος κατά 10% (Συνιστώ να χρησιμοποιήσετε τα ρυθμιστικά HSB στον πίνακα ελέγχου) για να ζωγραφίσετε ελαφρύτερες γωνίες κατά μήκος του μπροστινού μέρους του χρωματιστού τετραγώνου μας. Επειδή περικόψαμε λίγο τον κύβο, αυτές οι φωτεινές γραμμές θα φαίνονται πιο όμορφες πάνω από τις μαύρες άκρες (αντί να τις αντικαθιστούν) όπως στην παρακάτω εικόνα:
Τώρα πρέπει να αφαιρέσουμε τις μαύρες άκρες. Χρησιμοποιήστε το κόλπο από τη μέθοδο σχεδίασης δεύτερης γραμμής για τη γόμα (η οποία θα πρέπει να ρυθμιστεί στο κανονικό Εργαλείο γόμας(Εργαλείο γόμας), λειτουργία Μολύβι(Λειτουργία μολυβιού), πάχος 1 εικονοστοιχείο).
Επιλέξτε το χρώμα του επάνω τετραγώνου χρησιμοποιώντας Πιπέτες(Εργαλείο σταγονόμετρου). Για να επιλέξετε γρήγορα αυτό το εργαλείο, πατήστε το Alt. Χρησιμοποιήστε το χρώμα σταγονόμετρου που προκύπτει για να γεμίσετε την κατακόρυφη γραμμή κάτω από τη μέση του κύβου. Μετά από αυτό, μειώστε τη φωτεινότητα του χρώματος κατά 15% και γεμίζουμε την αριστερή πλευρά του κύβου με το χρώμα που προκύπτει. Μειώστε περαιτέρω τη φωτεινότητα 10% για τη δεξιά πλευρά:
Ο κύβος μας είναι πλήρης. Θα πρέπει να φαίνεται καθαρό και σχετικά ομαλό όταν γίνεται μεγέθυνση 100% . Μπορούμε να συνεχίσουμε.
3. Προσθέστε έναν χαρακτήρα
Το στυλ του χαρακτήρα μπορεί να είναι εντελώς διαφορετικό, μπορείτε να αλλάξετε τις αναλογίες ή τα στοιχεία όπως θέλετε. Συνήθως προτιμώ ένα λεπτό σώμα και ένα ελαφρώς μεγαλύτερο κεφάλι. Το λεπτό σώμα του χαρακτήρα βοηθά να διατηρούνται οι γραμμές ευθείες και απλές.
Θα ήταν λογικό να ξεκινήσουμε με τα μάτια. Αν ήμασταν αυστηροί με τις ισομετρικές γωνίες, τότε στο πρόσωπο το ένα μάτι πρέπει να είναι χαμηλότερο, αλλά σε μικρή κλίμακα μπορούμε να παραμελήσουμε αυτό το χαρακτηριστικό για να κάνουμε τα πρόσωπα των χαρακτήρων πιο ευχάριστα. Αυτό θα κάνει το σχέδιο προσεγμένο ακόμα και παρά το μέγεθος.
Κάνουμε τον χαρακτήρα μικρό, γιατί μετά από λίγο μπορεί να θέλετε να του προσθέσετε ένα αυτοκίνητο, ένα σπίτι, μια ολόκληρη πλατεία ή ακόμα και μια πόλη. Επομένως, ο χαρακτήρας πρέπει να είναι ένας από τους περισσότερους μικρά στοιχείασε εικονογράφηση. Αξίζει επίσης να ληφθεί υπόψη η γραφική απόδοση. προσπαθήστε να κάνετε τον χαρακτήρα όσο πιο ελκυστικό γίνεται με ελάχιστη ποσότητα pixel (αρκετά μεγάλα για να απεικονίζουν τα χαρακτηριστικά του προσώπου). Επιπλέον, τα μικρά αντικείμενα σχεδιάζονται πολύ πιο εύκολα. Η εξαίρεση είναι όταν θέλετε να δείξετε μόνο έναν χαρακτήρα, τα συναισθήματά του ή την ομοιότητά του με κάποιον.
Ας δημιουργήσουμε ένα νέο επίπεδο. Τα μάτια χρειάζονται μόνο δύο pixel - ένα για κάθε μάτι, με ένα κενό pixel ενδιάμεσα. Παρακάμπτοντας ένα pixel στα αριστερά των ματιών, προσθέστε μια κάθετη γραμμή:
Τώρα προσθέστε ένα άλλο στρώμα και σχεδιάστε μια οριζόντια λωρίδα δύο pixel, αυτό θα είναι το στόμιο. Χρησιμοποιήστε τα πλήκτρα βέλους στο πληκτρολόγιό σας για να μετακινηθείτε και όταν βρείτε την τέλεια θέση, μετακινήστε το στρώμα προς τα κάτω. Κάντε το ίδιο με το πηγούνι, απλά θα πρέπει να είναι μια μακρύτερη γραμμή:
Σχεδιάστε τα μαλλιά και το πάνω μέρος του κεφαλιού και μετά μαλακώστε τις γωνίες. Θα πρέπει να πάρετε κάτι παρόμοιο με αυτό:
Τώρα αφήστε ένα κενό pixel δίπλα στο δεύτερο μάτι, προσθέστε φαβορίτες (που θα σας βοηθήσουν επίσης να τραβήξετε τα αυτιά του χαρακτήρα) και μερικά ακόμα pixel από πάνω τους μέχρι τη γραμμή των μαλλιών. Στη συνέχεια, αφήστε ένα άλλο κενό pixel, εδώ θα ξεκινήσει το αυτί και μια γραμμή που σηματοδοτεί το τέλος του κεφαλιού. Προχωρήστε και απαλύνετε τις γωνίες όπου συναντώνται οι γραμμές:
Προσθέστε ένα pixel για το πάνω μέρος του αυτιού και αλλάξτε το σχήμα του κεφαλιού αν θέλετε. Τα κεφάλια συνήθως σχεδιάζονται ήδη στην περιοχή του λαιμού:
Σχεδιάστε μια γραμμή από το πηγούνι - αυτό θα είναι το στήθος. Η αρχή του λαιμού θα είναι στην περιοχή του αυτιού, μερικά pixel προς τα κάτω και μερικά pixel διαγώνια έτσι ώστε οι ώμοι του χαρακτήρα μας να είναι ορατοί:
Τώρα, στο σημείο που τελειώνουν οι ώμοι, προσθέστε μια κάθετη γραμμή μήκους 12 pixel για να φτιάξετε το εξωτερικό του χεριού και το εσωτερικό θα είναι δύο pixel προς τα αριστερά. Συνδέστε τις γραμμές στο κάτω μέρος με μερικά pixel για να δημιουργήσετε ένα χέρι/γροθιά (δεν υπάρχει λεπτομέρεια σε αυτήν την περίπτωση, οπότε αγνοήστε αυτό το στοιχείο) και ακριβώς πάνω από το σημείο που τελειώνει το χέρι, προσθέστε μια γραμμή 2:1 , που θα λειτουργήσει ως μέση, στη συνέχεια τραβήξτε τη γραμμή του στήθους και αποκτήστε ένα ολοκληρωμένο πάνω μέρος του σώματος. Το άλλο χέρι του χαρακτήρα δεν φαίνεται, αλλά θα φαίνεται φυσιολογικό αφού καλύπτεται από τον κορμό.
Θα πρέπει να καταλήξετε σε κάτι σαν αυτό:
Φυσικά μπορείτε να χρησιμοποιήσετε όποιες αναλογίες θέλετε. Προτιμώ να ζωγραφίζω διαφορετικές επιλογέςεπόμενο πριν αποφασίσετε ποιο είναι καλύτερο.
Τώρα για το κάτω μέρος του κορμού θα προσθέσουμε μερικές ακόμη κάθετες γραμμές. Μου αρέσει να φεύγω 12 pixel ανάμεσα στα πέλματα και τη μέση. Τα πόδια σχεδιάζονται πολύ εύκολα, απλά πρέπει να κάνετε το ένα πόδι λίγο πιο μακρύ, κάτι που θα επιτρέψει στον χαρακτήρα να φαίνεται πιο ογκώδης:
Τώρα θα προσθέσουμε χρώμα. Η εύρεση ενός καλού χρώματος δέρματος είναι πάντα δύσκολη, οπότε αν θέλετε να χρησιμοποιήσετε το ίδιο όπως σε αυτό το σεμινάριο, ο κωδικός του #FFCCA5. Η επιλογή χρωμάτων για τα υπόλοιπα στοιχεία δεν θα πρέπει να αποτελεί πρόβλημα. Μετά από αυτό, καθορίστε το μήκος των μανικιών, τη θέση της κοπής του πουκάμισου και το στυλ του. Τώρα προσθέστε μια σκούρα λωρίδα για να διαχωρίσετε το πουκάμισο από το σώμα. Προτιμώ να κρατάω όλα τα διακοσμητικά στοιχεία πιο ανοιχτά από το μαύρο (ειδικά όταν πολλά στοιχεία είναι στο ίδιο επίπεδο, όπως από πουκάμισο μέχρι δερμάτινο ή παντελόνι). Αυτό σας επιτρέπει να έχετε την απαραίτητη αντίθεση χωρίς η εικόνα να είναι πολύ τραχιά.
Μπορείτε να προσθέσετε εφέ φωτισμού σχεδόν σε κάθε χρωματική ζώνη. Αποφύγετε επίσης μεγάλη ποσότητασκιές ή χρήση κλίσεων. Αρκετά pixel περισσότερα ( 10% ή 25% ) ένα ανοιχτό ή σκούρο χρώμα είναι αρκετό για να κάνει τα στοιχεία να φαίνονται τρισδιάστατα και να αφαιρέσει την επιπεδότητα της εικονογράφησης. Εάν θέλετε να προσθέσετε ένα αναδυόμενο χρώμα σε μια περιοχή που έχει ήδη 100% φωτεινότητα, προσπαθήστε να μειώσετε τον κορεσμό του. Σε ορισμένες περιπτώσεις (για παράδειγμα, όταν σχεδιάζετε μαλλιά) αυτό μπορεί να γίνει με την καλή έννοιααλλάξτε αποχρώσεις.
Υπάρχουν πολλές επιλογές μαλλιών που μπορείτε να δοκιμάσετε. Εδώ είναι μερικές ιδέες:
Καθώς συνεχίζετε να δημιουργείτε χαρακτήρες, μικρά πράγματα όπως το στυλ ρούχων, το μήκος των μανικιών, το μήκος του παντελονιού, τα αξεσουάρ, τα ρούχα και το χρώμα του δέρματος θα σας φανούν χρήσιμα για ποικιλία.
Τώρα το μόνο που μένει να γίνει είναι να τοποθετήσετε και τα δύο στοιχεία μαζί και να αξιολογήσετε πώς φαίνονται σε ένα περιβάλλον:
Εάν θέλετε να εξαγάγετε τη δημιουργία σας, το PNG είναι η ιδανική μορφή.
Αυτό ήταν, δουλειά έγινε!
Ελπίζω αυτό το μάθημα να μην ήταν πολύ μπερδεμένο. Νομίζω ότι μίλησα μέγιστη ποσότητασυμβουλές και τεχνικές αισθητικής. Μπορείτε να επεκτείνετε ελεύθερα τον κόσμο των ισομετρικών pixel σας - κτίρια, αυτοκίνητα, εσωτερικούς χώρους, εξωτερικούς χώρους. Το να κάνεις όλα αυτά είναι εφικτό και μάλιστα ενδιαφέρον, αν και όχι τόσο εύκολο.
Μεταφράστης: Shapoval Alexey
Σε αυτό το σεμινάριο θα μάθετε πώς να μετατρέπετε μια φωτογραφία ενός ατόμου σε pixel art as φανταστικό χαρακτήρα arcade παιχνίδι από τις αρχές της δεκαετίας του '90.Ο James May - γνωστός και ως Smudgethis - ανέπτυξε αυτό το στυλ το 2011 για μουσικό βίντεογια μια dubstep rock πράξη. Η πρώτη επιτυχία του Nero, Me & You - όπου δημιούργησε ένα animation για να το δείξει παλιό παιχνίδιμε τα δύο μέλη του Nero Το παιχνίδι ήταν μια πλατφόρμα 2D ρυθμού με γραφικά 16-bit παρόμοια με το Double Dragon, αλλά πολύ ανώτερο από τα κλασικά ρετρό 8-bit όπως το Super Mario Bros.
Για να δημιουργήσετε αυτό το στυλ, οι χαρακτήρες πρέπει ακόμα να είναι μπλοκαρισμένοι, αλλά πιο περίπλοκοι από τα παλαιότερα παιχνίδια. Και ενώ θα χρειαστεί να χρησιμοποιήσετε μια περιορισμένη χρωματική παλέτα για να πετύχετε την εμφάνιση, να θυμάστε ότι αυτά τα παιχνίδια εξακολουθούσαν να έχουν 65.536 χρώματα.
Εδώ ο James σας δείχνει πώς να δημιουργήσετε έναν χαρακτήρα από μια φωτογραφία χρησιμοποιώντας μια απλή παλέτα χρωμάτων και το εργαλείο μολύβι.
Ακριβώς όπως ο οδηγός κινούμενων σχεδίων, θα χρειαστείτε επίσης μια φωτογραφία του ατόμου. Ο Τζέιμς χρησιμοποίησε μια φωτογραφία ενός πανκ που περιλαμβάνεται στα αρχεία του έργου για αυτό το σεμινάριο.
Μόλις ολοκληρωθεί, ρίξτε μια ματιά σε αυτό το σεμινάριο κινουμένων σχεδίων 16-bit After Effects, όπου ο James σας δείχνει πώς να πάρετε αυτόν τον χαρακτήρα σε AE, να τον εμψυχώσετε και να εφαρμόσετε εφέ ρετρό παιχνιδιού.
Βήμα 1
Ανοίξτε το Animation Guide (16 bit).psd και 18888111.jpg (ή φωτογραφία της επιλογής σας) για να το χρησιμοποιήσετε ως βάση για τον χαρακτήρα. Μια φωτογραφία προφίλ πλήρους μήκους θα λειτουργήσει καλύτερα και θα σας βοηθήσει να αποκτήσετε χρωματικές παλέτες και στυλ για τη φιγούρα σας 16 bit.Το σεμινάριο κινούμενων σχεδίων έχει πολλές στάσεις σε μεμονωμένα επίπεδα. Επιλέξτε αυτό που ταιριάζει καλύτερα στη πόζα της φωτογραφίας σας - καθώς δεν έχουμε πόδια στο κάδρο, πήγα με την τυπική πόζα στο επίπεδο 1.
Βήμα 2
Χρησιμοποιώντας το Rectangular Marquee Tool (M), επιλέξτε την κεφαλή από τη φωτογραφία σας και αντιγράψτε (Cmd /Ctrl + C) και επικολλήστε την (Cmd /Ctrl + V) στον Οδηγό κίνησης (16 bit).psd.Κλιμακώστε την εικόνα ώστε να ταιριάζει, αναλογικά. Θα παρατηρήσετε ότι καθώς οι διαστάσεις του PSD είναι πολύ μικρές, η εικόνα θα αρχίσει αμέσως να σχεδιάζει ένα pixel.
Βήμα 3
Δημιουργήστε ένα νέο επίπεδο και σχεδιάστε το περίγραμμα με ένα μαύρο μολύβι ενός εικονοστοιχείου (Β), χρησιμοποιώντας τον οδηγό κινούμενων εικόνων που παρέχεται σε αυτό και τη φωτογραφία ως βάση. \nΟ παρεχόμενος οδηγός βοηθά στην ανάπτυξη μιας σειράς χαρακτήρων από μεγαλύτερες φιγούρες αφεντικών ή πιο αδύνατες γυναικείες. Αυτός είναι ένας πρόχειρος οδηγός για τη σύνθεση και την εμψύχωση των χαρακτήρων της τέχνης pixel μου.
Βήμα 4
Χρησιμοποιώντας το Εργαλείο Σταγονόμετρου (I), δοκιμάστε την πιο σκούρα περιοχή του τόνου του δέρματος στη φωτογραφία και δημιουργήστε ένα μικρό τετράγωνο χρώματος. Κάντε αυτό άλλες τρεις φορές για να δημιουργήσετε μια παλέτα τετράχρωμων τόνων δέρματος.Δημιουργήστε ένα άλλο επίπεδο κάτω από το επίπεδο περιγράμματος και χρησιμοποιήστε ένα πινέλο ενός εικονοστοιχείου και μια παλέτα χρωμάτων τεσσάρων χρωμάτων για να σκιάσετε την εικόνα (και πάλι, χρησιμοποιώντας τη φωτογραφία ως οδηγό). \n
Είναι καλύτερο να αποθηκεύετε όλα τα στοιχεία του έργου τέχνης σας ή διαφορετικά επίπεδα, καθώς αυτό διευκολύνει την επαναχρησιμοποίησή τους σε άλλα σχήματα. Αυτό είναι ιδιαίτερα χρήσιμο για κακούς, καθώς τα περισσότερα παιχνίδια 16-bit χρησιμοποιούν πολύ παρόμοιους αριθμούς. Για παράδειγμα, ένας φίλος μπορεί να έχει ένα κόκκινο πουκάμισο και ένα μαχαίρι, ενώ ένας μεταγενέστερος είναι πανομοιότυπος εκτός από ένα μπλε πουκάμισο και ένα πιστόλι.
Βήμα 5
Επαναλάβετε αυτή τη διαδικασία για άλλα μέρη της φιγούρας, σκιάζοντας το ύφασμα ώστε να ταιριάζει με άλλα στοιχεία της αρχικής φωτογραφίας. Φροντίστε να συνεχίσετε τη δειγματοληψία με το εργαλείο Eyedropper για να δημιουργήσετε πρώτα χρωματικές παλέτες, καθώς αυτό παρέχει ένα σταθερό σύνολο χρωμάτων που φαίνεται υπέροχο και ταιριάζει στη σχετικά περιορισμένη χρωματική παλέτα των παιχνιδιών 16 bit.
Βήμα 6
Προσθέστε δεδομένα για να βελτιώσετε τον χαρακτήρα σας με αποχρώσεις, τατουάζ, σκουλαρίκι κ.λπ. Δειπνήστε εδώ και σκεφτείτε πώς θέλετε να εμφανίζεται ο χαρακτήρας σας στο περιβάλλον του παιχνιδιού. Ίσως θα μπορούσαν να χρησιμοποιήσουν ένα τσεκούρι ή να έχουν ένα ρομποτικό χέρι;
Βήμα 7
Για να ζωντανέψετε τον χαρακτήρα σας, επαναλάβετε τα προηγούμενα βήματα χρησιμοποιώντας τα άλλα πέντε επίπεδα του οδηγού κινούμενων εικόνων. Αυτή η διαδικασία μπορεί να πάρει κάποιο χρόνο για να κυριαρχήσει και να δημιουργήσει απρόσκοπτα αποτελέσματα, αλλά μπορούν να γίνουν συντομεύσεις με την επαναχρησιμοποίηση στοιχείων από προηγούμενα καρέ. Για παράδειγμα, σε αυτή τη σειρά έξι καρέ, η κεφαλή παραμένει αμετάβλητη.
Βήμα 8
Για να ελέγξετε ότι η ακολουθία κινούμενων εικόνων είναι σε τάξη, ανοίξτε τον πίνακα κινούμενων εικόνων στο Photoshop και βεβαιωθείτε ότι μόνο το πρώτο καρέ της κινούμενης εικόνας βρίσκεται σε εξέλιξη αυτήν τη στιγμή. Μπορείτε να προσθέσετε νέα καρέ και να ενεργοποιήσετε και να απενεργοποιήσετε τα επίπεδα για να δημιουργήσετε την κινούμενη εικόνα σας, αλλά τα περισσότερα με γρήγορο τρόποείναι να χρησιμοποιήσετε την εντολή «Δημιουργία πλαισίων από επίπεδα» στο αναδυόμενο μενού του πίνακα (πάνω δεξιά).Το πρώτο πλαίσιο είναι ένα κενό φόντο, επομένως επιλέξτε το και κάντε κλικ στο εικονίδιο του πίνακα απορριμμάτων (κάτω) για να το διαγράψετε.
Το σχέδιο σε επίπεδο pixel έχει τη θέση του καλές τέχνες. Με τη βοήθεια απλών pixels δημιουργούνται πραγματικά αριστουργήματα. Φυσικά, μπορείτε να δημιουργήσετε τέτοια σχέδια σε ένα φύλλο χαρτιού, αλλά είναι πολύ πιο εύκολο και σωστό να δημιουργήσετε εικόνες χρησιμοποιώντας επεξεργαστές γραφικών. Σε αυτό το άρθρο θα αναλύσουμε λεπτομερώς κάθε εκπρόσωπο τέτοιου λογισμικού.
Το πιο δημοφιλές πρόγραμμα επεξεργασίας γραφικών στον κόσμο που μπορεί να λειτουργήσει σε επίπεδο pixel. Για να δημιουργήσετε τέτοιες εικόνες σε αυτό το πρόγραμμα επεξεργασίας, πρέπει απλώς να εκτελέσετε μερικά προκαταρκτικά βήματα ρύθμισης. Εδώ είναι όλα όσα χρειάζεται ένας καλλιτέχνης για να δημιουργήσει τέχνη.
Αλλά από την άλλη πλευρά, μια τέτοια αφθονία λειτουργικότητας δεν χρειάζεται για τη σχεδίαση εικονοστοιχείων, επομένως δεν έχει νόημα να πληρώσετε υπερβολικά για το πρόγραμμα εάν πρόκειται να το χρησιμοποιήσετε μόνο για μια συγκεκριμένη λειτουργία. Εάν είστε ένας από αυτούς τους χρήστες, τότε σας συμβουλεύουμε να δώσετε προσοχή σε άλλους εκπροσώπους που επικεντρώνονται ειδικά στα γραφικά pixel.
PyxelEdit
Αυτό το πρόγραμμα έχει όλα όσα χρειάζεστε για να δημιουργήσετε τέτοιους πίνακες και δεν είναι υπερκορεσμένο με λειτουργίες που δεν θα χρειαστεί ποτέ ο καλλιτέχνης. Η ρύθμιση είναι αρκετά απλή, η παλέτα χρωμάτων σάς επιτρέπει να αλλάξετε οποιοδήποτε χρώμα στον επιθυμητό τόνο και η ελεύθερη κίνηση των παραθύρων θα σας βοηθήσει να προσαρμόσετε το πρόγραμμα για τον εαυτό σας.
Το PyxelEdit έχει μια δυνατότητα για τη ρύθμιση των πλακιδίων στον καμβά, η οποία μπορεί να είναι χρήσιμη κατά τη δημιουργία αντικειμένων με παρόμοιο περιεχόμενο. Η δοκιμαστική έκδοση είναι διαθέσιμη για λήψη στον επίσημο ιστότοπο και δεν έχει περιορισμούς στη χρήση, επομένως μπορείτε να δοκιμάσετε το προϊόν πριν κάνετε μια αγορά.
Pixelformer
Σε εμφάνιση και λειτουργικότητα, αυτός είναι ο πιο συνηθισμένος επεξεργαστής γραφικών, μόνο που έχει πολλά πρόσθετα χαρακτηριστικάγια τη δημιουργία εικόνων pixel. Αυτό είναι ένα από τα λίγα προγράμματα που διανέμονται εντελώς δωρεάν. 
Οι προγραμματιστές δεν τοποθετούν το προϊόν τους ως κατάλληλο για τη δημιουργία pixel art, το αποκαλούν εξαιρετικό τρόπο σχεδίασης λογότυπων και εικονιδίων.
GraphicsGale
Σχεδόν σε όλα αυτά τα λογισμικά προσπαθούν να εισαγάγουν ένα σύστημα κινούμενων εικόνων, το οποίο τις περισσότερες φορές αποδεικνύεται ότι είναι απλά άχρηστο λόγω περιορισμένες λειτουργίεςκαι λανθασμένη εφαρμογή. Το GraphicsGale δεν είναι τόσο καλό ούτε με αυτό, αλλά τουλάχιστον αυτή η λειτουργία μπορεί να λειτουργήσει κανονικά.
Όσο για τη σχεδίαση, όλα εδώ είναι ακριβώς τα ίδια όπως στο μεγαλύτερο μέρος των συντακτών: βασικές λειτουργίες, μεγάλες χρωματική παλέτα, τη δυνατότητα δημιουργίας πολλαπλών επιπέδων και τίποτα επιπλέον που θα μπορούσε να επηρεάσει την εργασία σας.
Χαρμάτης
Το Character Maker 1999 είναι ένα από τα παλαιότερα τέτοια προγράμματα. Δημιουργήθηκε για τη δημιουργία μεμονωμένων χαρακτήρων ή στοιχείων, τα οποία στη συνέχεια θα χρησιμοποιηθούν σε άλλα προγράμματα κινουμένων σχεδίων ή θα υλοποιηθούν σε παιχνίδια στον υπολογιστή. Ως εκ τούτου, δεν είναι πολύ κατάλληλο για τη δημιουργία έργων ζωγραφικής.
Η διεπαφή δεν είναι πολύ καλή. Σχεδόν κανένα από τα παράθυρα δεν μπορεί να μετακινηθεί ή να αλλάξει μέγεθος και η προεπιλεγμένη διάταξη δεν είναι πολύ καλή. Ωστόσο, μπορείτε να το συνηθίσετε.
Pro Motion NG
Αυτό το πρόγραμμα είναι ιδανικό σχεδόν σε όλα, ξεκινώντας από μια καλά μελετημένη διεπαφή, όπου μπορείτε να μετακινήσετε τα παράθυρα ανεξάρτητα από το κύριο σε οποιοδήποτε σημείο και να αλλάξετε το μέγεθός τους και τελειώνοντας με μια αυτόματη εναλλαγή από το σταγονόμετρο σε ένα μολύβι , το οποίο είναι απλά ένα απίστευτα βολικό χαρακτηριστικό.
Διαφορετικά, το Pro Motion NG είναι απλώς καλό λογισμικό για τη δημιουργία γραφικών pixel οποιουδήποτε επιπέδου. Η δοκιμαστική έκδοση μπορεί να ληφθεί από τον επίσημο ιστότοπο και να δοκιμαστεί για να αποφασίσετε εάν θα αγοράσετε περαιτέρω την πλήρη έκδοση.
Ασεπρίτης
Δικαίως μπορεί να θεωρηθεί το πιο βολικό και όμορφο πρόγραμμαγια τη δημιουργία pixel art. Ο σχεδιασμός της διεπαφής από μόνος του αξίζει, αλλά δεν είναι όλα τα πλεονεκτήματα του Aseprite. Υπάρχει η δυνατότητα κίνησης μιας εικόνας, αλλά σε αντίθεση με τους προηγούμενους εκπροσώπους, εφαρμόζεται σωστά και βολικό στη χρήση. Υπάρχουν όλα όσα χρειάζεστε για να δημιουργήσετε όμορφα κινούμενα σχέδια GIF.
Τέχνη pixel(τα γραφικά Pixel) είναι πολύ δημοφιλή για gaming ακόμα και αυτές τις μέρες και υπάρχουν αρκετοί λόγοι για αυτό!
Λοιπόν, τι κάνει το Pixel Art σαγηνευτικό:
- Αντίληψη.Το Pixel Art φαίνεται εκπληκτικό! Υπάρχουν πολλά που μπορούν να ειπωθούν για κάθε μεμονωμένο pixel σε ένα sprite.
- Νοσταλγία.Το Pixel Art επαναφέρει ένα υπέροχο νοσταλγικό συναίσθημα για τους παίκτες που μεγάλωσαν παίζοντας Nintendo, Super Nintendo ή Genesis (όπως εγώ!)
- Εύκολο στην εκμάθηση.Το Pixel Art είναι μια από τις πιο εύκολες μορφές ψηφιακής τέχνης για εκμάθηση, ειδικά αν είστε περισσότερο προγραμματιστής παρά καλλιτέχνης ;]
Λοιπόν, θέλετε να δοκιμάσετε τις δυνάμεις σας στο Pixel Art; Στη συνέχεια, ακολουθήστε μαζί μου καθώς σας δείχνω πώς να φτιάξετε έναν απλό αλλά αποτελεσματικό χαρακτήρα παιχνιδιού που μπορείτε να χρησιμοποιήσετε στο δικό σας παιχνίδι! Επιπλέον, ως μπόνους, θα δούμε πώς να το ενσωματώσετε στα παιχνίδια iPhone!
Για να μάθετε με επιτυχία, θα χρειαστείτε το Adobe Photoshop. Εάν δεν το έχετε, μπορείτε να κάνετε λήψη μιας δωρεάν δοκιμής από τον ιστότοπο της Adobe ή μέσω torrent.
Τι είναι το Pixel Art;
Πριν ξεκινήσουμε, ας ξεκαθαρίσουμε τι είναι το Pixel Art, γιατί δεν είναι τόσο προφανές όσο νομίζετε. Ο ευκολότερος τρόπος για να ορίσετε τι είναι το Pixel Art είναι να ορίσετε τι δεν είναι, δηλαδή: οτιδήποτε όπου τα pixel δημιουργούνται αυτόματα. Ακολουθούν μερικά παραδείγματα:
Κλίση: Επιλέξτε δύο χρώματα και υπολογίστε το χρώμα των ενδιάμεσων pixel. Φαίνεται ωραίο, αλλά δεν είναι Pixel Art!
Εργαλείο θαμπώματος: Ορισμός pixel και αναπαραγωγή/επεξεργασία τους για δημιουργία νέα έκδοσηπροηγούμενη εικόνα. Και πάλι, όχι pixel art.
Ομαλό εργαλείο(βασικά δημιουργώντας νέα pixel σε διαφορετικά χρώματα για να γίνει κάτι "ομαλό"). Πρέπει να τα αποφύγεις!
Κάποιοι θα πουν ότι ακόμη και τα χρώματα που δημιουργούνται αυτόματα δεν είναι Pixel Art, καθώς απαιτούν ένα επίπεδο για τη μίξη εφέ (ανάμιξη εικονοστοιχείων μεταξύ δύο επιπέδων σύμφωνα με έναν δεδομένο αλγόριθμο). Αλλά επειδή οι περισσότερες συσκευές σήμερα ασχολούνται με εκατομμύρια χρώματα, αυτή η δήλωση μπορεί να αγνοηθεί. Ωστόσο, η χρήση λίγων χρωμάτων είναι μια καλή πρακτική στο Pixel Art.
Άλλα εργαλεία όπως π.χ (γραμμή) ή εργαλείο κουβά βαφήςΤο (Paint Bucket) δημιουργεί επίσης αυτόματα εικονοστοιχεία, αλλά επειδή μπορείτε να τα ορίσετε ώστε να μην είναι αντι-ψευδώνυμο των pixel που συμπληρώνετε, αυτά τα εργαλεία θεωρούνται φιλικά προς το Pixel Art.
Έτσι, ανακαλύψαμε ότι το Pixel Art απαιτεί πολλή προσοχήόταν τοποθετείτε κάθε pixel σε ένα sprite, τις περισσότερες φορές χειροκίνητα και με περιορισμένη παλέτα χρωμάτων. Ας πιάσουμε δουλειά τώρα!
Ξεκινώντας
Πριν ξεκινήσετε να δημιουργείτε το πρώτο σας στοιχείο Pixel Art, θα πρέπει να γνωρίζετε ότι το Pixel Art δεν μπορεί να κλιμακωθεί. Αν προσπαθήσετε να το μειώσετε, όλα θα φαίνονται θολά. Εάν προσπαθήσετε να το μεγεθύνετε, όλα θα φαίνονται εντάξει, αρκεί να χρησιμοποιείτε πολλαπλάσιο του δύο ζουμ (αλλά φυσικά δεν θα είναι ευκρινές).
Για να αποφύγετε αυτό το πρόβλημα, πρέπει πρώτα να καταλάβετε πόσο μεγάλος πρέπει να είναι ο χαρακτήρας του παιχνιδιού σας, ή το στοιχείο του παιχνιδιού σας και, στη συνέχεια, να ξεκινήσετε τη δουλειά. Τις περισσότερες φορές αυτό βασίζεται στο μέγεθος της οθόνης της συσκευής που στοχεύετε και στο πόσα "pixel" θέλετε να δείτε.
Για παράδειγμα, εάν θέλετε το παιχνίδι να φαίνεται διπλάσιο στην οθόνη του iPhone 3GS ("Ναι, θέλω πραγματικά να δώσω στο παιχνίδι μου μια ρετρό εμφάνιση με pixel!"), του οποίου η ανάλυση οθόνης είναι 480x320 pixel, τότε πρέπει να εργαστείτε με τη μισή ανάλυση V σε αυτή την περίπτωσηθα είναι 240x160 pixel.
Ανοίξτε ένα νέο έγγραφο Photoshop ( Αρχείο → Νέο…) και ορίστε το μέγεθος σε οποιοδήποτε μέγεθος της οθόνης του παιχνιδιού σας και, στη συνέχεια, επιλέξτε το μέγεθος για τον χαρακτήρα σας.
Κάθε κελί είναι 32x32 pixel! Επέλεξα 32x32 pixel όχι μόνο επειδή ταιριάζει τέλεια με το επιλεγμένο μέγεθος οθόνης, αλλά και επειδή τα 32x32 pixel είναι επίσης πολλαπλάσιο του 2, κάτι που είναι βολικό για κινητήρες παιχνιδιών (τα μεγέθη πλακιδίων είναι συχνά πολλαπλάσια του 2, οι υφές ευθυγραμμίζονται πολλαπλάσιο του 2, και τα λοιπά.
Ακόμα κι αν ο κινητήρας που χρησιμοποιείτε υποστηρίζει οποιοδήποτε μέγεθος εικόνας, μπορείτε πάντα να δοκιμάσετε να εργαστείτε με ζυγό αριθμό pixel. Σε αυτήν την περίπτωση, εάν η εικόνα πρέπει να κλιμακωθεί, το μέγεθος θα διαιρεθεί καλύτερα, κάτι που τελικά θα έχει ως αποτέλεσμα καλύτερη απόδοση.
Σχεδιάζοντας έναν χαρακτήρα Pixel Art
Το Pixel Art είναι γνωστό ότι είναι καθαρά και ευανάγνωστα γραφικά: μπορείτε να ορίσετε τα χαρακτηριστικά του προσώπου, τα μάτια, τα μαλλιά, τα μέρη του σώματος με λίγες μόνο κουκκίδες. Ωστόσο, το μέγεθος της εικόνας το κάνει δύσκολο: όσο μικρότερος είναι ο χαρακτήρας σας, τόσο πιο δύσκολο είναι να σχεδιάσετε. Για να είστε πιο πρακτικοί, επιλέξτε το μικρότερο χαρακτηριστικό του χαρακτήρα. Πάντα επιλέγω μάτια γιατί είναι ένας από τους καλύτερους τρόπους για να δώσεις ζωή σε έναν χαρακτήρα.
Στο Photoshop, επιλέξτε Εργαλείο μολυβιού(Εργαλείο μολυβιού). Εάν δεν μπορείτε να το βρείτε, απλώς πατήστε παρατεταμένα το εργαλείο Εργαλείο πινέλου(Brush Tool) και θα το δείτε αμέσως (θα πρέπει να είναι δεύτερο στη λίστα). Απλώς θα χρειαστεί να αλλάξετε το μέγεθός του σε 1 px (μπορείτε να κάνετε κλικ στη γραμμή Επιλογών εργαλείων και να αλλάξετε το μέγεθός του ή απλώς να κρατήσετε πατημένο το πλήκτρο [).
Θα χρειαστείτε επίσης Εργαλείο διαγραφής(Eraser Tool), οπότε κάντε κλικ σε αυτό (ή πατήστε E) και αλλάξτε τις ρυθμίσεις του επιλέγοντας από την αναπτυσσόμενη λίστα Τρόπος:(Τρόπος:) Μολύβι(Μολύβι) (επειδή δεν υπάρχει anti-aliasing σε αυτή τη λειτουργία).
Τώρα ας αρχίσουμε να κάνουμε pixelating! Σχεδιάστε τα φρύδια και τα μάτια όπως φαίνεται στην παρακάτω εικόνα:
ρε! έχω πιξελωθεί!! Θα μπορούσατε ήδη να ξεκινήσετε με το Lineart, αλλά ένας πιο πρακτικός τρόπος είναι να σχεδιάσετε μια σιλουέτα του χαρακτήρα. Τα καλά νέα είναι ότι δεν χρειάζεται να είστε επαγγελματίας σε αυτό το στάδιο, απλώς προσπαθήστε να φανταστείτε το μέγεθος των τμημάτων του σώματος (κεφάλι, κορμός, χέρια, πόδια) και την αρχική στάση του χαρακτήρα. Δοκιμάστε κάτι σαν αυτό σε γκρι:
Δεν χρειάζεται να είστε επαγγελματίας σε αυτό το στάδιο Σημειώστε ότι άφησα και λίγο λευκό χώρο. Δεν χρειάζεται πραγματικά να γεμίσετε ολόκληρο τον καμβά, αφήστε χώρο για μελλοντικά καρέ. Σε αυτή την περίπτωση, θα είναι πολύ χρήσιμο να διατηρήσετε το ίδιο μέγεθος καμβά για όλους.
Αφού τελειώσεις τη σιλουέτα, ήρθε η ώρα . Τώρα πρέπει να είστε πιο προσεκτικοί με την τοποθέτηση των pixel σας, επομένως μην ανησυχείτε για ρούχα, πανοπλίες κ.λπ. Για να είστε ασφαλείς, μπορείτε να προσθέσετε ένα νέο στρώμα, ώστε να μην χάσετε ποτέ την αρχική σας σιλουέτα.
Εάν πιστεύετε ότι το εργαλείο μολύβι αργεί πολύ να σχεδιάσει, μπορείτε πάντα να το χρησιμοποιήσετε (Εργαλείο γραμμής), απλώς να θυμάστε ότι δεν θα μπορείτε να τοποθετήσετε τα pixel όσο ακριβέστερα μπορείτε με ένα μολύβι. Θα χρειαστεί να ρυθμίσετε τις παραμέτρους όπως φαίνεται παρακάτω:
Επιλέγω , πατώντας παρατεταμένα Ορθογώνιο εργαλείο(Εργαλείο ορθογώνιου)
Μεταβείτε στον πίνακα επιλογών εργαλείων, στην αναπτυσσόμενη λίστα Επιλέξτε Λειτουργία εργαλείου(Λειτουργία παρακολούθησης διαδρομής) επιλέξτε Pixel , αλλάξτε Βάρος(Πάχος) σε 1 px (αν δεν έχει ήδη γίνει) και καταργήστε την επιλογή Αντι-ψευδώνυμο(Εξομάλυνση). Έτσι πρέπει να το έχετε:
Παρατηρήστε ότι δεν έκανα το κάτω περίγραμμα για τα πόδια. Αυτό είναι προαιρετικό, καθώς τα πόδια δεν είναι τόσο σημαντικό μέρος των ποδιών για να τονίσετε, και αυτό θα εξοικονομήσει μια γραμμή pixel στον καμβά.
Εφαρμογή χρωμάτων και σκιών
Τώρα είστε έτοιμοι να αρχίσετε να χρωματίζετε τον χαρακτήρα μας. Μην ανησυχείτε για την επιλογή των σωστών χρωμάτων, θα είναι πολύ εύκολο να αλλάξουν αργότερα, απλά φροντίστε το καθένα να έχει το «δικό του χρώμα». Χρησιμοποιήστε τα προεπιλεγμένα χρώματα στην καρτέλα Δείγματα(Παράθυρο → Δείγματα).
Χρωματίστε τον χαρακτήρα σας όπως η παρακάτω εικόνα (αλλά μη διστάσετε να γίνετε δημιουργικοί και να χρησιμοποιήσετε τα δικά σας χρώματα!)
Ένα καλό χρώμα με αντίθεση βελτιώνει την αναγνωσιμότητα του στοιχείου σας! Σημειώστε ότι ακόμα δεν έχω περιγράψει τα ρούχα ή τα μαλλιά. Να θυμάστε πάντα: αποθηκεύστε όσο το δυνατόν περισσότερα pixel από περιττά περιγράμματα!
Δεν χρειάζεται να χάνετε χρόνο ζωγραφίζοντας κάθε pixel. Για να επιταχύνετε την εργασία σας, χρησιμοποιήστε γραμμές για το ίδιο χρώμα ή Εργαλείο κουβά βαφής(Paint Bucket Tool) για να συμπληρώσετε τα κενά. Παρεμπιπτόντως, θα πρέπει επίσης να το ρυθμίσετε. Επιλέγω Εργαλείο κουβά βαφήςστη γραμμή εργαλείων (ή απλώς πατήστε το πλήκτρο G) και αλλάξτε Ανοχή(Ανοχή) στο 0 και επίσης καταργήστε την επιλογή Αντι-ψευδώνυμο(Εξομάλυνση).
Εάν χρειαστεί ποτέ να χρησιμοποιήσετε Εργαλείο μαγικό ραβδί(Εργαλείο μαγικού ραβδιού) - πολύ χρήσιμο εργαλείο, το οποίο επιλέγει όλα τα εικονοστοιχεία με το ίδιο χρώμα και, στη συνέχεια, τα ρυθμίζει με τον ίδιο τρόπο όπως το εργαλείο "Κάδος ζωγραφικής" - χωρίς ανοχή και χωρίς αντιπαραβολή.
Το επόμενο βήμα, που θα απαιτήσει κάποιες γνώσεις από την πλευρά σας, είναι η αποφυγή και η σκίαση. Εάν δεν έχετε γνώσεις για το πώς να δείχνετε φωτεινά και σκοτεινές πλευρές, τότε παρακάτω θα σας δώσω μερικές οδηγίες. Εάν δεν έχετε το χρόνο ή την διάθεση να το μελετήσετε, μπορείτε να παραλείψετε αυτό το βήμα και να προχωρήσετε στην ενότητα "Spice Up Your Palette", γιατί στο τέλος, μπορείτε απλώς να κάνετε τη σκίασή σας όπως στο παράδειγμά μου!
Χρησιμοποιήστε την ίδια πηγή φωτός για ολόκληρο το στοιχείο Προσπαθήστε να του δώσετε τα σχήματα που θέλετε/μπορείτε, γιατί μετά από αυτό το περιουσιακό στοιχείο αρχίζει να φαίνεται πιο ενδιαφέρον. Για παράδειγμα, τώρα μπορείτε να δείτε τη μύτη, τα συνοφρυωμένα μάτια, τη σφουγγαρίστρα μαλλιών, τις τσακίσεις στο παντελόνι κ.λπ. Μπορείτε επίσης να προσθέσετε μερικά ανοιχτόχρωμα σημεία σε αυτό, θα φαίνεται ακόμα καλύτερα:
Χρησιμοποιήστε την ίδια πηγή φωτός κατά τη σκίαση Και τώρα, όπως υποσχέθηκα, ένας μικρός οδηγός για το φως και τις σκιές:
Ενισχύστε την παλέτα σας
Πολλοί άνθρωποι χρησιμοποιούν προεπιλεγμένα χρώματα παλέτας, αλλά επειδή πολλοί άνθρωποι χρησιμοποιούν αυτά τα χρώματα, μπορούμε να τα δούμε σε πολλά παιχνίδια.
Το Photoshop έχει μια μεγάλη ποικιλία χρωμάτων στην τυπική παλέτα του, αλλά δεν πρέπει να βασίζεστε πολύ σε αυτό. Ο καλύτερος τρόπος για να φτιάξετε τα δικά σας χρώματα είναι κάνοντας κλικ στην κύρια παλέτα στο κάτω μέρος της γραμμής εργαλείων.
Στη συνέχεια, στο παράθυρο Color Picker, περιηγηθείτε στη δεξιά πλαϊνή γραμμή για να επιλέξετε ένα χρώμα και στην κύρια περιοχή για να επιλέξετε την επιθυμητή φωτεινότητα (πιο ανοιχτόχρωμη ή πιο σκούρα) και κορεσμό (πιο φωτεινή ή πιο θαμπή).
Μόλις βρείτε αυτό που θέλετε, κάντε κλικ στο OK και ρυθμίστε ξανά το εργαλείο Paint Bucket. Μην ανησυχείτε, μπορείτε απλώς να καταργήσετε την επιλογή του πλαισίου «Συνεχείς» και όταν ζωγραφίζετε με νέο χρώμα, θα συμπληρωθούν και όλα τα νέα pixel με το ίδιο χρώμα φόντου.
Αυτός είναι ένας άλλος λόγος για τον οποίο είναι σημαντικό να εργάζεστε με μικρό αριθμό χρωμάτων και να χρησιμοποιείτε πάντα το ίδιο χρώμα για το ίδιο στοιχείο (πουκάμισα, μαλλιά, κράνος, πανοπλία κ.λπ.). Αλλά θυμηθείτε να χρησιμοποιείτε διαφορετικά χρώματα για άλλες περιοχές, διαφορετικά το σχέδιό μας θα είναι υπερβολικά χρωματισμένο!
Καταργήστε την επιλογή "Συνεχείς" για να γεμίσετε επιλεγμένα pixel με το ίδιο χρώμαΑλλάξτε τα χρώματα αν σας αρέσει και αποκτήστε έναν πιο λαμπερό χρωματισμό χαρακτήρα! Μπορείτε ακόμη και να ξαναχρωματίσετε τα περιγράμματα, απλώς βεβαιωθείτε ότι συνδυάζονται καλά με το φόντο.
Τέλος, κάντε δοκιμή χρώματοςΦόντο: Δημιουργήστε ένα νέο στρώμα κάτω από τον χαρακτήρα σας και γεμίστε το με διαφορετικά χρώματα. Αυτό γίνεται για να διασφαλιστεί ότι ο χαρακτήρας σας θα είναι ορατός σε ανοιχτό, σκοτεινό, ζεστό και δροσερό φόντο.
Όπως μπορείτε ήδη να δείτε, έχω απενεργοποιήσει το anti-aliasing σε όλα τα εργαλεία που έχω χρησιμοποιήσει μέχρι τώρα. Μην ξεχάσετε να το κάνετε αυτό και σε άλλα εργαλεία, π.χ. Ελλειπτική μαρκίζα(Οβάλ μαρκίζα) και Λάσο(Λάσο).
Με αυτά τα εργαλεία μπορείτε εύκολα να αλλάξετε το μέγεθος επιλεγμένων εξαρτημάτων ή ακόμα και να τα περιστρέψετε. Για να το κάνετε αυτό, χρησιμοποιήστε οποιοδήποτε εργαλείο επιλογής (ή πατήστε M) για να επιλέξετε μια περιοχή, κάντε δεξί κλικ και επιλέξτε Δωρεάν Μεταμόρφωση(Ελεύθερος μετασχηματισμός) ή απλώς πατήστε Ctrl + T. Για να αλλάξετε το μέγεθος της επιλεγμένης περιοχής, σύρετε μία από τις λαβές που βρίσκονται γύρω από την περίμετρο του πλαισίου μετασχηματισμού. Για να αλλάξετε το μέγεθος της επιλογής διατηρώντας τις αναλογίες, κρατήστε πατημένο το πλήκτρο Shift και σύρετε μία από τις γωνιακές λαβές.
Ωστόσο, το Photoshop εξομαλύνει αυτόματα οτιδήποτε επεξεργάζεται χρησιμοποιώντας το Δωρεάν Μεταμόρφωσηοπότε πριν την επεξεργασία μεταβείτε στο Επεξεργασία → Προτιμήσεις → Γενικά(Ctrl + K) και αλλάξτε Παρεμβολή εικόνας(Image Interpolation) ενεργοποιημένη Πλησιέστερος Γείτονας(Κοντινότερος γείτονας). Με λίγα λόγια, όταν Πλησιέστερος Γείτοναςη νέα θέση και το μέγεθος υπολογίζονται πολύ χονδρικά, χωρίς να εφαρμόζονται νέα χρώματα ή αδιαφάνεια και να διατηρούνται τα χρώματα που επιλέξατε.
Ενσωμάτωση Pixel Art στα παιχνίδια iPhone
Σε αυτήν την ενότητα, θα μάθετε πώς να ενσωματώνετε το pixel art σε ένα παιχνίδι iPhone χρησιμοποιώντας το πλαίσιο παιχνιδιού Cocos2d. Γιατί σκέφτομαι μόνο το iPhone; Επειδή, χάρη σε μια σειρά άρθρων σχετικά με το Unity (για παράδειγμα: , ή Παιχνίδι στο στυλ του Jetpack Joyride στο Unity 2D) γνωρίζετε ήδη πώς να εργαστείτε μαζί τους στο Unity και από άρθρα σχετικά με το Crafty (Παιχνίδια προγράμματος περιήγησης: Snake) και Impact (Εισαγωγή στη δημιουργία παιχνιδιών προγράμματος περιήγησης στο Impact) μάθατε πώς να τα εισάγετε στον καμβά και να δημιουργείτε παιχνίδια προγράμματος περιήγησης.
Εάν είστε νέος στο Cocos2D ή στην ανάπτυξη εφαρμογών για iPhone γενικά, σας προτείνω να ξεκινήσετε με έναν από τους οδηγούς Cocos2d και iPhone. Εάν έχετε εγκαταστήσει το Xcode και το Cocos2d, διαβάστε!
Δημιουργώ νέο έργο iOS → cocos2d v2.x → cocos2d πρότυπο iOS, ονομάστε το PixelArt και επιλέξτε iPhone ως συσκευή. Σύρετε το δημιουργημένο εικονοστοιχείο, για παράδειγμα: sprite_final.png στο έργο σας και μετά ανοίξτε HelloWorldLayer.mκαι αντικαταστήστε τη μέθοδο αρχικοποίησης με το εξής:
-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )
Τοποθετούμε το sprite στην αριστερή πλευρά της οθόνης και το περιστρέφουμε έτσι ώστε να είναι στραμμένο προς τα δεξιά. Μεταγλώττιση, εκτέλεση και, στη συνέχεια, θα δείτε το sprite σας στην οθόνη:
Ωστόσο, θυμηθείτε, όπως συζητήσαμε νωρίτερα σε αυτό το σεμινάριο, θέλαμε να αυξήσουμε την κλίμακα των εικονοστοιχείων με τεχνητό τρόπο, έτσι ώστε κάθε pixel να είναι αισθητά διακριτό από τα άλλα. Προσθέστε λοιπόν αυτή τη νέα γραμμή μέσα στη μέθοδο προετοιμασίας:
Hero.scale = 2,0;
Τίποτα περίπλοκο, σωστά; Compile, τρέξτε και... περιμένετε, το sprite μας είναι θολό!
Αυτό συμβαίνει επειδή από προεπιλογή το Cocos2d εξομαλύνει το σχέδιο όταν το κλιμακώνει. Δεν το χρειαζόμαστε, οπότε προσθέστε την ακόλουθη γραμμή:
Αυτή η γραμμή διαμορφώνει το Cocos2d ώστε να κλιμακώνει τις εικόνες χωρίς αντι-αλλοίωση, έτσι ο τύπος μας εξακολουθεί να φαίνεται "pixelated" Compile, run και... ναι, λειτουργεί!
Δείτε τα οφέλη από τη χρήση του Pixel Γραφικά τέχνης- μπορούμε να χρησιμοποιήσουμε μικρότερη εικόνα από αυτή που εμφανίζεται στην οθόνη, εξοικονομώντας μεγάλη μνήμη υφής. Δεν χρειάζεται καν να κάνουμε ξεχωριστές εικόνες για οθόνες αμφιβληστροειδούς!
Τι ακολουθεί;
Ελπίζω να σας άρεσε αυτό το σεμινάριο και να μάθετε λίγα περισσότερα για την τέχνη των pixel! Πριν αποχωριστώ, θέλω να σας δώσω μερικές συμβουλές:
- Πάντα να προσπαθείτε να αποφεύγετε τη χρήση αντιπαραβολής, διαβαθμίσεων ή υπερβολικά πολλών χρωμάτων στα στοιχεία σας. Αυτό είναι για το καλό σας, ειδικά αν είστε ακόμα αρχάριος.
- Εάν θέλετε ΠΡΑΓΜΑΤΙΚΑ να μιμηθείτε ένα ρετρό στυλ, δείτε τα έργα τέχνης στα παιχνίδια κονσόλας 8-bit ή 16-bit.
- Ορισμένα στυλ δεν χρησιμοποιούν σκούρα περιγράμματα, άλλα δεν λαμβάνουν υπόψη τα αποτελέσματα του φωτός ή της σκιάς. Όλα εξαρτώνται από το στυλ! Στο σεμινάριο μας δεν σχεδιάσαμε σκιές, αλλά αυτό δεν σημαίνει ότι δεν πρέπει να τις χρησιμοποιήσετε.
Για έναν αρχάριο, το Pixel Art φαίνεται σαν τα πιο εύκολα γραφικά για εκμάθηση, αλλά στην πραγματικότητα δεν είναι τόσο απλό όσο φαίνεται. Ο καλύτερος τρόπος για να βελτιώσετε τις δεξιότητές σας είναι η εξάσκηση, η εξάσκηση, η εξάσκηση. Συνιστώ ανεπιφύλακτα να δημοσιεύσετε τη δουλειά σας στα φόρουμ Pixel Art, ώστε άλλοι καλλιτέχνες να μπορούν να σας δώσουν συμβουλές - είναι ένας πολύ καλός τρόπος για να βελτιώσετε την τεχνική σας! Ξεκινήστε από μικρά, εξασκηθείτε πολύ, λάβετε σχόλια και μπορείτε να δημιουργήσετε ένα καταπληκτικό παιχνίδι που θα σας φέρει πολλά χρήματα και χαρά!
Adobe Photoshop: Σχεδιάστε και ζωντανέψτε έναν χαρακτήρα Τεχνολογία pixelΤέχνη
Σε αυτό το μάθημα θα μάθετε πώς να σχεδιάζετε και να ζωντανεύετε χαρακτήρες χρησιμοποιώντας την τεχνική Pixel Art. Για να το κάνετε αυτό, χρειάζεστε μόνο το Adobe Photoshop. Το αποτέλεσμα θα είναι ένα GIF με έναν αστροναύτη που τρέχει.
Πρόγραμμα: Adobe Photoshop Δυσκολία: αρχάριοι, μεσαίο επίπεδο Απαιτούμενος χρόνος: 30 λεπτά – ώρα
I. Ρύθμιση του εγγράφου και των εργαλείων
Βήμα 1
Επιλέξτε Μολύβι από τη γραμμή εργαλείων - αυτό θα είναι το κύριο εργαλείο για το μάθημά μας. Στις ρυθμίσεις, επιλέξτε τον τύπο πινέλου Hard Round και ορίστε τις υπόλοιπες τιμές όπως στην εικόνα. Στόχος μας είναι να κάνουμε τη μύτη του μολυβιού όσο το δυνατόν πιο κοφτερή.
Βήμα 2
Στις ρυθμίσεις Eraser Tool (γόμα), επιλέξτε Pencil Mode και ορίστε τις υπόλοιπες τιμές όπως φαίνεται στην εικόνα.
Βήμα 3
Ενεργοποιήστε το Pixel Grid (Προβολή > Εμφάνιση > Πλέγμα Pixel). Εάν δεν υπάρχει τέτοιο στοιχείο στο μενού, μεταβείτε στις ρυθμίσεις και ενεργοποιήστε την επιτάχυνση γραφικών Προτιμήσεις > Απόδοση > Επιτάχυνση γραφικών.
Σημείωση: Το πλέγμα θα είναι ορατό μόνο στον πρόσφατα δημιουργημένο καμβά όταν γίνει μεγέθυνση 600% ή περισσότερο.
Βήμα 4
Στις Προτιμήσεις > Γενικά (Control-K), αλλάξτε τη λειτουργία παρεμβολής εικόνας σε λειτουργία Πλησιέστερου γείτονα. Αυτό θα επιτρέψει στα όρια των αντικειμένων να παραμείνουν όσο το δυνατόν πιο σαφή.
Στις ρυθμίσεις Units & Rulers, ορίστε τις μονάδες χάρακα σε pixels Preferences > Units & Rulers > Pixels.
II. Δημιουργία χαρακτήρων
Βήμα 1
Και τώρα που όλα έχουν ρυθμιστεί, μπορούμε να προχωρήσουμε απευθείας στη σχεδίαση του χαρακτήρα.
Σκιαγράφησε τον χαρακτήρα σου με ξεκάθαρο περίγραμμα, προσέχοντας να μην τον υπερφορτώνεις με μικρές λεπτομέρειες. Σε αυτό το στάδιο, το χρώμα δεν έχει καθόλου σημασία, το κύριο πράγμα είναι ότι το περίγραμμα είναι σαφώς σχεδιασμένο και καταλαβαίνετε πώς θα φαίνεται ο χαρακτήρας. Αυτό το σκίτσο ετοιμάστηκε ειδικά για αυτό το μάθημα.
Βήμα 2
Μειώστε την κλίμακα του σκίτσου σε ύψος 60 pixel χρησιμοποιώντας τη συντόμευση πληκτρολογίου Control+T ή Επεξεργασία > Ελεύθερος μετασχηματισμός.
Το μέγεθος του αντικειμένου εμφανίζεται στον πίνακα πληροφοριών. Λάβετε υπόψη ότι οι ρυθμίσεις παρεμβολής είναι οι ίδιες με αυτές που κάναμε στο βήμα 4.
Βήμα 3
Κάντε μεγέθυνση στο σκίτσο κατά 300-400% για να διευκολύνετε την εργασία και να μειώσετε την αδιαφάνεια του στρώματος. Στη συνέχεια, δημιουργήστε ένα νέο στρώμα και σχεδιάστε τα περιγράμματα του σκίτσου χρησιμοποιώντας το εργαλείο μολύβι. Εάν ο χαρακτήρας είναι συμμετρικός, όπως στην περίπτωσή μας, μπορείτε να περιγράψετε μόνο το μισό, και στη συνέχεια να τον αντιγράψετε και να τον αναστρέψετε ως καθρέφτη (Επεξεργασία > Μετασχηματισμός > Αναστροφή οριζόντιας).
Ρυθμός:Για να σχεδιάσετε σύνθετα στοιχεία, σπάστε τα σε μέρη. Όταν τα εικονοστοιχεία (κουκκίδες) σε μια γραμμή σχηματίζουν έναν "ρυθμό" όπως 1-2-3 ή 1-1-2-2-3-3, το σκίτσο φαίνεται πιο ομαλό για ανθρώπινο μάτι. Αλλά, αν η φόρμα το απαιτεί, αυτός ο ρυθμός μπορεί να διαταραχθεί.
Βήμα 4
Όταν το περίγραμμα είναι έτοιμο, μπορείτε να επιλέξετε τα κύρια χρώματα και να βάψετε τα μεγάλα σχήματα. Κάντε αυτό σε ένα ξεχωριστό στρώμα κάτω από το περίγραμμα.
Βήμα 5
Ομαλώστε το περίγραμμα σχεδιάζοντας μια σκιά κατά μήκος της εσωτερικής άκρης.
Συνεχίστε να προσθέτετε σκιές. Όπως ίσως έχετε παρατηρήσει καθώς σχεδιάζετε, ορισμένα σχήματα μπορούν να διορθωθούν.
Βήμα 6
Δημιουργήστε ένα νέο επίπεδο για τα highlights.
Επιλέξτε τη λειτουργία συνδυασμού επικάλυψης από την αναπτυσσόμενη λίστα στον πίνακα "Επίπεδα". Βάψτε με ανοιχτό χρώμα τις περιοχές που θέλετε να τονίσετε. Στη συνέχεια εξομαλύνετε τις επισημάνσεις χρησιμοποιώντας Filter > Blur > Blur.
Ολοκληρώστε την εικόνα, στη συνέχεια αντιγράψτε και αντικατοπτρίστε το τελειωμένο μισό της εικόνας και μετά συνδυάστε τα στρώματα με τα μισά για να δημιουργήσετε μια ολόκληρη εικόνα.
Βήμα 7
Τώρα ο αστροναύτης πρέπει να προσθέσει αντίθεση. Χρησιμοποιήστε τις ρυθμίσεις Επίπεδα (Εικόνα > Προσαρμογές > Επίπεδα) για να το κάνετε πιο φωτεινό και, στη συνέχεια, προσαρμόστε την απόχρωση χρησιμοποιώντας την επιλογή Ισορροπία χρωμάτων (Εικόνα > Προσαρμογές > Ισορροπία χρωμάτων).
Ο χαρακτήρας είναι τώρα έτοιμος για κινούμενα σχέδια.
III. Κινούμενα σχέδια χαρακτήρων
Βήμα 1
Δημιουργήστε ένα αντίγραφο του επιπέδου (Επίπεδο > Νέο > Επίπεδο μέσω αντιγραφής) και μετακινήστε το 1 εικονοστοιχείο επάνω και 2 εικονοστοιχεία προς τα δεξιά. Αυτό είναι ένα βασικό σημείο στο animation χαρακτήρων.
Μειώστε την αδιαφάνεια του αρχικού στρώματος κατά 50%, ώστε να μπορείτε να δείτε το προηγούμενο πλαίσιο. Αυτό ονομάζεται "Onion Skinning" (λειτουργία πληθυντικού).
Βήμα 2
Τώρα λυγίστε τα χέρια και τα πόδια του χαρακτήρα σας σαν να έτρεχε.
● Επισήμανση αριστερό χέριΕργαλείο λάσο
● Χρησιμοποιώντας το FreeTransformTool (Επεξεργασία > FreeTransform) και κρατώντας πατημένο το πλήκτρο Control, μετακινήστε τα περιγράμματα του κοντέινερ έτσι ώστε το χέρι να μετακινηθεί προς τα πίσω.
● Επιλέξτε πρώτα ένα πόδι και τεντώστε το λίγο. Στη συνέχεια, σφίξτε το άλλο πόδι, αντίθετα, έτσι ώστε να νιώσετε ότι ο χαρακτήρας περπατά.
● Χρησιμοποιώντας ένα μολύβι και γόμα, προσαρμόστε το μέρος του δεξιού σας χεριού κάτω από τον αγκώνα.
Βήμα 3
Τώρα πρέπει να επανασχεδιάσετε εντελώς τη νέα θέση των χεριών και των ποδιών, όπως φαίνεται στη δεύτερη ενότητα αυτού του μαθήματος. Αυτό είναι απαραίτητο για να διασφαλιστεί ότι η εικόνα φαίνεται καθαρή, επειδή ο μετασχηματισμός παραμορφώνει πολύ τις γραμμές των pixel.
Βήμα 4
Δημιουργήστε ένα αντίγραφο του δεύτερου στρώματος και γυρίστε το οριζόντια. Τώρα έχετε 1 βασική στάση και 2 σε κίνηση. Επαναφέρετε την αδιαφάνεια όλων των επιπέδων στο 100%.
Βήμα 5
Μεταβείτε στο Παράθυρο > Χρονολόγιο για να εμφανίσετε τον πίνακα Χρονολόγιο και κάντε κλικ στην επιλογή Δημιουργία κινούμενης εικόνας πλαισίου.
