Μια από τις "πιο καυτές" τεχνικές στον ιστό σήμερα είναι η κύλιση παράλλαξης. Έχουμε βρεθεί όλοι σε εκείνους τους ιστότοπους όπου περιστρέφετε τον τροχό κύλισης στο ποντίκι σας και το περιεχόμενο στη σελίδα μετακινείται προς τα πάνω ή προς τα κάτω ή σε όλη τη σελίδα καθώς περιστρέφετε τον τροχό του ποντικιού.
Για όσους είναι νέοι στο σχεδιασμό ιστοσελίδων και στο γραφικό σχεδιασμό, αυτή η τεχνική μπορεί να είναι εξαιρετικά δύσκολη να επιτευχθεί λόγω της απαιτούμενης ποσότητας CSS.
Αν αυτό σας περιγράφει, υπάρχουν αρκετές εφαρμογές που μπορεί να απευθύνονται μόνο σε καλλιτέχνες γραφικών. Χρησιμοποιούν βασικά μια εξοικείωση με τη διάταξη σελίδας σε ιστοσελίδες, πράγμα που σημαίνει ότι δεν υπάρχει πολύ, αν υπάρχει, κωδικοποίηση. Μία εφαρμογή που έχει αναδείξει πραγματικά είναι η Adobe Muse.
Το έργο που γίνεται από επαγγελματίες γραφικών χρησιμοποιώντας το Muse είναι αρκετά καταπληκτικό και μπορείτε να δείτε μια δειγματοληψία για το τι μπορείτε να κάνετε με την επίσκεψη στο Muse Ιστοσελίδα της Ημέρας . Αν και οι επαγγελματίες του διαδικτύου τείνουν να θεωρούν τη Muse ως ένα είδος "παιχνιδιού", χρησιμοποιούνται επίσης από τους σχεδιαστές για τη δημιουργία πρωτοτύπων για κινητά και διαδικτυακά, τα οποία θα παραδοθούν τελικά στους προγραμματιστές της ομάδας τους.
Μια τεχνική που είναι απίστευτα εύκολο να επιτευχθεί με το Muse είναι η παράλληλη κύλιση και, αν θέλετε να δείτε την ολοκληρωμένη έκδοση της άσκησης. Όταν μετακινείτε τον τροχό κύλισης του ποντικιού, το κείμενο φαίνεται να μετακινείται προς τα πάνω ή προς τα κάτω στη σελίδα και οι εικόνες αλλάζουν.
Ας αρχίσουμε.
01 από 07Δημιουργία ιστοσελίδας
Όταν ανοίγετε το Muse, κάντε κλικ στο Νέος ιστότοπος Σύνδεσμος. Αυτό θα ανοίξει το Νέες ιδιότητες ιστότοπου. Αυτό το έργο θα σχεδιαστεί για μια εφαρμογή γραφείου και μπορείτε να το επιλέξετε στο Αρχική διάταξη αναδυόμενο μενού. Μπορείτε επίσης να ορίσετε τις τιμές για τον αριθμό των στηλών, το πλάτος υδρορροής, τα περιθώρια και την επένδυση. Σε αυτή την περίπτωση, δεν μας άρεσε πολύ και απλά χτυπήσαμε Εντάξει.
Μορφοποιήστε τη σελίδα
Όταν ορίζετε τις ιδιότητες του ιστότοπου και κάνετε κλικ Εντάξει ρίχτηκαν σε αυτό που ονομάζεται Σχέδιο θέα. Υπάρχει ένα Σπίτι σελίδα στην κορυφή και α Κύρια Σελίδα στο κάτω μέρος του παραθύρου. Χρειαζόμασταν μόνο μία σελίδα. Για να φτάσετε στο Design View, κάναμε διπλό κλικ στην Αρχική σελίδα που άνοιξε τη διεπαφή.
Στα αριστερά υπάρχουν μερικά βασικά εργαλεία και στα δεξιά υπάρχουν διάφορα πάνελ που χρησιμοποιούνται για το χειρισμό του περιεχομένου στη σελίδα. Στην κορυφή υπάρχουν οι ιδιότητες που μπορούν να εφαρμοστούν στη σελίδα ή οτιδήποτε επιλεγεί στη σελίδα. Σε αυτή την περίπτωση, θέλαμε να έχουμε ένα μαύρο φόντο. Για να το επιτύχουμε, κάνουμε κλικ στο Φόρτωση με το πρόγραμμα περιήγησης χρώματος και επιλέξτε μαύρο από τον επιλογέα χρωμάτων.
03 του 07Προσθήκη κειμένου στη σελίδα
Το επόμενο βήμα είναι να προσθέσετε κάποιο κείμενο στη σελίδα. Επιλέξαμε το Εργαλείο κειμένου και εφάρμοσε ένα πλαίσιο κειμένου. Εισήγαγε τη λέξη "Καλωσορίσατε" και, στις Ιδιότητες, ορίσατε το κείμενο σε Arial, 120 pixels λευκό. Center Aligned.
Μετά επιλέξαμε το εργαλείο επιλογής, κάναμε κλικ στο πλαίσιο κειμένου και ρυθμίσαμε το Θέση Y έως 168 pixels από την κορυφή. Με το πλαίσιο κειμένου που επιλέξατε, ανοίξαμε το Ευθυγραμμίστε τον πίνακα και ευθυγράμμισε το πλαίσιο κειμένου στο κέντρο.
Τέλος, με το επιλεγμένο πλαίσιο κειμένου, κρατήσαμε πατημένο το Επιλογή / Alt και Βάρδια και πραγματοποίησε τέσσερα αντίγραφα του πλαισίου κειμένου. Αλλάξαμε το κείμενο και τη θέση Y κάθε αντιγράφου σε:
- Για, 871
- Γραφικά, 1621
- Λογισμικό, 2371
Θα παρατηρήσετε ότι, καθώς ρυθμίζετε τη θέση κάθε πλαισίου κειμένου, η σελίδα μετατρέπεται σε μέγεθος για να προσαρμόζεται η θέση του κειμένου.
04 του 07Προσθέστε αντιπροσωπευτικά στοιχεία εικόνας
Το επόμενο βήμα είναι να τοποθετήσετε εικόνες μεταξύ των μπλοκ κειμένου.
Το πρώτο βήμα είναι να επιλέξετε το Εργαλείο ορθογωνίου και να σχεδιάσουμε ένα κουτί που εκτείνεται από τη μια πλευρά της σελίδας στην άλλη. Με το επιλεγμένο ορθογώνιο, ορίζουμε το ύψος έως 250 εικονοστοιχεία και είναι Y σε 425 εικονοστοιχεία. Το σχέδιο είναι να έχουν πάντα να τεντώνουν ή να συστέλλονται με το πλάτος σελίδας για να φιλοξενήσουν το παράθυρο προβολής του προγράμματος περιήγησης του χρήστη. Για να το επιτύχουμε, κάναμε κλικ στο 100% πλάτος στο Properties. Αυτό που κάνει είναι να γκριθεί η τιμή X και να διασφαλιστεί ότι η εικόνα είναι πάντα 100% του πλάτους προβολής σε ένα πρόγραμμα περιήγησης.
05 του 07Προσθήκη εικόνων σε αντικείμενα τοποθεσίας εικόνας
Με το επιλεγμένο ορθογώνιο, κάναμε κλικ στο Συμπληρώστε το σύνδεσμο - όχι το Color Chip - και κάνατε κλικ στο Iμελανοδοχείο για να προσθέσετε μια εικόνα στο ορθογώνιο. Στο Προσαρμογή περιοχή, επιλέξαμε Κλίμακα για να ταιριάζει και κάνατε κλικ στο κεντρική λαβή στο Θέση για να διασφαλίσετε ότι η εικόνα θα κλιμακωθεί από το κέντρο της εικόνας.
Στη συνέχεια, χρησιμοποιήσαμε το Επιλογή / Alt-Shift-σύρετε τεχνική για να δημιουργήσετε ένα αντίγραφο της εικόνας μεταξύ των δύο πρώτων μπλοκ κειμένου, να ανοίξετε τον πίνακα πλήρωσης και να αλλάξετε την εικόνα για άλλη. Το κάναμε και για τις υπόλοιπες δύο εικόνες.
Με τις εικόνες στη θέση τους, είναι καιρός να προσθέσετε την κίνηση.
06 του 07Προσθέστε κύλιση Parallax
Υπάρχουν διάφοροι τρόποι για να προσθέσετε κύλιση parallax στο Adobe Muse. Θα σας δείξουμε έναν απλό τρόπο να το κάνετε.
Με το πλαίσιο πληρότητας ανοιχτό, κάντε κλικ στο Καρτέλα κύλισης και όταν ανοίξει, κάντε κλικ στο Πλαίσιο ελέγχου κίνησης.
Θα δείτε τιμές για Αρχικός και Τελική κίνηση. Αυτά καθορίζουν πόσο γρήγορα μετακινείται η εικόνα σε σχέση με τον τροχό κύλισης. Για παράδειγμα, μια τιμή 1,5 θα μετακινήσει την εικόνα 1,5 φορές γρηγορότερα από τον τροχό. Χρησιμοποιήσαμε τιμή 0 για να κλειδώσετε τις εικόνες στη θέση τους.
ο Οριζόντια και κάθετα βέλη καθορίστε την κατεύθυνση της κίνησης.Εάν οι τιμές είναι 0, οι εικόνες δεν θα πέσουν ανεξάρτητα από το βέλος που κάνετε κλικ.
Η μεσαία τιμή – Θέση κλειδιού - δείχνει το σημείο όπου αρχίζουν να κινούνται οι εικόνες. Η γραμμή πάνω από την εικόνα ξεκινά, για αυτή την εικόνα, 325 pixels από το επάνω μέρος της σελίδας. Όταν η μετακίνηση φτάσει σε αυτήν την τιμή, η εικόνα αρχίζει να μετακινείται. Μπορείτε να αλλάξετε αυτήν την τιμή είτε αλλάζοντας το στο παράθυρο διαλόγου είτε κάνοντας κλικ και σύροντας το σημείο στο πάνω μέρος της γραμμής είτε πάνω είτε κάτω.
Επαναλάβετε αυτό για τις άλλες εικόνες στη σελίδα.
07 του 07Δοκιμή Browser
Σε αυτό το σημείο, τελείωσα. Το πρώτο πράγμα που κάναμε, για προφανείς λόγους, ήταν να επιλέξουμε Αρχείο> Αποθήκευση ιστότοπου. Για τη δοκιμή του προγράμματος περιήγησης, απλά επιλέξαμε Αρχείο> Προεπισκόπηση σελίδας στο πρόγραμμα περιήγησης. Αυτό άνοιξε το προεπιλεγμένο πρόγραμμα περιήγησης του υπολογιστή μας και, όταν άνοιξε η σελίδα, ξεκινήσαμε την κύλιση.
