Απόσπασμα Photoshop: Η παραγωγή κινητών γραφικών ξεκινά μετά την εκκένωση

01 από 08

Τι είναι τα στοιχεία εξαγωγής

Δημιουργήστε ένα comp στο Photoshop.

Η νέα λειτουργία Εξοικονόμησης Περιουσιακών Στοιχείων του Photoshop CC 2014 τεντώνει έναν μετα-καυστήρα στην άλλως κουραστική ροή εργασίας της δημιουργίας εικόνας για το Responsive Web Design (RWD). Ας ρίξουμε μια ματιά στο πώς η εντολή Extract Assets μπορεί να μειώσει γρήγορα μια σύνταξη ιστοσελίδας σε στοιχεία έτοιμα προς συναρμολόγηση σε μερικά λεπτά.

Ας ξεκινήσουμε με μια προφανή ερώτηση: Τι είναι τα εκχυλίσματα περιουσιακών στοιχείων;

Με απλά λόγια, το Extract Assets είναι μια νέα δυνατότητα στο Photoshop που παρέχει τη δυνατότητα Generator του Photoshop με ένα περιβάλλον εργασίας που βοηθά στην αυτοματοποίηση της δημιουργίας στοιχείων απεικόνισης για τον σχεδιασμό ιστού και οθόνης από τα αρχεία του Photoshop. Η εντολή Extract Assets σάς επιτρέπει να ορίσετε ποιο επίπεδο ή στρώματα θέλετε να δημιουργήσετε τα στοιχεία, το φυσικό τους μέγεθος, τη μορφή αρχείου και την αποθηκευμένη θέση στο δίσκο. Αυτό το χαρακτηριστικό δεν προορίζεται για κείμενο εκτός αν η πρόθεση είναι να μετατρέψουμε το κείμενο σε ένα bitmap, πράγμα που δεν είναι πραγματικά καλή ιδέα.

Ας αρχίσουμε.

02 από 08

Ανοίξτε ένα αρχείο .psd του Photoshop

Ξεκινάμε με ένα comp web site που ετοιμάζεται στο Photoshop.

Το παράδειγμα που χρησιμοποιώ περιέχει ένα έξυπνο αντικείμενο από το Illustrator, κάποιο κείμενο, μια μονάδα ήρωας που περιέχει κείμενο, μια εικόνα και ένα κουμπί και μια σειρά εικόνων σε εξωτερικούς χώρους που ενισχύουν το θέμα του ιστότοπου. Το κλειδί εδώ είναι η οργάνωση των επιπέδων σε ομάδες. Αυτό είναι απαραίτητο επειδή η αποστολή είναι να τραβήξετε όλα αυτά τα στοιχεία από το comp έτσι ώστε να μπορούν να προστεθούν γρήγορα σε διατάξεις web που προσαρμόζονται σε ποικίλες αναλύσεις και μεγέθη οθόνης.

03 του 08

Δύο τρόποι εξαγωγής περιουσιακών στοιχείων

Τα στοιχεία ενεργητικού εξαγωγής μπορούν να βρεθούν στο μενού Αρχείο ή κάνοντας δεξί κλικ σε ένα στρώμα.

Σε αντίθεση με το Generate, το οποίο εξάγει επίσης αντικείμενα με την προσθήκη μιας επέκτασης γραφικών στο όνομα του επιπέδου, το Extract Assets χρησιμοποιεί μια διεπαφή που μπορεί να επιτευχθεί κάνοντας δεξί κλικ σε ένα στρώμα ή επιλέγοντας ένα στρώμα και επιλέγοντας Αρχείο> Απόσπασμα περιουσιακών στοιχείων .

04 του 08

Η διασύνδεση ενεργητικού εξαγωγής

Το παράθυρο διαλόγου "Εξαγωγή στοιχείων ενεργητικού".

Το παράθυρο διαλόγου "Εξαγωγή στοιχείων ενεργητικού" είναι μάλλον διαισθητικό. Εμφανίζεται το επίπεδο ή η επιλογή που θα εξαχθεί. Πάνω από αυτό εμφανίζεται το μέγεθος των αρχείων και κάτω από αυτό είναι ο έλεγχος που σας επιτρέπει να κάνετε μεγέθυνση και σμίκρυνση στο αντικείμενο. Η δεξιά πλευρά του πλαισίου διαλόγου είναι εκεί όπου συμβαίνει η μαγεία. Τα τέσσερα κουμπιά στο πάνω μέρος σας επιτρέπουν να επιλέξετε την ανάλυση / μέγεθος του αντικειμένου. Η επόμενη λωρίδα εμφανίζει το επιλεγμένο επίπεδο και κάνοντας κλικ στο σύμβολο + σας επιτρέπει να εξάγετε το επιλεγμένο στρώμα και σε άλλη μορφή. Ο κάδος απορριμμάτων Ca n αφαιρεί το στρώμα από την ουρά. Στην επόμενη ταινία, μπορείτε να επιλέξετε τον τύπο αρχείου και να ρυθμίσετε το πλάτος και το ύψος της εικόνας εξόδου.

05 του 08

Εξαγωγή μιας εικόνας SVG

Εξαγωγή μιας εικόνας svg.

Το Photoshop δεν χειρίζεται όλες τις εικόνες πολύ καλά και τα προγράμματα περιήγησης και οι συσκευές δεν μπορούν να εμφανίσουν εικόνα του Illustrator. Αυτό έχει ως αποτέλεσμα την άνοδο των SVG αρχείων που χρησιμοποιούνται για το διάνυσμα τέχνης, όπως το λογότυπο Illustrator που εμφανίζεται εδώ. Όντας διανύσματα, το ψήφισμα τους είναι ανεξάρτητο από τη συσκευή, που σημαίνει ότι μπορούν να κλιμακωθούν χωρίς απώλεια λεπτομέρειας ή εικόνας. Για να μετατρέψετε το Smart Object Illustrator σε svg, επιλέξτε το svg από το αναδυόμενο παράθυρο και κάντε κλικ στο Extract .

06 του 08

Η διαδικασία των περιουσιακών στοιχείων εξαγωγής

Οι εικόνες τοποθετούνται σε ένα φάκελο στο ίδιο σημείο με την εικόνα .psd.

Μερικά πράγματα θα συμβούν όταν κάνετε κλικ στο κουμπί Εξαγωγή. Θα ειδοποιηθείτε πρώτα ότι το όνομα του αρχείου ενδέχεται να αλλάξει. Αυτό δεν είναι μεγάλο ζήτημα. Στη συνέχεια, θα σας ειπωθεί ότι δημιουργείται ένας νέος φάκελος για τη διατήρηση του στοιχείου. Μόλις ολοκληρωθεί η διαδικασία, ανοίγει ο φάκελος που βρίσκεται στην ίδια θέση με το αρχικό αρχείο .psd και σας εμφανίζει το νέο στοιχείο.

07 του 08

Το κουμπί "Ρυθμίσεις" είναι ο καλύτερος φίλος σας

Επίλυση της συσκευής.

Κάνοντας κλικ στο κουμπί Ρυθμίσεις ανοίγει ένα παράθυρο διαλόγου Ρυθμίσεις που είναι πολύ χρήσιμο. Οι ρυθμίσεις στα αριστερά είναι οι συντελεστές κλιμάκωσης. Αυτό που κάνουν είναι να δημιουργήσουν τα διάφορα αντίγραφα της εικόνας που ένας προγραμματιστής θα χρησιμοποιήσει στα ερωτήματα των μέσων για να στοχεύσει την ανάλυση οθόνης συγκεκριμένης συσκευής. Για παράδειγμα, η έκδοση 3x θα στοχεύει σε οθόνη iPhone ή iPad, ενώ ένας συντελεστής 1,25 θα αναφέρεται σε μια συσκευή Android. Το κατάληξη προστίθεται στο τέλος του ονόματος αρχείου για να επιτρέψει στον προγραμματιστή σας να αναγνωρίσει εύκολα την εικόνα που θα χρησιμοποιηθεί σε ένα ερώτημα μέσων. Μόλις τελειώσετε, κάντε κλικ στο κουμπί OK και οι επιλογές σας θα ανάψουν στην περιοχή Εξαγωγή περιουσιακών στοιχείων στο παράθυρο διαλόγου. Μπορείτε επίσης να αποκτήσετε πρόσβαση στη ρύθμιση κάνοντας κλικ στο εικονίδιο με το γρανάζι στην περιοχή Εξαγωγή περιουσιακών στοιχείων στη δεξιά πλευρά της διεπαφής

08 από 08

Τελειώνω

Πολλαπλές εικόνες με διαφορετικές μορφές και ψηφίσματα εξάγονται.

Όταν κάνετε κλικ στο κουμπί Εξαγωγή, όλα τα στοιχεία θα δημιουργηθούν και θα προστεθούν στο φάκελο. Σε αυτό το σημείο το μόνο που χρειάζεται να κάνετε είναι να στείλετε στον προγραμματιστή σας ένα αντίγραφο του φακέλου και να προχωρήσετε στο επόμενο έργο σας.