Ποιο μέγεθος banner χρειάζεσαι;
Δεν υπάρχει ένα μέγεθος που να χρησιμοποιούν όλες οι λίστες server. Κάθε λίστα έχει δικούς της κανόνες για πλάτος, ύψος, τύπο και μέγεθος αρχείου, οπότε έλεγξέ τους πριν ανεβάσεις κάτι. Αυτά είναι τα μεγέθη που εξάγει το Banner Studio και για τι είναι καλά:
| Μέγεθος | Pixels | Καλό για |
|---|---|---|
| Κλασικό web banner | 468×60 | Το παλιό format «full banner» του IAB. Πολλά sites και λίστες το χρησιμοποιούν ακόμα, παρόλο που το IAB το αφαίρεσε από τη λίστα των standard μεγεθών το 2011. |
| Κάρτα σε λίστα server | 740×200 | Το banner στην κάρτα και στη σελίδα του server σου στο BestMCServerList, πιο φαρδύ και πιο ψηλό από ένα κλασικό banner. |
| Φαρδύ header | 960×200 | Headers σε sites, posts σε forums και ανακοινώσεις στο Discord. |
Φτιάξε ένα banner για κάθε μέγεθος αντί να τεντώνεις ένα αρχείο. Ένα design 740×200 που στριμώχνεται σε 468×60 χάνει το μεγαλύτερο μέρος του κειμένου, και όταν μεγαλώνεις pixel art σε περίεργα μεγέθη θολώνει.
Το BestMCServerList δέχεται banners σε GIF, PNG, WebP ή JPEG, έως 2 MB.
Βήμα 1: Αποφάσισε τι πρέπει να λέει το banner
Ένα banner διαβάζεται περίπου στον χρόνο που χρειάζεται για να το προσπεράσεις με scroll. Διάλεξε τρία πράγματα και άφησε τα υπόλοιπα:
- Το όνομα του server, όσο μεγάλο επιτρέπει ο χώρος.
- Ένα hook: το game mode ή το ένα πράγμα που σε κάνει διαφορετικό, για παράδειγμα «Survival με πόλεις» ή «Skyblock 1.21».
- Τη διεύθυνση, ώστε οι παίκτες να την αντιγράφουν χωρίς να ανοίξουν τη σελίδα σου.
Λίστες με features, links του Discord και μεγάλα slogans δεν χωράνε σε 60 pixels ύψος. Βάλ’ τα καλύτερα στην περιγραφή του server σου.
Βήμα 2: Σχεδίασε για να διαβάζεται
- Μεγάλο pixel κείμενο. Σε ένα banner 468×60 το όνομα πρέπει να γεμίζει το μεγαλύτερο μέρος του ύψους. Λεπτές γραμματοσειρές και μικρά taglines γίνονται θόρυβος.
- Αντίθεση. Ανοιχτόχρωμο κείμενο με σκούρο περίγραμμα δουλεύει σε κάθε φόντο, ακόμα και σε γεμάτα τοπία και particles.
- Ήρεμο φόντο. Σύννεφα, αστέρια ή νερό που κινούνται είναι εντάξει. Ένα φόντο που κινείται όσο και το κείμενο τραβάει το μάτι μακριά από το όνομα.
- Ένα πρώτο frame που στέκεται μόνο του. Φρόντισε το όνομα και η διεύθυνση να φαίνονται ήδη στο πρώτο frame. Κάποια μέρη δείχνουν στατική εικόνα, και αυτή είναι συνήθως το πρώτο frame.
- Ταιριαστά χρώματα. Χρησιμοποίησε τα ίδια χρώματα και το ίδιο σύμβολο με το server icon και το MOTD σου, ώστε οι παίκτες να σε αναγνωρίζουν στη λίστα, στο παιχνίδι και στο Discord.
Βήμα 3: Animation χωρίς αναβοσβήματα
Το animation πρέπει να στηρίζει το banner, όχι να φωνάζει. Αργά particles, μια απαλή λάμψη που περνάει πάνω από το logo ή σύννεφα που κινούνται τραβάνε την προσοχή χωρίς να δυσκολεύουν την ανάγνωση του κειμένου.
Απόφυγε έντονα φλας και γρήγορο αναβόσβημα. Οι οδηγίες προσβασιμότητας για το web (WCAG 2.1, κριτήριο επιτυχίας 2.3.1) λένε ότι το περιεχόμενο δεν πρέπει να αναβοσβήνει πάνω από τρεις φορές το δευτερόλεπτο, γιατί το αναβόσβημα μπορεί να προκαλέσει κρίσεις επιληψίας. Ένα ομαλό loop είναι επίσης απλά πιο ευχάριστο σε μια σελίδα με πολλά banners.
Κάνε το loop να μη φαίνεται πού ξαναρχίζει: το τελευταίο frame πρέπει να οδηγεί πίσω στο πρώτο. Ένα animated GIF μπορεί να επαναλαμβάνεται για πάντα· μέσα στο αρχείο αυτό είναι loop count 0 στο extension NETSCAPE2.0. Το Banner Studio εξάγει GIFs που κάνουν loop.
Βήμα 4: Κράτα το αρχείο GIF μικρό
Ένα GIF αποθηκεύει κάθε frame, και κάθε frame μπορεί να έχει τη δική του παλέτα με έως 256 χρώματα. Το αρχείο μεγαλώνει με το μέγεθος του καμβά, τον αριθμό των frames και τις λεπτομέρειες που αλλάζουν από frame σε frame. Αυτά τα βήματα το μικραίνουν, περίπου από το μεγαλύτερο αποτέλεσμα προς το μικρότερο:
- Χαμήλωσε το frame rate. 10 με 12 frames το δευτερόλεπτο αρκούν για τα περισσότερα pixel animations.
- Κόντυνε το loop. Δύο με τέσσερα δευτερόλεπτα είναι υπεραρκετά για particles ή μια απαλή λάμψη.
- Χρησιμοποίησε πιο χοντρά pixels. Μεγαλύτερα art pixels συμπιέζονται πολύ καλύτερα από τις λεπτές λεπτομέρειες.
- Κόψε τον λεπτό θόρυβο και τα particles. Τα μικρά πράγματα που αλλάζουν σε κάθε frame κοστίζουν τα περισσότερα.
- Χρησιμοποίησε λιγότερα χρώματα. 64 χρώματα αντί για 128 ή 256 συχνά δείχνουν ίδια στο pixel art.
Στο Banner Studio ο μετρητής μεγέθους υπολογίζει το αρχείο όσο το επεξεργάζεσαι. Αν το banner ξεπερνά το όριο, το «Make it fit 2 MB» δοκιμάζει αυτά τα βήματα το ένα μετά το άλλο και σταματά μόλις το αρχείο χωρέσει.
Βήμα 5: Ανέβασέ το και χρησιμοποίησέ το και αλλού
Εξάγαγε ένα GIF για το animation, ή ένα PNG αν ένα site δέχεται μόνο στατικές εικόνες. Στο BestMCServerList μπορείς να στείλεις το έτοιμο banner κατευθείαν σε μία από τις καταχωρίσεις σου με το «Use this banner», ή να ανεβάσεις το αρχείο στο πεδίο banner της φόρμας του server σου.
Στο δικό σου site, δώσε στην εικόνα σταθερό πλάτος και ύψος, για να μην πηδάει η σελίδα όσο φορτώνει το GIF, και ένα alt κείμενο με νόημα:
<a href="https://example.com/">
<img src="/img/banner-468x60.gif" width="468" height="60"
alt="MyServer – Survival with towns – play.example.com">
</a>Για ανακοινώσεις στο Discord και posts σε forums, το φαρδύ header 960×200 έχει χώρο για το όνομα, ένα hook και τη διεύθυνση με μεγάλα γράμματα.
Συχνά λάθη
| Πρόβλημα | Λύση |
|---|---|
| Το upload απορρίπτεται ως πολύ μεγάλο | Χαμήλωσε το frame rate, κόντυνε το loop ή χρησιμοποίησε λιγότερα χρώματα. Έλεγξε το όριο κάθε λίστας. |
| Το κείμενο δεν διαβάζεται στην έκδοση 468×60 | Φτιάξε ξεχωριστό design για αυτό το μέγεθος, μόνο με το όνομα και τη διεύθυνση. |
| Το banner φαίνεται θολό | Μεγεθύνθηκε σε μέγεθος για το οποίο δεν φτιάχτηκε. Εξάγαγέ το ακριβώς στο μέγεθος που θέλει η λίστα. |
| Τα χρώματα έχουν λωρίδες ή κουκκίδες | Ένα gradient μειώθηκε σε πολύ λίγα χρώματα. Χρησιμοποίησε επίπεδες χρωματικές επιφάνειες ή επίτρεψε περισσότερα χρώματα. |
| Το loop πηδάει | Το τελευταίο frame δεν οδηγεί πίσω στο πρώτο. Κάνε τα στοιχεία που κινούνται να βγαίνουν και να μπαίνουν στο κάδρο με την ίδια ταχύτητα. |
| Όλα αναβοσβήνουν | Κάνε το animation πιο αργό και απόφυγε τα φλας, ειδικά πάνω από τρία το δευτερόλεπτο. |
Μόλις τελειώσει το banner, βοηθάει στη μεγαλύτερη δουλειά: να φέρεις τους πρώτους παίκτες στον server σου.
