Επικεφαλίδα ιστοτόπου στο Photoshop
Σε αυτό το σεμινάριο, θα δημιουργήσουμε μια κεφαλίδα ιστοτόπου στο PhotoshopR που θα ζωντανέψουμε στο FlashR ΚαταλύτηςTM. Η κινούμενη εικόνα ξεκινάει με ένα κενό φόντο και τα στοιχεία σχεδίασης γλιστρούν για να "χτίζουν" την κεφαλίδα μπροστά στα μάτια μας. Το κινούμενο σχέδιο θα προγραμματιστεί για να ξεκινήσει "στο φορτίο" και θα διαρκέσει μόλις μερικά δευτερόλεπτα. Αυτή η κεφαλίδα του ιστότοπου θα είναι για μια φευγαλέα επιχείρηση ευχετήριων καρτών.

Το πρώτο μας βήμα είναι να δημιουργήσουμε την κεφαλίδα στο Photoshop. Θα τοποθετήσουμε κάθε στοιχείο σχεδίασης στο δικό του στρώμα, προετοιμάζοντας την εργασία μαζί τους στο Flash Catalyst. Όπως μπορείτε να δείτε, θα έχουμε 6 στοιχεία σχεδίασης.

1. Ιστορικό
2. Γραμμή κάτω από το πλάτος της κεφαλίδας
3. Όνομα εταιρείας
4. Κάρτα γενεθλίων
5. Κάρτα σημάνσεως κολοκύθας
6. Χριστουγεννιάτικη κάρτα

  1. Ας ξεκινήσουμε ένα νέο έργο στο Photoshop. Ρυθμίστε το πλάτος στα 1000 pixel, Ύψος έως 225 pixels και το φόντο σε διαφανές. Αυτό το μέγεθος θα ταιριάζει όμορφα στην κορυφή της ιστοσελίδας μας.

  2. Το μόνο στοιχείο που θα είναι ορατό στην αρχή της κινούμενης εικόνας είναι το λευκό φόντο. Συμπληρώστε το πρώτο στρώμα της εικόνας με το χρώμα φόντου της επιλογής σας. Στον πίνακα "Επίπεδα", μετονομάστε αυτό το επίπεδο "Ιστορικό".

  3. Για να δημιουργήσω το σκιασμένο άκρο, χρησιμοποίησα το στυλ στρώσης εσωτερικής σκιάς. Κάντε διπλό κλικ στο στρώμα φόντου και επιλέξτε το πλαίσιο δίπλα στην Εσωτερική Σκιά. Ρυθμίστε την απόσταση και το Choke σε 0 και το μέγεθος σε 49.

  4. Στη συνέχεια θα προσθέσουμε το λεπτό περιθώριο γύρω από την εικόνα με το στυλ στιβάδας περιγράμματος. Έχω ρυθμίσει το χρώμα σε ένα καφέ (# 6e674f), το Μέγεθος σε 2 και το Θέση στο εσωτερικό.

    Στη συνέχεια θα προσθέσουμε τις κάρτες. Έχω μειώσει το μέγεθος των ευχετήριων καρτών μου σε 230 x 175 pixels. Αυτό θα τους κρατήσει ανάλογα με το μέγεθος της επικεφαλίδας.

  5. Ας αντιγράψουμε / επικολλήσουμε την κάρτα κολοκύθας στην επικεφαλίδα μας. Ονομάστε το νέο στρώμα "Κολοκύθα". Κάντε κλικ στην επιλογή Επεξεργασία - Ελεύθερο μετασχηματισμό για να περιστρέψετε την κάρτα ελαφρά προς τα δεξιά. Κάντε κλικ στο στρώμα κολοκύθας και εφαρμόστε το στυλ στυλ σκίασης Drop, διατηρώντας τις προεπιλεγμένες ρυθμίσεις.

  6. Επαναλάβετε το τελευταίο βήμα και για τις κάρτες γενεθλίων και Χριστουγέννων.

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

  7. Προσθέστε ένα νέο στρώμα στον πίνακα "Επίπεδα" και ονομάστε το "Γραμμή".

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

  9. Κάντε διπλό κλικ στο στρώμα και προσθέστε το στιλ στρώματος περιγράμματος όπως κάνατε στο στρώμα φόντου.

  10. Κάντε κλικ στο εργαλείο Οριζόντιο τύπος και επιλέξτε μια γραμματοσειρά για το όνομα της επιχείρησής σας. Έχω χρησιμοποιήσει το ίδιο καφέ χρώμα με το χρώμα των συνόρων. Πληκτρολογήστε το όνομα της επιχείρησης στην αριστερή πλευρά της κεφαλίδας.

  11. Αυτό το βήμα είναι προαιρετικό. Θα ραστερίσουμε το κείμενο. Κάντε δεξί κλικ στο στρώμα κειμένου και επιλέξτε Ρυστερίστε το είδος από το μενού.

  12. Αποθηκεύστε το έργο σας σε μορφή Photoshop .psd.


Πνευματικά δικαιώματα 2018 Adobe Systems Incorporated. Ολα τα δικαιώματα διατηρούνται. Οι φωτογραφίες της οθόνης του προϊόντος Adobe ανατυπώνονται με την άδεια της Adobe Systems Incorporated. Adobe Photoshop, Adobe Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, είναι / είναι είτε [ή] καταχωρισμένο εμπορικό σήμα ή εμπορικό σήμα της Adobe Systems Incorporated στις Ηνωμένες Πολιτείες ή / και σε άλλες χώρες.


Οδηγίες Βίντεο: Google Ads Tutorials: Creating responsive display ads (Ενδέχεται 2024).