Περιεχόμενο
- 01. Ρυθμίστε το έγγραφό σας
- 02. Προσθήκη γραφικών στοιχείων
- 03. Δημιουργία δευτερευόντων διαφανειών
- 04. Δημιουργήστε το animation καρέ
- 05. Κάντε το βέλος να αναβοσβήνει και προσαρμόστε τους χρονισμούς
- 06. Αποθήκευση για web και συσκευές
Η δημιουργία πανό για το Διαδίκτυο δεν είναι η πιο λαμπερή δουλειά στον κόσμο, αλλά είναι κάτι που κάθε σχεδιαστής θα πρέπει να κάνει κάποια στιγμή στην καριέρα του, πιθανώς πολλές φορές. Αν και δεν υπάρχουν σκληροί και γρήγοροι κανόνες όσον αφορά τη δημιουργία πανό για το Διαδίκτυο, είναι αυτονόητο ότι ο τύπος πρέπει να είναι μεγάλος και το μήνυμα να είναι ασταθές.
Καθώς το κάνουμε κινούμενο επίσης, προτείνω όχι περισσότερες από τρεις διαφάνειες ή κινούμενα στοιχεία, καθώς οι άνθρωποι απλά δεν θα το παρακολουθήσουν. Τα στοιχεία που αναβοσβήνουν μπορούν επίσης να τραβήξουν την προσοχή του θεατή.
Στα επόμενα βήματα θα δείξω πώς να ρυθμίσω και να δημιουργήσω ένα απλό κινούμενο banner ιστού που μόλις το καταφέρνεις θα είναι ένα αεράκι για εφαρμογή σε οποιαδήποτε νέα δουλειά στο μέλλον.
01. Ρυθμίστε το έγγραφό σας
Εκκινήστε το Photoshop, μεταβείτε στο αρχείο> νέο και επιλέξτε Web από το αναπτυσσόμενο μενού Preset. Από το αναπτυσσόμενο μέγεθος επιλέξτε leaderboard ή αν οι διαστάσεις σας διαφέρουν, επιλέξτε custom και μη αυτόματα εισαγάγετε τις διαστάσεις pixel.
Με επιλεγμένα όρια snap to document από το μενού προβολής, σύρετε τους οδηγούς για snap σε όλα τα όρια του εγγράφου.
02. Προσθήκη γραφικών στοιχείων
Τώρα για να τοποθετήσετε τα βασικά στοιχεία σχεδίασης. Στο παραπάνω παράδειγμα επικόλλησα στο λογότυπο του τετραγώνου T3 και καθώς δημιούργησα τους οδηγούς θα μπορούσαν να το επανατοποθετήσουν και να το κάνουν να κουμπώσει εύκολα στο έγγραφο. Επικολλήστε σε ένα γραφικό βέλους που θα χρησιμοποιήσουμε αργότερα και χρησιμοποιώντας το εργαλείο τύπου ορίστε το μήνυμά σας για την πρώτη διαφάνεια. Επικολλήστε τις εικόνες που χρειάζεστε και, στη συνέχεια, βεβαιωθείτε ότι έχετε ορίσει σωστά όλα τα επίπεδα.
03. Δημιουργία δευτερευόντων διαφανειών
Τώρα απλώς αντιγράψτε το επίπεδο τύπου σας, απενεργοποιήστε το στρώμα τύπου κάτω και πληκτρολογήστε στο επόμενο στάδιο του μηνύματος, σε αυτήν την περίπτωση "ON SALE NOW". Μόλις είστε ικανοποιημένοι που έχετε όλα τα στοιχεία στη θέση τους, συγχωνεύστε όσο το δυνατόν περισσότερα επίπεδα. Καθώς το φόντο, το λογότυπο και η εικόνα εξωφύλλου θα παραμείνουν στατικά, μπορούμε να το συγχωνεύσουμε προς τα κάτω αφήνοντάς μας τέσσερα επίπεδα, το φόντο, τα επίπεδα τύπου και το επίπεδο βέλους.
04. Δημιουργήστε το animation καρέ
Τώρα απλώς κάντε κλικ στην καρτέλα λωρίδας χρόνου στο κάτω μέρος του παραθύρου ή μεταβείτε στο παράθυρο> Χρονολόγιο. Κάντε κλικ στο μικρό βέλος στη μέση του παραθύρου και επιλέξτε "Δημιουργία κινούμενου πλαισίου" και στη συνέχεια κάντε κλικ στο κουμπί. Τώρα απενεργοποιήστε όλα τα επίπεδα εκτός από το επίπεδο φόντου και το πρώτο επίπεδο μηνύματος. Εφαρμόστε καθυστέρηση ενός δευτερολέπτου στο καρέ από το αναπτυσσόμενο μενού στο μικρό πλαίσιο κινουμένων σχεδίων. Τώρα απλώς κάντε κλικ στο κουμπί "διπλά επιλεγμένα καρέ" στο χρονολόγιο αλλά απενεργοποιήστε το πρώτο μήνυμα και ενεργοποιήστε το δεύτερο μήνυμα. Επαναλάβετε αυτήν τη διαδικασία για όλα τα επίπεδα, τελειώνοντας με το επίπεδο βέλους.
- Τα 10 μεγαλύτερα λογότυπα των Ολυμπιακών Αγώνων όλων των εποχών
05. Κάντε το βέλος να αναβοσβήνει και προσαρμόστε τους χρονισμούς
Για να κάνετε το βέλος να αναβοσβήνει απλώς πατήστε "Αντιγραφή επιλεγμένων καρέ" από το χρονοδιάγραμμα και απενεργοποιήστε το βέλος.Ρυθμίστε το χρόνο σε 0,5 δευτερόλεπτα και επαναλάβετε τη διαδικασία ενεργοποιώντας και απενεργοποιώντας το βέλος στον πίνακα επιπέδων έτσι ώστε να φαίνεται σαν να αναβοσβήνει. Τέλος, ίσως θελήσετε να προσαρμόσετε μερικά από τα χρονικά διαστήματα μέχρι να είστε απολύτως ικανοποιημένοι. Οι άνθρωποι έχουν πολύ μικρή διάρκεια προσοχής, οπότε δεν έχει νόημα να είναι αργός με το ρυθμό καρέ, αλλά πρέπει να είναι σε θέση να το διαβάσουν.
06. Αποθήκευση για web και συσκευές
Τέλος, μεταβείτε στην επιλογή "Αποθήκευση για web" και επιλέξτε GIF από το αναπτυσσόμενο μενού. Μπορείτε επίσης να μειώσετε ελαφρά την ποιότητα εδώ για να μειώσετε το μέγεθος του αρχείου. Μόλις είστε ικανοποιημένοι, αποθηκεύστε το gif και, στη συνέχεια, σύρετέ το σε ένα πρόγραμμα περιήγησης ιστού για να το δοκιμάσετε.
