Kako stvoriti klizač slike koristeći Photoshop & jQuery

Bez sumnje, klizač slika je jedan od najčešće korištenih elemenata u poslovnom web dizajnu, zbog svoje relativno velike veličine koja je u stanju privući pažnju posjetitelja nakon što stignu na stranicu. Iako je web počeo razmišljati o upotrebljivosti klizača slika, on se još uvijek smatra obaveznim učenikom za industriju web-dizajna.

U ovom vodiču za web-dizajn naučit ćemo stvoriti vlastiti klizač za slike iznad pomoću Photoshopa, od kojeg možete pregledati konačni rezultat. Ne samo da ćemo to ilustrirati u Photoshopu, već ćemo ga pretvoriti u funkcionalan dizajn pretvarajući ga u HTML / CSS i dodajući jQuery za njegov strašan efekt klizanja..

Zvuči kao puno kompliciranih bitova, ali zapravo je prilično jednostavno i lako razumljivo, počnimo onda!

Više vas zanima usvajanje klizača za slike i njegova prilagodba na putu? Evo postova posvećenih vama.

• Klizač slike: 23 jQuery Klizači
• Klizač slike: 18 dodataka za WordPress

Početak rada

Za ovaj tutorial trebat će vam sljedeći resursi:

• 26 Uzorci ponavljanja piksela iz PSDfreemium.
• JQuery knjižnica
• Nivo Slider čep
• Modernizr
• Pronađene teksture papira iz VandelayPremier
• (Alternativno) 13 HQ Stara tekstura papira iz predoziranja
• Rinjani by Ciaciya
• Stupa Agnes Sim
• Tally by Nino Satria
• Ponude Time Balka
• Uluwatu-Bali, Aris Wjay

Dio I - Projektiranje klizača slike

Korak 1: Postavljanje pozadine

Započnite stvaranjem nove datoteke veličine 1000 × 700 px. Ispunite pozadinu bojom # efc89e.

Dodaj sloj obrasca pomoću besplatnog uzorka piksela iz PSDfreemium.

Korak 2: Baza klizača

Aktivirajte pravokutnik. Stvorite pravokutnik veličine 940 × 450 px. Možete koristiti bilo koju boju, nije važno.

Dvaput kliknite sloj da biste otvorili dijaloški okvir Layer Style. Dodajte sjenku sloja sloja, vanjski sjaj i moždani udar.

To je rezultat. Baza klizača sada ima lijep okvir s mekom sjenom iza njega.

Korak 3

Dodajte fotografiju i postavite je iznad baze klizača. Pritisnite Ctrl + Alt + G da biste ga pretvorili u Clipping Mask i umetnite fotografiju u klizač.

Korak 4: Vrpca

Nacrtajte oblik pravokutnika s bojom # f4e1ae koja će se koristiti kao vrpca.

Dvaput kliknite sloj oblika i aktivirajte Bevel and Emboss, Gradient Overlay i Pattern Overlay sa sljedećim postavkama.

To je rezultat nakon dodavanja stilova sloja.

Korak 5

Dodajte papirnu teksturu na vrpcu kako bi bila realnija. Stavite teksturu na vrh vrpce. Pretvorite ga u Clipping Mask pritiskom na Ctrl + Alt + G.

Korak 6

Zamislimo neke sjene i istaknute dijelove na vrpci. Izradite novi sloj iznad vrpce. Na donjem dijelu vrpce obojite crno. Pretvorite ga u Clipping Mask (Ctrl + Alt + G) i zatim smanjite njezinu neprozirnost na 10%.

Korak 7

Ponovite prethodni postupak u gornjem dijelu vrpce. Ali ovaj put dodajte osvjetljenje bojanjem u bijelo, a zatim smanjite njegovu neprozirnost na 50%.

Korak 8: Šavovi

Aktivirajte alat Olovka. Pritisnite F5 da biste otvorili postavku Četka. Postavite veličinu kista na 1 px i povećajte razmak sve dok ne dobijemo točkastu liniju na području pregleda.

9. korak

Nacrtajte 1 px crnu crtu na vrhu vrpce. Smanjite njegovu neprozirnost na 20%. Dvostruki sloj pritisnite Ctrl + J. Pritisnite Ctrl + I da biste promijenili boju. Povećajte neprozirnost na 50%. Aktivirajte Move Tool, a zatim pritisnite strelicu prema dolje i strelicu lijevo kako biste je gurnuli.

Evo rezultata koji se gleda sa 100% uvećanjem.

Korak 10

Ponovite ovaj postupak za crtanje ostalih šavova na drugoj strani vrpce.

11. korak: Dodajte Oblikovan oblik

Postavite boju prednjeg plana u sivu. Koristite mekanu četku veličine 1 px za crtanje okićenog oblika. Budite kreativni, možete koristiti bilo koji oblik koji želite. Pokraj njega nacrtajte 1 px liniju i zatim obrišite vanjski rub pomoću mekog alata Eraser. Duplikirajte liniju, okrenite je vodoravno i postavite je na drugu stranu.

Korak 12

Odaberite sve okićene slojeve i spojite ih u jedan sloj pritiskom na Ctrl + E. Duplikat oblika i stavite ga u izvorni ukrašeni oblik. Pritisnite Ctrl + I da biste promijenili boju. Aktivirajte Move Tool i zatim pritisnite strelicu prema dolje kako biste je gurnuli 1 px prema dolje.

Korak 13: Informacije o fotografiji

Upišite podatke o fotografiji unutar vrpce.

Korak 14: Navigacija

Zatim ćemo nacrtati neke krugove za navigaciju slajdovima. Nacrtajte oblik kruga s bojom: # 8d877c na donjem dijelu vrpce.

Dodajte Inner Shadow pomoću sljedećih postavki.

To je rezultat. Krug se sada pretvara u plitku rupu.

Korak 15

Držite Alt, a zatim povucite sloj oblika kruga da biste ga duplicirali.

Korak 16

Postavimo aktivno stanje na jednoj od tih veza. Odaberite jedan od kruga i promijenite boju na # bebbb5. Dodajte unutarnju sjenu, sloj premaza i obris.

Korak 17

Držite Ctrl, a zatim kliknite na sličicu vrpce na ploči Slojevi. Napravite novi sloj ispod vrpce i napunite ga crnom. Aktivirajte Move Tool i nekoliko puta pritisnite strelicu lijevo i dolje.

Korak 18

Omekšajte ga izvođenjem Gaussian Blur filtra. Kliknite Filter> Blur> Gaussian Blur.

Korak 19

Postavite sjenku vrpce iznad sloja okvira klizača. Pretvorite ga u Clipping Mask pritiskom na Ctrl + Alt + G.

Korak 20

Smanjite neprozirnost sjene na 40%.

Korak 21

Bojanje vrpce sjena na pozadini. Smanjite njegovu neprozirnost na 20%.

Korak 22

Koristite Alat olovke za povlačenje dijela vrpce. Postavite boju na # b68f63. Stavite ga iza klizača.

To je rezultat koji se vidi pri uvećanju od 100%.

Korak 23

Udvostručite oblik koji smo upravo stvorili i smjestite ga iza vrha vrpce. Okrenite ga okomito.

Korak 24: Konačni rezultat u Photoshopu

Ovo je naš konačni rezultat u Photoshopu. Zatim ćemo je nastaviti kodirati u funkcionalni klizač.

Dio II - Pretvaranje u HTML / CSS

Korak 25 - Postavljanje datoteka

Stvorite novu mapu pod nazivom Moj-Foto-Slider. U ovoj mapi stvorite novi prazni HTML dokument (index.html), prazna lista stilova (style.css) i mapu za slike (img). Također trebamo uključiti jQuery knjižnicu i Nivo Slider plugin u mapu. Kako koristimo HTML5 oznaku, moramo dodati IE hak kako bismo omogućili HTML5 elemente na IE 8 ili niže. Koristit ćemo skriptu pod nazivom Modernizr da bismo prilagodili IE.

Korak 26 - Osnovna HTML oznaka

Otvorena index.html u omiljenom uređivaču koda. Definirajte DOCTYPE (koristimo HTML5), glava elemente (gdje dodamo naslov dokumenata i povezati CSS i JavaScript (jQuery knjižnica, Nivo Slider i Modernizr). div omot (za centriranje izgleda), Zaglavlje i omotač slajda.

Korak 27 - Rezanje PSD-a

Otvorite PSD maketu i isecite sve potrebne slike. Za sliku, uzmimo sljedeće slike sa sxc.hu (potrebna je prijava, ako još nemate račun, možete se besplatno prijaviti). Promijenite veličinu svih slika na 920 × 430 px. Stavite sve slike u mapu sa slikama (img).

1. Rinjani by Ciaciya
2. Stupa Agnes Sim
3. Tally by Nino Satria
4. Ponude Time Balka
5. Uluwatu-Bali, Aris Wjay

Korak 28 - Stvaranje zaglavlja

Dodajte sljedeći kôd između

i

.

 
 Moji foto slajdovi 
 

Sada dodajte stil u zaglavlje. Također dodajemo stil za tijelo i elemente omotača. Stavite sve stilove u stilsku ploču, style.css.

 / * Osnovni stil * / tijelo pozadina: prozirni URL (img / bg.jpg); font: 15px / 2 'Adobe Caslon Pro', Gruzija, Serif; margin: 0; padding: 0;  a outline: 0 none #pagewrap margin: 120px auto; padding: 0; Položaj: relativna; visina: 100%; širina: 960 x;  header display: block; float: right; margin-right: 40px; Širina: 192px; z indeks: 52; Položaj: relativna;  h1 background: transparent url (img / separator.png) središnje dno bez ponavljanja; / * Dodajte liniju za razdvajanje ispod naslova * / font-size: 18px; font-weight: podebljano; visina: 70 px; linija visina: 1,1; margina: 55px 10px 0; text-align: center; text-transformacija: velika slova;  

Korak 29 - Dodajte klizač za fotografije

Sada ćemo dodati kôd glavnom dijelu našeg dokumenta, klizaču fotografija. Prvo dodamo fotografije. Postavite sljedeći kôd između

.

Zatim dodajte vrpcu i natpis za fotografije.

 
 
 Fotograf:
 Enrico Nunziati
 Mjesto:
 Pustinja Namib
 Model:
 Mrtav Vlei
 Datum:
 18. ožujka 2011 
 
 Fotograf:
 Lina Dhammanari
 Mjesto:
 Otok Lombok, Indonezija
 Model:
 Planina Rinjani
 Datum:
 8. svibnja 2008 
 
 Fotograf:
 Agnes Sim
 Mjesto:
 Borobudur, Indonezija
 Model:
 Velika Stupa
 Datum:
 12. lipnja 2008 
 
 Fotograf:
 Nino Satria
 Mjesto:
 Taman Safari Indonezija
 Model:
 Tally Giraffe
 Datum:
 16. kolovoza 2009 
 
 Fotograf:
 Timo Balk
 Mjesto:
 Ubud, Bali, Indonezija
 Model:
 ponuda
 Datum:
 20. prosinca 2009 
 
 Fotograf:
 Aris Wjay
 Mjesto:
 Uluwatu-Bali
 Model:
 Lijepa plaža
 Datum:
 20. srpnja 2011 
 

Sada, ako otvorimo index.html u pregledniku imamo nešto poput ovoga:

Korak 30

Još uvijek moramo popraviti izgled klizača pomoću CSS-a.

 #slidewrap position: absolute; #slider position: relative; visina: auto; Širina: 920px; rub: 10px solid #fff; kutija-sjena: 0 0 5px # 444; margin: 10px;  .ribbon pozadina: transparentni url (img / info-bg.png) bez ponavljanja; visina: 482px; Širina: 192px; Položaj: na; desno: 40px; vrh: -3px; z indeks: 50;  #slider img position: absolute; vrh: 0 piksela; lijevo: 0 piksela; display: none;  

To je ono što sada imamo.

Trenutno smo povezali Nivo klizač, ali nismo povezali skriptu. Zato spojimo skriptu dodajući ove JavaScript funkcije između njih i element.

Korak 31: Stil klizača

Posljednji korak je dodavanje stila klizača.

 / * Nivo klizača * / .nivoSlider položaj: relativna;  .nivoSlider img position: absolute; vrh: 0 piksela; lijevo: 0 piksela;  / * Ako je slika umotana u link * / .nivoSlider a.nivo-imageLink position: absolute; vrh: 0 piksela; lijevo: 0 piksela; širina: 100%; visina: 100%; granica: 0; padding: 0; margin: 0; z indeks: 6; display: none;  / * Isječci i okviri u Slider * / .nivo-slice display: block; Položaj: na; z indeks: 5; visina: 100%;  .nivo-box display: block; Položaj: na; z indeks: 5;  .nivo-directionNav display: none! important .nivo-html-naslov display: none;  .nivo-caption position: absolute; desno: 20px; text-align: center; vrh: 130px; Širina: 192px; z indeks: 60;  .nivo-naslov p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: absolute; Dno: 10px; desno: 20px; visina: 15 px; Širina: 192px; text-align: center; Prikaz: blok; z indeks: 51;  .nivo-controlNav a pozadina: transparentni url (img / button.png) središnje središte bez ponavljanja; Prikaz: inline-blok; visina: 14px; Širina: 14px; text-alineja: -9999px; Pokazivač: pokazivač;  .nivo-controlNav .active pozadina: transparentan URL (img / button_active.png);  

Konačni rezultat + preuzimanje

Ovo je naš konačni rezultat, kliknite ovdje da biste vidjeli radni demo.

Ne možete postići određeni korak? Ovdje su rezultat PSD datoteke i kompletan projekt za vas da testirate i igrate.

• Klizač slike Tutorial PSD datoteka
• Slika Slider Tutorial Cijeli projekt