Kā izveidot attēlu slīdni, izmantojot Photoshop un jQuery

Neapšaubāmi, attēla slīdni ir viens no visbiežāk izmantotajiem elementiem biznesa tīmekļa dizainā, jo tā ir salīdzinoši liela izmēra, kas spēj piesaistīt apmeklētāja uzmanību, tiklīdz viņi ierodas vietnē. Lai gan tīmeklis ir sācis pārdomāt attēla slīdņa lietojamību, tas joprojām tiek uzskatīts par obligātu priekšstatu tīmekļa dizaina nozares jaunpienācējam.

Šajā tīmekļa dizaina apmācībā mēs iemācīsimies izveidot pielāgotu attēla slīdni iepriekš, izmantojot programmu Photoshop, kuru varat apskatīt no gala. Mēs ne tikai to ilustrēsim Photoshop, bet arī pārvēršam to par funkcionālu dizainu, pārveidojot to par HTML / CSS un pievienojot jQuery tā lieliskam slīdošajam efektam.

Izklausās daudz sarežģītu bitu, bet patiesībā tas ir diezgan vienkāršs un ļoti viegli saprotams, sāciet pēc tam!

Vairāk interesējas par attēlu slīdņa pieņemšanu un pielāgošanu ceļā? Šeit ir ziņas, kas veltītas jums.

Image Slider: 23 jQuery sliders
Image Slider: 18 WordPress spraudņi

Darba sākšana

Šajā apmācībā jums būs nepieciešami šādi resursi:

26 PSDfreemium atkārtojamie pikseļu raksti.
jQuery bibliotēka
Nivo slīdņa spraudnis
Modernizr
Atrasti papīra faktori no VandelayPremier
(Alternatīva) 13 HQ vecās papīra tekstūras no pārdozēšanas
Rinjani no Ciaciya
Stupa ar Agnes Sim
Tino ar Nino Satria
Timo Balk piedāvājums
Uluwatu-Bali ar Aris Wjay

I daļa - Attēlu slīdņa projektēšana

1. solis: fona iestatīšana

Sāciet, izveidojot jaunu failu ar izmēru 1000 × 700 px. Aizpildiet fonu ar krāsu # efc89e.

Pievienojiet Pattern Overlay, izmantojot bezmaksas pikseļu rakstu no PSDfreemium.

2. solis: slīdņa bāze

Aktivizējiet taisnstūra rīku. Izveidojiet taisnstūri ar izmēru 940 × 450 px. Jūs varat izmantot jebkuru krāsu, tas nav svarīgi.

Lai atvērtu dialoglodziņu Slāņu stils, veiciet dubultklikšķi uz slāņa. Pievienot slāņa stila pilienu ēnu, ārējo spīdumu un insultu.

Tas ir rezultāts. Tagad slīdņa pamatnei ir jauks rāmis ar mīkstu ēnu.

3. solis

Pievienojiet fotoattēlu un novietojiet to virs slīdņa bāzes. Nospiediet Ctrl + Alt + G, lai to pārvērstu Clipping Mask, un ievietojiet fotoattēlu slīdnī.

4. solis: lente

Zīmējiet taisnstūra formu ar krāsu # f4e1ae, lai to izmantotu kā lenti.

Veiciet dubultklikšķi uz formas slāņa un aktivizējiet Bevel un Emboss, Gradient Overlay un Pattern Overlay ar sekojošiem iestatījumiem.

Tas ir rezultāts pēc slāņa stilu pievienošanas.

5. solis

Pievienosim lentei papīra tekstūru, lai padarītu to reālāku. Novietojiet tekstūru uz lentes formas. Konvertējiet to uz Clipping Mask, nospiežot Ctrl + Alt + G.

6. solis

Uzlīmēsim dažas ēnas un izceļam uz lentes. Izveidojiet jaunu slāni virs lentes. Krāsa melna uz lentes apakšējās daļas. Konvertējiet to uz Clipping Mask (Ctrl + Alt + G) un pēc tam samaziniet tā necaurredzamību līdz 10%.

7. solis

Atkārtojiet iepriekšējo procesu ar lentes augšējo daļu. Bet šoreiz pievienojiet izcelt, apgleznojot baltu, un pēc tam samaziniet tā necaurredzamību līdz 50%.

8. solis: šuves

Aktivizējiet zīmuļa rīku. Lai atvērtu Brush iestatījumu, nospiediet taustiņu F5. Iestatiet sukas lielumu uz 1 px un palieliniet atstarpi, līdz priekšskatījuma apgabalā mēs saņemsim punktētu līniju.

9. solis

Zīmējiet 1 lentes melno līniju uz lentes. Samaziniet tā necaurredzamību līdz 20%. Dublējiet slāni, nospiežot taustiņu kombināciju Ctrl + J. Hit Ctrl + I, lai apgrieztu krāsu. Palielināt necaurredzamību līdz 50%. Aktivizējiet pārvietošanas rīku un vienreiz nospiediet lejup vērsto bultiņu un kreiso bultiņu.

Lūk, rezultāts ir 100% palielinājums.

10. solis

Atkārtojiet šo procesu, lai citā lentes pusē izdarītu citus šuves.

11. solis: pievienojiet greznu formu

Iestatiet priekšplāna krāsu pelēkā krāsā. Izmantojiet mīkstu suku ar izmēru 1 px, lai izveidotu greznu formu. Esiet radoši, jūs varat izmantot jebkuru vēlamo formu. Blakus zīmējiet 1 px līniju un pēc tam izdzēsiet ārējo malu, izmantojot mīkstu dzēšgumijas rīku. Dublējiet līniju, pagrieziet to horizontāli un novietojiet to otrā pusē.

12. solis

Atlasiet visus krāšņos slāņus un apvienojiet to vienā slānī, nospiežot taustiņu Ctrl + E. Dubultā forma un pēc tam novietojiet to zem ornamentālās formas. Nospiediet Ctrl + I, lai apgrieztu krāsu. Aktivizējiet pārvietošanas rīku un vienreiz nospiediet lejup vērsto bultiņu, lai to izspiestu 1 px uz leju.

13. solis: fotoattēlu informācija

Ierakstiet fotoattēla datus lentē.

14. solis: Navigācija

Tālāk mēs izveidosim dažus lokus slaidu navigācijai. Zīmējiet apļa formu ar krāsu: # 8d877c lentes apakšējā daļā.

Pievienojiet iekšējo ēnu, izmantojot šādus iestatījumus.

Tas ir rezultāts. Tagad aplis kļūst par seklu caurumu.

15. solis

Turiet Alt un pēc tam velciet apļa formas slāni, lai to dublētu.

16. solis

Iestatīsim aktīvu stāvokli vienā no šīm saitēm. Atlasiet vienu no lokiem un mainiet tās krāsu uz # bebbb5. Pievienojiet iekšējo ēnu, gradienta pārklājumu un insultu.

17. solis

Turiet Ctrl un pēc tam noklikšķiniet uz lentes pamatnes sīktēla slāņu panelī. Izveidojiet jaunu slāni zem lentes un aizpildiet to ar melnu. Aktivizējiet pārvietošanas rīku un pāris reizes nospiediet bultiņu pa kreisi un uz leju.

18. solis

Mīkstina to, veicot Gausa izplūšanas filtru. Noklikšķiniet uz Filtra> Blur> Gaussian Blur.

19. solis

Novietojiet lentes ēnu virs slīdņa rāmja slāņa. Konvertējiet to uz Clipping Mask, nospiežot Ctrl + Alt + G.

20. solis

Samazināt ēnu necaurredzamību līdz 40%.

21. solis

Krāsojiet lentes ēnu uz fona. Samazināt tā necaurredzamību līdz 20%.

22. solis

Izmantojiet pildspalvu rīku, lai pievilktu daļu lentes. Iestatiet tās krāsu uz # b68f63. Novietojiet to aiz slīdņa.

Tas ir rezultāts 100% palielinājumā.

23. solis

Dublējiet tikko izveidoto formu un novietojiet to aiz lentes augšpuses. Pagrieziet to vertikāli.

24. solis: galīgais rezultāts Photoshop

Šis ir mūsu galīgais rezultāts Photoshop. Tālāk mēs turpināsim to kodēt funkcionālā slīdnī.

II daļa - pārveidošana HTML / CSS

25. solis - Failu iestatīšana

Izveidojiet jaunu mapi ar nosaukumu My-Photo-Slider. Šajā mapē izveidojiet jaunu tukšu HTML dokumentu (index.html), tukša stila lapa (style.css) un mapi attēliem (img). Mums arī jāiekļauj mapē jQuery bibliotēka un Nivo Slider spraudnis. Kā mēs izmantojam HTML5 atzīmi, mums jāpievieno IE hack, lai iespējotu HTML5 elementus IE 8 vai zemāk. Mēs izmantosim skriptu, ko sauc par Modernizr, lai uzņemtu IE.

26. solis - pamata HTML iezīmēšana

Atvērt index.html jūsu iecienītākā koda redaktorā. Definējiet DOCTYPE (mēs izmantojam HTML5), galvu elementi (kur pievienojam dokumentu nosaukumu un saite CSS un JavaScript (jQuery Library, Nivo Slider un Modernizr). div iesaiņojums (lai novietotu izkārtojumu), galvenes elementu un slaidu apvalku.

      Mani fotoattēlu slaidi

27. solis - šķēle PSD

Atveriet PSD maketu un izņemiet visus nepieciešamos attēlus. Lai iegūtu attēlu, sagaidīsim sekojošus attēlus no sxc.hu (nepieciešams pieteikšanās, ja jums vēl nav konta, jūs varat pierakstīties bez maksas). Mainiet visu attēlu izmēru līdz 920 × 430 px. Visus attēlus ievietojiet attēlu mapē (img).

Rinjani no Ciaciya
Stupa ar Agnes Sim
Tino ar Nino Satria
Timo Balk piedāvājums
Uluwatu-Bali ar Aris Wjay

28. solis - Izveidot galveni

Pievienojiet šos tālāk norādītos kodus

  Mani fotoattēlu slaidi

Tagad pievienosim virsrakstu stilu. Mēs arī pievienojam ķermeņa un iesaiņojuma elementu stilu. Ievietojiet visus stilu stilu, style.css.

 / * Basic styling * / body fons: caurspīdīgs url (img / bg.jpg); fonts: 15px / 2 'Adobe Caslon Pro', Gruzija, Serif; starpība: 0; polsterējums: 0;  a kontūra: 0 nav #pagewrap margin: 120px auto; polsterējums: 0; pozīcija: relatīvais; augstums: 100%; platums: 960px;  header display: block; pludiņš: pa labi; labās malas: 40px; platums: 192px; z-indekss: 52; pozīcija: relatīvais;  h1 fons: caurspīdīgs url (img / separator.png) nē atkārtojas centrālais grunts; / * Pievienojiet atdalītāja līniju zem nosaukuma * / fonta lieluma: 18px; font-weight: bold; augstums: 70px; līnijas augstums: 1.1; starpība: 55px 10px 0; teksta saskaņošana: centrs; teksta pārveidošana: lielie burti;

29. solis - pievienojiet fotoattēlu slīdni

Tagad mēs pievienosim kodu mūsu dokumenta galvenajai daļai - foto slīdam. Vispirms pievienosim fotoattēlus. Novietojiet šos tālāk norādītos kodus

Tad pievienojiet fotoattēlu lenti un parakstu.

 
  Fotogrāfs:
 Enrico Nunziati
 Atrašanās vieta:
 Namības tuksnesis
 Modelis:
 Dead Vlei
 Datums:
 2011. gada 18. marts 
  Fotogrāfs:
 Lina Dhammanari
 Atrašanās vieta:
 Lombokas sala, Indonēzija
 Modelis:
 Rinjani kalns
 Datums:
 2008. gada 8. maijs 
  Fotogrāfs:
 Agnes Sim
 Atrašanās vieta:
 Borobudur, Indonēzija
 Modelis:
 Lielā stupa
 Datums:
 2008. gada 12. jūnijs 
  Fotogrāfs:
 Nino Satria
 Atrašanās vieta:
 Taman Safari Indonēzija
 Modelis:
 Tally žirafe
 Datums:
 2009. gada 16. augusts 
  Fotogrāfs:
 Timo Balk
 Atrašanās vieta:
 Ubud, Bali, Indonēzija
 Modelis:
 Piedāvājumi
 Datums:
 2009. gada 20. decembris 
  Fotogrāfs:
 Aris Wjay
 Atrašanās vieta:
 Uluwatu-Bali
 Modelis:
 Skaista pludmale
 Datums:
 2011. gada 20. jūlijs

Tagad, ja mēs atvērsim index.html pārlūkprogrammā mums ir kaut kas šāds:

30. solis

Mums joprojām ir nepieciešams noteikt slīdņa izskatu, izmantojot CSS.

 #slidewrap pozīcija: absolūti; #slider pozīcija: relatīvais; augstums: auto; platums: 920px; robeža: 10px cietais #fff; kastes ēna: 0 0 5px # 444; starpība: 10px;  .ribbon fons: caurspīdīgs url (img / info-bg.png) nav atkārtots; augstums: 482px; platums: 192px; pozīcija: absolūta; labi: 40px; tops: -3px; z-indekss: 50;  #slider img amats: absolūts; tops: 0px; pa kreisi: 0px; displejs: nav;

Tas ir tas, kas mums tagad ir.

Pašlaik mēs esam savienojuši Nivo slīdņa spraudni, bet mēs neesam pievienojuši skriptu. So let's hook up skriptu, pievienojot šo JavaScript funkcijas starp un elementu.

31. solis: slīdņa stils

Pēdējais solis ir slīdņa stila pievienošana.

 / * Nivo slīdņa stili * / .nivoSlider pozīcija: relatīvais;  .nivoSlider img amats: absolūts; tops: 0px; pa kreisi: 0px;  / * Ja attēls ir iesaiņots saitē * / .nivoSlider a.nivo-imageLink pozīcija: absolūts; tops: 0px; pa kreisi: 0px; platums: 100%; augstums: 100%; robeža: 0; polsterējums: 0; starpība: 0; z-indekss: 6; displejs: nav;  / * Slīdņa * / .nivo-šķēles gabaliņi un kastes displejs: bloks; pozīcija: absolūta; z-indekss: 5; augstums: 100%;  .nivo-box display: block; pozīcija: absolūta; z-indekss: 5;  .nivo-directionNav displejs: nav! svarīgs .nivo-html-caption display: none;  .nivo-caption amats: absolūts; labi: 20px; teksta saskaņošana: centrs; tops: 130px; platums: 192px; z-indekss: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: slīprakstā .nivo-controlNav amats: absolūts; apakšā: 10px; labi: 20px; augstums: 15px; platums: 192px; teksta saskaņošana: centrs; displejs: bloks; z-indekss: 51;  .nivo-controlNav a fons: caurspīdīgs url (img / button.png) bez atkārtota centra centra; displejs: inline-bloks; augstums: 14px; platums: 14px; teksta ievilkums: -9999px; kursors: rādītājs;  .nivo-controlNav .active background: caurspīdīgs url (img / button_active.png);

Galīgais rezultāts + lejupielāde

Šis ir mūsu gala rezultāts, noklikšķiniet šeit, lai redzētu darba demonstrāciju.

Nevar sasniegt noteiktu soli? Šeit ir rezultāta PSD fails un pabeigtais projekts, lai jūs varētu pārbaudīt un spēlēt.

Image Slider Tutorial PSD fails
Image Slider Tutorial Pilnīgs projekts