Πώς να δημιουργήσετε ένα κινούμενο banner Ιστού στο Photoshop

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

Καθώς το κάνουμε κινούμενο επίσης, προτείνω όχι περισσότερες από τρεις διαφάνειες ή κινούμενα στοιχεία, καθώς οι άνθρωποι απλά δεν θα το παρακολουθήσουν. Τα στοιχεία που αναβοσβήνουν μπορούν επίσης να τραβήξουν την προσοχή του θεατή.

Δημιουργήστε αυτό το κινούμενο banner για έναν ιστότοπο παρακάτω…



Δημιουργήστε αυτό το κινούμενο banner για έναν ιστότοπο παρακάτω…

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

βιβλιοδεσία για αρχάριους βήμα προς βήμα

01. Ρυθμίστε το έγγραφό σας

Εκκινήστε το Photoshop, μεταβείτε στο αρχείο> νέο και επιλέξτε Web από το αναπτυσσόμενο μενού Preset. Από το αναπτυσσόμενο μέγεθος επιλέξτε leaderboard ή εάν οι διαστάσεις σας διαφέρουν, επιλέξτε custom και μη αυτόματα εισαγάγετε τις διαστάσεις pixel.

στρέψτε και τραβήξτε κάμερες με την πάροδο του χρόνου

Με επιλεγμένα όρια snap to document από το μενού προβολής, σύρετε τους οδηγούς για snap σε όλα τα όρια του εγγράφου.

02. Προσθήκη γραφικών στοιχείων

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

03. Δημιουργία των δευτερευόντων διαφανειών

πώς να αποκτήσετε animator χαρακτήρων adobe

Τώρα απλώς αντιγράψτε το επίπεδο τύπου σας, απενεργοποιήστε το στρώμα τύπου κάτω και πληκτρολογήστε στο επόμενο στάδιο του μηνύματος, στην περίπτωση αυτή 'ON SALE NOW'. Μόλις είστε ικανοποιημένοι που έχετε όλα τα στοιχεία στη θέση τους, συγχωνεύστε όσο το δυνατόν περισσότερα επίπεδα. Καθώς το φόντο, το λογότυπο και η εικόνα εξωφύλλου θα παραμείνουν στατικά, μπορούμε να το συγχωνεύσουμε προς τα κάτω αφήνοντάς μας τέσσερα επίπεδα, το φόντο, τα επίπεδα τύπου και το επίπεδο βέλους.

04. Δημιουργήστε το animation καρέ

Τώρα απλώς κάντε κλικ στην καρτέλα χρονοδιάγραμμα στο κάτω μέρος του παραθύρου ή μεταβείτε στο παράθυρο> Χρονολόγιο. Κάντε κλικ στο μικρό βέλος στη μέση του παραθύρου και επιλέξτε 'Δημιουργία κινούμενου καρέ' και στη συνέχεια κάντε κλικ στο κουμπί. Τώρα απενεργοποιήστε όλα τα επίπεδα εκτός από το επίπεδο φόντου και το πρώτο επίπεδο μηνύματος. Εφαρμόστε καθυστέρηση ενός δευτερολέπτου στο καρέ από το αναπτυσσόμενο μενού στο μικρό πλαίσιο κινουμένων σχεδίων. Τώρα απλώς κάντε κλικ στο κουμπί 'διπλότυπα επιλεγμένα καρέ' στο χρονολόγιο αλλά απενεργοποιήστε το πρώτο μήνυμα και ενεργοποιήστε το δεύτερο μήνυμα. Επαναλάβετε αυτήν τη διαδικασία για όλα τα επίπεδα, τελειώνοντας με το στρώμα βέλους.

σεμινάριο υγρής ελαιογραφίας

05. Κάντε το βέλος να αναβοσβήνει και προσαρμόστε τους χρονισμούς

Για να κάνετε το βέλος να αναβοσβήνει απλώς πατήστε 'Διπλότυπα επιλεγμένα καρέ' από το χρονοδιάγραμμα και απενεργοποιήστε το βέλος. Ρυθμίστε το χρόνο σε 0,5 δευτερόλεπτα και επαναλάβετε τη διαδικασία ενεργοποιώντας και απενεργοποιώντας το βέλος στον πίνακα επιπέδων έτσι ώστε να φαίνεται σαν να αναβοσβήνει. Τέλος, ίσως θελήσετε να προσαρμόσετε μερικά από τα χρονικά διαστήματα μέχρι να είστε απολύτως ικανοποιημένοι. Οι άνθρωποι έχουν πολύ μικρή διάρκεια προσοχής, οπότε δεν έχει νόημα να είναι αργός με το ρυθμό καρέ, αλλά πρέπει να είναι σε θέση να το διαβάσουν.

06. Αποθήκευση για web και συσκευές

Τέλος, μεταβείτε στην επιλογή 'Αποθήκευση για web' και επιλέξτε GIF από το αναπτυσσόμενο μενού. Μπορείτε επίσης να μειώσετε ελαφρά την ποιότητα εδώ για να μειώσετε το μέγεθος του αρχείου. Μόλις είστε ικανοποιημένοι, αποθηκεύστε το gif και, στη συνέχεια, σύρετέ το σε ένα πρόγραμμα περιήγησης ιστού για να το δοκιμάσετε.