Η απεικόνιση για κινητά δεν είναι πάντα αυτό που φαίνεται
Γίνεται ολοένα και πιο συνηθισμένο για τους επαγγελματίες γραφίστες όχι μόνο να εμφανίζονται το έργο τους σε έντυπη μορφή αλλά και στο διαδίκτυο και σε συσκευές όπως iPhones, iPads, συσκευές Android και tablet Android. Στην επιφάνεια, αυτό θα μπορούσε να θεωρηθεί ως "καλό", καθώς τα μέσα ενημέρωσης που εμφανίζεται το έργο μας επεκτείνεται σε ψηφιακές οθόνες. Το μειονέκτημα είναι ο τεράστιος αριθμός οθονών και ο συγκεχυμένος αριθμός αναλύσεων οθόνης. Δεν είναι ασυνήθιστο να ακούτε έμπειρους επαγγελματίες να αναρωτιούνται τι συνέβη στις ημέρες όταν μια εικόνα TIFF ανάλυση 300 dpi σε μορφή CMYK ήταν ο κανόνας. Ω για τις παλιές καλές μέρες!
Αυτές οι μέρες έχουν τελειώσει. Τώρα πρέπει να αντιμετωπίσουμε το γεγονός ότι μια εικόνα 200 με 200 μπορεί να φαίνεται ωραία σε μία συσκευή και όμως να εμφανίζεται σε μέγεθος τετραγωνικού σε άλλο και σε μέγεθος τριών τετάρτων σε άλλο. Όλα πραγματικά καταλήγουν στο "Resolution Race Arms" που διεξάγεται από τους κατασκευαστές συσκευών καθώς προσπαθούν να μπλοκάρουν περισσότερα pixels σε μια οθόνη από τους ανταγωνιστές τους.
Αυτό μας φέρνει σε αυτό που θα ονομάσουμε "Η Άνοδος των Suffixes". Τα επιθήματα είναι εκείνα τα πράγματα - @ 2x, @ 3x - κολλημένα στο όνομα μιας εικόνας. Βασικά, για παράδειγμα, βάζουν τη σωστή εικόνα στη σωστή θέση στη σωστή συσκευή. Τότε γίνεται ακόμη καλύτερο.
Πολλή δουλειά μας συνεπάγεται την εργασία με εικόνες και, με την άνοδο του κινήματος επίπεδου σχεδιασμού, αυτά τα πράγματα δημιουργούνται σε εφαρμογές σχεδίασης διανυσμάτων όπως το Illustrator και το Sketch. Το πρόβλημα είναι ότι οι συσκευές απλά δεν μπορούν να αποδώσουν αρχεία .ai ή .eps. Πρέπει να μετατραπούν σε Scalable Vector Graphics και, ανάλογα με την εφαρμογή που χρησιμοποιείται για τη δημιουργία των εικονιδίων, μπορεί να μην υπάρχει καν επιλογή SVG.
Τότε γίνεται ακόμη καλύτερο.
Υπάρχει μια νέα κατηγορία λογισμικού - Εφαρμογές Πρωτότυπων - που γίνονται το σημείο συναρμολόγησης πριν οι εικόνες και τα εικονίδια σας βυθιστούν στις συσκευές και έχουν και τις ιδιαιτερότητές τους.
Αυτό το σεμινάριο κινείται μεταξύ του Photoshop και του Sketch για τα γραφικά και χρησιμοποιώντας το Adobe Experience Design για να αποδείξει μερικά από τα σημεία πόνου μεταξύ της ιδέας σας και της ενδεχόμενης ανάπτυξης. Ας αρχίσουμε.
01 από 05
Πώς να προετοιμάσετε εικόνες για κινητές συσκευές στο Adobe Photoshop
Το πρώτο βήμα σε αυτή τη διαδικασία είναι η γνώση της συσκευής ή των συσκευών προορισμού. Σε αυτήν την περίπτωση, θα στοχεύσετε το iPhone 6 το οποίο έχει μια περιοχή οθόνης 375 pixel και πλάτος 667 pixel. Ο σχεδιασμός απαιτεί να είναι η εικόνα το πλάτος της οθόνης.
Η εικόνα που χρησιμοποιήθηκε γυρίστηκε μέσα στον καθεδρικό ναό του Bern Minster στη Βέρνη της Ελβετίας. Μόλις ανοίξει η εικόνα στο Photoshop, επιλέξτε Εικόνα> Μέγεθος εικόνας για να ελέγξετε τις διαστάσεις της εικόνας και την ανάλυση της. Προφανώς, μια εικόνα που είναι 3156 x 2592 με ψήφισμα 300 ppi και μέγεθος αρχείου 23,4 Mb απλά δεν θα λειτουργήσει.
Μέσα στο παράθυρο διαλόγου Μέγεθος εικόνας, μειώστε την ανάλυση σε 100 ppi . Κάνετε αυτό πρώτα επειδή οι διαστάσεις της εικόνας θα αλλάξουν επίσης. Με τη ρύθμιση Ανάλυση, αλλάξτε το πλάτος σε 375 Pixels. Αν ελέγξετε τα δεδομένα μεγέθους εικόνας θα παρατηρήσετε ότι η εικόνα έχει συρρικνωθεί από 23,4 Mb σε φιλικό προς το κινητό τηλέφωνο 338k. Κάντε κλικ στο κουμπί OK για να αποδεχθείτε την αλλαγή και να κλείσετε το παράθυρο διαλόγου Μέγεθος εικόνας.
02 του 05
Πώς να χρησιμοποιήσετε το πλαίσιο διαλόγου "Εξαγωγή ως ..." στο Adobe Photoshop
Μόλις η εικόνα είναι έτοιμη για εξαγωγή, επιλέξτε "Εξαγωγή> Εξαγωγή ως ..." για να ανοίξετε το παράθυρο διαλόγου Εξαγωγή ως.
Αυτό το πλαίσιο διαλόγου είναι μια πρόσφατη προσθήκη στο Photoshop και αντικαθιστά το παράθυρο διαλόγου "Αποθήκευση για Web" που χρησιμοποιούν για χρόνια. Εάν το χρειάζεστε ακόμα, μπορείτε να το βρείτε στο Export pop down. Είναι, για προφανείς λόγους, τώρα γνωστό ως "Εξαγωγή για Web (Legacy)". Αν αυτή είναι η πρώτη σας επίσκεψη σε αυτό το παράθυρο διαλόγου, εδώ είναι μια σύντομη περιήγηση:
- Μέγεθος: Αυτή η στήλη ορίζει το μέγεθος εξόδου της εικόνας. Η ενδιαφέρουσα πτυχή αυτής της περιοχής είναι ότι θα μεγεθύνει την εικόνα, αλλά η εικόνα δεν θα εμφανιστεί ως "ασαφής" στη συσκευή λόγω του τεράστιου αριθμού εικονοστοιχείων στην οθόνη της συσκευής.
- 1Χ: Κρατήστε πατημένο αυτό και θα παρουσιαστεί ένας αριθμός μεγεθών. Οι κατηγορίες 1x, 2x και 3x συνδέονται παραδοσιακά με συσκευές HiPi από την Apple και μαζί με μερικές άλλες θα προετοιμάσουν εικόνες για συσκευές Android.
- Suffix: Αυτή η επιλογή θα δείξει το μέγεθός σας αλλά θα εμφανιστεί ως @ 2x ή το μέγεθος που επιλέξατε. Αυτή η κατάληξη θα προστεθεί στο όνομα της εικόνας.
- Το σύμβολο +: Κάντε κλικ σε αυτό για να προσθέσετε διάφορα μεγέθη για την έξοδο. Σε αυτήν την περίπτωση, κάντε διπλό κλικ και επιλέξτε 2 φορές και 3 φορές από το αναδυόμενο παράθυρο. Αυτό θα καλύψει σχεδόν οποιαδήποτε συσκευή iOS.
- Ο κάδος απορριμμάτων: Κάντε κλικ σε αυτό και η επιλογή αφαιρείται από τη σύνθεση.
- Ρυθμίσεις αρχείου: Επιλέξτε τη μορφή - jpg, png, gif ή svg - κατάλληλη για την εικόνα. Αν το μέγεθος του αρχείου είναι ανησυχητικό, μπορείτε επίσης να μειώσετε τις ρυθμίσεις ποιότητας.
- Μέγεθος εικόνας: Μπορείτε να αλλάξετε τις φυσικές διαστάσεις της εικόνας.
- Μέγεθος καμβά: Μπορείτε να αλλάξετε τις φυσικές διαστάσεις του καμβά εικόνας.
- Μεταδεδομένα: Μπορείτε να προσθέσετε τα πνευματικά δικαιώματα και τα στοιχεία επικοινωνίας σας στα μεταδεδομένα της εικόνας.
Όταν τελειώσετε, κάντε κλικ στο κουμπί Εξαγωγή όλων. Θα ερωτηθείτε πού θέλετε να τοποθετήσετε τις εικόνες. Μια καλή συνήθεια για την ανάπτυξη είναι να κάνετε κλικ στο κουμπί Νέο φάκελο και να δημιουργήσετε ένα φάκελο για να κρατήσετε τις εξαγόμενες εικόνες. Όταν κάνετε κλικ στην επιλογή Εξαγωγή, θα εμφανιστούν οι εικόνες στο φάκελο.
03 του 05
Πώς να ετοιμάσετε εικόνες για κινητές συσκευές στο σκίτσο 3 από την κωδικοποίηση της Βοημίας
Το Sketch 3, μια εφαρμογή μόνο για Macintosh από την Bohemian Coding, αποκτά μεγάλη σημασία μεταξύ των σχεδιαστών UX και UI λόγω της έντονης εστίασής του στον σχεδιασμό ιστού και εφαρμογών. Στην πραγματικότητα, το Photoshop, με πολλούς τρόπους, είναι σε περίεργη θέση να έχει να παίξει "catch up" με Sketch.
Για να προετοιμάσετε μια εικόνα για κινητά στο Sketch, επιλέξτε την εικόνα στον πίνακα γραφικών και κάντε κλικ στο κουμπί Εκτέλεση του εξαγωγέα στο κάτω μέρος του πίνακα Ιδιότητες . Αυτό θα ανοίξει το πλαίσιο διαλόγου "Εξαγωγή". Κάντε κλικ στο σύμβολο + για να προσθέσετε τις εκδόσεις 2x και 3x και επίσης να προσθέσετε τα επιθήματα. Οι διαθέσιμες μορφές είναι PNG, JPG, TIF, PDF, EPS και SVG. Σε αυτή την περίπτωση, επιλέξτε JPG. Κάντε κλικ στο κουμπί Εξαγωγή και στοχεύστε ή δημιουργήστε ένα φάκελο για να κρατήσετε τις διάφορες εικόνες που εξάγονται.
04 του 05
Γιατί πρέπει να δημιουργήσετε τρεις (ή περισσότερες) εκδόσεις της εικόνας
Από πολλές απόψεις, η κινητή αγορά είναι η "Άγρια Δύση" ψηφισμάτων και ένα μέγεθος σίγουρα δεν ταιριάζει σε όλα. Στο παραπάνω παράδειγμα από την Adobe Experience Design, η εικόνα τοποθετείται σε 2 πίνακες τέχνης iPhone 6 και σε πίνακα εργαλείων Android. Παρατηρήστε πως η εκδοχή 1x στην αριστερή πλευρά φαίνεται να είναι μισό μέγεθος. Αυτός ακριβώς είναι ο τρόπος με τον οποίο θα εμφανίζεται η εικόνα σε ένα iPhone 6 με οθόνη αμφιβληστροειδούς. Η έκδοση 2x ταιριάζει απόλυτα και η έκδοση Android ξεκινάει από την οθόνη. Η επιλογή σας είναι είτε να κλιμακώσετε την εικόνα είτε να εξαγάγετε την εικόνα εκτός του Photoshop σε διαφορετικό μέγεθος.
05 του 05
Δοκιμάστε νωρίς, Δοκιμάστε συχνά, Μην εμπιστευτείτε τίποτα, Μην εμπιστευτείτε κανέναν και ειδικά εσείς
Αυτό που πρέπει να καταλάβετε είναι ότι είναι μόνο η αρχή της διαδικασίας. Η προβολή των εργασιών σας σε όσες συσκευές μπορείτε , πρέπει να θεωρηθεί ως ένα σημαντικό κομμάτι της ροής εργασίας. Πρέπει επίσης να γνωρίζετε ότι αυτό είναι μόνο το πρώτο βήμα στη διαδικασία δημιουργίας περιουσιακών στοιχείων γραφικών για έργα εφαρμογών ή κινητών web.
Η χρήση πρωτοτύπων εφαρμογών είναι ένας πολύ καλός τρόπος για την αποκάλυψη των σημείων πόνου, αλλά τα ίδια αυτά περιουσιακά στοιχεία θα πρέπει να εξάγονται για χρήση από τον προγραμματιστή. Σε πολλές περιπτώσεις, οι φυσικές διαστάσεις των περιουσιακών στοιχείων, συμπεριλαμβανομένων των εικονιδίων, θα είναι τεράστιες και όχι στην μορφή svg αλλά png. Με την πρώτη ματιά, αυτό μπορεί να φαίνεται λίγο πάνω από την κορυφή, αλλά να θυμάστε τον χρυσό κανόνα της κλιμάκωσης των εικόνων: είναι καλύτερα να μειώσετε την κλίμακα από την κλίμακα.
Η κατώτατη γραμμή είναι να συνεργαστείτε στενά με τον προγραμματιστή σας και να χρησιμοποιήσετε το πρωτότυπο λογισμικό ως έναν τρόπο να δείξετε την πρόθεση του σχεδιασμού σας. Τελικά, όμως, αυτά τα ίδια περιουσιακά στοιχεία θα πρέπει να είναι έτοιμα για το τελικό προϊόν και ο κύριος του έργου σας έχει καλύτερη χειρισμό για ό, τι χρειάζεται από εσάς.