So erstellen Sie einen Image Slider mit Photoshop & jQuery

Zweifellos ist der Bildschieberegler eines der am häufigsten verwendeten Elemente im Business-Webdesign, da er relativ groß ist und die Aufmerksamkeit der Besucher auf sich ziehen kann, sobald sie auf die Website gelangen. Obwohl das Web bereits begonnen hat, die Verwendbarkeit des Image-Schiebereglers zu überdenken, wird es für Neulinge der Webdesign-Branche immer noch als ein Muss betrachtet.

In diesem Webdesign-Lernprogramm lernen Sie, wie Sie mit Photoshop einen benutzerdefinierten Schieberegler erstellen. Hier können Sie eine Vorschau des Endergebnisses anzeigen. Wir werden es nicht nur in Photoshop veranschaulichen, sondern auch in ein funktionales Design umwandeln, indem wir es in HTML / CSS konvertieren und jQuery für seinen beeindruckenden Sliding-Effekt hinzufügen.

Klingt nach einer Menge komplizierter Teile, aber in der Tat ist es ziemlich unkompliziert und sehr einfach zu verstehen!

Mehr Interesse daran, einen Image-Slider zu übernehmen und unterwegs anzupassen? Hier sind Beiträge für Sie gewidmet.

• Image Slider: 23 jQuery Sliders
• Bildschieberegler: 18 WordPress-Plugins

Fertig machen

Für dieses Tutorial benötigen Sie folgende Ressourcen:

• 26 Wiederholbare Pixelmuster aus PSDfreemium.
• jQuery-Bibliothek
• Nivo Slider-Plugin
• Modernizr
• Gefundene Papiertexturen von VandelayPremier
• (Alternative) 13 HQ Alte Papiertexturen aus Overdosse
• Rinjani von Ciaciya
• Stupa von Agnes Sim
• Tally von Nino Satria
• Angebote von Timo Balk
• Uluwatu-Bali von Aris Wjay

Teil I - Image Slider entwerfen

Schritt 1: Hintergrund einrichten

Erstellen Sie zunächst eine neue Datei mit der Größe 1000 × 700 px. Füllen Sie den Hintergrund mit der Farbe # efc89e.

Fügen Sie die Musterüberlagerung mit dem kostenlosen Pixelmuster von PSDfreemium hinzu.

Schritt 2: Slider Base

Rechteckwerkzeug aktivieren. Erstellen Sie ein Rechteck mit der Größe 940 × 450 px. Sie können jede Farbe verwenden, egal.

Doppelklicken Sie auf die Ebene, um das Dialogfeld Ebenenstil zu öffnen. Fügen Sie den Ebenenstil Schlagschatten, Äußeres Glühen und Schlaganfall hinzu.

Das ist das Ergebnis. Die Schieberbasis hat jetzt einen schönen Rahmen mit weichem Schatten dahinter.

Schritt 3

Fügen Sie ein Foto hinzu und platzieren Sie es über der Basis des Schiebereglers. Drücken Sie Strg + Alt + G, um die Maske in eine Schnittmaske zu konvertieren, und fügen Sie das Foto in den Schieberegler ein.

Schritt 4: Farbband

Zeichnen Sie eine Rechteckform mit der Farbe # f4e1ae, die als Farbband verwendet werden soll.

Doppelklicken Sie auf die Ebene der Form und aktivieren Sie mit den folgenden Einstellungen Abschrägung und Relief, Verlaufsüberlagerung und Musterüberlagerung.

Dies ist das Ergebnis nach dem Hinzufügen von Ebenenstilen.

Schritt 5

Fügen Sie dem Farbband Papierstruktur hinzu, um es realistischer zu gestalten. Legen Sie die Textur auf die Bandform. Konvertieren Sie es in Schnittmaske, indem Sie Strg + Alt + G drücken.

Schritt 6

Malen Sie einige Schatten und Lichter auf das Band. Erstellen Sie eine neue Ebene über dem Menüband. Malen Sie den unteren Teil des Farbbands schwarz. Konvertieren Sie es in eine Schnittmaske (Strg + Alt + G) und reduzieren Sie dann die Deckkraft auf 10%..

Schritt 7

Wiederholen Sie den vorherigen Vorgang im oberen Teil des Farbbands. Fügen Sie jedoch dieses Mal Glanz hinzu, indem Sie Weiß malen und dann die Deckkraft auf 50% reduzieren..

Schritt 8: Stiche

Aktivieren Sie das Stiftwerkzeug. Drücken Sie F5, um die Pinseleinstellung zu öffnen. Setzen Sie die Pinselgröße auf 1 px und vergrößern Sie den Abstand, bis im Vorschaubereich eine gepunktete Linie angezeigt wird.

Schritt 9

Zeichnen Sie eine schwarze Linie mit 1 px auf das Farbband. Reduzieren Sie die Deckkraft auf 20%. Duplizieren Sie die Ebene durch Drücken von Strg + J. Drücken Sie Strg + I, um die Farbe umzukehren. Erhöht die Deckkraft auf 50%. Aktivieren Sie das Verschiebungswerkzeug und drücken Sie einmal auf den Abwärtspfeil und den Linkspfeil, um es zu verschieben.

Hier ist das Ergebnis bei 100% Vergrößerung.

Schritt 10

Wiederholen Sie diesen Vorgang, um weitere Stiche auf einer anderen Seite des Farbbands zu zeichnen.

Schritt 11: Verzieren Sie die Form

Setzen Sie die Vordergrundfarbe auf Grau. Verwenden Sie einen weichen Pinsel mit einer Größe von 1 px, um eine kunstvolle Form zu zeichnen. Seien Sie kreativ, Sie können jede Form verwenden, die Sie mögen. Zeichnen Sie daneben eine 1 px-Linie und löschen Sie die äußere Kante mit einem weichen Radiergummi-Werkzeug. Duplizieren Sie die Linie, drehen Sie sie horizontal und legen Sie sie auf die andere Seite.

Schritt 12

Wählen Sie alle verzierten Ebenen aus, und fügen Sie sie durch Drücken von Strg + E zu einer Ebene zusammen. Doppelte Form und platzieren Sie sie unter der ursprünglichen verzierten Form. Drücken Sie Strg + I, um die Farbe umzukehren. Aktivieren Sie das Verschiebungswerkzeug und drücken Sie dann einmal den Pfeil nach unten, um es um 1 px nach unten zu verschieben.

Schritt 13: Fotoinformationen

Geben Sie Fotodaten in das Menüband ein.

Schritt 14: Navigation

Als Nächstes zeichnen wir einige Kreise für die Foliennavigation. Zeichnen Sie eine Kreisform mit Farbe: # 8d877c im unteren Teil des Farbbands.

Fügen Sie mit den folgenden Einstellungen den inneren Schatten hinzu.

Das ist das Ergebnis. Der Kreis wird jetzt zu einem flachen Loch.

Schritt 15

Halten Sie die Alt-Taste gedrückt und ziehen Sie die Kreisformebene, um sie zu kopieren.

Schritt 16

Setzen wir die aktive Bedingung für einen dieser Links. Wählen Sie einen Kreis aus und ändern Sie die Farbe in # bebbb5. Fügen Sie den inneren Schatten, die Verlaufsüberlagerung und den Strich hinzu.

Schritt 17

Halten Sie die Strg-Taste gedrückt und klicken Sie im Ebenenbedienfeld auf die Miniaturansicht der Farbbandbasis. Erstellen Sie eine neue Ebene unter dem Farbband und füllen Sie sie mit Schwarz. Aktivieren Sie das Verschiebungswerkzeug und drücken Sie ein paar Mal auf den Nach-links- und den Abwärtspfeil.

Schritt 18

Erweichen Sie es, indem Sie einen Gaußschen Unschärfefilter ausführen. Klicken Sie auf Filter> Unschärfe> Gaußsche Unschärfe.

Schritt 19

Platzieren Sie den Bandschatten über der Rahmenebene des Schiebereglers. Konvertieren Sie es in Schnittmaske, indem Sie Strg + Alt + G drücken.

Schritt 20

Reduziere die Deckkraft von Schatten auf 40%.

Schritt 21

Farbbandschatten auf Hintergrund. Reduziere die Deckkraft auf 20%.

Schritt 22

Verwenden Sie das Stiftwerkzeug, um einen Teil des Farbbands zurückzuziehen. Setzen Sie die Farbe auf # b68f63. Legen Sie es hinter den Schieberegler.

Dies ist das Ergebnis bei 100% Vergrößerung.

Schritt 23

Duplizieren Sie die soeben erstellte Form und platzieren Sie sie hinter dem Band. Kippen Sie es vertikal.

Schritt 24: Endergebnis in Photoshop

Dies ist unser Endergebnis in Photoshop. Als Nächstes werden wir es weiterhin in einen funktionalen Schieberegler codieren.

Teil II - Konvertieren in HTML / CSS

Schritt 25 - Einrichten von Dateien

Erstellen Sie einen neuen Ordner mit dem Namen Mein Foto-Slider. Erstellen Sie in diesem Ordner ein neues leeres HTML-Dokument (index.html), leeres Stylesheet (style.css) und Ordner für Bilder (img). Die jQuery-Bibliothek und das Nivo Slider-Plugin müssen ebenfalls in den Ordner aufgenommen werden. Da wir HTML5-Markup verwenden, müssen wir einen IE-Hack hinzufügen, um HTML5-Elemente im IE 8 oder darunter zu aktivieren. Wir verwenden ein Skript namens Modernizr, um den IE unterzubringen.

Schritt 26 - Grundlegendes HTML-Markup

Öffnen index.html in Ihrem bevorzugten Code-Editor. Definiere das DOKTYP (wir verwenden HTML5), Kopf Elemente (wo wir den Titel der Dokumente hinzufügen und CSS und JavaScript verknüpfen (jQuery Library, Nivo Slider und Modernizr) div Wrapper (um das Layout zu zentrieren), Header Element und Folienverpackung.

Schritt 27 - Schneiden Sie die PSD

Öffnen Sie das PSD-Modell und schneiden Sie alle erforderlichen Bilder heraus. Für das Bild greifen wir folgende Bilder von sxc.hu auf (Login erforderlich, falls Sie noch keinen Account haben, können Sie sich kostenlos anmelden). Ändern Sie die Größe aller Bilder auf 920 × 430 px. Legen Sie alle Bilder in den Bildordner (img).

1. Rinjani von Ciaciya
2. Stupa von Agnes Sim
3. Tally von Nino Satria
4. Angebote von Timo Balk
5. Uluwatu-Bali von Aris Wjay

Schritt 28 - Header erstellen

Fügen Sie den folgenden Code dazwischen hinzu

und

.

 
 Meine Fotodias 
 

Jetzt fügen wir der Kopfzeile Stil hinzu. Außerdem fügen wir den Stil für die Body- und Wrapper-Elemente hinzu. Fügen Sie alle Stile in das Stylesheet ein, style.css.

 / * Basic Styling * / body Hintergrund: transparente URL (img / bg.jpg); Schriftart: 15px / 2 "Adobe Caslon Pro", Georgia, Serif; Marge: 0; Polsterung: 0;  a gliederung: 0 keine #pagewrap margin: 120px auto; Polsterung: 0; Position: relativ; Höhe: 100%; Breite: 960px;  header display: block; schweben rechts; Rand rechts: 40px; Breite: 192px; z-Index: 52; Position: relativ;  h1 Hintergrund: transparente URL (img / separator.png) Wiederholung Mitte unten; / * Füge eine Trennlinie unter dem Titel hinzu. * / Font-size: 18px; Schriftdicke: fett; Höhe: 70px; Zeilenhöhe: 1,1; Marge: 55px 10px 0; Text ausrichten: Mitte; Text-Transformation: Großbuchstaben;  

Schritt 29 - Foto-Slider hinzufügen

Jetzt fügen wir dem Hauptteil unseres Dokuments, dem Foto-Schieberegler, Code hinzu. Fügen wir zuerst die Fotos hinzu. Fügen Sie den folgenden Code dazwischen ein

.

Fügen Sie dann die Multifunktionsleiste und die Bildunterschrift für die Fotos hinzu.

 
 
 Fotograf:
 Enrico Nunziati
 Ort:
 Namibische Wüste
 Modell:
 Dead Vlei
 Datum:
 18. März 2011 
 
 Fotograf:
 Lina Dhammanari
 Ort:
 Lombok Island, Indonesien
 Modell:
 Berg Rinjani
 Datum:
 8. Mai 2008 
 
 Fotograf:
 Agnes Sim
 Ort:
 Borobudur, Indonesien
 Modell:
 Big Stupa
 Datum:
 12. Juni 2008 
 
 Fotograf:
 Nino Satria
 Ort:
 Taman Safari Indonesien
 Modell:
 Tally Giraffe
 Datum:
 16. august 2009 
 
 Fotograf:
 Timo Balk
 Ort:
 Ubud, Bali, Indonesien
 Modell:
 Angebote
 Datum:
 20. Dezember 2009 
 
 Fotograf:
 Aris Wjay
 Ort:
 Uluwatu-Bali
 Modell:
 Wunderschöner Strand
 Datum:
 20. Juli 2011 
 

Nun, wenn wir uns öffnen index.html Im Browser haben wir so etwas:

Schritt 30

Das Erscheinungsbild des Schiebereglers muss noch mit CSS korrigiert werden.

 #slidewrap position: absolute; #slider position: relative; Höhe: Auto; Breite: 920px; Rahmen: 10px fest #fff; Box-Schatten: 0 0 5px # 444; Marge: 10px;  .ribbon background: transparente URL (img / info-bg.png) no-repeat; Höhe: 482px; Breite: 192px; Position: absolut; rechts: 40px; oben: -3px; z-Index: 50;  #slider img position: absolut; oben: 0px; links: 0px; Anzeige: keine;  

Das haben wir jetzt.

Momentan haben wir das Nivo Slider Plugin verlinkt, aber wir haben das Skript nicht angeschlossen. Lassen Sie uns also das Skript zusammenfügen, indem Sie diese JavaScript-Funktionen dazwischen einfügen und Element.

Schritt 31: Slider Style

Der letzte Schritt ist das Hinzufügen des Stils des Schiebereglers.

 / * Die Nivo Slider-Styles * / .nivoSlider position: relative;  .nivoSlider img position: absolut; oben: 0px; links: 0px;  / * Wenn ein Bild in einen Link eingebunden ist * / .nivoSlider a.nivo-imageLink position: absolute; oben: 0px; links: 0px; Breite: 100%; Höhe: 100%; Grenze: 0; Polsterung: 0; Marge: 0; z-Index: 6; Anzeige: keine;  / * Die Slices und Boxen im Slider * / .nivo-slice display: block; Position: absolut; z-Index: 5; Höhe: 100%;  .nivo-box display: block; Position: absolut; z-Index: 5;  .nivo-directionNav Anzeige: keine! wichtig .nivo-html-caption Anzeige: keine;  .nivo-caption position: absolut; rechts: 20px; Text ausrichten: Mitte; oben: 130px; Breite: 192px; z-Index: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: absolute; unten: 10px; rechts: 20px; Höhe: 15px; Breite: 192px; Text ausrichten: Mitte; Bildschirmsperre; Z-Index: 51;  .nivo-controlNav a background: Transparente URL (img / button.png) Wiederholungszentrum Mitte; Anzeige: Inline-Block; Höhe: 14px; Breite: 14px; Text-Gedankenstrich: -9999px; Cursor: Zeiger;  .nivo-controlNav .active background: transparente URL (img / button_active.png);  

Endergebnis + Download

Dies ist unser Endergebnis. Klicken Sie hier, um die Arbeitsdemo zu sehen.

Kann einen bestimmten Schritt nicht erreichen? Hier sind die PSD-Datei und das vollständige Projekt des Ergebnisses zum Testen und Spielen.

• PSD-Datei für den Bildslider
• Image Slider Tutorial Schließen Sie das Projekt ab