Kuvan luiston luominen Photoshopin ja jQueryn avulla

Kuvan liukusäädin on epäilemättä yksi yleisimmin käytetyistä elementeistä yrityksen web-suunnittelussa sen suhteellisen suuren koon vuoksi, joka pystyy vetämään kävijän huomion, kun he saapuvat sivustoon. Vaikka verkko on alkanut harkita uudelleen kuvan liukusäätimen käytettävyyttä, sitä pidetään edelleen tarpeellisena oppimisena web-suunnittelualan tulokkaalle.

Tässä web-suunnitteluoppaassa opimme luomaan mukautetun kuvan liukusäädintä yllä käyttämällä Photoshopia, josta voit esikatsella lopullista tulosta täältä. Sen lisäksi, että me havainnollistamme sitä Photoshopissa, muutamme sen myös toiminnalliseksi malliksi muuntamalla sen HTML / CSS: ksi ja lisäämällä jQueryn sen mahtavan liukuvaikutuksen vuoksi.

Kuulostaa paljon monimutkaisia ​​bittejä, mutta itse asiassa se on melko suoraviivainen ja helppo ymmärtää, aloitetaan sitten!

Kiinnostuneempi kuva liukusäätimen käyttöönotosta ja mukauttamisesta sen mukaan? Tässä ovat teille omistetut viestit.

• Kuva Slider: 23 jQuery Sliders
• Image Slider: 18 WordPress-laajennusta

Päästä alkuun

Tätä opetusohjelmaa varten tarvitaan seuraavat resurssit:

• 26 PSDfreemiumilta toistettavat pikselimallit.
• jQuery-kirjasto
• Nivo Slider plugin
• Modernizr
• Löytyi VandelayPremierin paperikuvioita
• (Vaihtoehtoinen) 13 HQ: n vanha paperi-tekstuuri yliannostuksesta
• Ciaciya Rinjani
• Stupa by Agnes Sim
• Nino Satria
• Timo Balkin tarjoukset
• Uluwatu-Bali, Aris Wjay

Osa I - Kuvan liukusäätimen suunnittelu

Vaihe 1: Taustan asettaminen

Aloita luomalla uusi tiedosto, jonka koko on 1000 × 700 px. Täytä tausta värillä # efc89e.

Lisää kuvion päällekkäisyys käyttämällä vapaata pikselimallia PSDfreemiumista.

Vaihe 2: Slider Base

Aktivoi suorakulmio-työkalu. Luo suorakulmio, jonka koko on 940 × 450 px. Voit käyttää mitä tahansa väriä, ei ole väliä.

Avaa Layer Style -valintaikkuna kaksoisnapsauttamalla kerrosta. Lisää tasotyyli-pudotusvarjo, ulkoinen hehku ja aivohalvaus.

Tämä on tulos. Liukusäätimellä on nyt mukava kehys, jonka takana on pehmeä varjo.

Vaihe 3

Lisää valokuva ja aseta se liukusäätimen pohjan yläpuolelle. Muuta Ctrl + Alt + G muuntamalla se leikkaavaksi maskiksi ja aseta kuva liukusäätimeen.

Vaihe 4: Nauha

Piirrä suorakulmion muoto värillä # f4e1ae käytettäväksi nauhana.

Kaksoisnapsauta muodon kerrosta ja aktivoi Bevel and Emboss, Gradient Overlay ja Pattern Overlay seuraavilla asetuksilla.

Tämä on seurausta kerrostyylien lisäämisen jälkeen.

Vaihe 5

Lisäämme nauhalle paperin tekstuuri, jotta se olisi realistisempi. Aseta rakenne nauhan muodon päälle. Muunna se leikkaavaksi maskiksi painamalla Ctrl + Alt + G.

Vaihe 6

Maalaa joitakin varjoja ja kohokohtia nauhalle. Luo uusi kerros nauhan yläpuolelle. Maalaa musta nauhan alaosassa. Muunna se Clipping Mask (Ctrl + Alt + G) ja vähentää sen opasiteettia 10%: iin.

Vaihe 7

Toista edellinen prosessi nauhan yläosaan. Mutta tällä kertaa lisää korostus maalaamalla valkoinen ja vähennä sen opasiteettia 50%: iin.

Vaihe 8: Ompeleet

Aktivoi kynätyökalu. Paina F5 avataksesi Brush-asetuksen. Aseta harjan koko 1 px ja lisää välilyöntiä, kunnes saamme katkoviivan esikatselualueella.

Vaihe 9

Piirrä 1 px musta viiva nauhan päälle. Vähennä sen opasiteettia 20 prosenttiin. Kaksoiskerros painamalla Ctrl + J. Osoita Ctrl + I kääntääksesi sen värin. Suurenna opasiteettia 50 prosenttiin. Aktivoi Siirrä työkalu ja paina sitten nuolinäppäintä ja vasenta nuolta kerran palataksesi sen.

Tässä on tulos 100% suurennettuna.

Vaihe 10

Toista tämä prosessi vetääksesi muita ompeleita nauhan toiselle puolelle.

Vaihe 11: Lisää koristeellinen muoto

Aseta etualan väri harmaaksi. Piirrä koristeellinen muoto käyttämällä pehmeää harjaa, jonka koko on 1 px. Ole luova, voit käyttää mitä tahansa haluamaasi muotoa. Piirrä sen vieressä 1 px viiva ja poista sen ulkoreuna pehmeällä Eraser-työkalulla. Kopioi linja, käännä se vaakasuoraan ja aseta se toiselle puolelle.

Vaihe 12

Valitse kaikki koristeelliset kerrokset ja yhdistä se yhteen kerrokseen painamalla Ctrl + E. Kaksoiskappale ja aseta se alkuperäisen koristeellisen muodon alle. Osoita Ctrl + I kääntääksesi sen värin. Aktivoi Siirrä työkalu ja paina kerran nuolinäppäintä kerran piilottamalla se 1 px alas.

Vaihe 13: Valokuvan tiedot

Kirjoita kuvan tiedot nauhan sisään.

Vaihe 14: Navigointi

Seuraavaksi piirrämme joitakin ympyröitä diaesitykselle. Piirrä ympyrän muoto värillä: # 8d877c nauhan alaosassa.

Lisää sisäinen varjo seuraavien asetusten avulla.

Tämä on tulos. Ympyrä muuttuu nyt matalaksi reikäksi.

Vaihe 15

Pidä Alt ja vedä sitten ympyrän muotoinen kerros kopioidaksesi sen.

Vaihe 16

Määritä aktiivinen tila jollekin näistä linkeistä. Valitse yksi ympyrästä ja muuta sen väri # bebbb5. Lisää sisäinen varjo, gradientin peitto ja aivohalvaus.

Vaihe 17

Pidä Ctrl-painiketta ja napsauta sitten nauhapohjan pikkukuvaa Tasot-paneelissa. Luo uusi kerros nauhan alle ja täytä se mustalla. Aktivoi Siirrä työkalu ja paina muutaman kerran vasemmalle ja alas-nuolta.

Vaihe 18

Pehmennä se suorittamalla Gaussin hämärtyssuodatin. Valitse Suodatin> Blur> Gaussian Blur.

Vaihe 19

Aseta nauhan varjo liukusäätimen kehyksen yläpuolelle. Muunna se leikkaavaksi maskiksi painamalla Ctrl + Alt + G.

Vaihe 20

Vähennä varjon läpinäkyvyyttä 40%: iin.

Vaihe 21

Maalaa nauhan varjo taustalla. Vähennä sen opasiteettia 20%: iin.

Vaihe 22

Käytä Pen-työkalua vetääksesi osan nauhasta. Aseta värin arvoksi # b68f63. Aseta se liukusäätimen taakse.

Tämä on tulos 100% suurennettuna.

Vaihe 23

Kopioi juuri luomamme muoto ja aseta se nauhan yläosan taakse. Käännä se pystysuoraan.

Vaihe 24: Lopullinen tulos Photoshopissa

Tämä on lopullinen tulos Photoshopissa. Seuraavaksi koodataan sitä toiminnalliseksi liukusäätimeksi.

Osa II - HTML / CSS: n muuntaminen

Vaihe 25 - Tiedostojen asettaminen

Luo uusi kansio nimeltä Oma-Photo-Slider. Luo tämän kansion sisällä uusi tyhjä HTML-asiakirja (index.html), tyhjä tyylitaulukko (style.css) ja kansio kuville (img). Meidän on myös sisällytettävä kansioon jQuery-kirjasto ja Nivo Slider -laajennus. Kun käytämme HTML5-merkintää, meidän on lisättävä IE-hakata, jotta HTML5-elementit voidaan ottaa käyttöön IE 8: ssa tai sen alapuolella. Käytämme skriptiä nimeltä Modernizr, jotta se mahtuu IE: hen.

Vaihe 26 - HTML-perusmerkintä

Avata index.html suosikkikoodieditorissa. Määritä DOCTYPE (käytämme HTML5: tä), pää elementtejä (joihin lisätään asiakirjojen otsikko ja linkki CSS ja JavaScript (jQuery Library, Nivo Slider ja Modernizr). div kääre (keskittää asettelun), ylätunniste elementti ja liukukääre.

Vaihe 27 - Slice PSD

Avaa PSD-maku ja leikkaa kaikki tarvittavat kuvat. Kuvaa varten tartu seuraaviin sxc.hu-kuviin (vaaditaan kirjautumista, jos sinulla ei vielä ole tiliä, voit rekisteröityä ilmaiseksi). Muuta kaikkien kuvien kokoa 920 × 430 px. Laita kaikki kuvat kuvakansioon (img).

1. Ciaciya Rinjani
2. Stupa by Agnes Sim
3. Nino Satria
4. Timo Balkin tarjoukset
5. Uluwatu-Bali, Aris Wjay

Vaihe 28 - Luo otsikko

Lisää nämä seuraavat koodit

ja

.

 
 Omat valokuvakuvat 
 

Lisää nyt tyyli otsikkoon. Lisäämme myös kehon ja kääreelementtien tyylin. Laita kaikki tyylit tyylejä, style.css.

 / * Basic Styling * / body tausta: läpinäkyvä url (img / bg.jpg); fontti: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; margin: 0; padding: 0;  a outline: 0 none #pagewrap margin: 120px auto; padding: 0; kanta: suhteellinen; korkeus: 100%; leveys: 960px;  header display: block; float: oikea; margin-right: 40px; leveys: 192px; z-indeksi: 52; kanta: suhteellinen;  h1 tausta: läpinäkyvä url (img / separator.png) ei-toista keskipohja; / * Lisää erotinlinja otsikon * / fonttikoon alapuolelle: 18px; fontti-paino: lihavoitu; korkeus: 70 kuvapistettä; line-height: 1,1; marginaali: 55px 10px 0; text-align: keskusta; text-muunnos: isoja;  

Vaihe 29 - Lisää valokuva-liukusäädintä

Nyt lisäämme koodin asiakirjan pääosaan, valokuva-liukusäädintä. Lisäämme kuvat ensin. Aseta nämä seuraavat koodit

.

Lisää sitten nauha ja kuvatekstit.

 
 
 Valokuvaaja:
 Enrico Nunziati
 Sijainti:
 Namibin autiomaa
 Malli:
 Dead Vlei
 Treffi:
 18. maaliskuuta 2011 
 
 Valokuvaaja:
 Lina Dhammanari
 Sijainti:
 Lombok Island, Indonesia
 Malli:
 Mount Rinjani
 Treffi:
 8. toukokuuta 2008 
 
 Valokuvaaja:
 Agnes Sim
 Sijainti:
 Borobudur, Indonesia
 Malli:
 Big Stupa
 Treffi:
 12. kesäkuuta 2008 
 
 Valokuvaaja:
 Nino Satria
 Sijainti:
 Taman Safari Indonesia
 Malli:
 Tally Giraffe
 Treffi:
 16. elokuuta 2009 
 
 Valokuvaaja:
 Timo Balk
 Sijainti:
 Ubud, Bali, Indonesia
 Malli:
 tarjoukset
 Treffi:
 20.12.2009 
 
 Valokuvaaja:
 Aris Wjay
 Sijainti:
 Uluwatu-Bali
 Malli:
 Kaunis ranta
 Treffi:
 20. heinäkuuta 2011 
 

Jos nyt avataan index.html selaimessa meillä on jotain tällaista:

Vaihe 30

Meidän on vielä korjattava liukusäätimen ulkonäkö CSS: n avulla.

 #slidewrap sijainti: absoluuttinen; #slider sijainti: suhteellinen; korkeus: auto; leveys: 920px; raja: 10px kiinteä #fff; box-shadow: 0 0 5px # 444; margin: 10px;  .ribbon tausta: läpinäkyvä url (img / info-bg.png) ei-toista; korkeus: 482px; leveys: 192px; kanta: absoluuttinen; oikea: 40px; top: -3px; z-indeksi: 50;  #slider img sijainti: absoluuttinen; top: 0px; vasen: 0px; display: none;  

Tämä on nyt meillä.

Tällä hetkellä olemme liittäneet Nivo-liukusäätimen, mutta emme ole kiinnittäneet käsikirjoitusta. Joten yhdistetäänkö komentosarja lisäämällä nämä JavaScript-toiminnot ja elementti.

Vaihe 31: Slider Style

Viimeinen vaihe on liukusäätimen tyylin lisääminen.

 / * Nivo-liukusäätimen tyylit * / .nivoSlider sijainti: suhteellinen;  .nivoSlider img sijainti: absoluuttinen; top: 0px; vasen: 0px;  / * Jos kuva kääritään linkkiin * / .nivoSlider a.nivo-imageLink sijainti: absoluuttinen; top: 0px; vasen: 0px; leveys: 100%; korkeus: 100%; border: 0; padding: 0; margin: 0; z-indeksi: 6; display: none;  / * Slider * / .nivo-slice näyttö: lohko; kanta: absoluuttinen; z-indeksi: 5; korkeus: 100%;  .nivo-box display: block; kanta: absoluuttinen; z-indeksi: 5;  .nivo-suunasNav näyttö: ei mitään! tärkeää .nivo-html-caption display: none;  .nivo-caption sijainti: absoluuttinen; oikea: 20px; text-align: keskusta; top: 130px; leveys: 192px; z-indeksi: 60;  .nivo-caption p marginaali: 0 .nivo-caption .title font-style: kursivoitu .nivo-controlNav sijainti: absoluuttinen; pohja: 10px; oikea: 20px; korkeus: 15px; leveys: 192px; text-align: keskusta; display: block; z-indeksi: 51;  .nivo-controlNav a tausta: läpinäkyvä url (img / button.png) ei-toista keskuskeskusta; näyttö: inline-block; korkeus: 14 kuvapistettä; leveys: 14px; text-luetelmakohta: -9999px; osoitin: osoitin;  .nivo-controlNav .active tausta: läpinäkyvä url (img / button_active.png);  

Lopputulos + lataus

Tämä on lopullinen tulos, klikkaa tästä nähdäksesi toimivan demon.

Etkö voi saavuttaa tiettyä askelta? Tässä on tuloksen PSD-tiedosto ja täydellinen projekti, jolla voit testata ja pelata.

• Image Slider -opetusohjelma PSD-tiedosto
• Image Slider Tutorial Complete Project