Έτσι θα δείχνει το εικονίδιο της εφαρμογής μας στο τέλος. Αλλά αρκετά με την κουβέντα. Ας ξεκινήσουμε απευθείας στο Adobe Illustrator ...
Βήμα 1: Δημιουργία βάσης
Στο Illustrator, πηγαίνετε πρώτα στη νέα χώρα εργασίας μέσω της επιλογής Αρχείο>Νέο. Στο παράθυρο που ακολουθεί, επιλέγετε ένα format 70x70mm. Επιβεβαιώστε το παράθυρο με το OK.
Πάρτε το Εργαλείο Ορθογωνίου από την Παλέτα Εργαλείων και κάντε κλικ μία φορά οπουδήποτε στην χώρα εργασίας σας. Ακολούθως εμφανίζεται ένα παράθυρο διαλόγου όπου μπορείτε να εισάγετε το μέγεθος του ορθογωνίου σας. Επιλέξτε ένα μέγεθος 35x35mm και επιβεβαιώστε το σύνολο με το OK. Αυτό είναι τώρα το θεμέλιο μας για το εικονίδιο της εφαρμογής.
Καθώς τα εικονίδια εφαρμογών από την Apple ποτέ δεν είναι γωνιώδη, πρέπει τώρα να διασφαλίσουμε ότι οι γωνίες γίνονται στρογγυλές. Επιλέξτε λοιπόν το ορθογώνιο και πηγαίνετε στην πάνω μπάρα μενού στο Εφέ>Διακοσμητικά φίλτρα>Στρογγυλές Γωνίες ...
Στο παράθυρο που ακολουθεί, εισάγετε έναν ακτίνα γωνίας 7mm. Επιβεβαιώστε το σύνολο με το OK.
Αφού επιβεβαιώσετε αυτό το εφέ, οι γωνίες εμφανίζονται στρογγυλεμένες, αλλά το μονοπάτι παραμένει ακόμα γωνιώδες. Για να το αλλάξετε αυτό, πηγαίνετε στο Αντικείμενο>Μετατροπή εμφάνισης. Έτσι ο εφέ έχει μετατραπεί σε αντικείμενο (το μονοπάτι τώρα ακολουθεί άμεσα τις στρογγυλεμένες γωνίες)
Στο επόμενο βήμα, χρειάζεστε την Παλέτα Κλίσης. Εάν δεν την έχετε ανοίξει ακόμα, την βρίσκετε μέσω της επιλογής Παράθυρο>Κλίση.
Κάντε κλικ τώρα στο πεδίο κλίσης στην Παλέτα Κλίσης, για να γεμίσετε το στρογγυλεμένο ορθογώνιο σας με έναν προεπιλεγμένο ασπρόμαυρο κλίση. (Αν το ορθογώνιο σας έχει ακόμη μια Περίγραφο, τώρα είναι η στιγμή να την καταργήσετε).
Στην ρύθμιση για την γωνία κλίσης δώστε μια τιμή 90°, ώστε να διατηρείται όμορφα από επάνω προς τα κάτω.
Δεδομένου ότι το εικονίδιό μας θα έχει ένα μπλε κλίσμα, (μπορείτε φυσικά να χρησιμοποιήσετε και τα δικά σας χρώματα) σας έχω ήδη ετοιμάσει δύο τιμές RGB χρωμάτων.
• σκούρο μπλε - 28/57/145
• ανοιχτό μπλε - 84/244/255
Για να αντιστοιχίσετε αυτές τις τιμές χρωμάτων στο κλίσμα, απλά κάντε διπλό κλικ στα πεδία χρώματος στην Παλέτα Κλίσης. Έτσι έχετε τη δυνατότητα να εισάγετε τις τιμές RGB.
(Αν έχετε ρυθμισμένη μια διαφορετική λειτουργία χρώματος εκεί, τότε κάντε κλικ στο μικρό βέλος στην επάνω δεξιά γωνία της Παλέτα Κλίσης, για να επιλέξετε τη σωστή λειτουργία χρώματος).
Αφού ολοκληρώσετε το παραπάνω, θα πρέπει να δείχνει κάτι τέτοιο. (Σχήμα 11).
Για να αποτυπώσετε λίγο περισσότερο το κλίση, μπείτε στο Εφέ>Διακοσμητικά φίλτρα>Δέρματα προς τα μέσα ... Στη λειτουργία για τη μέθοδο γεμίσματος επιλέξτε Διάδοση. Για τη Σκίαση επιλέξτε μια τιμή 75% και για το Λείο ορίστε 8,8mm. Δεδομένου ότι θέλουμε να εφαρμόσουμε αυτό το εφέ μόνο στην εξωτερική περιοχή, τοποθετήστε το σημείο επιλογής στη Άκρη. Επιβεβαιώστε το παράθυρο με το OK.
Επόμενη ενέργεια, προσθέστε μια Σκιά στο σύνολο. Αυτό επίσης γίνεται μέσω του Εφέ>Διακοσμητικά φίλτρα>Σκίαση ... Επιλέξτε τις ρυθμίσεις για αυτό το φίλτρο περίπου όπως στην εικόνα 13. Μπορείτε να πειραματιστείτε λίγο εδώ.
Στο επόμενο βήμα, αντιγράφετε το ορθογώνιο με Command+C και το επικολλάτε ξανά στην ίδια θέση με Command+F (Στα Windows το ίδιο γίνεται με Strg+C και Strg+F).
Δεν χρειάζεται πλέον τα εφέ που εφαρμόσατε στο αντίγραφο του ορθογωνίου, γι'αυτό θα πρέπει να τα διαγράψετε. Όπως μπορεί να γνωρίζουν ήδη μερικοί από εσάς, όλα τα εφέ και φίλτρα που εφαρμόζονται στο Illustrator εμφανίζονται στο παράθυρο Εμφάνιση. Εάν αυτό το παράθυρο δεν είναι ορατό για εσάς, μπορείτε να το εμφανίσετε ξανά μέσω της επιλογής Παράθυρο>Εμφάνιση.
Διαγράψτε την σκιά. Αυτό μπορείτε να το κάνετε εύκολα, σύροντας την σκιά στο παράθυρο Εμφάνιση κρατώντας πατημένο το πλήκτρο του ποντικιού και σέρνοντάς το προς το μικρό κάδο ανακύκλωσης στο κάτω δεξιά μέρος του παραθύρου αυτού.
Δεν χρειάζεται να διαγράψετε την αντανάκλαση προς τα μέσα, αλλά μπορείτε να την προσαρμόσετε ελαφρώς. Πριν όμως το κάνετε, αλλάξτε το χρώμα της πλήρωσης του αντίγραφου του ορθογωνίου σε λευκό.
Κάντε κλικ στο Αναζήτηση εμφανίσεων στο παράθυρο Εμφάνιση, ορίστε τη λειτουργία σε Κανονική και επιλέξτε ένα βαθύ μαύρο χρώμα. Ορίστε τη διαφάνεια στο 100% και για το Τέλειωμα μπορείτε να επιλέξετε ένα τιμή 10mm (Σχήμα 17).
Για να συνδυάσετε αυτό το αντίγραφο με το αρχικό από κάτω που έχει το μπλε γραμμικό, απλά μειώστε τη διαφάνεια στο 50% και ορίστε τη λειτουργία γέμισης σε Απαλή Φωτεινότητα. Αυτό το κάνετε μέσω του παραθύρου Διαφάνειας. (Και αυτό το παράθυρο μπορείτε να το εντοπίσετε ξανά μέσω της επιλογής Παράθυρο>Διαφάνεια).
Με αυτόν τον τρόπο αυξάνεται λίγο ο αντίθεση και το εικονίδιο της εφαρμογής μας κερδίζει σε βάθος.
Βήμα 2: Δημιουργία ακτινωτής ακτίνας
Σε αυτό το βήμα θα δούμε πώς μπορείτε να δημιουργήσετε τον ακτινωτό κυκλικό σχηματισμό για το εικονίδιο της εφαρμογής. Γι' αυτό, είναι καλό να αποκρύψετε προσωρινά τα δύο ορθογώνια που δημιουργήθηκαν στο βήμα 1, ώστε να έχετε ξανά χώρο στον χώρο εργασίας σας.
Πάρτε το εργαλείο Γραμμής από τη Γραμμή Εργαλείων και ορίστε το χρώμα περιγράμματος σε μαύρο και το πάχος περιγράμματος σε 0,5pt.
Σύρετε μια γραμμή περίπου από το κέντρο προς τα πάνω κρατώντας πατημένο το ποντίκι. Όταν τραβήξετε τη γραμμή (πιέζοντας συνεχώς το κουμπί του ποντικιού), πατήστε το πλήκτρο Ctrl + το πλήκτρο με τις δύο αυτές αγκίστρους < >.
Κυκλώστε μία φορά κρατώντας το ποντίκι πατημένο. Κάθε φορά με αυτό τον συνδυασμό πλήκτρων, δημιουργούνται διαφορετικός αριθμός γραμμών ανάλογα με την ταχύτητα της κίνησης του δείκτη του ποντικιού.
Όταν ολοκληρώσετε μια περιφέρεια, πρέπει να έχετε κάτι παρόμοιο με την Εικόνα 19. (Δοκιμάστε το ξανά μερικές φορές, αφού ναι, η πράξη κάνει τον μάστορα).
Επιλέξτε όλες τις γραμμές και ομαδοποιήστε τις με το Command+G (στα Windows: Strg+G). Με το Command+C και Command+F (στα Windows: Strg+C και Strg+F) αντιγράφετε τα πάντα και τα επικολλάτε στην ίδια θέση ξανά. Σε αυτό το αντίγραφο, αλλάζετε το χρώμα περιγράμματος σε λευκό και το περιστρέφετε ελαφρά προς τα δεξιά ή αριστερά, ώστε οι μαύρες γραμμές να γίνουν ξανά ορατές μερικώς.
Αυτό θα πρέπει να έχει περίπου αυτή τη μορφή για εσάς. (Εικόνα 20):
Επιλέξτε πάλι όλες τις γραμμές και ομαδοποιήστε τις ξανά μέσω του Command+G (στα Windows: Strg+G).
Τώρα μπορείτε να εμφανίσετε ξανά τα ορθογώνια από το βήμα 1. Βεβαιωθείτε ότι το κέντρο του ακτινωτού κυκλικού σχηματισμού σας βρίσκεται περίπου στο κέντρο του ορθογωνίου σας.
Τώρα αντιγράψτε το γκρι στρογγυλεμένο ορθογώνιο που υπολογίσατε στο Βήμα 1 με τη μπλε κλίση. (Command+C ή στο PC - Strg+C).
Κάντε κλικ τώρα στην ομάδα με τη στέμματη ακτίνα και ελέγξτε τη Διαφάνεια Palette. Εδώ τώρα έχετε τη δυνατότητα (όπως στο Photoshop) να δημιουργήσετε μια μάσκα. Διπλό κλικ στην περιοχή που φαίνεται στην Εικόνα 23. Με αυτό το διπλό κλικ δημιουργείται μια λεγόμενη μάσκα καλύψης.
Μόλις τη δημιουργήσετε, θα παρατηρήσετε ότι η Διαχείριση Επιπέδων έχει αλλάξει, όσο βρίσκεστε μέσα στη μάσκα. Με το Command+F (σε PC: Strg+F) εισάγετε το προηγουμένως αντιγραμμένο ορθογώνιο στη μάσκα. Απλώς μειώστε τη διαφάνεια από 50% σε 10%.
Τώρα πρέπει να βγείτε από τη μάσκα, ώστε να επανέλθετε στην κανονική προβολή. Αυτό το κάνετε κάνοντας κλικ μια φορά στο λευκό πεδίο δίπλα στο σύμβολο μάσκας. (Εικόνα 25).
Βήμα 3: Δημιουργία βάσης για το εικονίδιο
Τώρα πλησιάζουμε στο τέλος του μεγαλύτερου μέρους και είμαστε έτοιμοι να εισάγουμε ένα εικονίδιο ή σύμβολο στο εικονίδιο της εφαρμογής μας. Ωστόσο, πρέπει να δημιουργήσουμε γρήγορα μια βάση ή μια μικρή πλατφόρμα, ώστε να φαίνεται καλύτερο όλο το πράγμα αργότερα.
Χρησιμοποιήστε το Εργαλείο Ελλείψεων και σχεδιάστε περίπου στη μέση μια Ελλείψη. (Βλέπε Εικόνα 26).
Γεμίστε αυτήν την Ελλείψη με ένα σκούρο μπλε. Χρησιμοποιήθηκαν οι παρακάτω τιμές χρώματος. RGB - 0/0/255.
Μειώστε τη διαφάνεια σε περίπου 70% και πηγαίνετε σε Εφέ>Φίλτρο Σμούθινγκ>Γκαουσιανός Εξομαλυντής …
Για το Εξομάλυνση επέλεξα έναν Ακτίνα των 28 pixels. Φυσικά μπορείτε να τροποποιήσετε αυτήν την τιμή ελεύθερα. Επιβεβαιώστε τα πάντα με το ΟΚ.
Βήμα 4: Εισαγωγή Piktogramm
Αφού η βάση είναι τώρα έτοιμη, είναι επιτέλους η στιγμή. Πρέπει πραγματικά απλά να εισάγουμε ένα εικονίδιο στο εικονίδιο της εφαρμογής μας. Ως μια μικρή πρόσθετη προσθήκη, σας έχω περιλάβει μερικά διαφορετικά Piktogramme στα αρχεία εργασίας. Μπορείτε όμως επίσης να χρησιμοποιήσετε δικά σας.
Πηγαίνετε στην επάνω μπάρα μενού σε Αρχείο>Τοποθέτηση και επιλέξτε ένα Piktogramm της επιλογής σας. Στην περίπτωσή μου, είναι ο Υπολογιστής από τα αρχεία εργασίας.
... έτοιμο! ... θα μπορούσε να θεωρηθεί ...
Υπάρχουν όμως ακόμα μερικά μικρά πράγματα να γίνουν. Πρώτον, το Piktogramm πρέπει να λάβει ένα Σκιάσημο. Πηγαίνετε σε Αποτέλεσματα>Φίλτρα Στιλιστίκα>Σκίασημο. Εμπνευστείτε από τις τιμές για αυτό το Σκιάσημο στην Εικόνα 32.
Βήμα 5: Προσθήκη Προσβολής Φωτός
Το τελευταίο βήμα είναι να προσθέσουμε μια προσβολή φωτός για να ολοκληρώσουμε το σύνολο. Χρησιμοποιήστε το Εργαλείο Ελλείψεων και σχεδιάστε μια λευκή Ελλείψη όπως στην Εικόνα 33.
Τέλος, αρκεί να ρυθμίσετε τη μέθοδο γεμίσματος της Ελλείψης σε Απαλή Φωτιά. Το εικονίδιό σας είναι έτοιμο.
Τέλος λέξεις:
Ελπίζω ότι απολαύσατε το εκπαιδευτικό βίντεο και τώρα μπορείτε να δημιουργήσετε μερικά όμορφα εικονίδια εφαρμογών. Στα συνημμένα αρχεία θα βρείτε το αρχείο εργασίας πρωτότυπο, ώστε να μπορείτε να ρίξετε μια ματιά εκεί, αν βρεθείτε σε κάποιο σημείο που δεν μπορείτε να προχωρήσετε.
Αν έχετε ακόμα ερωτήσεις σχετικά με αυτό το θέμα, απλώς γράψτε τες στα σχόλια. Θα προσπαθήσω να τις απαντήσω άμεσα.
Χαιρετισμούς
Ο Julian
