Képcsúszka létrehozása a Photoshop & jQuery használatával

Kétségtelen, hogy a képcsúszka az üzleti webdesign egyik leggyakrabban használt eleme, annak viszonylag nagy méretének köszönhetően, amely képes a látogató figyelmét felhívni, amikor megérkezik az oldalra. Bár a web újra elgondolkodott a képcsúszka használhatóságáról, a web design-ipar újdonságai számára még mindig meg kell tanulni..

Ebben a webdesign bemutatóban megtanuljuk, hogyan készíthetünk egyéni kép csúszkát a Photoshop használatával, amelyről megtekintheti a végeredményt. Nemcsak a Photoshopban fogjuk bemutatni, hanem funkcionális formává is alakítjuk, ha HTML / CSS-be konvertáljuk és jQuery-t adunk hozzá a fantasztikus csúszóhatáshoz..

Úgy hangzik, mintha sok bonyolult bit lenne, de valójában elég egyszerű és nagyon könnyen érthető, kezdjük el!

Érdekesebb a képcsúszka elfogadása és az útválasztás testreszabása? Itt vannak az Ön számára szentelt hozzászólások.

• Image Slider: 23 jQuery csúszka
• Image Slider: 18 WordPress bővítmény

Elkezdeni

Ehhez a bemutatóhoz a következő forrásokra lesz szükség:

• 26 Ismételhető pixelminták a PSDfreemium-tól.
• jQuery könyvtár
• Nivo Slider bővítmény
• Modernizr
• Talált papír Textúrák a VandelayPremier-től
• (Alternatív) 13 HQ Régi papír Textúrák a túladagolásból
• Rinjani által Ciaciya
• Stupa, Agnes Sim
• Tally a Nino Satria
• Timo Balk ajánlatai
• Uluwatu-Bali Aris Wjay

I. rész - Képcsúszka tervezése

1. lépés: Háttér beállítása

Először hozzon létre egy 1000 × 700 px méretű új fájlt. Töltse ki a háttér színét # efc89e.

Mintás átfedés hozzáadása a PSDfreemium szabad pixel mintájával.

2. lépés: Slider Base

Aktiválja a téglalap eszközt. Hozzon létre egy 940 × 450 px méretű téglalapot. Bármilyen színt használhat, nem számít.

A Layer Style párbeszédpanel megnyitásához kattintson duplán a rétegre. Rétegstílus-csepp árnyék, külső fény és stroke hozzáadása.

Ez az eredmény. A csúszka alapja most egy szép keretet tartalmaz, puha árnyéka mögött.

3. lépés

Adjon hozzá egy fényképet, és helyezze azt a csúszka aljára. A Ctrl + Alt + G gomb megnyomásával konvertálhatja azt a Vágómaszkba, és beillesztheti a fényképet a csúszkába.

4. lépés: Szalag

Rajzoljon egy téglalap alakú formát a # f4e1ae színnel, amelyet szalagként használ.

Kattintson duplán az alakzat rétegére, és aktiválja a Bevel és Emboss, a Gradient Overlay és a Pattern Overlay elemeket a következő beállításokkal.

Ez az eredmény a Rétegstílusok hozzáadása után.

5. lépés

Add hozzá a papírszalagot a szalaghoz, hogy valósághűbb legyen. Helyezze a textúrát a szalag alakjára. A Ctrl + Alt + G megnyomásával konvertálhatja azt a Vágómaszkra.

6. lépés

Vessünk néhány árnyékot és kiemelést a szalagra. Hozzon létre új réteget a szalag felett. Feketére festjük a szalag alsó részén. Konvertálja azt vágómaszkra (Ctrl + Alt + G), majd csökkentse az opacitását 10% -ra.

7. lépés

Ismételje meg az előző eljárást a szalag felső részéhez. De ezúttal hozzon létre kiemelést a fehér festéssel, majd csökkentse az opacitását 50% -ra.

8. lépés: öltések

A ceruza eszköz aktiválása. Nyomja meg az F5 billentyűt a Brush beállítás megnyitásához. Állítsa be az ecset méretét 1 px-re, és növelje a távolságot, amíg egy szaggatott vonalat nem kapunk az előnézeti területen.

9. lépés

Rajzoljon 1 px fekete vonalat a szalag tetején. Csökkentse az opacitását 20% -ra. A Ctrl + J. gomb megnyomásával duplikálhatja a színt. Növelje az opacitást 50% -ra. Aktiválja az Áthelyező eszközt, majd nyomja meg egyszer a lefelé mutató nyíl és a bal nyíl gombot.

Íme az eredmény 100% -os nagyítással.

10. lépés

Ismételje meg ezt a folyamatot, hogy más öltéseket rajzoljon a szalag másik oldalán.

11. lépés: Díszes alakzat hozzáadása

Állítsa az előtér színét szürke színre. Díszes alakzatok készítéséhez használja az 1 px méretű puha kefét. Légy kreatív, bármilyen tetszőleges alakot használhat. Ezután rajzoljon 1 px vonalat, majd puha Eraser eszközzel törölje a külső szélét. Ismételje meg a vonalat, fordítsa meg vízszintesen, és helyezze a másik oldalra.

12. lépés

Válassza ki az összes díszes réteget, és egyesítse egy rétegbe a Ctrl + E. gomb megnyomásával. A Ctrl + I gomb megnyomásával megfordíthatja a színét. Aktiválja az Áthelyező eszközt, majd nyomja meg egyszer a lefelé mutató nyílot, hogy 1 px lefelé csúsztassa.

13. lépés: Fotóinformációk

Írja be a fényképadatokat a szalagba.

14. lépés: Navigáció

Ezután rajzolunk néhány kört a dia navigáláshoz. Rajzoljon egy kör alakú színt: # 8d877c a szalag alsó részén.

Adjon hozzá belső árnyékot a következő beállításokkal.

Ez az eredmény. A kör most egy sekély lyukvá válik.

15. lépés

Tartsa lenyomva az Alt billentyűt, majd húzza át a kör alakú réteget.

16. lépés

Állítsunk be aktív állapotot az egyik ilyen linkre. Válasszon egyet a körből, és változtassa meg a színét # bebbb5-re. Adjon hozzá belső árnyékot, gradiens átfedést és stroke-ot.

17. lépés

Tartsa lenyomva a Ctrl billentyűt, majd kattintson a szalagalap bélyegképére a Rétegek panelen. Hozzon létre új réteget a szalag alatt, és töltse ki fekete színnel. Aktiválja az Áthelyező eszközt, és néhányszor nyomja meg a bal és a lefelé mutató nyilat.

18. lépés

Lágyítsa meg a Gauss-blur szűrővel. Kattintson a Szűrő> Blur> Gaussian Blur elemre.

19. lépés

Helyezze a szalag árnyékot a csúszka keretréteg fölé. A Ctrl + Alt + G megnyomásával konvertálhatja azt a Vágómaszkra.

20. lépés

Az árnyék Opacity csökkentése 40% -ra.

21. lépés

Festék szalag árnyék a háttérben. Csökkentse az opacitását 20% -ra.

22. lépés

Használja a Pen Tool eszközt a szalag visszahúzására. Állítsa színét a # b68f63 értékre. Helyezze a csúszka mögé.

Ez az eredmény 100% -os nagyítással tekinthető meg.

23. lépés

Ismételje meg az általa létrehozott alakot, és tegye azt a szalag tetejére. Fordítsa függőlegesen.

24. lépés: Végső eredmény a Photoshopban

Ez a végső eredmény a Photoshopban. Ezután tovább fogjuk kódolni egy funkcionális csúszkába.

II. Rész - HTML / CSS konvertálása

25. lépés - Fájlok beállítása

Hozzon létre egy új mappát My-Photo-csúszka. Ebben a mappában hozzon létre egy új üres HTML-dokumentumot (index.html), üres stíluslap (style.css), és a képek mappáját (img). A jQuery könyvtárat és a Nivo Slider plugint is be kell illesztenünk a mappába. Ahogy HTML5 jelölést használunk, hozzá kell adnunk egy IE hacket, hogy engedélyezzük a HTML5 elemeket az IE 8-ban vagy az alatt. Az IE elhelyezéséhez a Modernizr nevű parancsfájlt fogjuk használni.

26. lépés - Alapvető HTML-jelölés

Nyisd ki index.html a kedvenc kódszerkesztőben. Határozza meg a DOCTYPE (HTML5-t használunk), fej elemeket (ahol hozzáadjuk a dokumentumok címét és linkeljük a CSS-t és a JavaScript-et (jQuery Library, Nivo Slider és Modernizr). div burkolat (az elrendezés középre állítása), fejléc elemet, és csúsztassa be.

27. lépés - Szelet PSD

Nyissa meg a PSD makettet, és vágja ki az összes szükséges képet. A képhez vegyük fel a következő képeket az sxc.hu-ról (szükséges a bejelentkezés, ha még nincs fiókja, ingyenesen regisztrálhat). Az összes kép átméretezése 920 × 430 px. Az összes képet helyezze a képmappába (img).

1. Rinjani által Ciaciya
2. Stupa, Agnes Sim
3. Tally a Nino Satria
4. Timo Balk ajánlatai
5. Uluwatu-Bali Aris Wjay

28. lépés - Fejléc létrehozása

Add hozzá ezeket a következő kódokat

és

.

 
 Saját fénykép dia 
 

Most add hozzá a stílust a fejléchez. Hozzáadjuk a test és a burkolóelemek stílusát is. Tedd az összes stílusot a stíluslapba, style.css.

 / * Basic Styling * / body háttér: átlátszó url (img / bg.jpg); betűtípus: 15px / 2 'Adobe Caslon Pro', Grúzia, Serif; margin: 0; padding: 0;  a vázlat: 0 nincs #pagewrap margin: 120px auto; padding: 0; helyzet: a relatív; magasság: 100%; szélesség: 960 x;  header display: block; float: right; margin-right: 40px; szélesség: 192px; z-index: 52; helyzet: a relatív;  h1 háttér: átlátszó url (img / separator.png) nem ismételhető középső alsó; / * Szétválasztó vonal hozzáadása a cím * / betűméret alatt: 18px; font-weight: Bold; magassága: 70 képpont; line-height: 1.1; margin: 55px 10px 0; text-align: center; text-transform: nagybetűs;  

29. lépés - Fényképcsúszka hozzáadása

Most hozzáadjuk a kódot a dokumentum fő részéhez, a fotó csúszkához. Tegyük fel először a képeket. Helyezze ezeket a következő kódot

.

Ezután adjuk hozzá a szalagot és a feliratot a képekhez.

 
 
 Fotós:
 Enrico Nunziati
 Elhelyezkedés:
 Namíb-sivatag
 Modell:
 Halott Vlei
 Dátum:
 2011. március 18. 
 
 Fotós:
 Lina Dhammanari
 Elhelyezkedés:
 Lombok-sziget, Indonézia
 Modell:
 Rinjani-hegy
 Dátum:
 2008. május 8. 
 
 Fotós:
 Agnes Sim
 Elhelyezkedés:
 Borobudur, Indonézia
 Modell:
 Nagy sztúpa
 Dátum:
 2008. június 12. 
 
 Fotós:
 Nino Satria
 Elhelyezkedés:
 Taman Safari Indonézia
 Modell:
 Tally zsiráf
 Dátum:
 2009. augusztus 16. 
 
 Fotós:
 Timo Balk
 Elhelyezkedés:
 Ubud, Bali, Indonézia
 Modell:
 Ajánlat
 Dátum:
 2009. december 20. 
 
 Fotós:
 Aris Wjay
 Elhelyezkedés:
 Uluwatu-Bali
 Modell:
 Gyönyörű strand
 Dátum:
 2011. július 20. 
 

Most, ha kinyitjuk index.html a böngészőben van valami ilyesmi:

30. lépés

Még mindig meg kell erősítenünk a csúszka megjelenését a CSS használatával.

 #slidewrap pozíció: abszolút; #slider pozíció: relatív; magasság: auto; szélesség: 920px; határ: 10px szilárd #fff; box-shadow: 0 0 5px # 444; margin: 10px;  .ribbon háttér: átlátszó url (img / info-bg.png) nem ismételhető; magasság: 482px; szélesség: 192px; pozíció: abszolút; jobbra: 40px; top: -3px; z-index: 50;  #slider img pozíció: abszolút; top: 0px; left: 0px; display: none;  

Ez az, ami most van.

Jelenleg összekapcsoltuk a Nivo csúszka bővítményt, de nem hagytuk fel a szkriptet. Tehát vegyük fel a szkriptet a JavaScript funkciók hozzáadásával és elem.

31. lépés: Csúsztatóstílus

Az utolsó lépés a csúszka stílusának hozzáadása.

 / * A Nivo csúszka stílusok * / .nivoSlider pozíció: relatív;  .nivoSlider img pozíció: abszolút; top: 0px; left: 0px;  / * Ha egy képet egy link * / .nivoSlider a.nivo-imageLink pozíció: abszolút; top: 0px; left: 0px; szélesség: 100%; magasság: 100%; átnyúló: 0; padding: 0; margin: 0; z-index: 6; display: none;  / * A csúszka * / .nivo-szelet szelet: blokk; pozíció: abszolút; z-index: 5; magasság: 100%;  .nivo-box display: block; pozíció: abszolút; z-index: 5;  .nivo-suunasNav kijelző: nincs! fontos .nivo-html-caption display: none;  .nivo-caption pozíció: abszolút; jobbra: 20px; text-align: center; top: 130px; szélesség: 192px; z-index: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: dőlt .nivo-controlNav pozíció: abszolút; bottom: 10px; jobbra: 20px; magasság: 15px; szélesség: 192px; text-align: center; display: block; z-index: 51;  .nivo-controlNav háttér: átlátszó url (img / button.png) nem ismételhető központközpont; display: inline-block; magasság: 14px; szélesség: 14px; text-indent: -9999px; kurzor: pointer;  .nivo-controlNav .active background: átlátszó url (img / button_active.png);  

Végeredmény + Letöltés

Ez a végső eredményünk, kattintson ide a működő demó megtekintéséhez.

Nem érhet el bizonyos lépéseket? Itt találja az eredmény PSD-fájlját és a teljes projektjét, amellyel tesztelhet és játszhat.

• Image Slider Tutorial PSD fájl
• Image Slider Tutorial Teljes projekt