Θα ξεκινήσω λέγοντας κάτι που πολλοί μπορεί να γνωρίζουν ... αλλά δεν έχει σημασία: HTML5 + CSS3 + JS ... απλά τέλειο 🙂
Ένας χρήστης μου έγραψε ένα email που μου ρωτούσε για ένα σεμινάριο για να δημιουργήσει επίπεδα εικονίδια, αυτά που είναι επίπεδη και αυτή είναι η νέα μόδα στον Ιστό. Ιδιαίτερα επιθυμητό από Inkscape o σειρήτι ένα κουμπί στυλ συνομιλίας ή κάτι που θα εξυπηρετούσε (ή αναφορά) Snapchat.
Καθώς είμαι φοβερός με το Inkscape και επίσης, δημιουργώ περιεχόμενο από το μηδέν ακόμη και με το Gimp χάλια ... Θυμήθηκα ότι πριν από λίγο είδα μια μικρή εφαρμογή ιστού (ένα index.html με μερικά css και jsπου μας επέτρεψε να δημιουργήσουμε εύκολα και γρήγορα επίπεδα εικονίδια με τον τρέχοντα τρόπο, ξέρετε, Flat σχέδια.
Γεννήτρια επίπεδης εικόνας
Διαθέτει μια σειρά προκαθορισμένων εικονιδίων, για παράδειγμα εικονίδιο φορητού υπολογιστή, φορητές συσκευές (αυτό που δείχνω στο στιγμιότυπο οθόνης), δώρο, ποδήλατο ... uff, είναι αρκετά, πολύ μεγάλη ποικιλία:
Αλλά δεν πρόκειται απλώς να βάλουμε το εικονίδιο και τώρα ... μπορούμε να ορίσουμε το μέγεθος του εικονιδίου ή το μέγεθος της εικόνας ως έχει (εικονίδιο + φόντο) μέσω δύο οριζόντιων γραμμών. Προφανώς βλέπουμε το τετράγωνο μέγεθος σε εικονοστοιχεία… 256… 512… κ.λπ.
Η επόμενη επιλογή μας επιτρέπει να επιλέξουμε το χρώμα του φόντου καθώς και το χρώμα του εικονιδίου. Από προεπιλογή, το εικονίδιο είναι λευκό και το φόντο είναι μπλε, έτσι ώστε να μην συγκρούεται πολύ.
Τέλος, σε αυτήν τη γραμμή στα αριστερά των επιλογών, μας επιτρέπει να καθορίσουμε εάν τα σύνορα του εικονιδίου είναι τετράγωνα ή εάν, από την άλλη πλευρά, θέλουμε το τελικό αποτέλεσμα να είναι κυκλικό.
Σας αφήνω ένα στιγμιότυπο οθόνης αυτών των επιλογών:
Από την άλλη πλευρά, στο πάνω μέρος μας δείχνει τις πληροφορίες του εικονιδίου που δημιουργείται και αλλάζει σε πραγματικό χρόνο. Δηλαδή, αν παίζετε με τα μεγέθη και τα χρώματα, θα δείτε ότι αυτές οι πληροφορίες αλλάζουν πάντα σε πραγματικό χρόνο:
Όπως μπορείτε να δείτε, έχουμε επίσης ένα κουμπί Λήψη εικονιδίου, το οποίο θα μας έδειχνε το εικονίδιο που έχει ήδη δημιουργηθεί σε PNG σε μια άλλη καρτέλα, στην οποία μπορούμε να κάνουμε δεξί κλικ + Αποθήκευση και voila, θα έχουμε το επίπεδο εικονίδιο που δημιουργούμε στον επιθυμητό φάκελο στον υπολογιστή μας.
Λήψη Flat Icon Generator
Αν θέλετε να το δοκιμάσετε μόνοι σας (το οποίο φαντάζομαι, ας είναι χαχα), εδώ είναι ο σύνδεσμος:
Με αυτό ελπίζω να συμμορφωθώ με αυτό που μου ζήτησε ο χρήστης μέσω email, αν και δεν είναι ένα σεμινάριο για τη δημιουργία του κουμπιού με το Gimp ή το Inkscape, λοιπόν, φαντάζομαι ακόμα ότι θα εξυπηρετήσει αυτό που θέλετε. Στην πραγματικότητα, δεν μπορείτε απλώς να δημιουργήσετε το κουμπί για τον σύνδεσμο από κατεβάστε το snapchat, αλλά θα μπορούσε ακόμη και να δημιουργήσει τη συντριπτική πλειονότητα των εικονιδίων ή των κουμπιών για τον ιστότοπό σας ή οτιδήποτε κάνετε 😀
Χαιρετισμούς και ελπίζω ότι το βρήκατε ενδιαφέρον.
Δεν κατάλαβα πώς να το χρησιμοποιήσω 🙁 Μπορείτε να κάνετε μόνο τις επιλογές εικονιδίων που δίνει;
Είναι πολύ καλό, γράφω τον σύνδεσμο.
Συνήθως χρησιμοποιώ την εφαρμογή IcoMoon (https://icomoon.io/app/#/select) που είναι επίσης αρκετά ενδιαφέρον και πολύ πλήρες. αν και δεν ξέρω αν είναι ακριβώς το ίδιο με αυτό στο οποίο αναφέρεται η ανάρτηση.
Χαιρετισμούς.
Μου άρεσε η ιδέα της προσαρμογής εικονιδίων, μου άρεσαν οι σύνδεσμοι (οι δικοί σας και ο χρήστης Percaff_TI99). Θα τα αποθηκεύσω στα αγαπημένα μου 😀
Ενδιαφέρουσες προτάσεις, αν και ήδη προτιμώ να χρησιμοποιώ το Inkscape λόγω του πόσο εύκολο είναι να φτιάχνω επίπεδα εικονίδια (στην πραγματικότητα, είναι πιο πρακτικό από ένα άλλο πρόγραμμα επεξεργασίας φορέα που έχω χρησιμοποιήσει, αν και δεν έχω συνηθίσει ακόμα να κάνω πιο προηγμένα διανυσματικά γραφικά με αυτήν την εφαρμογή).
Πολύ πρακτικό και εύκολο στη χρήση. Θα μπορούσατε επίσης να καλύψετε αυτές τις ανάγκες χρησιμοποιώντας το Font Awesome: http://fortawesome.github.io/Font-Awesome/
Ευχαριστώ που το μοιράστηκες! ότι 🙂
Πηγαίνετε τόσο ενδιαφέρον που σίγουρα θα εξυπηρετήσει πολλά έργα. Αναρωτιόμουν πώς είναι μια εφαρμογή Ιστού, μπορεί να μεταφερθεί για το Firefox OS; Δημιουργία διαδικτυακής εφαρμογής άμεσης συντόμευσης ή παρόμοια με τη χρήση της; Συγγνώμη, δεν ξέρω γιατί ρωτώ.
Τώρα που είμαστε τα Χριστούγεννα, πολλοί γονείς θα δώσουν στα παιδιά τους ένα έξυπνο τηλέφωνο για τους βασιλιάδες. Ποιο είναι ένα από τα πρώτα πράγματα που θα κάνετε με αυτές τις συσκευές; Χωρίς αμφιβολία, ένα από αυτά, αν όχι το πρώτο, θα είναι να κατεβάσετε το snapchat και ένα άλλο από αυτά θα είναι η περιγραφή του whatsapp. Καθώς αυτές είναι δωρεάν εφαρμογές, οι περισσότεροι έφηβοι τις έχουν στα τηλέφωνά τους.
Νομίζω ότι μία από τις αιτίες της επιτυχίας των εφαρμογών του τύπου Snapchat είναι κατά πρώτο λόγο ότι είναι δωρεάν, από την άλλη πλευρά η μόδα έχει δημιουργηθεί για να στέλνει εικόνες σχεδόν όλων όσων γίνονται όλη την ημέρα και τελικά γιατί πρόκειται για μια πολύ εύκολη στη χρήση εφαρμογή
Εξοχος! Αυτός ο ιστότοπος με βοήθησε πολύ στη διαδικασία δημιουργίας του λογότυπου για τον νέο μου ιστότοπο στο snapchat, που συμπίπτει με τον χρήστη που έκανε το ερώτημα. Σας στέλνω μια αγκαλιά από την Παραγουάη, ο ιστότοπος είναι πολύ καλός 😉 Χαιρετισμούς.