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

Sep 14, 2025

πως να

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

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

Make this animated banner for a website below… — Κάντε αυτό το κινούμενο banner για έναν ιστότοπο παρακάτω ...

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

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

Εκκίνηση Photoshop, μεταβείτε στο αρχείο & gt; Νέο και επιλέξτε Web από το αναπτυσσόμενο μενού. Από το αναπτυσσόμενο μενού μεγέθους Επιλέξτε Leaderboard ή εάν οι διαστάσεις σας ποικίλλουν, επιλέξτε Custom και εισάγετε χειροκίνητα τις διαστάσεις των εικονοστοιχείων.

Με το Snap to Document Brounds που επιλέγονται από το μενού Προβολή, σύρετε τους οδηγούς για να ασφαλίσετε όλα τα όρια του εγγράφου.

02. Προσθέτοντας γραφικά στοιχεία

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

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

Τώρα απλά αντιγράψτε το στρώμα τύπου σας, απενεργοποιήστε το στρώμα τύπου κάτω και πληκτρολογήστε το επόμενο στάδιο του μηνύματος, στην περίπτωση αυτή "On Sale τώρα". Μόλις είστε ευχαριστημένοι ότι έχετε όλα τα στοιχεία που υπάρχουν, συγχωνεύστε όσο το δυνατόν περισσότερα από τα στρώματα. Ως το φόντο, το λογότυπο και η εικόνα του καλύμματος θα παραμείνουν στατικά, μπορούμε να συγχωνεύσουμε αυτό το κάτω αφήνοντας να μας αφήσουμε με τέσσερα στρώματα, το φόντο, τα στρώματα τύπου και το στρώμα βέλους.

04. Δημιουργήστε το κινούμενο πλαίσιο πλαισίου

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

Τα 10 μεγαλύτερα λογότυπα των Ολυμπιακών Αγώνων όλων των εποχών

05. Κάντε το βέλος Flash και ρυθμίστε τους χρόνους

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

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

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

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

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

02. Προσθέτοντας γραφικά στοιχεία

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

04. Δημιουργήστε το κινούμενο πλαίσιο πλαισίου

05. Κάντε το βέλος Flash και ρυθμίστε τους χρόνους

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

πως να - Τα πιο δημοφιλή άρθρα

Google Slides: Πώς να σχεδιάσετε ένα έγγραφο

Tutorial Adobe Fresco: Δημιουργήστε ένα πορτρέτο στην εφαρμογή Ζωγραφικής

Πώς να σχεδιάσει την προοπτική

6 Γρήγορες συμβουλές για τη βελτίωση του σχεδίου στυλό σας

Πώς να Kitbash εν κινήσει με το Shapr3d

Πώς να επιταχύνετε την επανατροπολογία στη Μάγια

Διευθυντική μοντελοποίηση

Μοντέλο Darth Vader σε ZBrush

Κατηγορίες