Sådan opretter du en billedskyder ved hjælp af Photoshop & jQuery

Det er utvivlsomt, at billedskyderen er et af de mest almindeligt anvendte elementer i virksomhedswebdesignet på grund af dets relativt store størrelse, der er i stand til at tegne den besøgendes opmærksomhed, når de ankommer til stedet. Selv om internettet er begyndt at genoverveje brugen af billedskyderen, anses det stadig for at være et must-learn for nyskaberen af webdesignindustrien.

I denne webdesigntutorial lærer vi at oprette brugerdefineret billedskyder ovenfor ved hjælp af Photoshop, som du kan forhåndsvise det endelige resultat herfra. Ikke alene vil vi illustrere det i Photoshop, vi vil også gøre det til et funktionelt design ved at konvertere det til HTML / CSS og tilføje jQuery for dets fantastiske glidende effekt.

Lyder som en masse komplicerede bits involveret, men det er faktisk ret ligetil og meget let at forstå, lad os komme i gang så!

Mere interesseret i at vedtage en billedskyder og tilpasse den på vej? Her er indlæg dedikeret til dig.

Billedskyder: 23 jQuery Skydere
Billedskyder: 18 WordPress-plugins

Kom i gang

Til denne vejledning skal du bruge følgende ressourcer:

26 Repeatable Pixel Patterns fra PSDfreemium.
jQuery bibliotek
Nivo Slider plugin
Modernizr
Fundet papirstrukturer fra VandelayPremier
(Alternativ) 13 HQ Old Paper Textures fra overdosse
Rinjani af Ciaciya
Stupa af Agnes Sim
Tally af Nino Satria
Tilbud af Timo Balk
Uluwatu-Bali af Aris Wjay

Del I - Design af billedskyder

Trin 1: Opsætning af baggrund

Start med at oprette en ny fil med størrelse 1000 × 700 px. Fyld baggrund med farve # efc89e.

Tilføj Mønster Overlay ved hjælp af gratis pixel mønster fra PSDfreemium.

Trin 2: Slider Base

Aktivér rektangelværktøj. Opret et rektangel med størrelse 940 × 450 px. Du kan bruge enhver farve, det betyder ikke noget.

Dobbeltklik lag for at åbne dialogboksen Lagstil. Tilføj Layer Style Drop Shadow, Yder Glow og Stroke.

Dette er resultatet. Glidebasen har nu en flot ramme med blød skygge bagved den.

Trin 3

Tilføj et billede og læg det over skyderen. Tryk Ctrl + Alt + G for at konvertere det til Clipping Mask og indsæt billedet i skyderen.

Trin 4: Ribbon

Tegn et rektangelform med farve # f4e1ae, der skal bruges som et bånd.

Dobbeltklik på formens lag og aktiver Begræns og Emboss, Gradient Overlay og Pattern Overlay med følgende indstillinger.

Dette er resultatet efter tilføjelse af lagstile.

Trin 5

Lad os tilføje papirtekstur på båndet for at gøre det mere realistisk. Placer tekstur oven på båndformen. Konverter det til Clipping Mask ved at trykke på Ctrl + Alt + G.

Trin 6

Lad os male nogle skygger og fremhæver båndet. Lav nyt lag over båndet. Mal sort på nederste del af båndet. Konverter det til Clipping Mask (Ctrl + Alt + G) og reducer dets opacitet til 10%.

Trin 7

Gentag den tidligere proces til den øverste del af båndet. Men denne gang tilføje højdepunkt ved at male hvid og reducere dens opacitet til 50%.

Trin 8: Sting

Aktivér blyantværktøj. Tryk på F5 for at åbne børsteindstillingen. Indstil penselstørrelse til 1 px og øg afstanden, indtil vi får en prikket linie på forhåndsvisningsområdet.

Trin 9

Tegn 1 px sort linje oven på båndet. Reducer opacitet til 20%. Duplikér lag ved at trykke på Ctrl + J. Tryk Ctrl + I for at omdanne dens farve. Forøg opacitet til 50%. Aktivér Flytværktøj, og tryk derefter på pil ned og venstre pil en gang for at nudge den.

Her er resultatet set ved 100% forstørrelse.

Trin 10

Gentag denne proces for at trække andre sømme på en anden side af båndet.

Trin 11: Tilføj udsmykkede form

Indstil forgrundsfarven til grå. Brug blød børste med størrelse 1 px til at tegne en udsmykkede form. Vær kreativ, du kan bruge enhver form, du kan lide. Ved siden af det tegner du en 1 px linie og derefter sletter den ydre kant ved hjælp af et blødt Eraser Tool. Duplikér linjen, vip den vandret og læg den på den anden side.

Trin 12

Vælg alle udsmykkede lag og fusér det i et lag ved at trykke på Ctrl + E. Dupliker form og læg den derefter under den originale udsmykkede form. Tryk Ctrl + I for at vende sin farve. Aktivér Flytværktøj, og tryk derefter på pil ned en gang for at skubbe det 1 px ned.

Trin 13: Fotooplysninger

Skriv fotodata inde i båndet.

Trin 14: Navigation

Derefter tegner vi nogle cirkler til diasnavigation. Tegn en cirkelform med farve: # 8d877c på nederste del af båndet.

Tilføj Inderskygge ved hjælp af følgende indstillinger.

Dette er resultatet. Cirklen bliver nu til et lavt hul.

Trin 15

Hold Alt og træk derefter cirkelformslag til at duplikere det.

Trin 16

Lad os sætte aktiv tilstand på en af disse links. Vælg en af cirklen og skift farve til # bebbb5. Tilføj inderskygge, overlejring og overfald.

Trin 17

Hold Ctrl, og klik derefter på miniaturebilledet i båndbasen i panelet Layers. Lav nyt lag under båndet og fyld det med sort. Aktivér Flytværktøj og tryk et par gange på venstre og ned pil.

Trin 18

Blødgør det ved at udføre Gaussian Blur filter. Klik på Filter> Blur> Gaussian Blur.

Trin 19

Placer båndskygge over skyderen rammelag. Konverter det til Clipping Mask ved at trykke på Ctrl + Alt + G.

Trin 20

Reducer skyggeopacitet til 40%.

Trin 21

Mal farvebåndskygge på baggrund. Reducer opacitet til 20%.

Trin 22

Brug Pen Tool til at trække en del af båndet tilbage. Indstil farven til # b68f63. Placer den bag skyderen.

Dette er resultatet set ved 100% forstørrelse.

Trin 23

Dupliker den form, vi netop har oprettet, og læg den bag toppen af båndet. Vend det lodret.

Trin 24: Slutresultat i Photoshop

Dette er vores endelige resultat i Photoshop. Dernæst vil vi fortsætte med at kode det til en funktionel skyder.

Del II - Konvertering til HTML / CSS

Trin 25 - Opsætning af filer

Opret en ny mappe, der hedder Min-Foto-Slider. Indsæt i denne mappe et nyt blankt HTML-dokument (index.html), blank stilark (style.css) og mappe til billeder (img). Vi skal også inkludere jQuery bibliotek og Nivo Slider plugin til mappen. Da vi bruger HTML5-markering, skal vi tilføje et IE-hack for at aktivere HTML5-elementer på IE 8 eller under. Vi bruger et script kaldet Modernizr for at rumme IE.

Trin 26 - Grundlæggende HTML Markup

Åben index.html i din foretrukne kode editor. Definer DOCTYPE (vi bruger HTML5), hoved elementer (hvor vi tilføjer titlen på dokumenterne og linket CSS og JavaScript (jQuery Library, Nivo Slider og Modernizr). Vi tilføjer også en div indpakning (for at centrere layoutet), header element og slide wrapper.

      Mine billedsider

Trin 27 - Skive PSD

Åbn PSD mockup og skar alle de nødvendige billeder ud. For billedet, lad os gribe følgende billeder fra sxc.hu (login påkrævet, hvis du ikke har en konto endnu, kan du tilmelde dig gratis). Ændre størrelse på alle billeder til 920 × 430 px. Sæt alle billederne i billedmappen (img).

Rinjani af Ciaciya
Stupa af Agnes Sim
Tally af Nino Satria
Tilbud af Timo Balk
Uluwatu-Bali af Aris Wjay

Trin 28 - Opret overskrift

Tilføj følgende kode mellem

  Mine billedsider

Lad os nu tilføje stil til overskriften. Vi tilføjer også stilen til krops- og indpakningselementerne. Sæt alle stilarter i stilarket, style.css.

 / * Basic Styling * / body baggrund: transparent url (img / bg.jpg); skrifttype: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; margin: 0; padding: 0;  en skitse: 0 ingen #pagewrap margin: 120px auto; padding: 0; position: relative; højde: 100%; bredde: 960px;  header display: block; flyde: højre; margin-højre: 40px; bredde: 192px; z-index: 52; position: relative;  h1 baggrund: gennemsigtig url (img / separator.png) no-repeat center bottom; / * Tilføj en separator linje under titlen * / font-size: 18px; font-weight: bold; højde: 70 pixels; line-height: 1.1; margin: 55px 10px 0; text-align: center; tekst-transform: uppercase;

Trin 29 - Tilføj foto skyder

Nu skal vi tilføje kode til hoveddelen af vores dokument, billedskyderen. Lad os tilføje billederne først. Placer følgende kode mellem

Og så føje båndet og billedteksten til billederne.

 
  Fotograf:
 Enrico Nunziati
 Beliggenhed:
 Namib ørkenen
 Model:
 Dead Vlei
 Dato:
 18. marts 2011 
  Fotograf:
 Lina Dhammanari
 Beliggenhed:
 Lombok Island, Indonesien
 Model:
 Mount Rinjani
 Dato:
 8. maj 2008 
  Fotograf:
 Agnes Sim
 Beliggenhed:
 Borobudur, Indonesien
 Model:
 Stor Stupa
 Dato:
 12. juni 2008 
  Fotograf:
 Nino Satria
 Beliggenhed:
 Taman Safari Indonesien
 Model:
 Tally Giraffe
 Dato:
 16. august 2009 
  Fotograf:
 Timo Balk
 Beliggenhed:
 Ubud, Bali, Indonesien
 Model:
 tilbud
 Dato:
 20. december 2009 
  Fotograf:
 Aris Wjay
 Beliggenhed:
 Uluwatu-Bali
 Model:
 Smuk strand
 Dato:
 20. juli 2011

Nu, hvis vi åbner index.html i browseren har vi noget som dette:

Trin 30

Vi skal stadig rette gliderenes udseende ved hjælp af CSS.

 #slidewrap position: absolute; #slider position: relative; højde: auto; bredde: 920px; grænse: 10px solid #fff; box-skygge: 0 0 5px # 444; margin: 10px;  .ribbon baggrund: transparent url (img / info-bg.png) no-repeat; højde: 482px; bredde: 192px; position: absolut; højre: 40px; top: -3px; z-index: 50;  #slider img position: absolute; top: 0px; venstre: 0px; display: none;

Det er det, vi har nu.

I øjeblikket har vi linket Nivo skyderen plugin, men vi har ikke tilsluttet scriptet. Så lad os tilslutte scriptet ved at tilføje disse JavaScript-funktioner mellem og element.

Trin 31: Slider Style

Det sidste trin er at tilføje skyderens stil.

 / * Nivo Slider stilarterne * / .nivoSlider position: relative;  .nivoSlider img position: absolute; top: 0px; venstre: 0px;  / * Hvis et billede er pakket ind i et link * / .nivoSlider a.nivo-imageLink position: absolute; top: 0px; venstre: 0px; bredde: 100%; højde: 100%; kant: 0; padding: 0; margin: 0; z-index: 6; display: none;  / * Skiverne og boksene i skyderen * / .nivo-skive display: block; position: absolut; z-index: 5; højde: 100%;  .nivo-box display: block; position: absolut; z-index: 5;  .nivo-directionNav display: none! important .nivo-html-caption display: none;  .nivo-caption position: absolute; højre: 20px; text-align: center; top: 130px; bredde: 192px; z-index: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: kursiv .nivo-controlNav position: absolute; bottom: 10px; højre: 20px; højde: 15px; bredde: 192px; text-align: center; display: block; z-index: 51;  .nivo-controlNav en baggrund: transparent url (img / button.png) no-repeat center center; display: inline-block; højde: 14px; bredde: 14px; tekst-led: -9999px; cursor: pointer;  .nivo-controlNav .active background: transparent url (img / button_active.png);

Endelig Resultat + Download

Dette er vores endelige resultat, klik her for at se den aktive demo.

Kan man ikke nå et bestemt trin? Her er resultatet PSD-fil & komplet projekt for dig at teste og lege med.

Billede Slider Tutorial PSD File
Billede Slider Tutorial Complete Project