Βασισμένες σε εικονοστοιχεία ιστότοποι Πόροι, Σεμινάρια και Παραδείγματα

Ο σχεδιασμός ενός διεπαφή ιστού με γραφικά σε στυλ pixel είναι σχετικά ασαφής σε σύγκριση με τις σύγχρονες τάσεις. Πρέπει πραγματικά να σκάψετε μέσα από μια χούφτα ιστοσελίδες στο διαδίκτυο για να βρείτε μερικά καλά παραδείγματα. είναι δύσκολο αλλά όχι αδύνατο.

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

Πόροι

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

Σπάνια

Έχω συνηθίσει να εργάζομαι με κώδικα ανοιχτού κώδικα. Γι 'αυτό, η εύρεση ενός plugin jQuery όπως το Spritely είναι πάντα μια συναρπαστική κατάσταση. Μπορείτε να συμπεριλάβετε αυτό το σενάριο στον ιστότοπό σας για γρήγορο δυναμικό animation και scrolling φόντο.

Το σύνολο του plugin είναι powered by JavaScript και HTML / CSS? δεν απαιτείται Flash ή άλλη γλώσσα backend. Η σελίδα τεκμηρίωσης είναι απλή αλλά αρκετά για να ξεκινήσετε. Οι προγραμματιστές έχουν πολλά demo δείγματα που μπορείτε επίσης να κατεβάσετε.

Η τρέχουσα σταθερή έκδοση είναι 0.6.1 η οποία ενημερώνεται μετρίως. Τα εφέ κίνησης είναι συμβατά με τα Opera, Chrome, Safari, Firefox και Internet Explorer 6+. Επίσης, όλα τα προγράμματα περιήγησης smartphone που λειτουργούν σε Android ή iOS θα πρέπει να αποδίδουν τέλεια.

FatPixels

Αυτό είναι ένα ισχυρό σενάριο sprite open source που αναπτύχθηκε από τον Matías Martínez. Το FatPixels απαιτεί τη σωστή λειτουργία της βιβλιοθήκης jQuery. Αν και θα έλεγα ότι το Spritely είναι μια πιο περίπλοκη βιβλιοθήκη animation, το FatPixels έχει μια θέση στην αγορά για τους προγραμματιστές Ιστού.

Μπορείτε να δημιουργήσετε εύκολα animated sprites χωρίς να δημιουργήσετε εικόνα .gif. Στην πραγματικότητα, θα είστε σε θέση να εξάγετε όλες τις εικόνες ως .jpg και να δημιουργήσετε μια ουρά των sprites για ένα μακρύ κινούμενο εφέ. Η αρχική σελίδα του FatPixels έχει μια εξαιρετική επίδειξη μαζί με το μπλοκ του κώδικα jQuery που χρησιμοποιήθηκε για την κατασκευή του. Αν ψάχνετε για κάτι ελαφρύ για να ζωντανέψετε τα sprites σας τότε FatPixels είναι ο τρόπος να πάτε.

SmartSprites

Όταν χρησιμοποιείτε τη λέξη "sprite" υπάρχουν μερικές διαφορετικές έννοιες σε αυτό. Οι χαρακτήρες βιντεοπαιχνιδιών ή οι κινούμενοι sprites είναι γενικά μικρότερες εικόνες που αποδίδονται με πολύ λίγα εικονοστοιχεία. Ωστόσο, στο CSS, ο όρος sprite αναφέρεται σε μία εικόνα που λειτουργεί ως φύλλο εικονιδίων για τον ιστότοπό σας.

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

Ευτυχώς, η γεννήτρια CSS SmartSprites είναι μια φανταστική πηγή για αυτήν την κατάσταση. Μπορείτε να δημιουργήσετε γρήγορα ένα τέλειο φύλλο pixel με όλες τις εικόνες σας σε μορφή GIF ή PNG. Επιπλέον μπορείτε να καθορίσετε γρήγορα τι σας φόντο-θέση οι συντεταγμένες x / y πρέπει να είναι για κάθε μεμονωμένο εικονίδιο.

Squidfingers BG Μοτίβα

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

Η συλλογή Squidfingers Patterns είναι ένας τέτοιος πόρος. Προσφέρει πάνω από 150 διαφορετικά στυλ pixel-style που μπορείτε να κατεβάσετε και να χρησιμοποιήσετε στα έργα σας. Τα στυλ είναι πολύ δυναμικά και πολύχρωμα, και για μια τέτοια ποικιλία, είναι μια εξαιρετική πηγή για να κρατάτε πρακτικό. Οι σύνδεσμοι λήψης είναι σε μορφή .zip που τους καθιστά μικρότερους και ευκολότερους στη μεταφορά μεταξύ υπολογιστών.

Ο πόρος των Spriters

Δεν μπορώ να πω αρκετά μεγάλα πράγματα για το The Spriters Resource. Είναι ένας ιστότοπος όπου μπορείτε να αναζητήσετε όλα τα διάφορα συστήματα τυχερών παιχνιδιών για φύλλα sprite. Αυτά μπορεί να περιλαμβάνουν χάρτες, κτίρια, οθόνες μενού, χαρακτήρες sprites, εικονίδια και σχεδόν τίποτα!

Είναι online από το 2001 και ο κατάλογος των βιντεοπαιχνιδιών έχει αυξηθεί σημαντικά. Υπάρχει μια ολόκληρη κοινότητα πίσω από το TSR με γραφίστες που μπορούν να σπρώξουν αυτούς τους διαφορετικούς sprites. Αν ενδιαφέρεστε για οποιαδήποτε μορφή σχεδιασμού βιντεοπαιχνιδιών ή online fansites, θα πρέπει να δείτε αυτό το εκπληκτικό γκαλερί.

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

400 Pixels

Αυτή είναι μια πραγματικά cool εφαρμογή web που δεν παρέχει μια ουσιαστική αξία, αλλά είναι σίγουρα τακτοποιημένο. Τα 400 εικονοστοιχεία σας επιτρέπουν να δημιουργήσετε ένα έγγραφο pixel online και να αποθηκεύσετε την εικόνα στο πλέγμα. Ο ιστότοπος έχει σχεδιαστεί με παρόμοιο τρόπο με την αρχική σελίδα των εκατομμυρίων δολαρίων, ενώ κάθε εικόνα καταλαμβάνει ένα τετράγωνο μπλοκ στη συνολική εικόνα.

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

Σημαντική παραγωγή

Σε παρόμοια φλέβα με τα 400 Pixels μπορείτε να χρησιμοποιήσετε το Major Output ως ένα προσωπικό σε απευθείας σύνδεση στούντιο για εικονοστοιχεία. Είναι ακόμα στα αρχικά στάδια ανάπτυξης, αλλά όλες οι βασικές λειτουργίες χρηστών είναι ήδη διαθέσιμες. Μπορείτε να εγγραφείτε για έναν δωρεάν λογαριασμό και να αρχίσετε να δημιουργείτε τέχνη pixel αμέσως.

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

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

Εκπαιδευτικά σεμινάρια

Τώρα που έχετε τους πόρους, ας ρίξουμε μια ματιά στα μαθήματα που παρέχονται από τα πολυάριθμα εκπαιδευτικά κέντρα και στις χρήσιμες δημοσιεύσεις blog που είναι διάσπαρτες σε όλο το Διαδίκτυο. Έχω βάλει μαζί ένα μικρό σύνολο πολύ βολικό pixel art tutorials για αρχάριους και ενδιάμεσους σχεδιαστές. Πολλά από αυτά τα εργαλεία καθοδήγησης επικεντρώνονται στο Adobe Photoshop, αλλά μπορείτε να ακολουθήσετε μαζί με σχεδόν οποιοδήποτε προηγμένο επεξεργαστή εικόνων.

Το εκπαιδευτικό πρόγραμμα Pixel Sprite από τον Derek yu

Προφανώς υπάρχουν δεκάδες εκατοντάδες tutorials pixel-sprite στο Google, αλλά αυτό το συγκεκριμένο φροντιστήριο στον ιστότοπο του Derek Yu περνάει από πολλά διαφορετικά βήματα στην εκπαίδευση του πώς δημιουργείτε σπρίτσες pixel. Μεγάλο μέρος της διαδικασίας έχει εκσυγχρονιστεί και εξηγηθεί με τρόπο που επιτρέπει στους αρχάριους να μεταπηδούν γρήγορα στη δράση.

Οι λάτρεις των βιντεοπαιχνιδιών θα αγαπήσουν αυτό το σεμινάριο αφού έχετε μια οπτική γοητεία στη δημιουργία αυτών των συγκεκριμένων γραφικών. Μου αρέσει να βρίσκω μια διάταξη ιστοσελίδας με εικονοστοιχείο βίντεο παιχνιδιών pixel γεμάτη σε όλο το σχέδιο. Παρέχει μια μοναδική αίσθηση νοσταλγίας και είναι κάτι που δεν βρίσκετε παντού. Οποιοσδήποτε θέλει να δημιουργήσει τα δικά του sprites pixel για οποιοδήποτε λόγο μπορεί να ξεκινήσει από τη σειρά Derek 10-step tutorial.

Διαμόρφωση του Photoshop για Pixel Art από τον Brandon Treb

Εδώ είναι ένα άλλο τέλειο φροντιστήριο προσανατολισμένο προς τους αρχάριους στον τομέα των εικονοστοιχείων γραφικών. Η δημοσίευση στο blog γράφτηκε από τον Brandon Treb ο οποίος είναι ένας φανταστικός σχεδιαστής και κινητός προγραμματιστής. Μπορείτε να βρείτε όλες τις χρήσιμες πληροφορίες σε αυτόν τον λεπτομερή οδηγό για την τεχνολογία Photoshop που βασίζεται σε pixel.

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

Σχεδίαση χειροποίητων εικονοστοιχείων από τον Russell Tate

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

Υπάρχουν λεπτομερείς εξηγήσεις σχετικά με τη δημιουργία υφής στο γρασίδι και το φλοιό. επίσης σχετικά με τον τρόπο κλωνοποίησης του εικονοστοιχείου που έχετε σχεδιάσει και το μετατρέψει σε σχέδιο εικονιδίου. Όλα καταλήγουν στην πρακτική και την ακρίβεια σε κάθε περιοχή. Αυτοί που είναι πραγματικά παθιασμένοι θα το κολλήσουν και μέσα σε λίγους μήνες θα βρουν μια σταθερή τεχνική για τις ιδέες τους σε μορφή pixel.

Ανάπτυξη χαρτοφυλακίου παιχνιδιών CSS / JS από τον Daniel Sternlicht

Εδώ είναι ένα σεμινάριο από το Smashing Magazine για το πώς να κωδικοποιήσετε ένα χαρτοφυλάκιο τυχερών παιχνιδιών με CSS / JS το οποίο χρησιμοποίησε πολλούς sprites από τη σειρά παιχνιδιών Pokemon. Ο συγγραφέας είναι ο Daniel Sternlicht, ο οποίος επίσης συμβαίνει να τρέχει το προσωπικό του χαρτοφυλάκιο σε αυτή τη διάταξη που βασίζεται σε τυχερά παιχνίδια.

Ο ιστότοπος λειτουργεί ως ένας κόσμος RPG, όπου μπορείτε να ελέγξετε ένα sprite χαρακτήρα με το πληκτρολόγιο. Μπορείτε να εισάγετε διαφορετικά κτίρια τα οποία έπειτα εμφανίζουν πληροφορίες όπως στοιχεία επικοινωνίας και καταχωρήσεις χαρτοφυλακίου.

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

Ισόμετρα Tutorials Pixel από Matriax

Αυτή η μικρή ιστοσελίδα gas13.ru έχει μερικά από τα πιο εκκεντρικά και επαγγελματικά tutorials pixel που έχω δει ποτέ. Στο ισομετρικό εκπαιδευτικό σεμινάριο εισάγετε τη δημιουργία λαμπερών μπλοκ και την υφή του νερού. Επιπλέον, θα βρείτε πόρους για όλα τα άλλα ισομετρικά pixel tuts στην πλαϊνή γραμμή.

Υπάρχουν τόσα πολλά που μπορείτε να μάθετε: μπορείτε να σχεδιάσετε μια βιτρίνα, pixel sprite ή ακόμα και λεπτομερείς υφές για βιντεοπαιχνίδια και ιστορικό ιστοτόπου. Δεν είμαι σίγουρος αν αυτός ο συγγραφέας εξακολουθεί να δημοσιεύει ενεργά περιεχόμενο, αλλά τα υπάρχοντα άρθρα είναι κάτι παραπάνω από αρκετό για τους αρχάριους να μάθουν τα βασικά.

Studio Purloux Pixel Tutorial Από τον Kevin Chaloux

Τώρα που αναφέρω όλα τα καλύτερα μαθήματα εικονοστοιχείων θα έδινα σίγουρα αυτό το δικαίωμα προς την αρχή. Αυτό το πλήρες σεμινάριο σε εικονοστοιχεία είναι ένα εξαιρετικό άρθρο παρακολούθησης για τους αρχάριους. Θα εισαχθεί από την αρχή σε λογισμικό ανοικτού κώδικα όπως το GIMP ή το Paint.NET.

Θα μάθετε πώς μπορείτε να εξαγάγετε τις εικόνες και τις πολλές όψεις του σχεδιασμού των εικονοστοιχείων, όπως η διάσπαση και η κατάργηση των αλλοιώσεων. Υπάρχουν τόσες πολλές διαφορετικές τεχνικές που πρέπει να ακολουθήσετε μαζί. Θα πρέπει να πάρετε μερικές ιδέες σχεδίασης εξετάζοντας ρετρό 8-bit και 16-bit video games.

Ο συγγραφέας Kevin Chaloux πιστώνει το εικονοστοιχείο sprite του Derek Yu (που αναφέρεται παραπάνω) και αναφέρει ότι αυτό ως πηγή έμπνευσης όταν ξεκίνησε για πρώτη φορά.

Δημιουργήστε ένα καλύτερο Favicon από την Kayla Knight

Οι σχεδιαστές ιστοσελίδων συχνά ξεχνούν ότι μια εικόνα favicon (αγαπημένο εικονίδιο) είναι ένα τεράστιο μέρος οποιουδήποτε συστήματος επωνυμίας. Όλες οι πιο δημοφιλείς ιστοσελίδες μπορούν να αναγνωριστούν από το 16 × 16 favicon. Όταν εργάζεστε με έναν τέτοιο περιορισμένο καμβά, αναγκάζεστε να ασχοληθείτε με πυκνά γραφικά και εικονογραφήσεις. Αυτό το φροντιστήριο favicon από την OXP κάνει εξαιρετική δουλειά να συνδυάζει και τις δύο ιδέες.

Από αυτό το tut, μπορείτε να καταλάβετε γιατί η τέχνη των pixel είναι τόσο ευεργετική όταν δημιουργείτε favicons. Υπάρχουν επίσης εργαλεία και στερεές τεχνικές για την εξαγωγή ενός αρχείου .ico. Συμπεριλαμβάνεται επίσης μια μικρή βιτρίνα δημοφιλών favicons από όλο τον Ιστό.

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

Γκαλερί παρουσίασης

Θα ήθελα να κλείσω το άρθρο με μια ωραία γκαλερί σχεδίων με εικονοστοιχεία. Έχω συμπεριλάβει 40 παραδείγματα διαφόρων σχεδίων με πολλά διαφορετικά καλλιτεχνικά οράματα. Η τάση των pixelated έργων τέχνης μόλις αρχίζει να επανεμφανίζεται μέσα σε mainstream ιστοσελίδες. Ελπίζω ότι αυτή η ξεχωριστή βιτρίνα pixel sites μπορεί να προσφέρει μια πηγή έμπνευσης για τους προγραμματιστές ιστού σε όλο τον κόσμο.

Γείωση κεντρικά

PixelJam

Κόκκινο Ροκκ Διαδραστικό Μάρκετινγκ

eBoy Blog

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

8-Bit HTML5 Κύκλος καμβά

Daniel Sternlicht

Στρατός Τρόλλς

BlockHead Pix App

madPXL

supertott 2.0

ClassicGaming

Εργαλεία RPG Toolkit Tutorials

Δημιουργός πόλεων

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Το Sandbox

Κ. Wong

Pixel Freak

Nasc Pixel Art

Paxjah

Τρελός

Τρελά ερωτευμένος-η-ο

LOVEPIXEL

Χένκ Νίμπεργκ

Iriescope

iamnotadoll

SweetPIX

Megapont

Μίνι Μητρόπολη

Χάο Μαν Ρέικ

Studio Pixeltemple

Adept Vormgeving

Μουσείο Pixel

QuickHoney

Polpo.net

spiv.cz

4 Πραγματική ζύμη