Kaip sukurti „Image Slider“ naudojant „Photoshop“ ir „jQuery“

Be abejo, vaizdo slankiklis yra vienas iš dažniausiai naudojamų verslo žiniatinklio dizaino elementų dėl savo santykinai didelio dydžio, galinčio atkreipti lankytojo dėmesį, kai jie atvyksta į svetainę. Nors internetas pradėjo persvarstyti vaizdo slankiklio naudingumą, jis vis dar laikomas privalomuoju mokymu interneto dizaino pramonės naujokui.

Šiame žiniatinklio dizaino mokyme mes sužinosime aukščiau esantį „Photoshop“, kad galėtumėte peržiūrėti galutinį rezultatą iš čia. Mes ne tik ją iliustruosime „Photoshop“, bet ir pakeisime jį į HTML / CSS ir pridedame „jQuery“ už savo nuostabų slankųjį efektą..

Skamba kaip daug sudėtingų bitų, tačiau iš tikrųjų tai gana paprasta ir labai paprasta suprasti, pradėkime tada!

Didesnis susidomėjimas priimant vaizdo slankiklį ir pritaikykite jį kelyje? Čia yra jums skirtų pranešimų.

Vaizdo slankiklis: 23 jQuery sliders
Image Slider: 18 „WordPress“ papildinių

Darbo pradžia

Dėl šios pamokos jums reikės šių išteklių:

26 Pakartojami pikselių modeliai iš PSDfreemium.
jQuery biblioteka
„Nivo Slider“ papildinys
Modernizr
Rasta popieriaus tekstūros iš VandelayPremier
(Alternatyva) 13 HQ senosios popieriaus tekstūros iš perdozavimo
Ciaciya Rinjani
Agnes Sim Stupa
Tino Nino Satria
Timo Balko pasiūlymai
Uluwatu-Bali - Aris Wjay

I dalis. Vaizdo slankiklio projektavimas

1 veiksmas: fono nustatymas

Pradėkite kurti naują failą, kurio dydis yra 1000 × 700 px. Užpildykite fono spalvą # efc89e.

Pridėti modelio perdangą naudodami nemokamą pikselių modelį iš PSDfreemium.

2 žingsnis: slankiklio bazė

Aktyvinti stačiakampio įrankį. Sukurkite stačiakampį, kurio dydis 940 × 450 px. Galite naudoti bet kokią spalvą, nesvarbu.

Dukart spustelėkite sluoksnį, kad atidarytumėte dialogo langą Sluoksnio stilius. Pridėti sluoksnio stiliaus lašas šešėlis, išorinis švytėjimas ir smūgis.

Tai yra rezultatas. Dabar slankiklį sudaro gražus rėmas su minkštu šešėliu.

3 žingsnis

Pridėti nuotrauką ir padėkite ją virš slankiklio pagrindo. Paspauskite „Ctrl“ + „Alt“ + G, kad konvertuoti jį į iškirpimo kaukę ir įterpkite nuotrauką į slankiklį.

4 žingsnis: juosta

Nupieškite stačiakampio formą su spalva # f4e1ae, kad būtų naudojamas kaip juostelė.

Dukart spustelėkite formos sluoksnį ir įjunkite „Bevel“ ir „Emboss“, „Gradient Overlay“ ir „Pattern Overlay“ su šiais nustatymais.

Tai yra rezultatas po sluoksnių stilių pridėjimo.

5 veiksmas

Pridėkime popieriaus tekstūrą ant juostelės, kad ji taptų realesnė. Padėkite tekstūrą ant juostelės formos. Konvertuokite jį į iškirpimo kaukę paspausdami Ctrl + Alt + G.

6 veiksmas

Paimkime kai kurias šešėles ir akcentus ant juostelės. Sukurkite naują sluoksnį virš juostelės. Dažai juoda ant apatinės juostos dalies. Konvertuokite jį į iškirpimo kaukę (Ctrl + Alt + G) ir sumažinkite jo nepermatomumą iki 10%.

7 žingsnis

Pakartokite ankstesnį procesą į viršutinę juostos dalį. Bet šį kartą pridėkite akcentą, nudažydami baltą, o tada sumažinkite jo neskaidrumą iki 50%.

8 žingsnis: siūlių

Suaktyvinti pieštuko įrankį. Paspauskite F5, kad atidarytumėte šepetį. Nustatykite šepečio dydį iki 1 px ir padidinkite atstumą, kol peržiūros zonoje bus gauta punktyrinė linija.

9 žingsnis

Lygiosios juostos viršuje pieškite 1 px juodą liniją. Sumažinkite jo nepermatomumą iki 20%. Paspauskite Ctrl + J. Paspauskite Ctrl + I, kad apverskite jo spalvą. Padidinkite neskaidrumą iki 50%. Aktyvinkite perkėlimo įrankį ir vieną kartą paspauskite rodyklę žemyn ir rodyklę kairėn.

Štai rezultatas žiūrimas 100% padidinimu.

10 žingsnis

Pakartokite šį procesą, kad atkreiptumėte kitas siūles į kitą juostos pusę.

11 žingsnis: pridėkite puošną formą

Nustatykite priekinio vaizdo spalvą į pilką. Naudokite minkštą šepetėlį, kurio dydis 1 px, kad pieštumėte puošną formą. Būkite kūrybingi, galite naudoti bet kurią norimą formą. Šalia nupieškite 1 px eilutę ir ištrinkite išorinį kraštą naudodami minkštą Eraser įrankį. Pasikartokite liniją, apversti jį horizontaliai ir įdėkite į kitą pusę.

12 žingsnis

Pasirinkite visus puošnus sluoksnius ir sujunkite jį į vieną sluoksnį paspausdami „Ctrl + E.“. Paspauskite Ctrl + I, kad apverstumėte spalvą. Aktyvuokite perkėlimo įrankį ir vieną kartą paspauskite rodyklę žemyn, kad jį išstumtumėte 1 px žemyn.

13 veiksmas: informacija apie nuotrauką

Įrašykite nuotraukų duomenis juostos viduje.

14 žingsnis: Navigacija

Toliau nubrėžsime kai kuriuos apskritimus, skirtus skaidrių navigacijai. Nubraižykite apskritimo formą su spalva: # 8d877c apatinėje juostos dalyje.

Pridėkite vidinį šešėlį naudodami šiuos nustatymus.

Tai yra rezultatas. Dabar apskritimas virsta seklia skylė.

15 žingsnis

Laikykite Alt ir vilkite apskritimo formos sluoksnį, kad jį kopijuotumėte.

16 veiksmas

Nustatykite aktyvią būseną vienoje iš šių nuorodų. Pasirinkite vieną iš rato ir pakeiskite jo spalvą į # bebbb5. Pridėti vidinį šešėlį, gradiento perdengimą ir smūgį.

17 žingsnis

Laikykite nuspaudę Ctrl ir spustelėkite sluoksnio pagrindo miniatiūrą sluoksnių skydelyje. Sukurkite naują sluoksnį po juostele ir užpildykite juodu. Aktyvinkite perkėlimo įrankį ir kelis kartus paspauskite rodyklę kairėn ir žemyn.

18 žingsnis

Sumažinkite jį, atlikdami „Gaussian Blur“ filtrą. Spustelėkite Filtruoti> Blur> Gaussian Blur.

19 žingsnis

Padėkite juostelės šešėlį virš slankiklio rėmo sluoksnio. Konvertuokite jį į iškirpimo kaukę paspausdami Ctrl + Alt + G.

20 veiksmas

Sumažinti šešėlio nepastovumą iki 40%.

21 veiksmas

Dažų juostos šešėlis ant fono. Sumažinkite jo nepastovumą iki 20%.

22 veiksmas

Naudokite „Pen Tool“, kad nubrėžtumėte juostelės dalį. Nustatykite jo spalvą į # b68f63. Uždėkite jį už slankiklio.

Tai yra rezultatas, peržiūrėtas 100% padidinimu.

23 žingsnis

Pasikartokite ką tik sukurtą formą ir padėkite ją už juostelės viršaus. Apverskite jį vertikaliai.

24 žingsnis: „Photoshop“ galutinis rezultatas

Tai galutinis rezultatas „Photoshop“. Toliau mes toliau jį koduosime į funkcinį slankiklį.

II dalis. Konvertavimas į HTML / CSS

25 veiksmas. Failų nustatymas

Sukurkite naują aplanką, pavadintą „My-Photo-Slider“. Šiame aplanke sukurkite naują tuščią HTML dokumentą (index.html), tuščias stilių lapas (style.css) ir aplanką atvaizdams (img). Taip pat į aplanką turime įtraukti jQuery biblioteką ir „Nivo Slider“ papildinį. Naudodami HTML5 žymėjimą, turime pridėti IE hack, kad įjungtume HTML5 elementus IE 8 ar žemiau. Mes pritaikysime scenarijų, pavadintą „Modernizr“, kad galėtume priimti IE.

26 žingsnis. Pagrindinis HTML žymėjimas

Atviras index.html jūsų mėgstamiausio kodo redaktoriuje. Nustatykite DOCTYPE (mes naudojame HTML5), galva elementai (kur pridedame dokumentų pavadinimą ir nuorodą CSS ir JavaScript (jQuery Library, Nivo Slider ir Modernizr). div apvyniojimas (išdėstymas išdėstomas į centrą), antraštė elementą ir skaidrių įvyniojimą.

      Mano nuotraukų skaidiniai

27 žingsnis

Atidarykite PSD maketą ir supjaustykite visus reikiamus vaizdus. Paveikslėlį paimkime nuotraukas iš sxc.hu (reikia prisijungti, jei dar neturite paskyros, galite užsiregistruoti nemokamai). Pakeiskite visus vaizdus iki 920 × 430 px. Įdėkite visus vaizdus į vaizdų aplanką (img).

Ciaciya Rinjani
Agnes Sim Stupa
Tino Nino Satria
Timo Balko pasiūlymai
Uluwatu-Bali - Aris Wjay

28 žingsnis - sukurkite antraštę

Tarp šių kodų pridėkite šiuos kodus

  Mano nuotraukų skaidiniai

Dabar pridėkime antraštės stilių. Mes taip pat pridedame kūno ir vyniojimo elementų stilių. Įdėkite visus stilius į stilių lentelę, style.css.

 / * Pagrindinis stilius * / kūnas fonas: skaidrus URL (img / bg.jpg); šriftas: 15px / 2 'Adobe Caslon Pro', Gruzija, Serifas; marža: 0; įdėklas: 0;  a kontūras: 0 nėra #pagewrap margin: 120px auto; įdėklas: 0; pozicija: santykinis; aukštis: 100%; plotis: 960px;  antraštė ekranas: blokas; float: right; paraštė dešinėje: 40px; plotis: 192px; z-indeksas: 52; pozicija: santykinis;  h1 fonas: skaidrus url (img / separator.png) ne kartoti vidurį; / * Pridėti pavadinimo eilutę žemiau pavadinimo * / šrifto dydžio: 18px; šrifto svoris: paryškintas; aukštis: 70px; linijos aukštis: 1.1; skirtumas: 55px 10px 0; teksto derinimas: centras; teksto transformavimas: didžiosios;

29 žingsnis. Pridėti nuotraukų slankiklį

Dabar mes pridėsime kodą prie pagrindinės mūsų dokumento dalies, nuotraukos slankiklio. Pirmiausia pridėkime nuotraukas. Tarp šių kodų įterpkite

Tada pridėkite juostą ir nuotraukų antraštę.

 
  Fotografas:
 Enrico Nunziati
 Vieta:
 Namibo dykuma
 Modelis:
 Dead Vlei
 Data:
 2011 m. Kovo 18 d 
  Fotografas:
 Lina Dhammanari
 Vieta:
 Lomboko sala, Indonezija
 Modelis:
 Rinjani kalnas
 Data:
 2008 m. Gegužės 8 d 
  Fotografas:
 Agnes Sim
 Vieta:
 Borobuduras, Indonezija
 Modelis:
 Didžioji stupa
 Data:
 2008 m. Birželio 12 d 
  Fotografas:
 Nino Satria
 Vieta:
 Taman Safari Indonezija
 Modelis:
 Tally žirafa
 Data:
 2009 m. Rugpjūčio 16 d 
  Fotografas:
 Timo Balk
 Vieta:
 Ubud, Balis, Indonezija
 Modelis:
 Pasiūlymai
 Data:
 2009 m. Gruodžio 20 d 
  Fotografas:
 Aris Wjay
 Vieta:
 Uluwatu-Bali
 Modelis:
 Gražus paplūdimys
 Data:
 2011 m. Liepos 20 d

Dabar, jei atidarysime index.html naršyklėje turime kažką panašaus:

30 žingsnis

Mums vis tiek reikia nustatyti slankiklio išvaizdą naudojant CSS.

 #slidewrap pozicija: absoliuti; #slider pozicija: santykinis; aukštis: auto; plotis: 920px; siena: 10px kietas #fff; dėžutės šešėlis: 0 0 5px # 444; skirtumas: 10px;  .ribbon fonas: skaidrus URL (img / info-bg.png) ne kartoti; aukštis: 482px; plotis: 192px; pozicija: absoliutus; dešinėje: 40px; viršuje: -3px; z-indeksas: 50;  #slider img pozicija: absoliutus; viršuje: 0px; kairėje: 0px; ekranas: nėra;

Štai ką mes turime dabar.

Šiuo metu mes susiejome „Nivo“ slankiklį, bet mes nesusitraukėme į scenarijų. Taigi prijunkite scenarijų, pridedant šias „JavaScript“ funkcijas ir elementas.

31 žingsnis: slankiklio stilius

Paskutinis žingsnis yra pridėti slankiklio stilių.

 / * „Nivo“ slankiklio stiliai * / .nivoSlider pozicija: santykinis;  .nivoSlider img pozicija: absoliutus; viršuje: 0px; kairėje: 0px;  / * Jei vaizdas įvyniotas į nuorodą * / .nivoSlider a.nivo-imageLink Position: absoliučios; viršuje: 0px; kairėje: 0px; plotis: 100%; aukštis: 100%; siena: 0; įdėklas: 0; marža: 0; z-indeksas: 6; ekranas: nėra;  / * Slankiklį * / .nivo-slice display: block; pozicija: absoliutus; z-indeksas: 5; aukštis: 100%;  .nivo-box display: block; pozicija: absoliutus; z-indeksas: 5;  .nivo-suunasNav ekranas: nėra! svarbu .nivo-html-caption display: none;  .nivo-caption pozicija: absoliutus; dešinėje: 20px; teksto derinimas: centras; viršuje: 130px; plotis: 192px; z-indeksas: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: kursyvu .nivo-controlNav pozicija: absoliutus; apačioje: 10px; dešinėje: 20px; aukštis: 15px; plotis: 192px; teksto derinimas: centras; ekranas: blokas; z-indeksas: 51;  .nivo-controlNav a background: transparent url (img / button.png) ne kartoti centrinį centrą; ekranas: inline-block; aukštis: 14px; plotis: 14px; teksto įtrauka: -9999px; žymeklis: žymeklis;  .nivo-controlNav .active background: skaidrus URL (img / button_active.png);

Galutinis rezultatas + atsisiuntimas

Tai mūsų galutinis rezultatas, spustelėkite čia, kad pamatytumėte darbo demonstraciją.

Ar negalite pasiekti tam tikro žingsnio? Čia yra rezultato PSD failas ir užbaigtas projektas, kurį galite patikrinti ir žaisti.

Paveikslėlio slankiklio pamokos PSD failas
„Image Slider“ mokymo programa Užbaigti projektą