Tutorial: Πώς να σχεδιάσετε ένα Iphone Iphone Chatroom
Σε αυτό το σεμινάριο θα σχεδιάσουμε μια διεπαφή χρήστη για το iPhone για μια εφαρμογή που βασίζεται σε φόρουμ και chat.
Η εφαρμογή περιλαμβάνει μια χούφτα καθημερινά στοιχεία διεπαφής αφής, όπως κουμπιά, πεδία εισαγωγής και χειρονομίες αφής.
Θα καλύψουμε διάφορα εργαλεία του Photoshop, στυλ στρώσεων και φυσικά να αντιμετωπίσουμε τυχόν περιορισμούς στο σχεδιασμό. καθώς και το σχεδιασμό pixel-τέλεια και όμορφη ώστε να αξίζει μια θέση σε μια οθόνη iPhone.
Το σχέδιο τέθηκε μαζί χρησιμοποιώντας το Photoshop CS5.5, ωστόσο όλες οι πρόσφατες εκδόσεις του Photoshop θα δουλέψουν θαυμάσια.
Απαιτήσεις οθόνης εφαρμογής
Θα δημιουργήσουμε μόνο μια οθόνη σε αυτό το σεμινάριο. Η οθόνη θα είναι η κύρια οθόνη συνομιλίας για μια εφαρμογή που βασίζεται σε συνομιλία, σαν μια δημόσια αίθουσα συνομιλίας αλλά στο τηλέφωνό σας. Οι απαιτήσεις αυτής της οθόνης είναι:
- Μια κεφαλίδα - αυτή είναι η αίθουσα συζήτησης που βρίσκεστε.
- Ένα κουμπί πίσω / κλείσιμο / θέματα - για να επιστρέψετε στην προηγούμενη οθόνη.
- Κουμπί ανθρώπων - αυτό δείχνει ποιος είναι στην αίθουσα συζήτησης.
- Μια λίστα μηνυμάτων - μηνυμάτων πρέπει να έχει avatar & timestamp.
- Ένας τρόπος προβολής των προφίλ των χρηστών και των μηνυμάτων αναφοράς.
- Ένα πεδίο κειμένου για να γράψετε τα μηνύματά σας.
- Ένα κουμπί αποστολής για τη δημοσίευση των μηνυμάτων σας.
Σχεδιασμός, σκίτσο και κατασκευή πλαισίων
Όπως συμβαίνει με οποιοδήποτε έργο διεπαφής χρήστη, ο σχεδιασμός, η σκιαγράφηση και η φωτορεαλισμός της διεπαφής σας είναι απαραίτητη. Συχνά αποκλείει τυχόν ανόητες ιδέες (αν και ίσως να μην φαίνεται ανόητο στο μυαλό σας) πριν βάλουμε μαζί τις ψηφιακές ιδέες και τις μακέτες. Αυτό που μπορεί να φανεί σαν μια λαμπρή λύση για την επίλυση ενός προβλήματος στο κεφάλι σας θα μπορούσε τελικά να μην λειτουργήσει καθόλου σε πραγματική πρακτική, γι 'αυτό το wireframing πριν από την έναρξη ενός έργου είναι ένα τόσο σημαντικό βήμα.
Πιάσε ένα στυλό και το αγαπημένο σου μαξιλάρι και αρχίστε να σχεδιάζετε.
Όπως μπορείτε να δείτε από την παραπάνω εικόνα, πέρασα μερικά λεπτά που συνθέτουν τρεις διαφορετικές έννοιες. συνήθως αυτή η διαδικασία διαρκεί μέρες ή μερικές φορές εβδομάδες, αλλά καθώς σχεδιάζουμε μόνο μία οθόνη και ο σκοπός της εφαρμογής είναι απλός, η σκιαγράφηση αυτών δεν πρέπει να διαρκέσει πολύ! Είναι ως επί το πλείστον πολύ παρόμοιες, αλλά ο καθένας έχει τις μοναδικές του διαφορές, τις οποίες θα συνοψίσω παρακάτω.
Σκίτσο Α
Εμπνευσμένο από το πρωτότυπο UI του iPhone για iPhone, αυτό το UI επιτρέπει στους χρήστες να σπρώξουν ένα μήνυμα για να δουν περισσότερες επιλογές, όπως "Προβολή προφίλ" και "Αναφορά χρήστη" - ένας τρόπος διασκέδασης και εξοικονόμησης χώρου για να επιτρέψετε μεγαλύτερο περιεχόμενο σε αυτήν την οθόνη. Έκανα την ιδέα να έχω ένα κουμπί ρυθμίσεων στη γραμμή πλοήγησης σε αυτήν την οθόνη, αλλά αποφάσισα να ακολουθήσω τον κανονικό κανόνα μου "Less Is More" - είναι απίθανο ο χρήστης να έχει πρόσβαση στις ρυθμίσεις κάθε φορά που χρησιμοποιεί την εφαρμογή, έτσι δεν χρειάζεται εδώ.
Σκίτσο Β
Αυτή η ιδέα είναι λίγο πιο συμπαγής, με τα κουμπιά "Προβολή προφίλ" και "Αναφορά χρήστη" ως στατικά εικονίδια στα δεξιά των μηνυμάτων. Παίξα με την ιδέα να μην έχω εδώ ένα κουμπί "Αποστολή" και να χρησιμοποιήσω το κουμπί αποστολής στο πληκτρολόγιο iOS. Αποφάσισα ενάντια σε αυτό, καθώς οι περισσότερες εφαρμογές (συμπεριλαμβανομένων των τυποποιημένων εφαρμογών iOS, όπως μηνύματα) έχουν το κουμπί αποστολής πληκτρολογίου καθώς και το επιπλέον κουμπί αποστολής δίπλα στο πεδίο εισαγωγής κειμένου. Μου αρέσει να διατηρώ τις διεπαφές μου συνεπείς με άλλους στο App Store.
Σκίτσο Γ
Το Sketch C είναι το σκίτσο που αποφάσισα να ακολουθήσω - αντί για ένα κουμπί πίσω έχουμε ένα κουμπί κλεισίματος. Νομίζω ότι αυτό καθιστά πιο προφανές ότι όταν κάνετε κλικ στο κλείσιμο, δεν θα είστε πλέον μέρος αυτής της συζήτησης (σε αντίθεση με τις εφαρμογές ανταλλαγής μηνυμάτων, όπου επιστρέφετε και μπορείτε να επιστρέψετε για να δείτε ακόμα όλα αυτά τα προηγούμενα μηνύματα). Το κουμπί "Άνθρωποι" εμφανίζει μια λίστα χρηστών που βρίσκονται αυτήν τη στιγμή στο chatroom και έχω επαναλάβει την ιδέα να έχουμε τη διαφάνεια για να δείτε περισσότερα στοιχεία (όπως την εφαρμογή Twitter), για να επιτρέψετε στο χρήστη να δει το προφίλ του χρήστη ή να το αναφέρει.
Με αυτό το γέμισμα, ήρθε η ώρα να προχωρήσουμε στη δημιουργία κάτι στο Photoshop!
Βήμα 1: Γραμμή κατάστασης και πλοήγησης
Προτού προχωρήσουμε με αυτό το βήμα, πρέπει να δημιουργήσουμε το έγγραφό μας. Το τυποποιημένο μέγεθος οθόνης iPhone (σε ανάλυση Retina) είναι πλάτος 640px και ύψος 960px με ανάλυση 326ppi. Τείνω να αρχίζω πάντα με ένα λευκό υπόβαθρο στα σχέδιά μου.
Το πρώτο βήμα είναι να βάλετε την προεπιλεγμένη γραμμή κατάστασης iOS. Η γραμμή κατάστασης είναι η μπάρα στην κορυφή του iPhone σας, η οποία σας ενημερώνει για σημαντικές πληροφορίες όπως το σήμα, το φορέα, το χρόνο και τη διάρκεια ζωής της μπαταρίας σας. Υπάρχουν τρεις επιλογές εδώ: μια μαύρη μπάρα, μια μαύρη μπάρα χαμηλής διαφάνειας ή η ασημένια μπάρα.
Αν θέλετε να κάνετε το σχεδιασμό της εφαρμογής σας να μοιάζει με την πραγματική συμφωνία, μπορείτε να πάρετε τη γραμμή κατάστασης από το κιτ PSD της Retina iPhone GUI που βρέθηκαν εδώ . Απλά κατεβάστε και ανοίξτε το PSD και σύρετε τη μπάρα που θέλετε πάνω στο έγγραφο PSD. Τοποθετήστε το στο επάνω μέρος του καμβά σας.
Η γραμμή πλοήγησης είναι η επόμενη στη λίστα των υποχρεώσεών μας. Η τυπική γραμμή πλοήγησης είναι 86px υψηλή και καλύπτει ολόκληρο το πλάτος του iPhone σας (640px). Και πάλι, μπορείτε να μεταφέρετε αυτό το στοιχείο από το προαναφερόμενο κιτ PSD ή μπορείτε να το δημιουργήσετε με το χέρι (προτιμώμενη επιλογή μου, καθώς δεν υπάρχουν προσαρτημένα στυλ). Επιλέξτε το Εργαλείο σχήματος ορθογωνίου και τοποθετήστε ένα ορθογώνιο 640 x 86px στον καμβά σας.
Βήμα 2: Πλήκτρα γραμμής πλοήγησης
Αναφερόμενοι πίσω στα wireframes μας, έχουμε δύο κουμπιά στη γραμμή πλοήγησης. Επιλέξτε το εργαλείο σχήματος στρογγυλεμένου ορθογωνίου (θυμηθείτε να χρησιμοποιείτε πάντα εργαλεία σχήματος για σχήματα στο σχεδιασμό UI, καθιστά πολύ πιο εύκολη την κλιμάκωση του εγγράφου μας για χαμηλότερες αναλύσεις!). Έχω χρησιμοποιήσει διαστάσεις 100 x 50px με ακτίνα γωνίας 6px.
Τοποθετήστε αυτό το σχήμα στην αριστερή και δεξιά πλευρά της γραμμής πλοήγησης και τοποθετήστε τα ωραία.
Βήμα 3: Επιλογή στυλ
Ήρθε η ώρα να αρχίσετε να επιλέγετε το στυλ σχεδιασμού μας. Αυτή η εφαρμογή θα επιτρέψει στους χρήστες να συνομιλούν και να γνωρίσουν νέους ανθρώπους και να επιτρέπουν στους χρήστες να διασκεδάζουν. Για το λόγο αυτό, αισθάνομαι ένα διασκεδαστικό, ιδιόμορφο χρωματικό σχέδιο και τυπογραφία εδώ είναι σημαντικό να βοηθήσουμε να φτάσουμε σε αυτό το σημείο.
Επιλέξτε το εργαλείο τύπων και επιλέξτε ένα τυπογραφικό στοιχείο που ταιριάζει με την εικόνα που έχετε στο κεφάλι σας. Διάλεξα το φυσαλίδες Arial Rounded MT Bold . Πληκτρολογήστε το όνομα του θέματος σας (επέλεξα "Design UI") και ευθυγραμμίστε το κεντρικά στη γραμμή πλοήγησης.
Συνεχίζοντας με το διασκεδαστικό θέμα που έχουμε επιλέξει για την εφαρμογή, ήρθε η ώρα να επιλέξετε μερικά χρώματα. Εγώ προσωπικά χρησιμοποιώ Εραστές χρωμάτων για να βοηθήσει να εμπνεύσει τις επιλογές χρώματος μου όταν σχεδιάζω. Στη συγκεκριμένη περίπτωση έψαξα για "διασκέδαση" και μέσα σε λίγα δευτερόλεπτα μου παρουσιάστηκαν πολλές διαφορετικές επιλογές και εμπνευσμένες παλέτες για να χρησιμοποιηθούν ως βάση για το σχεδιασμό μου.
Καταλήξαμε να μαζέψαμε έναν καλούμενο Playroom . Είναι σημαντικό να σκεφτείτε ποια χρώματα θα χρειαστείτε όταν επιλέγετε μια παλέτα. Βρίσκω να παίρνω κάτι ελαφρύ, κάτι σκοτεινό και κάτι φωτεινό είναι πάντα ένα καλό σημείο εκκίνησης. Είναι σημαντικό να έχετε καλή αντίθεση στο σχεδιασμό σας.
Βήμα 4: Στυλ γραμμών πλοήγησης
Τώρα θα επιστρέψουμε στην μπάρα πλοήγησης και θα της δώσουμε το χρώμα που της αξίζει. Επιλέξτε το στρώμα της γραμμής πλοήγησης (ελπίζω ότι έχετε κρατήσει τα στρώματά σας οργανωμένα!), Κάντε δεξί κλικ και επιλέξτε Blending Options. Αυτή είναι η έδρα των πιο ισχυρών εργαλείων του Photoshop όταν πρόκειται για τη δημιουργία τέλειων σχεδίων διεπαφής pixel. Από εδώ μπορείτε να προσθέσετε σκιές, κλίσεις, μοτίβα και στάμνες, με τη δυνατότητα να αντιγράψετε και να επικολλήσετε αυτά τα στυλ σε άλλα επίπεδα.
Πρώτα απ 'όλα πρόκειται να προσθέσουμε μια κλίση στη γραμμή μας, οπότε κάντε κλικ στην επικάλυψη με κλίση. Έχω επιλέξει το τιρκουάζ χρώμα ως αυτό που θέλω να χρησιμοποιήσω για τη γραμμή πλοήγησης μου. Είναι φωτεινό και γεμάτο με μια ισχυρή γροθιά και θα κάνει το σχέδιό μας εύκολο να θυμηθεί. Εφαρμόστε κλίση γωνίας 90 μοιρών από το φως (πάνω) στο σκοτάδι (κάτω).
Τώρα κάντε κλικ στον πίνακα Stroke. Αλλάξτε το μέγεθος της διαδρομής σας σε 2 αντί για την προεπιλογή 3. Μια συμβουλή είναι πάντα να προσπαθείτε να αποφύγετε τους περιττούς αριθμούς στον σχεδιασμό UI, ειδικά σε κινητές συσκευές. Αυτό θα κάνει μόνο για περισσότερη δουλειά τόσο για τον σχεδιαστή όσο και για τον προγραμματιστή, όταν πρόκειται για την κλιμάκωση της εργασίας (δεν μπορείτε να κάνετε μισό pixel 3 φορές ως μισό pixel!).
Αλλάξτε τον τύπο πλήρωσης της διαδρομής σας σε κλίση και βεβαιωθείτε ότι η διαδρομή θα εμφανιστεί στο εξωτερικό του σχήματος σας. Επιλέξτε ένα σκοτεινό τυρκουάζ χρώμα για το κάτω μέρος της διαδρομής σας και μαύρο για την κορυφή. Επειδή το χτύπημα βρίσκεται στο εξωτερικό της γραμμής πλοήγησης, το μαύρο τμήμα της διαδρομής δεν θα εμφανιστεί πάνω από τη γραμμή κατάστασης και συνεπώς όλος ο χρήστης θα μπορέσει να δει το εγκεφαλικό επεισόδιο στο κάτω μέρος.
Επιλέξτε τον πίνακα Inner Shadow και εφαρμόστε μια λευκή σκιά αδιαφάνειας 15% στη γραμμή σας. Αυτό θα εμφανιστεί στην κορυφή της γραμμής σας και θα σας δώσει μια υπέροχη εικόνα, καθιστώντας την πιο τρισδιάστατη. Έδωσα τη σκιά μου απόσταση 2px και μέγεθος 3px.
Τώρα ήρθε η ώρα να κάνουμε πραγματικά την πορεία μας. Χρησιμοποιώντας μοτίβα, μπορούμε να προσθέσουμε πολύ μεγάλο βάθος στο σχεδιασμό μας. Χρησιμοποιώ ένα μοτίβο λευκού πλέγματος στη γραμμή πλοήγησης. Αν θέλετε να χρησιμοποιήσετε αυτό το μοτίβο, μπορείτε να κάνετε λήψη μιας δωρεάν συλλογής από αυτά Premium pixel .
Βήμα 5: Σκίαση τυπογραφίας
Για να δώσουμε λίγο βάθος στην τυπογραφία, ανοίξτε τον πίνακα επιλογών ανάμειξης και εφαρμόστε μια σκιά σταγόνας. Αλλάξτε τη γωνία σε -90 (βεβαιωθείτε ότι δεν χρησιμοποιείται η επιλογή Global Style), διαφορετικά όλες οι σκιές στο σχεδιασμό σας θα αλλάξουν σε -90) και θα χρησιμοποιήσετε το ίδιο χρώμα που χρησιμοποιήσατε στο κάτω μέρος της διαδρομής των πινάκων πλοήγησης. Δώστε τη σκιά σε απόσταση 2px και αφήστε το μέγεθος σε 0px. Αυτό δίνει μια καθαρή σκιά σταγόνας πάνω από το κείμενο σας, καθιστώντας την πιο ενδιαφέρουσα.
Βήμα 6: Στυλ κουμπιού πλοήγησης
Τώρα θα εφαρμόσουμε μερικά εκπληκτικά στυλ στα κουμπιά μας. Θέλουμε αυτά τα κουμπιά να συνδέονται καλά με τη γραμμή πλοήγησης μας, αλλά ταυτόχρονα πρέπει να ξεχωρίζουν αρκετά καλά ώστε ο χρήστης να αναγνωρίζει αμέσως ότι είναι κουμπιά. Για να γίνει αυτό, πρόκειται να χρησιμοποιήσουμε περισσότερα στυλ επιπέδων για να τους δώσουμε ένα 3D, ματωμένο αποτέλεσμα.
Ανοίξτε τον πίνακα επιλογών ανάμειξης και κάντε κλικ στην επικάλυψη κλίσης. Δώστε στο κουμπί σας φωτισμό (πάνω) στη βαθύτερη (κάτω) κλίση χρησιμοποιώντας χρώματα από τη γραμμή πλοήγησης. Το χρώμα του φωτός επιλέχθηκε από την κορυφή της γραμμής μου και το σκούρο χρώμα επιλέχτηκε από το κάτω πλήκτρο της γραμμής μου.
Επιλέξτε τον πίνακα διαδρομής και αλλάξτε το μέγεθος της διαδρομής σας σε 2px, με εξωτερική θέση. Αλλάξτε τον τύπο πλήρωσης σε κλίση και τη γωνία σε 90 μοίρες. Αλλάξτε τα χρώματα κλίσης από το φως (πάνω) στο σκοτάδι (κάτω), βασίζοντας τα χρώματα στα χρώματα που έχουν ήδη χρησιμοποιηθεί για τη γραμμή πλοήγησης και τα κουμπιά πλοήγησης. Αμέσως μπορείτε να δείτε ότι αυτό το κτύπημα δίνει στο κουμπί σας 3D εμφάνιση, σαν να βγαίνει από την μπάρα πλοήγησης αντί να κάθεται επάνω του.
Για να ξυρίσετε λίγο περισσότερο το κουμπιά και να το κάνετε ακόμη πιο ελκυστικό, θα προσθέσουμε μια εσωτερική λάμψη στο κουμπί. Κάντε κλικ στο εσωτερικό πλαίσιο λάμψης και αλλάξτε τη λειτουργία ανάμειξης στην οθόνη. Αφαιρέστε την αδιαφάνεια έως 20% και βεβαιωθείτε ότι ο θόρυβος είναι ρυθμισμένος στο 0%. Αλλάξτε την προεπιλεγμένη κίτρινη λάμψη σε λευκή και βεβαιωθείτε ότι το μέγεθος εξακολουθεί να είναι ρυθμισμένο σε προεπιλεγμένη τιμή 5px. Αυτό θα πρέπει να δώσει το κουμπί σας μια ωραία εσωτερική λάμψη, κάνοντας το κουμπί να μοιάζει πραγματικά επαφή!
Τώρα θα προσθέσουμε μια εσωτερική σκιά για να κάνουμε το κουμπιά μας πιο ρεαλιστικό. Αλλάξτε την αδιαφάνεια έως 15% και επιλέξτε μαύρο ως χρώμα. Καταργήστε την απόσταση έως 2px και το μέγεθος σε 4px. Τώρα αλλάξτε τη γωνία σε -90 μοίρες (βεβαιωθείτε ότι δεν είναι επιλεγμένη η επιλογή Global Light). Αυτό δίνει στο κάτω μέρος του κουμπιού σας μια ελαφριά σκιά, κρύβοντας μέρος της κάτω εσωτερικής λάμψης που μόλις εφαρμόσαμε. Στην πραγματική ζωή, αυτή η περιοχή θα ήταν σκιασμένη έτσι ήταν σημαντικό να κρυφτεί η εσωτερική λάμψη εδώ.
Για να τελειώσετε το στυλ του κουμπιού μας θα προσθέσουμε μια σκιά σταγόνας. Επιλέξτε το πλαίσιο σκιάς σταγόνας και αλλάξτε το χρώμα σε λευκό με αδιαφάνεια 25%. Αυτή η σκιά θα λειτουργήσει ως επισήμανση κάτω από το εγκεφαλικό επεισόδιο μας, οπότε αλλάξτε την απόσταση σε 4px (2px για να καλύψετε την περιοχή του εγκεφαλικού επεισοδίου και 2px που θα δείτε κάτω από το εγκεφαλικό επεισόδιο).
Βήμα 7: Ετικέτες κουμπιών
Ένα κουμπί χωρίς την ετικέτα του είναι άσκοπο, οπότε τώρα θα περάσουμε λίγο χρόνο για να τελειώσουμε τα κουμπιά μας. Πρώτα απ 'όλα, κάντε δεξί κλικ στο στυλ κουμπιού σας και επιλέξτε την επιλογή Style Layer Style. Τώρα κάντε δεξί κλικ στο κουμπί χωρίς στυλ και επιλέξτε την επιλογή Πάστα Layer Style.
Θα συνεχίσουμε να εργαζόμαστε πρώτα στο δεξί μας κουμπί. Αυτό το κουμπί θα φέρει την ένδειξη "Άνθρωποι" και θέλουμε να χρησιμοποιήσουμε ένα εικονίδιο 2+ ατόμων. Για χάρη αυτού του φροντιστηρίου, πρόκειται να χρησιμοποιώ εικονίδια από το δημιουργικό στούντιο Yummygum. μπορείτε να βρείτε τη συσκευασία που χρησιμοποίησα στο IconSweets.com - Θα χρησιμοποιήσω εικονίδια από αυτό το πακέτο καθ 'όλη τη διάρκεια του σεμιναρίου.
Χρησιμοποιώντας την ίδια γραμματοσειρά που χρησιμοποιήσατε για τον τίτλο της γραμμής πλοήγησης, πληκτρολογήστε τα κουμπιά σας. Αλλάξτε το μέγεθος και τοποθετήστε το στο κουμπί σας και στη συνέχεια τοποθετήστε το εικονίδιο επιλογής (ή κάντε το δικό σας) στο έγγραφό σας. Τοποθετήστε τα δύο αυτά επίπεδα εξίσου πάνω από το κουμπί σας. Έχω αποστασιοποιημένες τις στρώσεις μου έξω έτσι υπάρχουν 15px εκατέρωθεν αυτών και το κουμπί, και 10px μεταξύ του εικονιδίου και του κειμένου. Επικολλήστε το στυλ στρώματος από το κείμενό σας πάνω στο κείμενο του κουμπιού επάνω στο εικονίδιο και στην ετικέτα με το κουμπί Αν χρειάζεται να αλλάξετε το μέγεθος του κουμπιού σας, χρησιμοποιήστε το εργαλείο άμεσης επιλογής για να επιλέξετε τα 4 σημεία αγκύρωσης στα δεξιά και στη συνέχεια σύρετε. Μπορείτε να κρατήσετε το πλήκτρο αλλαγής ταχυτήτων προς τα κάτω για να διατηρήσετε αυτή την τροποποίηση ευθεία.
Επαναλάβετε αυτή τη διαδικασία με το κουμπί στην αριστερή πλευρά της γραμμής πλοήγησης, αυτή τη φορά χρησιμοποιώντας ένα σταυρό εικονίδιο και τη λέξη "Κλείσιμο". Για να προσθέσω λίγο περισσότερο styling στα κουμπιά μου, μείωσα την αδιαφάνεια των δύο μορφών φόντου στο 95%, αυτό επιτρέπει σε λίγο από το μοτίβο πλέγματος κάτω από αυτό να λάμψει.
Βήμα 8: Γραμμή πεδίων κειμένου
Ήρθε η ώρα να δώσουμε κάποια προσοχή στην υπόλοιπη οθόνη μας. Πιάσε το εργαλείο σχήματος ορθογωνίου και χρησιμοποιώντας τις ίδιες διαστάσεις της γραμμής πλοήγησης (640 x 86px) τοποθετήστε ένα σχήμα στον καμβά σας. Τοποθετήστε το στο κάτω μέρος της οθόνης.
Βήμα 9: Το φόντο
Τώρα θα εργαστούμε στο πλαίσιο του σχεδιασμού μας. Ανοίξτε τον πίνακα επιλογών ανάμειξης για το στρώμα φόντου και επιλέξτε ένα μοτίβο για να το γεμίσετε. Χρησιμοποίησα ένα σκοτεινό μοτίβο με κάθετες γραμμές που περνούσαν από αυτό Λεπτές μορφές - μπορείτε να κατεβάσετε το πλήρες μοτίβο που ορίσατε εδώ, το οποίο συστήνω ανεπιφύλακτα.
Εάν θέλετε να προσθέσετε μερικά από τα δικά σας χρώματα στο μοτίβο που έχετε επιλέξει, μπορείτε να το κάνετε χρησιμοποιώντας το στυλ overlay χρώματος. Έκανα ένα καφέ (από την παλέτα χρωμάτων που επέλεξα νωρίτερα) στο 35%. Αυτή η αδιαφάνεια είναι αρκετά χαμηλή ώστε η υφή / το πρότυπό σας να εμφανίζεται ακόμα αρκετά υψηλή ώστε να χρωματίζει το χρώμα ή το φόντο.
Τώρα έχουμε ένα σκούρο φόντο, θα δείτε το σημείο όπου η γραμμή πλοήγησης μας συναντά την εικόνα φόντου μας δεν φαίνεται τόσο καλή. Μπορείτε εύκολα να το διορθώσετε εφαρμόζοντας στυλ σκιάς στη γραμμή πλοήγησης, πράγμα που θα το κάνει να εμφανίζεται σαν να είναι πάνω από το φόντο σας.
Ανοίξτε ξανά τον πίνακα επιλογών ανάμειξης για τη γραμμή πλοήγησης και επιλέξτε το πλαίσιο σκίασης πτώσης. Βεβαιωθείτε ότι έχει επιλεγεί μαύρο χρώμα και ότι αλλάζει η αδιαφάνεια έως το 25%. Αυξήστε τόσο την απόσταση σε 6px όσο και το μέγεθος σε 10px και κάντε κλικ στο κουμπί OK. Μπορεί να χρειαστεί να πειραματιστείτε με αυτές τις επιλογές, καθώς τα αποτελέσματα θα διαφέρουν ανάλογα με το χρώμα και τον τύπο υφής / μοτίβου που έχετε επιλέξει για το φόντο σας.
Βήμα 10: Μηνύματα
Τώρα που ολοκληρώσαμε το φόντο και την κορυφαία γραμμή πλοήγησης, θα επικεντρωθούμε στο να βρούμε το κύριο περιεχόμενο της εφαρμογής. Επιλέξτε το Εργαλείο σχήματος ορθογωνίου και τοποθετήστε ένα ορθογώνιο στον καμβά σας. Το πλάτος που χρησιμοποίησα ήταν 600px, επιτρέποντας να εμφανίζονται 20px σε κάθε πλευρά του σχήματος. Χρησιμοποιούσα μια πολύ ελαφρύτερη εκδοχή του κίτρινου / κρέμα χρώματος από την παλέτα χρωμάτων που πήρα νωρίτερα.
Επιλέξτε το εργαλείο σχήματος στρογγυλεμένου ορθογωνίου και αλλάξτε τις διαστάσεις σε 80 x 80px και η ακτίνα σε 6px. Τοποθετήστε το σχήμα (το οποίο πρόκειται να χρησιμοποιηθεί ως μορφή του avatar μας) στον καμβά σας και τοποθετήστε το σωστά. Για να διατηρήσω τη σχεδίασή μου συνεπή, έχω επιτρέψει 20px να κάθεται μεταξύ των άκρων του σχήματος φόντο του μηνύματός μου και του σχήματος του avatar μου.
Χρησιμοποιώντας το εργαλείο κειμένου, γράψτε το όνομά σας και ένα μήνυμα. Χρησιμοποίησα Arial Rounded MT Bold για το όνομά μου και κανονική Arial για το μήνυμά μου κείμενο-μορφοποιήσει το κείμενό σας έτσι ώστε να ταιριάζει όμορφα στο πλαίσιο φόντο του μηνύματός σας.
Τώρα θα προσθέσουμε κάποιο στυλ στο μήνυμά μας χρησιμοποιώντας μόνο το χρώμα. Αλλάξα το χρώμα του ονόματός μου σε ένα σκοτεινό τιρκουάζ (πολύ κοντά στο μαύρο) και ένα πλυμένο τυρκουάζ εμπνευσμένο από τη γραμμή πλοήγησης μου.
Έπειτα έβαλα μια εικόνα του εαυτού μου πηγαίνοντας στο File> Place. Μόλις τοποθετήσατε, μετέτρεψα την εικόνα και την τοποθέτησα πάνω από το μαύρο κιβώτιο avatar που δημιουργήσαμε νωρίτερα. Για να εξοικονομήσετε την εικόνα και επίσης να σας δώσουμε την επιλογή να μετακινήσετε ή να αλλάξετε το μέγεθος του avatar σας αργότερα, κάντε δεξί κλικ πάνω του και επιλέξτε την επιλογή Create Clipping Mask. Αυτό θα συνδέσει την εικόνα του avatar σας με το μαύρο πλαίσιο του avatar σας και θα δείξει μόνο τι είναι πάνω από το μαύρο κουτί. Θα βρείτε χρησιμοποιώντας το εργαλείο μετακίνησης που μπορείτε να μετακινήσετε και να αλλάξετε το μέγεθος αυτής της εικόνας.
Χρησιμοποιώντας ένα άλλο εικονίδιο του IconSweets, δημιούργησα μια ωραία μικρή χρονική σήμανση. Έπρεπε να μειώσω το μέγεθος του εικονιδίου μου - μπορείτε να το κάνετε κάνοντας κλικ στο Επεξεργασία> Μετασχηματισμός> Ελεύθερο μετασχηματισμό και αλλάζοντας τις διαστάσεις (είτε με εικονοστοιχεία είτε με το ποσοστό). Χρησιμοποίησα το 70% τόσο σε πλάτος όσο και σε ύψος για να διατηρήσω τις αναλογίες. Έχω προσθέσει κάποιο κείμενο, και voila. Βεβαιωθείτε ότι έχετε επιλέξει ένα χρώμα που είναι εύκολο να το διαβάσετε, αλλά δεν φωνάζει για προσοχή.
Βήμα 11: Διπλότυπα μηνύματα
Διπλασιάστε τα κουτιά μηνυμάτων σας το ένα κάτω από το άλλο, αφήνοντας ένα κενό 2px μεταξύ κάθε πλαισίου φόντου. Μπορείτε να το κάνετε κάνοντας κλικ και σύροντας τα στρώματα σας πάνω από το εικονίδιο του νέου επιπέδου ή εναλλακτικά μπορείτε να πατήσετε τα πλήκτρα Cmd + Shift + Down ταυτόχρονα για να αντιγράψετε και να ωθήσετε τα στρώματα προς τα κάτω.
Αλλάξτε όλο το περιεχόμενο στα πλαίσια μηνυμάτων σας, σαν να ήταν μια πραγματική συνομιλία. Αν χρειάζεται να αλλάξετε το μέγεθος των πλαισίων φόντου, χρησιμοποιήστε το εργαλείο άμεσης επιλογής και αλλάξτε το μέγεθος χρησιμοποιώντας τα σημεία αγκύρωσης. Αυτό κρατά όλα τα άκρα ωραία και αιχμηρά.
Βήμα 12: Σύνθεση μηνυμάτων
Με αυτό που κάνουμε, μπορούμε τώρα να επικεντρωθούμε στη ζωή μας. Ανοίξτε τον πίνακα επιλογών ανάμειξης και επιλέξτε τον πίνακα σκίασης πτώσης. Αλλάξτε τη λειτουργία ανάμειξης σε κανονική και επιλέξτε το λευκό ως χρώμα. Αυξήστε την αδιαφάνεια έως 80% αντί για το τυπικό 75% και δώστε τη σκιά σε απόσταση 2px. Αυτό θα αποκρύψει το χάσμα των 2px που αφήσαμε ανάμεσα σε κάθε φόντο του πλαισίου μηνυμάτων.
Αντιγράψτε και επικολλήστε το παραπάνω στυλ στρώματος σε όλα τα επίπεδα φόντου του πλαισίου μηνυμάτων. Θα πρέπει να καταλήξετε με κάτι παραπάνω.
Βήμα 13: Προσθέτοντας στρογγυλεμένες γωνίες
Για να κάνουμε το σχέδιό μας πιο ενδιαφέρον, αλλά και για να προσθέσουμε περισσότερο βάθος, θα προσθέσουμε στρογγυλεμένες γωνίες στο κάτω μέρος των μηνυμάτων μας και θα το φανεί σαν να είναι χαρτί συσσωρευμένο πάνω σε χαρτί.
Επιλέξτε το Εργαλείο στρογγυλεμένου ορθογωνίου και δώστε ακτίνα 10px. Αλλάξτε το πλάτος σε 600px (ή το πλάτος που χρησιμοποιήσατε για τα φόντα του πλαισίου μηνυμάτων) και ένα ύψος που δεν υπερβαίνει το ύψος του φόντου του κάτω κουτιού μηνυμάτων. Χρησιμοποίησα ένα λαμπερό χρώμα εδώ ώστε να είναι εύκολα ορατό.
Χρησιμοποιώντας το εργαλείο άμεσης επιλογής, επιλέξτε τα περιεχόμενα του στρώματος διανυσματικού σχήματος (το στρογγυλεμένο κιβώτιο που μόλις σχεδιάσαμε) και μεταβείτε στην επιλογή Επεξεργασία> Αντιγραφή. Κάντε κλικ στο στρώμα διανυσματικού σχήματος του φόντου του κάτω κουτιού μηνυμάτων και μεταβείτε στην επιλογή Επεξεργασία> Επικόλληση. Αυτό θα επικολλήσει τα περιεχόμενα του στρώματος σχήματος στο άλλο στρώμα σχήματος σας. Τώρα μπορείτε να διαγράψετε το σχήμα που σχεδιάσαμε στο προηγούμενο βήμα. Θα πρέπει να βλέπετε ακόμα το σχήμα ορατό.
Ανοίξτε τις επιλογές ανάμειξης του φόντου του κάτω κουτιού μηνυμάτων και εφαρμόστε μια σκιά σταγόνας. Αλλάξτε το χρώμα σε μαύρο, η αδιαφάνεια έως 25%, η απόσταση έως 1px και το μέγεθος σε 3px. Αυτό θα δημιουργήσει μια ωραία λεπτή σκιά σταγόνας.
Διπλασιάστε αυτό το στρώμα και σπρώξτε το κάτω από 5px. Επανατοποθετήστε το στρώμα έτσι ώστε να κάθεται κάτω από το πρωτότυπο. Θα πρέπει να καταλήξετε με κάτι παρόμοιο με το παρακάτω. Όπως μπορείτε να δείτε, αυτός είναι ένας απλός τρόπος για να δημιουργήσετε μια αλληλεπικαλυπτόμενη εμφάνιση χαρτιού.
Επαναλάβετε ξανά το βήμα, ώστε να έχετε τρία κομμάτια χαρτιού αντί για δύο. Μπορεί να θέλετε να δώσετε στο κατώτατο κομμάτι χαρτί σας μια ελαφρώς πιο αισθητή σκιά σταγόνας.
Βήμα 14: Σκιά ράβδου πλοήγησης
Ίσως να παρατηρήσατε ότι ενώ σχεδιάζουμε τα κιβώτια μηνυμάτων μας, έκρυψα το μεγαλύτερο μέρος της σκιάς σταγόνας που η μπάρα πλοήγησης μας έφερε στο βάθος μας. Για να αντικαταστήσετε αυτό μπορείτε είτε να τοποθετήσετε τα μηνύματά σας κάτω από τη γραμμή πλοήγησης (η εύκολη επιλογή, αλλά μη ρεαλιστικά) ή να ολοκληρώσετε το παρακάτω βήμα.
Επιλέξτε το εργαλείο Rectangular Marquee και σχεδιάστε μια κοκαλιάρικη γραμμή στην κορυφή των μηνυμάτων σας, όπως παραπάνω. Γεμίστε το με μαύρο σε ένα νέο στρώμα.
Μεταβείτε στο στοιχείο Φίλτρο> Διόγκωση> Gaussian Blur και εφαρμόστε τη θαμπάδα. Αυτό θα λειτουργήσει τώρα ως σκιά - απλώς κόψτε οποιαδήποτε κομμάτια της θολούρας που αλληλοκαλύπτουν τις άκρες του φόντου πλαισίου μηνυμάτων σας.
Βήμα 15: Κουμπιά προφίλ και αναφοράς
Αναφερόμενοι πίσω στα wireframes μας, αποφασίσαμε να επιτρέψουμε στους χρήστες να σπρώξουν ένα μήνυμα προς τα αριστερά για να αποκαλύψουν περισσότερα κουμπιά. Στην περίπτωση αυτή, τα κουμπιά αυτά επιτρέπουν στο χρήστη να προβάλει το προφίλ των αφισών μηνυμάτων ή να αναφέρει την αφίσα μηνυμάτων.
Επιλέξτε τα στρώματα που συνθέτουν ένα από τα μηνύματά σας (επιλέγω το μήνυμα του Homer Simpsons) και χρησιμοποιώντας το πλήκτρο shift και τα πλήκτρα βέλους, ωθήστε το μήνυμά σας 10px κάθε φορά προς τα αριστερά. Χρησιμοποιώντας το εργαλείο κειμένου, γράψτε τις ετικέτες σας και, στη συνέχεια, επιλέξτε μερικά εικονίδια που αντιστοιχούν σε αυτές τις ετικέτες. Επιλέξατε ένα άτομο για προφίλ και έναν στόχο για αναφορά (σαν να τα καταγράφετε - σκέφτηκα ότι ήταν πολύ διασκεδαστικό!).
Για να δώσω μεγαλύτερη εμβέλεια σε αυτήν την περιοχή, πρόσθεσα μια σκιά μαύρης πτώσης τόσο στα εικονίδια όσο και στο κείμενο.
Βήμα 16: Γραμμή πεδίων κειμένου
Η γραμμή πεδίων κειμένου είναι ένα από τα πιο σημαντικά στοιχεία αυτής της οθόνης. Οι χρήστες πρέπει να είναι σε θέση να εισάγουν τα μηνύματά τους με ευκολία και χωρίς σύγχυση (γι 'αυτό και αφαιρέσαμε το κρυφό κουμπί αποστολής στις αρχικές σχεδιαζόμενες έννοιες).
Για να ξεκινήσετε, εντοπίστε το στρώμα φόντου και αντιγράψτε τα στυλ επιπέδων. Επικολλήστε αυτά τα στυλ επιπέδων στο στρώμα γραμμής πεδίων κειμένου που δημιουργήσαμε νωρίτερα. Ανοίξτε τις επιλογές ανάμειξης για αυτό το επίπεδο και επιλέξτε τον πίνακα διαδρομής. Εφαρμόστε μια κίνηση 2px στο εξωτερικό του σχήματος σας χρησιμοποιώντας μαύρο χρώμα ως χρώμα. Καθώς το εγκεφαλικό επεισόδιο είναι στο εξωτερικό και το σχήμα αγγίζει τρεις άκρες του καμβά σας, θα εμφανιστεί μόνο η διαδρομή στην κορυφή του σχήματος.
Τώρα επιλέξτε την εσωτερική καρτέλα σκιάς και αλλάξτε τη λειτουργία ανάμειξης σε κανονικό, το χρώμα σε λευκό, την αδιαφάνεια μέχρι 10% και την απόσταση έως 2px. Βεβαιωθείτε ότι η γωνία είναι ρυθμισμένη στην προεπιλεγμένη φωτεινή τιμή (90 μοίρες) και κάντε κλικ στο OK. Αυτό μας δίνει μια ωραία ένδειξη κάτω από το μαύρο εγκεφαλικό επεισόδιο. Με αυτές τις δύο απλές γραμμές 2px που εφαρμόζονται, η γραμμή πεδίων κειμένου ήδη φαίνεται καλά διαχωρισμένη από το υπόλοιπο φόντο, παρόλο που έχει το ίδιο υπόβαθρο!
Επιλέξτε το Εργαλείο στρογγυλεμένου ορθογωνίου. Δώστε στο εργαλείο σας υψηλή ακτίνα, χρησιμοποίησα 50px. αυτό θα δώσει πολύ στρογγυλά (κυκλικά) άκρα. Τοποθετήστε ένα σχήμα στο μπαρ σας, χρησιμοποιώντας ως διαστάσεις μου 460x54px. Βεβαιωθείτε ότι η αριστερή πλευρά του κειμένου του πεδίου κειμένου είναι 20px μακριά από την αριστερή πλευρά του καμβά σας για να διατηρηθεί η απόσταση μεταξύ των σχεδίων.
Συμπληρώστε το σχήμα με σκούρο χρώμα (χρησιμοποίησα ένα καφέ που επιλέξατε από ένα σκοτεινό εικονοστοιχείο στο παρασκήνιο) και, στη συνέχεια, ανοίξτε το πλαίσιο στυλ επιπέδων. Εφαρμόστε μια λευκή σκιά σταγόνων 2px στο πεδίο κειμένου σας με αδιαφάνεια 10%.
Κάντε κλικ στο εσωτερικό πλαίσιο της σκιάς και εφαρμόστε μια εσωτερική σκιά στο σχήμα πεδίου κειμένου. Αυτό θα δώσει πολύ περισσότερο βάθος και θα το κάνει να μοιάζει σαν να κόβεται στο φόντο των ράβδων. Χρησιμοποιήστε το μαύρο με πολλαπλασιαστική λειτουργία συνδυασμού και αδιαφάνεια 25%. Χρησιμοποιώ 5px ως απόσταση μου και 10px ως το μέγεθός μου, αν και μπορεί να θέλετε να πειραματιστείτε εδώ.
Χρησιμοποιώντας το εργαλείο κειμένου και εξοπλισμένο με Arial Rounded MT Bold, πληκτρολογήστε "Γράψτε ένα σχόλιο ..." και τοποθετήστε το στο κουτί πεδίου κειμένου. Ανοίξτε τις επιλογές ανάμειξης για το νέο σας στρώμα κειμένου και εφαρμόστε μια σκιά μαύρης πτώσης με αδιαφάνεια 75%, απόσταση 2px και μέγεθος 3px.
Βήμα 17: Κουμπί πεδίου κειμένου
Επανατοποθετήστε το εργαλείο σχήματος στρογγυλεμένου ορθογωνίου και χρησιμοποιώντας τις ίδιες ρυθμίσεις ακτίνας και το ύψος που χρησιμοποιήσαμε προηγουμένως, τοποθετήστε ένα σχήμα στο φόντο της γραμμής πεδίων κειμένου. Αλλάξτε το μέγεθος του κουμπιού σας έτσι ώστε να κάθεται 10px από το πεδίο κειμένου και 20px από το δεξί άκρο του καμβά.
Κάντε δεξί κλικ στο νέο στυλ σχήματος κουμπιού σας και επιλέξτε τις επιλογές ανάμειξης. Επιλέξτε τον πίνακα επικάλυψης κλίσης και εφαρμόστε μια κλίση από το φως (πάνω) στο σκοτάδι (κάτω). Χρησιμοποίησα το υπέροχο κίτρινο χρώμα που υπήρχε στην παλέτα χρωμάτων που επέλεξα νωρίτερα.
Για να διατηρήσουμε τη σχεδίασή μας συνεπή, πρόκειται να εφαρμόσω ένα πλήκτρο στο κουμπιά μας, που το κάνει να μοιάζει σαν να βγαίνει από το φόντο, όπως ακριβώς κάναμε με τα κουμπιά στη γραμμή πλοήγησης. Αυτή τη φορά χρησιμοποίησα στερεό μαύρο αντί για διαδρομή κλίσης, καθώς το φόντο είναι πολύ πιο σκούρο και δεν γεμίζει με κλίση. Χρησιμοποίησα ένα εγκεφαλικό επεισόδιο 2px στο εσωτερικό του σχήματος μου με 100% αδιαφάνεια.
Επιλέξτε το εργαλείο κειμένου και πληκτρολογήστε "Αποστολή" στο κουμπί σας. Ανοίξτε τις επιλογές ανάμειξης για το νέο σας στρώμα κειμένου και εφαρμόστε μια καφέ σκιά στο κείμενο σας με απόσταση 1px και μέγεθος 3px.
Και με αυτό τελείωσε, είμαστε όλοι τελειωμένοι! Θα θέλαμε να δούμε τα αποτελέσματά σας, επομένως μπορείτε να τα δημοσιεύσετε στην παρακάτω ενότητα σχολίων. Αν θέλετε να δείτε το σχέδιο σε πλήρη ανάλυση, μπορείτε να το δείτε εδώ .