Ako vytvoriť obrazový posuvník pomocou Photoshopu a jQuery

Je nepochybne, že obrazový posúvač je jedným z najčastejšie používaných prvkov obchodného webového dizajnu vzhľadom na jeho pomerne veľkú veľkosť, ktorá dokáže pritiahnuť pozornosť návštevníka po príchode stránky. Hoci web začal premýšľať o použiteľnosti obrazového posúvača, je stále považovaný za nutnú výučbu pre začínajúceho výrobcu webových stránok.

V tomto návode na tvorbu webových stránok sa naučíme vytvárať vlastný obrazový posuvník nad používaním programu Photoshop, ktorý si môžete prezrieť konečný výsledok tu. Nielen, že ho budeme ilustrovať vo Photoshope, premeníme ho na funkčný dizajn tak, že ho prevedieme na HTML / CSS a pridáme jQuery pre jeho úžasný posuvný efekt.

Znie to ako veľa zložitých bitov, ale v skutočnosti je to dosť jednoduché a veľmi ľahko pochopiteľné, poďme začať!

Máte väčší záujem o prijatie posúvača obrázkov a prispôsobiť ho na ceste? Tu sú príspevky určené pre vás.

• Obrázok posúvač: 23 jQuery Sliders
• Image Slider: 18 WordPress Plugins

Začíname

Pre tento tutoriál budete potrebovať nasledujúce zdroje:

• 26 Opakovateľné pixelové vzory z PSDfreemium.
• knižnica jQuery
• Nivo Slider plugin
• Modernizr
• Nájdené textúry papiera od firmy VandelayPremier
• (Alternatíva) 13 HQ Staré papierové textúry z predávkovania
• Rinjani od Ciaciya
• Stupa od Agnes Sim
• Tally od Nino Satria
• Ponuky Timo Balk
• Uluwatu-Bali od Aris Wjay

Časť I - Návrh posúvača obrázkov

Krok 1: Nastavenie pozadia

Začnite vytvorením nového súboru s rozmermi 1000 × 700 px. Vyplňte pozadie farbou # efc89e.

Pridajte prekrytie vzorov pomocou voľného pixelového vzoru z programu PSDfreemium.

Krok 2: Posuvná základňa

Aktivovať nástroj Obdĺžnik. Vytvorte obdĺžnik s rozmermi 940 × 450 px. Môžete použiť akúkoľvek farbu, nezáleží na tom.

Dvakrát kliknite na vrstvu a otvorte dialógové okno Štýl vrstvy. Pridajte tieňový štýl, vonkajšiu žiaru a zdvih.

Toto je výsledok. Posuvná základňa má teraz pekný rám s jemným tieňom za ňou.

Krok 3

Pridajte fotografiu a umiestnite ju nad základňu posúvača. Stlačte Ctrl + Alt + G, aby ste ju premenili na Orezávaciu masku a vložte fotografiu do posúvača.

Krok 4: Stuha

Nakreslite tvar obdĺžnika s farbou # f4e1ae, ktorá sa má použiť ako páska.

Dvakrát kliknite na vrstvu tvaru a aktivujte Bevel a Emboss, Overlay gradient a Overlay s nasledujúcimi nastaveniami.

Toto je výsledok po pridaní štýlov vrstvy.

Krok 5

Pridajte textúru papiera na stuhu, aby bola realistickejší. Umiestite textúru na vrchole tvaru pásky. Preveďte ju na orezovú masku stlačením klávesov Ctrl + Alt + G.

Krok 6

Natiahneme nejaké tiene a zvýrazníme stuhu. Vytvorte novú vrstvu nad pásikom. Farba je čierna na spodnej časti pásky. Previesť ho do orezávacej masky (Ctrl + Alt + G) a potom znížiť jej nepriehľadnosť na 10%.

Krok 7

Zopakujte predchádzajúci proces na hornú časť pásky. Ale tentokrát pridať zvýraznenie maľovaním bielej farby a potom znížiť jej nepriehľadnosť na 50%.

Krok 8: stehy

Aktivovať nástroj Ceruzka. Stlačením klávesu F5 otvorte nastavenie štetca. Nastavte veľkosť štetca na 1 px a zväčšite medzery, kým sa v oblasti náhľadu nezobrazí bodkovaná čiara.

Krok 9

Nakreslite 1 čiernu čiernu čiaru v hornej časti pásky. Znížte jeho nepriehľadnosť na 20%. Duplicitnú vrstvu stlačte klávesy Ctrl + J. Stlačením klávesov Ctrl + I prevráťte farbu. Zvýšte nepriehľadnosť na 50%. Aktivujte nástroj na presun a potom stlačte šípku nadol a šípku doľava, aby ste ho posunuli.

Tu je výsledok zobrazený pri 100% zväčšení.

Krok 10

Opakujte tento proces, ak chcete nakresliť ďalšie stehy na druhej strane pásky.

Krok 11: Pridať ozdobný tvar

Nastavte farbu popredia na sivú. Na kreslenie ozdobného tvaru použite mäkkú kefku s rozmermi 1 px. Buďte kreatívni, môžete použiť akýkoľvek tvar, ktorý sa vám páči. Vedľa toho nakreslite línie s veľkosťou 1 px a potom vymažte jej vonkajší okraj pomocou mäkkého Eraser nástroja. Duplikujte riadok, otočte ho vodorovne a umiestnite ho na druhú stranu.

Krok 12

Vyberte všetky ozdobené vrstvy a zlúčte ich do jednej vrstvy stlačením klávesov Ctrl + E. Duplikovať tvar a potom ho umiestnite pod pôvodne vyzdobený tvar. Stlačením klávesov Ctrl + I prevráťte farbu. Aktivujte nástroj na presun a potom raz stlačte šípku nadol, aby ste ho posunuli o 1 pixel nadol.

Krok 13: Informácie o fotografii

Do pásky zadajte údaje o fotkách.

Krok 14: Navigácia

Ďalej nakreslíme niektoré kruhy pre navigáciu na snímke. Nakreslite kruhový tvar s farbou: # 8d877c na spodnej časti pásky.

Pridajte vnútorný tieň pomocou nasledujúcich nastavení.

Toto je výsledok. Kruh sa teraz mení na plytký otvor.

Krok 15

Podržte kláves Alt a presuňte vrchnú vrstvu kruhu tak, aby ste ju duplikovali.

Krok 16

Na jeden z týchto odkazov nastavíme aktívny stav. Vyberte jeden kruh a zmeniť jeho farbu na # bebbb5. Pridať vnútorný tieň, prekrytie gradientom a zdvih.

Krok 17

Podržte Ctrl a potom kliknite na miniatúru základne pásky v paneli Vrstvy. Vytvorte novú vrstvu pod stuhou a vyplňte ju čiernym. Aktivujte nástroj na presun a niekoľkokrát stlačte šípku doľava a nadol.

Krok 18

Zmäknite ho vykonaním filtra Gaussian Blur. Kliknite na Filter> Blur> Gaussian Blur.

Krok 19

Umiestnite tieň stužky nad vrstvu posuvného rámu. Preveďte ju na orezovú masku stlačením klávesov Ctrl + Alt + G.

Krok 20

Znížte stinnosť Opacity na 40%.

Krok 21

Farba tieňovej stuhy na pozadí. Znížte jeho nepriehľadnosť na 20%.

Krok 22

Pomocou nástroja na pero odtiahnite časť pásky. Nastavte jej farbu na hodnotu # b68f63. Vložte ho za posuvník.

Toto je výsledok zobrazený pri 100% zväčšení.

Krok 23

Duplikovať tvar, ktorý sme práve vytvorili, a umiestniť ju za hornú časť pásky. Zvrhnite to vertikálne.

Krok 24: Konečný výsledok vo Photoshope

Toto je náš konečný výsledok vo Photoshope. Ďalej budeme pokračovať v kódovaní do funkčného jazdca.

Časť II - Konverzia do HTML / CSS

Krok 25 - Nastavenie súborov

Vytvorte nový priečinok nazvaný My-Photo-Slider. V tomto priečinku vytvorte nový prázdny dokument HTML (index.html), prázdny štýl (style.css) a priečinok pre obrázky (img). Musíme tiež do priečinka zahrnúť jQuery library a Nivo Slider plugin. Keď používame označenie HTML5, musíme pridať IE hack na povolenie prvkov HTML5 na IE 8 alebo nižšej. Použijeme skript nazvaný Modernizr, ktorý bude vyhovovať IE.

Krok 26 - Základná značka HTML

Otvorené index.html vo vašom obľúbenom editore kódu. Definujte DOCTYPE (používame HTML5), hlava prvky (kde pridáme názov dokumentov a odkaz CSS a JavaScript (jQuery Library, Nivo Slider a Modernizr). div obálka (na vystredenie rozloženia), hlavička prvku a zväzok snímok.

Krok 27 - Rezanie PSD

Otvorte PSD model a vymažte všetky potrebné obrázky. Pre obrázok ukážeme nasledujúce obrázky zo sxc.hu (vyžaduje sa prihlásenie, ak ešte nemáte účet, môžete sa zaregistrovať zadarmo). Zmeniť veľkosť všetkých obrázkov na 920 × 430 px. Vložte všetky obrázky do priečinka s obrázkami (img).

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

Krok 28 - Vytvorte hlavičku

Pridajte nasledujúci kód medzi

a

.

 
 My Photo Slides 
 

Teraz pridáme štýl do hlavičky. Pridáme tiež štýl pre telo a obalové prvky. Vložte všetky štýly do šablóny so štýlmi, style.css.

 / * Základný štýl * / telo pozadie: transparentná adresa URL (img / bg.jpg); písmo: 15px / 2 'Adobe Caslon Pro', Gruzínsko, Serif; margin: 0; padding: 0;  a obrys: 0 žiaden #pagewrap margin: 120px auto; padding: 0; Pozícia: relatívna; výška: 100%; šírka: 960 x;  hlavička display: block; float: právo; margin-right: 40px; šírka: 192px; z-index: 52; Pozícia: relatívna;  h1 background: transparentná adresa URL (img / separator.png) no-repeat bottom center; / * Pridať riadok oddeľovača pod názvom * / veľkosť písma: 18px; font-váha: tučný; výška: 70 pixelov; line-výška: 1,1; margin: 55px 10px 0; text-align: centrum; text-transform: uppercase;  

29. krok - Pridať posuvník fotografií

Teraz pridáme kód do hlavnej časti nášho dokumentu, posúvača fotografií. Najskôr pridáme fotografie. Umiestnite nasledujúci kód medzi

.

Potom pridajte pásku a titulok pre fotografie.

 
 
 Fotograf:
 Enrico Nunziati
 miesto:
 Namib púšť
 Model:
 Dead Vlei
 Dátum:
 18. marca 2011 
 
 Fotograf:
 Lina Dhammanari
 miesto:
 Ostrov Lombok, Indonézia
 Model:
 Mount Rinjani
 Dátum:
 8. mája 2008 
 
 Fotograf:
 Agnes Sim
 miesto:
 Borobudur, Indonézia
 Model:
 Veľká Stupa
 Dátum:
 12. júna 2008 
 
 Fotograf:
 Nino Satria
 miesto:
 Taman Safari Indonézia
 Model:
 Tally Giraffe
 Dátum:
 16. augusta 2009 
 
 Fotograf:
 Timo Balk
 miesto:
 Ubud, Bali, Indonézia
 Model:
 ponuka
 Dátum:
 20. december 2009 
 
 Fotograf:
 Aris Wjay
 miesto:
 Uluwatu, Bali
 Model:
 Krásna pláž
 Dátum:
 20. júla 2011 
 

Teraz, ak sa otvoríme index.html v prehliadači máme niečo takéto:

Krok 30

Ešte stále potrebujeme upraviť vzhľad posúvača pomocou CSS.

 #slidewrap pozícia: absolútna; #slider pozícia: relatívna; výška: auto; šírka: 920px; hranica: 10px solid #fff; box-tieň: 0 0 5px # 444; margin: 10px;  .ribbon background: transparentná adresa URL (img / info-bg.png) no-repeat; výška: 482px; šírka: 192px; pozície: absolútna; vpravo: 40px; Horná: -3px; z-index: 50;  #slider img pozícia: absolútna; top: 0px; left: 0px; display: none;  

To je to, čo máme teraz.

V súčasnosti sme prepojili plugin Nivo slider, ale skript sme nezaviedli. Takže zapojme skript pridaním týchto funkcií JavaScriptu medzi a element.

Krok 31: Štýl posúvača

Posledným krokom je pridanie štýlu jazdca.

 / * Nivo Slider štýly * / .nivoSlider pozícia: relatívna;  .nivoSlider img pozícia: absolútna; top: 0px; left: 0px;  / * Ak je obraz zabalený v linke * / .nivoSlider a.nivo-imageLink pozícia: absolútne; top: 0px; left: 0px; šírka: 100%; výška: 100%; border: 0; padding: 0; margin: 0; z-index: 6; display: none;  / * Plátky a polia v posúvači * / .nivo-slice display: block; pozície: absolútna; z-index: 5; výška: 100%;  .nivo-box zobrazenie: blok; pozície: absolútna; z-index: 5;  .nivo-directionNav display: none! important .nivo-html-caption zobrazenie: žiadne;  .nivo-caption pozícia: absolútna; vpravo: 20px; text-align: centrum; Horná: 130px; šírka: 192px; z-index: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav pozícia: absolútna; dole: 10px; vpravo: 20px; výška: 15 pixelov; šírka: 192px; text-align: centrum; Zobrazenie: blok; z-index: 51; . nivo-controlNav a background: priehľadná adresa URL (img / button.png) no-repeat center centre; display: inline-block; výška: 14px; šírka: 14px; text-indent: -9999px; Kurzor: pointer;  .nivo-controlNav. aktívne background: transparentná adresa URL (img / button_active.png);  

Konečný výsledok + stiahnutie

Toto je náš konečný výsledok, kliknite sem a uvidíte funkčné demo.

Nie je možné dosiahnuť určitý krok? Tu je výsledok PSD súboru & kompletný projekt pre vás testovať a hrať.

• Image Slider Tutorial PSD súboru
• Image Slider Tutorial Kompletný projekt