Τα περισσότερα εργαλεία διαβάθμισης σάς δίνουν μόνο μια γραμμή CSS. Αυτό το εργαλείο σχεδιάζει τη διαβάθμιση σε πραγματικό canvas και σας επιτρέπει να κατεβάσετε το τελικό αρχείο PNG στο ακριβές μέγεθος pixel που χρειάζεστε - ταπετσαρία κινητού, φόντο desktop 1920x1080, τετράγωνη ανάρτηση για social media ή προσαρμοσμένες διαστάσεις. Τίποτα δεν ανεβαίνει πουθενά: η εικόνα σχεδιάζεται και αποθηκεύεται εξ ολοκλήρου στη συσκευή σας, οπότε τα χρώματα και τα αρχεία σας παραμένουν ιδιωτικά.
Δωρεάν Γεννήτρια Διαβάθμισης
Λειτουργεί εξ ολοκλήρου στον browser σας - χωρίς μεταφόρτωση, χωρίς εγγραφή.
Τύπος
Μέγεθος εικόνας
px
Σημεία διακοπής χρώματος
Αποθηκεύει ένα πραγματικό PNG σε 1920×1080 px
Τι είναι μια γεννήτρια διαβάθμισης;
Η γεννήτρια διαβάθμισης είναι ένα εργαλείο που αναμειγνύει δύο ή περισσότερα χρώματα σε μια ομαλή διαβάθμιση και την εξάγει ως εικόνα που μπορείτε να κατεβάσετε. Επιλέξτε τα χρώματα και τα σημεία διακοπής, διαλέξτε γραμμική ή ακτινική διαβάθμιση, ορίστε το μέγεθος και αποθηκεύστε ένα PNG για ταπετσαρία, φόντο, banner ή μικρογραφία. Όλα εκτελούνται μέσα στο πρόγραμμα περιήγησής σας.
Πώς λειτουργεί
- 1Επιλέξτε γραμμική ή ακτινική. Η γραμμική αναμειγνύει τα χρώματα κατά μήκος μιας ευθείας γραμμής στη γωνία που ορίζετε· η ακτινική τα διαχέει προς τα έξω από το κέντρο σαν κύκλος.
- 2Ορίστε τα χρώματα και τα σημεία διακοπής. Κάντε κλικ σε ένα δείγμα χρώματος για να το επιλέξετε και σύρετε τον ολισθητή για να μετακινήσετε το σημείο διακοπής. Προσθέστε έως 8 σημεία διακοπής ή αφαιρέστε έως 2, και πατήστε Τυχαία επιλογή για μια γρήγορη ιδέα.
- 3Επιλέξτε το μέγεθος εικόνας. Πατήστε μια προεπιλογή (desktop, κινητό, τετράγωνο, social) ή πληκτρολογήστε προσαρμοσμένο πλάτος και ύψος σε pixel. Η προεπισκόπηση ενημερώνεται ζωντανά.
- 4Κατεβάστε το PNG. Κάντε κλικ στο Λήψη PNG για να αποθηκεύσετε τη διαβάθμιση ως εικόνα σε πλήρη ανάλυση, ή αντιγράψτε τον κώδικα CSS για να επαναχρησιμοποιήσετε την ίδια διαβάθμιση στον κώδικά σας.
Σε ποιους απευθύνεται
- Σχεδιαστές και δημιουργοί περιεχομένου που χρειάζονται ένα καθαρό φόντο διαβάθμισης για μια παρουσίαση, μικρογραφία, banner ή story χωρίς να ανοίξουν το Photoshop.
- Χρήστες κινητού και υπολογιστή που φτιάχνουν μια προσαρμοσμένη ταπετσαρία διαβάθμισης στην ακριβή ανάλυση της οθόνης τους.
- Προγραμματιστές που θέλουν μια ελαφριά εικόνα PNG διαβάθμισης ως placeholder ή εικόνα hero, μαζί με τον αντίστοιχο κώδικα CSS για να την αναπαράγουν στον κώδικα.
- Υπεύθυνοι social media που εξάγουν φόντα διαβάθμισης σύμφωνα με το brand τους, στο σωστό μέγεθος για αναρτήσεις, stories και εξώφυλλα.
Συχνές ερωτήσεις
Είναι δωρεάν αυτή η γεννήτρια διαβάθμισης;
Ναι - 100% δωρεάν, χωρίς εγγραφή, χωρίς υδατογραφήματα και χωρίς όρια. Δημιουργήστε και κατεβάστε όσες εικόνες διαβάθμισης θέλετε.
Ανεβαίνει κάτι σε κάποιον server;
Όχι. Η διαβάθμιση σχεδιάζεται και αποθηκεύεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας με χρήση canvas. Δεν αποστέλλονται πουθενά χρώματα, εικόνες ή δεδομένα χρήσης.
Σε ποια μορφή εικόνας γίνεται η εξαγωγή;
Εξάγεται ένα αρχείο PNG, το οποίο διατηρεί τη διαβάθμιση απολύτως ομαλή και χωρίς απώλειες, χωρίς σφάλματα συμπίεσης. Το αρχείο αποθηκεύεται στο πλήρες μέγεθος pixel που ορίσατε, έτοιμο για χρήση ως ταπετσαρία, φόντο ή αρχείο προς ανέβασμα.
Τι μέγεθος πρέπει να έχει μια ταπετσαρία διαβάθμισης;
Ταιριάξτε το με την οθόνη σας. Συνηθισμένες επιλογές είναι 1920x1080 για τους περισσότερους υπολογιστές, 1080x1920 για κινητό σε κατακόρυφο προσανατολισμό και 1080x1080 για τετράγωνη ανάρτηση social media. Μπορείτε επίσης να εισαγάγετε οποιοδήποτε προσαρμοσμένο πλάτος και ύψος έως 8000 pixel.
Ποια είναι η διαφορά ανάμεσα σε γραμμική και ακτινική διαβάθμιση;
Μια γραμμική διαβάθμιση αναμειγνύει χρώματα κατά μήκος μιας ευθείας γραμμής σε γωνία που επιλέγετε, οπότε το χρώμα αλλάζει κατά μήκος της εικόνας. Μια ακτινική διαβάθμιση ξεκινά από ένα κεντρικό σημείο και διαχέεται προς τα έξω σε σχήμα κύκλου, οπότε το χρώμα αλλάζει από το κέντρο προς τις άκρες.
Μπορώ να πάρω και τον κώδικα CSS μαζί με την εικόνα;
Ναι. Εκτός από το εικόνα PNG προς λήψη, το εργαλείο εμφανίζει τον αντίστοιχο κώδικα CSS background-image. Αντιγράψτε τον για να αναπαράγετε ακριβώς την ίδια διαβάθμιση σε έναν ιστότοπο ή μια εφαρμογή αντί να χρησιμοποιήσετε το αρχείο εικόνας.
Πώς λειτουργούν τα σημεία διακοπής χρώματος;
Κάθε σημείο διακοπής συνδυάζει ένα χρώμα με μια θέση από 0% έως 100% κατά μήκος της διαβάθμισης. Η μετάβαση κυλά ομαλά ανάμεσα σε γειτονικά σημεία διακοπής. Τοποθετώντας δύο σημεία διακοπής στην ίδια θέση δημιουργείται ένα απότομο όριο αντί για ομαλή μετάβαση, κάτι χρήσιμο για ρίγες ή φόντα με μπλοκ χρωμάτων.