Kako ustvariti slikovni drsnik z uporabo Photoshop & jQuery

Nedvomno je slikovni drsnik eden od najpogosteje uporabljenih elementov v poslovnem spletnem oblikovanju, zaradi svoje sorazmerno velike velikosti, ki lahko privabi obiskovalčevo pozornost, ko pridejo na spletno mesto. Čeprav se je splet začel ponovno premišljati o uporabnosti slikovnega drsnika, se še vedno šteje za obveznega za novinca v industriji spletnega oblikovanja..

V tem priročniku za spletno oblikovanje se bomo naučili ustvariti slikovni drsnik po meri, ki ga uporabljate v Photoshopu, kjer si lahko tukaj ogledate končni rezultat. Ne samo, da jo bomo ponazorili v Photoshopu, temveč ga bomo spremenili v funkcionalno zasnovo s pretvorbo v HTML / CSS in dodali jQuery za njegov izjemen drsni učinek..

Zveni kot veliko zapletenih bitov, vendar je v resnici precej enostavno in zelo lahko razumljivo, začnimo!

Več vas zanima, kako sprejeti slikovni drsnik in ga prilagoditi na poti? Tukaj so objavljena delovna mesta za vas.

• Image Slider: 23 jQuery drsniki
• Image Slider: 18 vtičnikov za WordPress

Kako začeti

Za to vadnico potrebujete naslednje vire:

• 26 Ponovljivi vzorci pikslov iz PSDfreemium.
• jQuery knjižnica
• Nivo Slider plugin
• Modernizr
• Najdene teksture papirja iz VandelayPremier
• (Alternativna) 13 HQ Stara tekstura papirja iz overdosse
• Rinjani by Ciaciya
• Stupa Agnes Sim
• Tally Nino Satria
• Ponudbe Tima Balka
• Uluwatu-Bali z Aris Wjay

Del I - Oblikovanje slikovnega drsnika

1. korak: Nastavitev ozadja

Začnite tako, da ustvarite novo datoteko velikosti 1000 × 700 px. Izpolnite ozadje z barvo # efc89e.

Dodajte Prekrivanje vzorca z brezplačnim vzorcem pikslov iz PSDfreemium.

2. korak: drsnik

Aktivirajte pravokotno orodje. Ustvarite pravokotnik velikosti 940 × 450 px. Uporabite lahko katerokoli barvo, ni pomembno.

Dvokliknite plast, da odprete pogovorno okno Layer Style. Dodajte slog padajočega sloja, zunanji sijaj in kap.

To je rezultat. Baza drsnika ima zdaj za njo lep okvir z mehko senco.

3. korak

Dodajte fotografijo in jo postavite nad drsnik. Pritisnite Ctrl + Alt + G, da ga pretvorite v Clipping Mask in vstavite fotografijo v drsnik.

4. korak: Trak

Narišite pravokotno obliko z barvo # f4e1ae, ki bo uporabljena kot trak.

Dvokliknite sloj oblike in aktivirajte funkcijo Bevel and Emboss, Gradient Overlay in Pattern Overlay z naslednjimi nastavitvami.

To je rezultat po dodajanju slojev slojev.

Korak 5

Dodamo papirno teksturo na trak, da bo bolj realističen. Postavite teksturo na vrh traku. Pretvorite ga v Clipping Mask s pritiskom na Ctrl + Alt + G.

6. korak

Risnimo nekaj senc in poudarkov na traku. Nad trakom ustvarite nov sloj. Na spodnjem delu traku pobarvajte črno barvo. Pretvorite ga v odrezalno masko (Ctrl + Alt + G) in nato zmanjšajte njeno neprosojnost na 10%.

7. korak

Ponovite prejšnji postopek na zgornji del traku. Toda tokrat dodajte osvetlitev z barvanjem belo in nato zmanjšajte njegovo neprosojnost na 50%.

8. korak: Šivi

Aktivirajte orodje svinčnika. Pritisnite F5, da odprete nastavitev Brush. Nastavite velikost krtače na 1 px in povečajte razmik, dokler ne dobimo pikčasto črto na območju predogleda.

9. korak

Narišite 1 px črno črto na vrhu traku. Zmanjšajte njegovo neprosojnost na 20%. Podvojite plast tako, da pritisnete Ctrl + J. Pritisnite Ctrl + I, da obrnete njeno barvo. Povečajte opaciteto na 50%. Aktivirajte Move Tool in nato enkrat pritisnite puščico navzdol in puščico v levo, da jo potisnete.

Tukaj je rezultat, gledan pri 100-odstotni povečavi.

Korak 10

Ponovite ta postopek, da narišete druge šive na drugi strani traku.

11. korak: Dodajte okrašeno obliko

Nastavite barvo ospredja na sivo. Uporabite mehko krtačo velikosti 1 px, da narišete okrašeno obliko. Bodite ustvarjalni, lahko uporabite poljubno obliko. Ob njem narišite 1 px linijo in nato z mehkim orodjem Eraser odstranite njen zunanji rob. Podvojite črto, obrnite jo vodoravno in jo postavite na drugo stran.

Korak 12

Izberite vse okrašene plasti in jih združite v eno plast s pritiskom na Ctrl + E. Podvoji obliko in jo postavite pod prvotno okrašeno obliko. Pritisnite Ctrl + I, da obrnete njegovo barvo. Aktivirajte Move Tool in enkrat pritisnite puščico navzdol, da jo potisnete za 1 px navzdol.

13. korak: Informacije o fotografiji

Vnesite podatke o fotografiji znotraj traku.

14. korak: Navigacija

Nato bomo narisali nekaj krogov za drsno navigacijo. Narišite obliko kroga z barvo: # 8d877c na spodnjem delu traku.

Dodajte Inner Shadow z naslednjimi nastavitvami.

To je rezultat. Krog se zdaj spreminja v plitko luknjo.

Korak 15

Držite Alt in nato povlecite plast oblike kroga, da jo podvojite.

Korak 16

Nastavimo aktivno stanje na eni od teh povezav. Izberite enega od krogov in spremenite njegovo barvo na # bebbb5. Dodajte notranjo senco, prosojni prekrivni element in obris.

Korak 17

Pridržite tipko Ctrl in nato kliknite sličico traku na plošči Plasti. Pod trakom ustvarite novo plast in jo napolnite s črno. Aktivirajte Move Tool in nekajkrat pritisnite puščico levo in dol.

Korak 18

Zmehča ga z uporabo Gaussian Blur filtra. Kliknite Filter> Blur> Gaussian Blur.

Korak 19

Postavite senčilo traku nad plast drsnika okvirja. Pretvorite ga v Clipping Mask s pritiskom na Ctrl + Alt + G.

Korak 20

Zmanjšajte nepreglednost senc na 40%.

21. korak

Barvni trak sence na ozadju. Zmanjšajte njeno neprosojnost na 20%.

Korak 22

Uporabite orodje za pisalo, da povlečete zadnji del traku. Nastavite barvo na # b68f63. Postavite ga za drsnik.

To je rezultat, ki ga vidite pri 100-odstotni povečavi.

Korak 23

Podvojite obliko, ki smo jo pravkar ustvarili, in jo postavite za vrh traku. Obrnite ga navpično.

24. korak: Končni rezultat v Photoshopu

To je naš končni rezultat v Photoshopu. Nato ga bomo še naprej kodirali v funkcionalni drsnik.

Del II - Pretvorba v HTML / CSS

25. korak - Nastavitev datotek

Ustvarite novo imenovano mapo My-Photo-Slider. V tej mapi ustvarite nov prazen dokument HTML (index.html), prazen slogovni slog (style.css) in mapo za slike (img). V mapo moramo vključiti tudi knjižnico jQuery in Nivo Slider. Ko uporabljamo oznako HTML5, moramo dodati IE hack, da omogočimo elemente HTML5 na IE 8 ali spodaj. Za prilagoditev IE bomo uporabili skript, imenovan Modernizr.

Korak 26 - Osnovna oznaka HTML

Odprto index.html v priljubljenem urejevalniku kode. Določite DOCTYPE (uporabljamo HTML5), glavo elementov (kjer dodamo naslov dokumentov in povezavo CSS in JavaScript (knjižnica jQuery, Nivo Slider in Modernizr). div ovoj (za centriranje postavitve), glavo element, in ovoj.

Korak 27 - Rezanje PSD

Odprite model PSD in izrežite vse potrebne slike. Za sliko, zgrabimo naslednje slike iz sxc.hu (potrebna je prijava, če še nimate računa, se lahko prijavite brezplačno). Vse slike lahko spremenite na 920 × 430 px. Vstavite vse slike v mapo s slikami (img).

1. Rinjani by Ciaciya
2. Stupa Agnes Sim
3. Tally Nino Satria
4. Ponudbe Tima Balka
5. Uluwatu-Bali z Aris Wjay

Korak 28 - Ustvari glavo

Dodajte naslednje kode med

in

.

 
 Moji foto diapozitivi 
 

Sedaj dodamo slog v glavo. Dodamo tudi slog za telo in elemente ovojnice. Postavite vse sloge v slogovno tabelo, style.css.

 / * Osnovno oblikovanje * / telo ozadje: transparentni URL (img / bg.jpg); font: 15px / 2 'Adobe Caslon Pro', Gruzija, Serif; margin: 0; oblazinjenje: 0;  a outline: 0 none #pagewrap margin: 120px auto; oblazinjenje: 0; položaj: relativna; višina: 100%; širina: 960px;  header display: block; float: desno; margin-right: 40px; širina: 192px; z-indeks: 52; položaj: relativna;  h1 ozadje: transparentni url (img / separator.png) sredinsko dno brez ponovitve; / * Dodajte ločilno črto pod naslovom * / velikost pisave: 18px; font-weight: krepko; višina: 70px; line-height: 1.1; margin: 55px 10px 0; text-align: center; text-transform: velike črke;  

29. korak - Dodajte fotografski drsnik

Sedaj bomo dodali kodo glavnemu delu našega dokumenta, drsniku za fotografije. Najprej dodamo fotografije. Naslednjo kodo postavite med

.

Nato dodajte trak in napis za fotografije.

 
 
 Fotograf:
 Enrico Nunziati
 Lokacija:
 Namibska puščava
 Model:
 Mrtvi Vlei
 Datum:
 18. marec 2011 
 
 Fotograf:
 Lina Dhammanari
 Lokacija:
 Otok Lombok, Indonezija
 Model:
 Gora Rinjani
 Datum:
 8. maj 2008 
 
 Fotograf:
 Agnes Sim
 Lokacija:
 Borobudur, Indonezija
 Model:
 Velika Stupa
 Datum:
 12. junij 2008 
 
 Fotograf:
 Nino Satria
 Lokacija:
 Taman Safari Indonezija
 Model:
 Tally Giraffe
 Datum:
 16. avgust 2009 
 
 Fotograf:
 Timo Balk
 Lokacija:
 Ubud, Bali, Indonezija
 Model:
 Ponudbe
 Datum:
 20. december 2009 
 
 Fotograf:
 Aris Wjay
 Lokacija:
 Uluwatu-Bali
 Model:
 Lepa plaža
 Datum:
 20. julij 2011 
 

Zdaj, če se odpremo index.html v brskalniku imamo nekaj takega:

Korak 30

Še vedno moramo popraviti videz drsnika s pomočjo CSS.

 #slidewrap position: absolute; #slider position: relative; višina: avto; širina: 920px; obroba: 10px trdna #fff; box-shadow: 0 0 5px # 444; margin: 10px;  .ribbon ozadje: transparentni url (img / info-bg.png) brez ponavljanja; višina: 482px; širina: 192px; položaj: absolutno; desno: 40px; vrh: -3px; z-indeks: 50;  #slider img position: absolute; vrh: 0px; levo: 0px; prikaz: nič;  

To imamo zdaj.

Trenutno smo povezali drsnik Nivo, vendar nismo povezali skripta. Zato povežimo skript z dodajanjem teh funkcij JavaScript in element.

Korak 31: Slog drsnika

Zadnji korak je dodajanje sloga drsnika.

 / * Slogi Nivo Slider * / .nivoSlider position: relative;  .nivoSlider img position: absolute; vrh: 0px; levo: 0px;  / * Če je slika zavita v povezavo * / .nivoSlider a.nivo-imageLink položaj: absolutno; vrh: 0px; levo: 0px; širina: 100%; višina: 100%; meja: 0; oblazinjenje: 0; margin: 0; z-indeks: 6; prikaz: nič;  / * Rezine in polja v drsniku * / .nivo-slice display: block; položaj: absolutno; z-indeks: 5; višina: 100%;  .nivo-box display: block; položaj: absolutno; z-indeks: 5;  .nivo-directionNav display: none! important .nivo-html-napis display: none;  .nivo-napis položaj: absolutno; desno: 20px; text-align: center; vrh: 130px; širina: 192px; z-indeks: 60;  .nivo-napis p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav položaj: absolutno; spodaj: 10px; desno: 20px; višina: 15px; širina: 192px; text-align: center; prikaz: blok; z-indeks: 51;  .nivo-controlNav a ozadje: transparentno url (img / button.png) središče brez ponovitve; prikaz: inline-block; višina: 14px; širina: 14px; text-indent: -9999px; kazalec: kazalec;  .nivo-controlNav .active ozadje: transparentni URL (img / button_active.png);  

Končni rezultat + prenos

To je naš končni rezultat, kliknite tukaj in si oglejte delovni demo.

Ne morete doseči določenega koraka? Tukaj je PSD datoteka rezultatov in celoten projekt, s katerim boste testirali in igrali.

• Slika Slider Tutorial PSD datoteka
• Image Slider Tutorial Complete Project