Kuidas luua pildi liugurit Photoshop & jQuery abil

Kahtlemata on pildi liugur üks kõige sagedamini kasutatavaid elemente ettevõtte veebidisainis tänu suhteliselt suurele suurusele, mis suudab külastajale tähelepanu juhtida, kui nad saidile saabuvad. Kuigi veebi on hakanud pildi liuguri kasutatavust uuesti mõtlema, peetakse seda veebidisainitööstuse uustulnukaks veel vajalikuks õppimiseks..

Selles veebidisaini õppetöös õpime Photoshopi abil üles looma kohandatud pildi liugurit, mida saate siit vaadata. Me mitte ainult ei selgita seda Photoshopis, vaid muudame selle ka funktsionaalseks disainiks, teisendades selle HTML / CSS-ks ja lisades jQuery selle suurepärase libiseva efekti jaoks.

Tundub, et tegemist on palju keeruliste bittidega, kuid tegelikult on see üsna lihtne ja väga lihtne mõista, alustame siis!

Rohkem huvitatud pildi liuguri vastuvõtmisest ja selle kohandamisest teedel? Siin on teie jaoks mõeldud postitused.

• Image Slider: 23 jQuery liugurit
• Pildi liugur: 18 WordPress pluginat

Alustamine

Selle juhendi jaoks on vaja järgmisi ressursse:

• 26 PSDfreemiumilt saadud korduvad pikselisüsteemid.
• jQuery raamatukogu
• Nivo Slider plugin
• Modernizr
• Leitud paberi tekstuurid firmalt VandelayPremier
• (Alternatiivne) 13 HQ vana paberi tekstuur üleannustamise korral
• Ciaciya Rinjani
• Stupa poolt Agnes Sim
• Tino poolt Nino Satria
• Timo Balki pakkumised
• Uluwatu-Bali Aris Wjay poolt

I osa - kujutise liuguri projekteerimine

1. etapp: tausta seadistamine

Alustage uue faili loomisega, mille suurus on 1000 × 700 px. Täida taust värviga # efc89e.

Lisage mustri ülekate kasutades PSDfreemiumist vaba pikslit.

Samm 2: Liuguri alus

Aktiveerige ristküliku tööriist. Looge ristkülik suurusega 940 × 450 px. Võite kasutada mis tahes värvi, see pole oluline.

Kihi stiili dialoogiboksi avamiseks topeltklõpsake kihti. Lisage kihi stiili tilk, välimine hõõgus ja löögisagedus.

See on tulemus. Liuguril on nüüd kena raam, millel on pehme vari.

3. etapp

Lisage foto ja asetage see liugurialuse kohal. Klõpsake Ctrl + Alt + G, et muuta see lõikamismaski ja lisada foto liugurisse.

Samm 4: lint

Joonista ristküliku kuju värvi # f4e1ae abil, mida saab kasutada lindina.

Topeltklõpsake kuju kihi ja aktiveerige Bevel and Emboss, Gradient Overlay ja Pattern Overlay järgmiste seadistustega.

See on tulemus pärast kihtide lisamist.

5. etapp

Lisame lindile paberi tekstuuri, et muuta see realistlikumaks. Asetage tekstuur lindi kuju peale. Teisendage see lõikamismaski, vajutades Ctrl + Alt + G.

6. etapp

Värvime lindile mõned varjud ja esiletõstmised. Looge lindi kohal uus kiht. Värvige mustal lint alumisele osale. Teisendage see lõikamismaski (Ctrl + Alt + G) ja vähendage seejärel läbipaistmatust 10% -ni.

7. samm

Korrake eelmist protsessi lindi ülemise osaga. Aga seekord lisage esiletõstmine valge värviga ja vähendage seejärel läbipaistmatust 50% -ni.

8. samm: õmblused

Aktiveerige pliiatsitööriist. Vajutage F5, et avada pintsli seadistus. Määrake harja suurus 1 px ja suurendage vahekaugust, kuni saame eelvaate piirkonnas punktiirjooni.

9. samm

Joonista lindi kohal 1 px must joon. Vähendage selle läbipaistmatust 20% -ni. Korduv kiht, vajutades Ctrl + J. Tulemusena pöörake Ctrl + I. Suurendage läbipaistmatust 50% -ni. Aktiveeri liigutamise tööriist ja vajuta üks kord, et nihutada.

Siin on tulemuseks 100% suurendus.

10. etapp

Korrake seda protsessi, et tõmmata lindi teisele küljele teisi õmblusi.

Samm 11: Lisa ornate kuju

Seadke esiplaani värv halliks. Suure kujuga joonistamiseks kasutage pehme harja suurusega 1 px. Ole loominguline, saate kasutada mis tahes vormi, mida soovite. Joonistage selle kõrval 1 px ja kustutage seejärel selle välisserv pehme Eraser Tool abil. Liigutage rida, keerake see horisontaalselt ja asetage see teisele küljele.

12. samm

Valige kõik kaunistatud kihid ja ühendage see ühte kihti, vajutades Ctrl + E. Duplicate shape ja asetage see originaalse kaunistatud kuju alla. Värvi muutmiseks vajuta Ctrl + I. Aktiveeri teisaldamise tööriist ja seejärel vajutage üks kord alla noolenuppu, et seda 1 pikslit alla panna.

13. samm: fototeave

Tippige lindile sisestatud fotoandmed.

14. samm: navigeerimine

Seejärel joonistame slaidisuunamiseks mõned suhtlusringid. Joonistage ringikujuline värv: # 8d877c lindi alumises osas.

Lisage sisemine vari, kasutades järgmisi seadeid.

See on tulemus. Ring muutub nüüd madalaks auks.

15. samm

Hoidke Alt ja seejärel lohistage ringikujuline kiht, et seda dubleerida.

16. etapp

Teeme ühel neist linkidest aktiivse seisundi. Valige üks ringist ja muutke selle värviks # bebbb5. Lisage sisemine vari, gradiendi ülekate ja käik.

17. samm

Hoidke klahvi Ctrl ja seejärel klõpsake kihtide paneelil lintialuse pisipildil. Looge lindi alla uus kiht ja täitke see mustaga. Aktiveeri liigutusvahend ja vajuta paar korda vasakule ja alla noole.

18. samm

Pehmendage seda Gauss-blur-filtri abil. Klõpsake Filter> Blur> Gaussian Blur.

19. samm

Asetage lindi vari liugurraami kihi kohal. Teisendage see lõikamismaski, vajutades Ctrl + Alt + G.

Samm 20

Vähendage varju läbipaistmatust 40% -ni.

Samm 21

Värvige lindi vari taustal. Vähendage selle läbipaistmatust 20% -ni.

22. etapp

Kasuta lindi ettepoole tõmbamiseks pliiatsitööriista. Seadke selle värviks # b68f63. Asetage see liuguri taha.

See on tulemuseks 100% suurendus.

Samm 23

Dubleerige just kujutatud kuju ja asetage see lindi ülaosa taha. Keerake see vertikaalselt.

24. samm: Photoshopi lõpptulemus

See on meie lõpptulemus Photoshopis. Edasi jätkame selle funktsionaalse liugurina kodeerimist.

II osa - HTML / CSS-i teisendamine

25. samm - failide seadistamine

Looge uus kaust nimega My-Photo-Slider. Looge selles kaustas uus tühi HTML-dokument (index.html), tühi stiilileht (style.css) ja piltide kaust (img). Samuti peame kaustale lisama jQuery raamatukogu ja Nivo Slideri plugina. HTML5-märgistuse kasutamisel peame lisama IE hacki, et võimaldada HTML5 elemente IE 8-s või allpool. Me kasutame IE-i majutamiseks skripti nimega Modernizr.

Samm 26 - HTML-märgistuse põhi

Ava index.html oma lemmikkoodi redaktoris. Määrake DOCTYPE (kasutame HTML5), pea elemendid (kuhu lisame dokumentide pealkirja ja lingi CSS ja JavaScript (jQuery Library, Nivo Slider ja Modernizr). div ümbris (paigutuse keskele), päis elemendi ja slaidi ümbrise.

Samm 27 - viil PSD

Avage PSD makett ja lõigake välja kõik vajalikud pildid. Pildi saamiseks võtke sxc.hu-st järgmised pildid (sisselogimine on vajalik, kui teil pole veel kontot, saate tasuta registreeruda). Muuda kõiki pilte 920 × 430 px. Pane kõik pildid kausta (img).

1. Ciaciya Rinjani
2. Stupa poolt Agnes Sim
3. Tino poolt Nino Satria
4. Timo Balki pakkumised
5. Uluwatu-Bali Aris Wjay poolt

28. samm - loo päis

Lisage need järgmised koodid

ja

.

 
 Minu foto slaidid 
 

Nüüd lisame päisesse stiili. Lisame ka keha ja ümbrise elementide stiili. Pange kõik stiilid stiilile, style.css.

 / * Basic Styling * / body taust: läbipaistev url (img / bg.jpg); font: 15px / 2 'Adobe Caslon Pro', Gruusia, Serif; varu: 0; polster: 0;  a outline: 0 none #pagewrap margin: 120px auto; polster: 0; positsioon: suhteline; kõrgus: 100%; laius: 960px;  päis kuva: plokk; float: parem; marginaali paremale: 40px; laius: 192px; z-indeks: 52; positsioon: suhteline;  h1 taust: läbipaistev url (img / separator.png) ei korrata keskmist alt; / * Lisa eraldusjoon pealkirja * / font-size alla: 18px; fondi kaal: rasvane; kõrgus: 70px; rea kõrgus: 1.1; varu: 55 px 10px 0; teksti joondamine: keskus; teksti muutmine: suured;  

29. samm - lisage foto liugurit

Nüüd me lisame koodi meie dokumendi põhiosale, foto liugurile. Lisame kõigepealt fotod. Asetage need järgmised koodid

.

Seejärel lisage fotodele lint ja pealkiri.

 
 
 Fotograaf:
 Enrico Nunziati
 Asukoht:
 Namiibi kõrb
 Mudel:
 Surnud Vlei
 Kuupäev:
 18. märts 2011 
 
 Fotograaf:
 Lina Dhammanari
 Asukoht:
 Lomboki saar, Indoneesia
 Mudel:
 Rinjani mägi
 Kuupäev:
 8. mai 2008 
 
 Fotograaf:
 Agnes Sim
 Asukoht:
 Borobudur, Indoneesia
 Mudel:
 Suur stuupa
 Kuupäev:
 12. juuni 2008 
 
 Fotograaf:
 Nino Satria
 Asukoht:
 Taman Safari Indoneesia
 Mudel:
 Tally kaelkirjak
 Kuupäev:
 16. august 2009 
 
 Fotograaf:
 Timo Balk
 Asukoht:
 Ubud, Bali, Indoneesia
 Mudel:
 Pakkumised
 Kuupäev:
 20. detsember 2009 
 
 Fotograaf:
 Aris Wjay
 Asukoht:
 Uluwatu-Bali
 Mudel:
 Ilus rand
 Kuupäev:
 20. juuli 2011 
 

Nüüd, kui me avame index.html brauseris on meil midagi sellist:

30. etapp

Meil on ikka vaja määrata liuguri välimus CSS abil.

 #slidewrap seisukoht: absoluutne; #slider asukoht: suhteline; kõrgus: auto; laius: 920px; piir: 10px tahke #fff; box-shadow: 0 0 5px # 444; varu: 10px;  .ribbon background: läbipaistev url (img / info-bg.png) no-kordamine; kõrgus: 482px; laius: 192px; positsioon: absoluutne; paremale: 40px; top: -3px; z-indeks: 50;  #slider img asukoht: absoluutne; top: 0px; vasakule: 0px; kuva: pole;  

Seda me praegu oleme.

Praegu on meil ühendatud Nivo liugur plugin, kuid me ei ole skripti üles võtnud. Seega ühendage skript, lisades need JavaScript-funktsioonid ja element.

31. samm: liuguri stiil

Viimane samm on liuguri stiili lisamine.

 / * Nivo liuguri stiilid * / .nivoSlider positsioon: suhteline;  .nivoSlider img asukoht: absoluutne; top: 0px; vasakule: 0px;  / * Kui pilt on pakitud linki * / .nivoSlider a.nivo-imageLink position: absoluutne; top: 0px; vasakule: 0px; laius: 100%; kõrgus: 100%; piir: 0; polster: 0; varu: 0; z-indeks: 6; kuva: pole;  / * Slider * / .nivo-slice kuvar: plokk; positsioon: absoluutne; z-indeks: 5; kõrgus: 100%;  .nivo-box display: block; positsioon: absoluutne; z-indeks: 5;  .nivo-suunasNav kuva: puudub! oluline .nivo-html-caption display: none;  .nivo-caption position: absoluutne; paremale: 20px; teksti joondamine: keskus; top: 130px; laius: 192px; z-indeks: 60;  .nivo-caption p marginaal: 0 .nivo-caption .title font-style: kursiiv .nivo-controlNav positsioon: absoluutne; põhi: 10px; paremale: 20px; kõrgus: 15 px; laius: 192px; teksti joondamine: keskus; kuva: plokk; z-indeks: 51;  .nivo-controlNav a (taust: läbipaistev url (img / button.png) kordumatu keskpunkt); kuva: inline-block; kõrgus: 14 px; laius: 14 px; tekst-taane: -9999px; kursor: pointer;  .nivo-controlNav .aktiivne taust: läbipaistev URL (img / button_active.png);  

Lõplik tulemus + allalaadimine

See on meie lõpptulemus, klõpsa siia, et näha töötavat demot.

Ei saa teatud sammu saavutada? Siin on tulemuse PSD-fail ja täielik projekt, millega saate testida ja mängida.

• Image Slider Tutorial PSD fail
• Image Slider Tutorial Täielik projekt