Πώς να δημιουργήσετε ένα ρυθμιστικό εικόνας χρησιμοποιώντας το Photoshop & jQuery

Αναμφισβήτητα, το ρυθμιστικό εικόνας είναι ένα από τα πιο συχνά χρησιμοποιούμενα στοιχεία στον επιχειρηματικό σχεδιασμό ιστοσελίδων, λόγω του σχετικά μεγάλου μεγέθους του που είναι σε θέση να προσελκύσει την προσοχή του επισκέπτη μόλις φτάσει στην περιοχή. Αν και ο ιστός έχει αρχίσει να επανεξετάζει τη χρηστικότητα του slider εικόνας, εξακολουθεί να θεωρείται ως ένα must-learn για τον νεοφερμένο στον κλάδο του web design.

Σε αυτό το σεμινάριο σχεδιασμού ιστοσελίδων, θα μάθουμε να δημιουργούμε προσαρμοσμένο ρυθμιστικό εικόνας παραπάνω χρησιμοποιώντας το Photoshop, το οποίο μπορείτε να δείτε στο τελικό αποτέλεσμα από εδώ. Όχι μόνο θα το παρουσιάσουμε στο Photoshop, θα το μετατρέψουμε σε λειτουργικό σχεδιασμό μετατρέποντάς το σε HTML / CSS και προσθέτοντας το jQuery για το φοβερό αποτέλεσμα.

Μοιάζει με πολλά περίπλοκα κομμάτια που εμπλέκονται, αλλά στην πραγματικότητα είναι αρκετά απλή και πολύ εύκολο να το καταλάβεις, ας ξεκινήσουμε τότε!

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

Εικόνα ρυθμιστικό: 23 jQuery Sliders
Εικόνα ρυθμιστικό: 18 WordPress Plugins

Ξεκινώντας

Για αυτό το σεμινάριο θα χρειαστείτε τους παρακάτω πόρους:

26 επαναληπτικά μοτίβα εικονοστοιχείων από το PSDfreemium.
jQuery βιβλιοθήκη
Σύνθετο slider Nivo
Modernizr
Βρέθηκαν υφές χαρτιού από το VandelayPremier
(Εναλλακτική) 13 HQ Old Paper Textures από υπερβολική δόση
Rinjani από τον Ciaciya
Stupa από την Agnes Sim
Συμφωνώ με τον Nino Satria
Προσφορές του Timo Balk
Uluwatu-Bali από τον Aris Wjay

Μέρος Ι - Σχεδιασμός ρυθμιστικού εικόνας

Βήμα 1: Ρύθμιση φόντου

Ξεκινήστε δημιουργώντας ένα νέο αρχείο μεγέθους 1000 × 700 px. Συμπληρώστε το φόντο με το χρώμα # efc89e.

Προσθέστε την επικάλυψη μοτίβου χρησιμοποιώντας δωρεάν μοτίβο εικονοστοιχείων από το PSDfreemium.

Βήμα 2: Βάση ολίσθησης

Ενεργοποιήστε το εργαλείο ορθογωνίου. Δημιουργήστε ένα ορθογώνιο με μέγεθος 940 × 450 px. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε χρώμα, δεν έχει σημασία.

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

Αυτό είναι το αποτέλεσμα. Η βάση του ολισθητήρα έχει τώρα ένα ωραίο πλαίσιο με μαλακή σκιά πίσω από αυτό.

Βήμα 3

Προσθέστε μια φωτογραφία και τοποθετήστε την πάνω από τη βάση του ρυθμιστή. Πατήστε Ctrl + Alt + G για να το μετατρέψετε σε μάσκα αποκοπής και να εισαγάγετε τη φωτογραφία στο ρυθμιστικό.

Βήμα 4: Κορδέλα

Σχεδιάστε ένα σχήμα ορθογωνίου με το χρώμα # f4e1ae που θα χρησιμοποιηθεί ως κορδέλα.

Κάντε διπλό κλικ στο στρώμα του σχήματος και ενεργοποιήστε το Bevel and Emboss, το Overlay Overlay και το Pattern Overlay με τις ακόλουθες ρυθμίσεις.

Αυτό είναι το αποτέλεσμα μετά την προσθήκη στυλ επιπέδου.

Βήμα 5

Ας προσθέσουμε την υφή χαρτιού πάνω στην κορδέλα για να την κάνουμε πιο ρεαλιστική. Τοποθετήστε την υφή πάνω από το σχήμα της κορδέλας. Μετατρέψτε το σε μάσκα αποκοπής πιέζοντας Ctrl + Alt + G.

Βήμα 6

Ας ζωγραφίσουμε μερικές σκιές και επισημάνσεις πάνω στην κορδέλα. Δημιουργήστε ένα νέο στρώμα πάνω από την κορδέλα. Βάλτε μαύρο χρώμα στο κάτω μέρος της κορδέλας. Μετατρέψτε το σε Clipping Mask (Ctrl + Alt + G) και στη συνέχεια μειώστε την Opacity σε 10%.

Βήμα 7

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

Βήμα 8: ράμματα

Ενεργοποιήστε το εργαλείο μολυβιού. Πατήστε το πλήκτρο F5 για να ανοίξετε τη ρύθμιση Brush. Ρυθμίστε το μέγεθος της βούρτσας σε 1 px και αυξήστε την απόσταση έως ότου λάβουμε μια διακεκομμένη γραμμή στην περιοχή προεπισκόπησης.

Βήμα 9

Σχεδιάστε 1 px μαύρη γραμμή στην κορυφή της κορδέλας. Μειώστε την αδιαφάνεια έως το 20%. Αντιγράψτε το επίπεδο πατώντας Ctrl + J. Πατήστε Ctrl + I για να αντιστρέψετε το χρώμα του. Αυξήστε την αδιαφάνεια έως 50%. Ενεργοποιήστε το εργαλείο μεταφοράς και, στη συνέχεια, πιέστε το βέλος προς τα κάτω και το αριστερό βέλος μία φορά για να το μετακινήσετε.

Εδώ εμφανίζεται το αποτέλεσμα με μεγέθυνση 100%.

Βήμα 10

Επαναλάβετε αυτή τη διαδικασία για να σχεδιάσετε άλλες βελονιές από την άλλη πλευρά της κορδέλας.

Βήμα 11: Προσθήκη ορθοστατικού σχήματος

Ορίστε το χρώμα του προσκηνίου στο γκρι. Χρησιμοποιήστε μαλακή βούρτσα μεγέθους 1 px για να σχεδιάσετε ένα περίτεχνο σχήμα. Να είστε δημιουργικοί, μπορείτε να χρησιμοποιήσετε οποιοδήποτε σχήμα επιθυμείτε. Δίπλα σε αυτό, σχεδιάστε μια γραμμή 1 px και στη συνέχεια διαγράψτε την εξωτερική της ακμή χρησιμοποιώντας ένα μαλακό εργαλείο Eraser. Διπλασιάστε τη γραμμή, γυρίστε την οριζόντια και τοποθετήστε την στην άλλη πλευρά.

Βήμα 12

Επιλέξτε όλα τα περίτεχνα στρώματα και συγχωνεύστε τα σε ένα στρώμα πιέζοντας Ctrl + E. Διπλασιάστε το σχήμα και στη συνέχεια το τοποθετήστε κάτω από το αρχικό περίγραμμα. Πατήστε Ctrl + I για να αντιστρέψετε το χρώμα του. Ενεργοποιήστε το εργαλείο μετακίνησης και, στη συνέχεια, πιέστε το βέλος μία φορά για να το μετακινήσετε 1 προς τα κάτω.

Βήμα 13: Πληροφορίες φωτογραφίας

Πληκτρολογήστε δεδομένα φωτογραφιών μέσα στην κορδέλα.

Βήμα 14: Πλοήγηση

Στη συνέχεια, θα σχεδιάσουμε μερικούς κύκλους για πλοήγηση διαφάνειας. Σχεδιάστε ένα σχήμα κύκλου με χρώμα: # 8d877c στο κάτω μέρος της κορδέλας.

Προσθέστε Inner Shadow χρησιμοποιώντας τις ακόλουθες ρυθμίσεις.

Αυτό είναι το αποτέλεσμα. Ο κύκλος γίνεται τώρα μια ρηχή τρύπα τώρα.

Βήμα 15

Κρατήστε Alt και, στη συνέχεια, σύρετε το στρώμα σχήματος κύκλου για να το αντιγράψετε.

Βήμα 16

Ας θέσουμε ενεργό όρο σε έναν από αυτούς τους συνδέσμους. Επιλέξτε έναν από τους κύκλους και αλλάξτε το χρώμα στο # bebbb5. Προσθέστε εσωτερική σκιά, επικάλυψη κλίσης και εγκεφαλικό επεισόδιο.

Βήμα 17

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

Βήμα 18

Μαλακώνετε το με το φίλτρο Gaussian Blur. Κάντε κλικ στο στοιχείο Φίλτρο> Θόλωμα> Θόλωμα Gauss.

Βήμα 19

Τοποθετήστε τη σκιά κορδέλας πάνω από το στρώμα πλαισίου του ρυθμιστή. Μετατρέψτε το σε μάσκα αποκοπής πιέζοντας Ctrl + Alt + G.

Βήμα 20

Μειώστε την αδιαφάνεια της σκιάς στο 40%.

Βήμα 21

Σκιά βαφής κορδέλα στο φόντο. Μειώστε την αδιαφάνεια έως το 20%.

Βήμα 22

Χρησιμοποιήστε το εργαλείο πένας για να τραβήξετε πίσω μέρος της κορδέλας. Ορίστε το χρώμα του στο # b68f63. Τοποθετήστε το πίσω από το ρυθμιστικό.

Αυτό είναι το αποτέλεσμα που βλέπετε με μεγέθυνση 100%.

Βήμα 23

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

Βήμα 24: Τελικό αποτέλεσμα στο Photoshop

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

Μέρος II - Μετατροπή σε HTML / CSS

Βήμα 25 - Ρύθμιση αρχείων

Δημιουργήστε ένα νέο φάκελο που ονομάζεται My-Photo-Slider. Μέσα σε αυτό το φάκελο, δημιουργήστε ένα νέο κενό έγγραφο HTML (index.html), κενό φύλλο στυλ (style.css) και φάκελο για εικόνες (img). Επίσης, πρέπει να συμπεριλάβουμε τη βιβλιοθήκη jQuery και το plugin Nivo Slider στο φάκελο. Καθώς χρησιμοποιούμε τη σήμανση HTML5, πρέπει να προσθέσουμε ένα IE hack για να ενεργοποιήσουμε τα στοιχεία HTML5 σε IE 8 ή παρακάτω. Θα χρησιμοποιήσουμε ένα σενάριο που ονομάζεται Modernizr για να φιλοξενήσει το IE.

Βήμα 26 - Βασική σήμανση HTML

Ανοιξε index.html στον αγαπημένο σας επεξεργαστή κώδικα. Ορίστε το DOCTYPE (χρησιμοποιούμε HTML5), κεφάλι (όπου προσθέτουμε τον τίτλο των εγγράφων και συνδέουμε το CSS και το JavaScript (jQuery Library, Nivo Slider και Modernizr). div περιτύλιγμα (για να κεντράρετε τη διάταξη), επί κεφαλής στοιχείου και περιτυλίγματος διαφανειών.

      Οι φωτογραφικές διαφάνειες μου

Βήμα 27 - Φέτα PSD

Ανοίξτε το mockup του PSD και αφαιρέστε όλες τις απαραίτητες εικόνες. Για την εικόνα, ας τραβήξουμε φωτογραφίες από το sxc.hu (απαιτείται σύνδεση, αν δεν έχετε λογαριασμό ακόμη, μπορείτε να εγγραφείτε δωρεάν). Αλλάξτε το μέγεθος όλων των εικόνων σε 920 × 430 px. Τοποθετήστε όλες τις εικόνες στον φάκελο εικόνας (img).

Rinjani από τον Ciaciya
Stupa από την Agnes Sim
Συμφωνώ με τον Nino Satria
Προσφορές του Timo Balk
Uluwatu-Bali από τον Aris Wjay

Βήμα 28 - Δημιουργία κεφαλίδας

Προσθέστε τον ακόλουθο κώδικα μεταξύ

και

  Οι φωτογραφικές διαφάνειες μου

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

 / * Βασικό στυλ * / σώμα φόντο: διαφανές url (img / bg.jpg); γραμματοσειρά: 15px / 2 'Adobe Caslon Pro', Γεωργία, Serif; περιθώριο: 0; padding: 0;  outline: 0 κανένας #pagewrap margin: 120px αυτόματα. padding: 0; θέση: σχετική. ύψος: 100%. πλάτος: 960px;  κεφαλίδα εμφάνιση: μπλοκ; float: δεξιά? περιθώριο-δεξιά: 40px; πλάτος: 192px; z-δείκτης: 52; θέση: σχετική.  h1 background: διαφανές url (img / separator.png) ουδέν-επαναλαμβανόμενο κέντρο στο κέντρο. / * Προσθέστε μια γραμμή διαχωριστικού κάτω από τον τίτλο * / font-size: 18px; γραμματοσειρά-βάρος: έντονα. ύψος: 70px; ύψος γραμμής: 1,1; περιθώριο: 55px 10px 0; κείμενο-ευθυγράμμιση: κέντρο; κείμενο-μετασχηματισμός: κεφαλαία?

Βήμα 29 - Προσθήκη διαφανειών φωτογραφιών

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

και

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

 
  Φωτογράφος:
 Ένρικο Νουντζιάτι
 Τοποθεσία:
 Η έρημος του Ναμίμπ
 Μοντέλο:
 Ο νεκρός Vlei
 Ημερομηνία:
 18 Μαρτίου 2011 
  Φωτογράφος:
 Λίνα Νταχαμανάρη
 Τοποθεσία:
 Lombok Island, Ινδονησία
 Μοντέλο:
 Mount Rinjani
 Ημερομηνία:
 8 Μαΐου 2008 
  Φωτογράφος:
 Αγνή Σιμ
 Τοποθεσία:
 Borobudur, Ινδονησία
 Μοντέλο:
 Big Stupa
 Ημερομηνία:
 12 Ιουνίου 2008 
  Φωτογράφος:
 Νίνο Σατρία
 Τοποθεσία:
 Taman Safari Ινδονησία
 Μοντέλο:
 Tally Giraffe
 Ημερομηνία:
 16 Αυγούστου 2009 
  Φωτογράφος:
 Τιμό Μαλκ
 Τοποθεσία:
 Ubud, Μπαλί, Ινδονησία
 Μοντέλο:
 Προσφορές
 Ημερομηνία:
 20 Δεκεμβρίου 2009 
  Φωτογράφος:
 Άρης Γουέι
 Τοποθεσία:
 Uluwatu-Μπαλί
 Μοντέλο:
 Όμορφη παραλία
 Ημερομηνία:
 20 Ιουλίου 2011

Τώρα, αν ανοίξουμε index.html στο πρόγραμμα περιήγησης, έχουμε κάτι σαν αυτό:

Βήμα 30

Πρέπει ακόμα να διορθώσουμε την εμφάνιση του δρομέα χρησιμοποιώντας το CSS.

 #slidewrap θέση: απόλυτη; #slider θέση: σχετική; ύψος: auto; πλάτος: 920px; σύνορα: 10px solid #fff; κουτί-σκιά: 0 0 5px # 444; περιθώριο: 10px;  .ribbon φόντο: διαφανής διεύθυνση url (img / info-bg.png) no-repeat; ύψος: 482px; πλάτος: 192px; θέση: απόλυτη; δεξιά: 40px; κορυφή: -3px; z-δείκτης: 50;  #slider img θέση: απόλυτη; κορυφή: 0px; αριστερά: 0px; οθόνη: καμία ·

Αυτό είναι που έχουμε τώρα.

Προς το παρόν, έχουμε συνδέσει το plugin Slider Nivo, αλλά δεν έχουμε συνδέσει το σενάριο. Ας συνδέσουμε τη δέσμη ενεργειών προσθέτοντας αυτές τις λειτουργίες JavaScript μεταξύ και στοιχείο.

Βήμα 31: Στυλ slider

Το τελευταίο βήμα είναι η προσθήκη του στυλ του ρυθμιστή.

 / * Τα στυλ Slider Nivo * / .nivoSlider θέση: σχετική;  .nivoSlider img θέση: απόλυτα; κορυφή: 0px; αριστερά: 0px;  / * Εάν μια εικόνα είναι τυλιγμένη σε σύνδεσμο * / .nivoSlider a.nivo-imageLink θέση: απόλυτη; κορυφή: 0px; αριστερά: 0px; πλάτος: 100%. ύψος: 100%. σύνορα: 0; padding: 0; περιθώριο: 0; z-δείκτης: 6; οθόνη: καμία ·  / * Οι φέτες και τα κουτάκια στο πλαίσιο Slider * / .nivo-slice εμφάνιση: block; θέση: απόλυτη; z-δείκτης: 5; ύψος: 100%.  .nivo-box εμφάνιση: μπλοκ? θέση: απόλυτη; z-δείκτης: 5;  .nivo-directionNav εμφάνιση: κανένα! σημαντικό .nivo-html-caption εμφάνιση: κανένας;  .nivo-υπότιτλος θέση: απόλυτη; δεξιά: 20px; κείμενο-ευθυγράμμιση: κέντρο; κορυφή: 130px; πλάτος: 192px; z-δείκτης: 60;  .nivo-caption p περιθώριο: 0 .nivo-caption .title font-style: italic .nivo-controlNav θέση: απόλυτη; κάτω: 10px; δεξιά: 20px; ύψος: 15px; πλάτος: 192px; κείμενο-ευθυγράμμιση: κέντρο; εμφάνιση: μπλοκ? z-δείκτης: 51; . nivo-controlΜε βάση κέντρο: διαφανές κέντρο url (img / button.png) χωρίς κέντρο επαναλήψεων. εμφάνιση: inline-block ύψος: 14px; πλάτος: 14px; κείμενο-παύλα: -9999px; δρομέας: δείκτης;  .nivo-controlNav.active φόντο: διαφανής διεύθυνση URL (img / button_active.png);

Τελικό αποτέλεσμα + Λήψη

Αυτό είναι το τελικό μας αποτέλεσμα, κάντε κλικ εδώ για να δείτε το επίδειξη εργασίας.

Δεν είναι δυνατή η επίτευξη συγκεκριμένου βήματος; Εδώ είναι το αρχείο PSD του αποτελέσματος και το ολοκληρωμένο έργο για να δοκιμάσετε και να παίξετε με.

Αρχείο PSD του Εκπαιδευτή Εικόνας
Εκπαιδευτικό εργαλείο Slider Image Complete Project