Jak vytvořit obrázek Slider pomocí Photoshop & jQuery

Nepochybně, jezdec obrazu je jedním z nejčastěji používaných prvků v business web design, vzhledem k jeho poměrně velké velikosti, která je schopna čerpat pozornost návštěvníka, jakmile dorazí na stránky. Ačkoli web začal přehodnocovat použitelnost obrazového jezdce, je stále považován za nutnost učit se pro nováčka webového průmyslu..

V tomto tutoriálu web design se naučíme vytvářet vlastní posuvník obrázků výše pomocí Photoshopu, ze kterého si můžete prohlédnout konečný výsledek. Nejen, že to dokážeme ilustrovat ve Photoshopu, ale také z funkčního designu, který převedeme do HTML / CSS a přidáme jQuery pro jeho úžasný posuvný efekt.

Zní to jako spousta komplikovaných bitů, ale ve skutečnosti je to docela jednoduché a snadno pochopitelné, začněme pak!

Více se zajímáte o přijetí obrazového jezdce a jeho přizpůsobení na cestě? Zde jsou příspěvky určené pro vás.

Posuvník obrázku: 23 jQuery Posuvníky
Obrázek Slider: 18 WordPress Plugins

Začínáme

Pro tento návod budete potřebovat následující zdroje:

26 Opakovatelné obrazové body z PSDfreemium.
Knihovna jQuery
Nivo Slider plugin
Modernizr
Nalezené papírové textury od VandelayPremier
(Alternativa) 13 HQ Starý papír Textury z předávkování
Rinjani by Ciacija
Stupa od Agnes Sim
Tally Nino Satria
Nabídky Timo Balk
Uluwatu-Bali od Aris Wjay

Část I - Návrh obrazového jezdce

Krok 1: Nastavení pozadí

Začněte vytvořením nového souboru o velikosti 1000 × 700 px. Vyplňte pozadí barvou # efc89e.

Přidat šablonu překrytí pomocí volného pixelového vzoru z PSDfreemium.

Krok 2: Posuvná základna

Aktivujte nástroj Obdélník. Vytvořte obdélník o velikosti 940 × 450 px. Můžete použít jakoukoliv barvu, na tom nezáleží.

Poklepáním na vrstvu otevřete dialogové okno Styl vrstvy. Přidat Styl Stín, Strop, Vnější Záření a Stroke.

To je výsledek. Základna jezdce má nyní pěkný rám s měkkým stínem za ním.

Krok 3

Přidejte fotografii a umístěte ji nad základnu jezdce. Stiskem Ctrl + Alt + G jej převedete na Clipping Mask a vložíte fotografii do posuvníku.

Krok 4: Stuha

Nakreslete tvar obdélníku s barvou # f4e1ae, který bude použit jako stuha.

Poklepejte na vrstvu tvaru a aktivujte zkosení a reliéf, překrytí přechodu a překrytí vzoru s následujícími nastaveními.

To je výsledek po přidání stylů vrstvy.

Krok 5

Přidejme na papír texturu papíru, aby byla realističtější. Umístěte texturu na horní část pásu. Převeďte ji na masku oříznutí stisknutím kláves Ctrl + Alt + G.

Krok 6

Pojďme na stuhu namalovat stíny a světla. Vytvořte novou vrstvu nad pásem karet. Barva černá na spodní části pásky. Převést ji na masku oříznutí (Ctrl + Alt + G) a poté snížit její krytí na 10%.

Krok 7

Opakujte předchozí postup na horní část pásky. Tentokrát však přidejte zvýraznění bílou barvou a poté její Opacity na 50%..

Krok 8: Stehy

Aktivovat nástroj tužka. Stisknutím klávesy F5 otevřete nastavení štětce. Nastavte velikost štětce na 1 px a zvětšete vzdálenost, dokud nedosáhneme tečkované čáry v oblasti náhledu.

Krok 9

Kreslení 1 px černá čára na horní části pásky. Snižte jeho krytí na 20%. Duplikovat vrstvu stisknutím kláves Ctrl + J. Chcete-li invertovat barvu, stiskněte klávesu Ctrl + I. Zvyšte Opacity na 50%. Aktivujte nástroj Přesunout a pak jednou stiskněte šipku dolů a šipku doleva, abyste ho mohli posunout.

Zde je výsledek zobrazen při 100% zvětšení.

Krok 10

Tento postup opakujte pro kreslení dalších stehů na jiné straně pásky.

Krok 11: Přidání ozdobeného tvaru

Nastavte barvu popředí na šedou. Ke kreslení ozdobeného tvaru použijte měkký štětec s velikostí 1 px. Buďte kreativní, můžete použít libovolný tvar, který se vám líbí. Vedle ní nakreslete čáru o velikosti 1 px a poté pomocí vnějšího nástroje Eraser Tool vymažte její vnější okraj. Duplikujte linku, otočte ji vodorovně a umístěte ji na druhou stranu.

Krok 12

Vyberte všechny zdobené vrstvy a sloučete je do jedné vrstvy stisknutím klávesy Ctrl + E. Duplikujte tvar a umístěte jej pod původní ozdobený tvar. Stiskem Ctrl + I invertujete barvu. Aktivujte nástroj Přesun a pak jednou stiskněte šipku dolů, abyste jej posunuli o 1 px dolů.

Krok 13: Informace o fotografiích

Do pásu karet zadejte fotografická data.

Krok 14: Navigace

Následně nakreslíme některé kruhy pro navigaci snímků. Nakreslete tvar kruhu s barvou: # 8d877c na spodní části pásky.

Přidejte vnitřní stín pomocí následujících nastavení.

To je výsledek. Kruh se nyní mění v mělkou díru.

Krok 15

Podržte klávesu Alt a přetáhněte vrstvu tvaru kruhu, abyste ji duplikovali.

Krok 16

Pojďme nastavit aktivní podmínku na jeden z těchto odkazů. Vyberte jeden z kruhů a změňte jeho barvu na # bebbb5. Přidat vnitřní stín, překrytí přechodu a zdvih.

Krok 17

Podržte klávesu Ctrl a poté klepněte na miniaturu pásu karet v panelu Vrstvy. Pod páskou vytvořte novou vrstvu a vyplňte ji černou barvou. Aktivujte nástroj Přesun a několikrát stiskněte levé a dolů šipky.

Krok 18

Změkčete jej provedením Gaussova rozostření. Klepněte na příkaz Filtr> Rozostření> Gaussovské rozostření.

Krok 19

Stín pásu umístěte nad vrstvu posuvného rámu. Převeďte ji na masku oříznutí stisknutím kláves Ctrl + Alt + G.

Krok 20

Snížit stín Opacity na 40%.

Krok 21

Barva stínu na pozadí. Snižte jeho krytí na 20%.

Krok 22

Použijte Pen Tool pro navrácení části pásky. Nastavte barvu na # b68f63. Umístěte je za posuvník.

To je výsledek při 100% zvětšení.

Krok 23

Duplikujte tvar, který jsme právě vytvořili, a umístěte jej za horní část pásky. Otočte ji svisle.

Krok 24: Výsledek ve Photoshopu

To je náš konečný výsledek ve Photoshopu. Dále ji budeme dále kódovat do funkčního jezdce.

Část II - Převod do HTML / CSS

Krok 25 - Nastavení souborů

Vytvořte novou složku s názvem My-Photo-Slider. V této složce vytvořte nový prázdný dokument HTML (index.html), prázdný styl (style.css) a složku pro obrázky (img). Do této složky také musíme zahrnout knihovnu jQuery a plugin Nivo Slider. Když používáme značení HTML5, musíme přidat IE hack, abychom umožnili HTML5 elementům na IE 8 nebo nižším. Použijeme skript nazvaný Modernizr pro přizpůsobení IE.

Krok 26 - Základní značení HTML

otevřeno index.html v editoru oblíbených kódů. Definujte DOCTYPE (používáme HTML5), hlava prvky (kde přidáme název dokumentu a odkaz CSS a JavaScript (jQuery Library, Nivo Slider a Modernizr). div wrapper (vycentrování rozvržení), záhlaví element a slider.

      My Photo Slides

Krok 27 - Slice PSD

Otevřete maketu PSD a vyjměte všechny potřebné obrázky. Pro obrázek si vezmeme následující obrázky z sxc.hu (vyžaduje se přihlášení, pokud ještě nemáte účet, můžete se zdarma zaregistrovat). Změňte velikost všech snímků na 920 × 430 px. Všechny obrázky vložte do složky obrázků (img).

Rinjani by Ciacija
Stupa od Agnes Sim
Tally Nino Satria
Nabídky Timo Balk
Uluwatu-Bali od Aris Wjay

Krok 28 - Vytvoření záhlaví

Přidejte následující kód mezi

  My Photo Slides

Nyní přidáme styl do záhlaví. Také přidáváme styl pro prvky těla a obalu. Dejte všechny styly do šablony stylů, style.css.

 / * Základní styling * / body background: transparent url (img / bg.jpg); písmo: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; marže: 0; výplň: 0;  a obrys: 0 žádný #pagewrap okraj: 120px auto; výplň: 0; poloha: relativní; výška: 100%; šířka: 960px;  hlavička display: block; float: right; pravý okraj: 40px; width: 192px; z-index: 52; poloha: relativní;  h1 background: transparent url (img / separator.png) neopakovatelné středové dno; / * Přidat oddělovací řádek pod název * / font-size: 18px; font-weight: tučné; výška: 70px; výška čáry: 1.1; okraj: 55px 10px 0; zarovnání textu: střed; text-transform: velká písmena;

Krok 29 - Přidání posuvníku fotografií

Nyní přidáme kód do hlavní části našeho dokumentu, posuvníku fotografií. Nejdříve přidáme fotografie. Umístěte následující kód mezi

A pak přidejte stuhu a titulek pro fotografie.

 
  Fotograf:
 Enrico Nunziati
 Umístění:
 Namibská poušť
 Modelka:
 Dead Vlei
 Datum:
 18. března 2011 
  Fotograf:
 Lina Dhammanari
 Umístění:
 Lombok Island, Indonésie
 Modelka:
 Mount Rinjani
 Datum:
 8. května 2008 
  Fotograf:
 Agnes Sim
 Umístění:
 Borobudur, Indonésie
 Modelka:
 Velký Stupa
 Datum:
 12.6.2008 
  Fotograf:
 Nino Satria
 Umístění:
 Taman Safari Indonésie
 Modelka:
 Tally žirafa
 Datum:
 16. srpna 2009 
  Fotograf:
 Timo Balk
 Umístění:
 Ubud, Bali, Indonésie
 Modelka:
 Nabídky
 Datum:
 20. prosince 2009 
  Fotograf:
 Aris Wjay
 Umístění:
 Uluwatu-Bali
 Modelka:
 Krásná pláž
 Datum:
 20. července 2011

Teď, když se otevřeme index.html v prohlížeči máme něco takového:

Krok 30

Stále musíme opravit vzhled jezdce pomocí CSS.

 #slidewrap position: absolute; #slider position: relativní; výška: auto; šířka: 920px; ohraničení: 10px pevné #fff; box-shadow: 0 0 5px # 444; marže: 10px;  .ribbon background: transparent url (img / info-bg.png) ne-opakování; výška: 482px; width: 192px; pozice: absolutní; vpravo: 40px; top: -3px; z-index: 50;  #slider img pozice: absolutní; nahoru: 0px; vlevo: 0px; displej: žádný;

To je to, co máme nyní.

V současné době máme propojený zásuvný modul Nivo, ale ten skript jsme nezavázali. Takže pojďme se připojit skript přidáním těchto funkcí JavaScript mezi a živel.

Krok 31: Styl jezdce

Posledním krokem je přidání stylu posuvníku.

 / * Styly Nivo Slider * / .nivoSlider pozice: relativní;  .nivoSlider img pozice: absolutní; nahoru: 0px; vlevo: 0px;  / * Pokud je obrázek zabalen do odkazu * / .nivoSlider a.nivo-imageLink position: absolute; nahoru: 0px; vlevo: 0px; šířka: 100%; výška: 100%; ohraničení: 0; výplň: 0; marže: 0; z-index: 6; displej: žádný;  / * Řezy a rámečky v Slider * / .nivo-slice display: block; pozice: absolutní; z-index: 5; výška: 100%;  .nivo-box zobrazit: blok; pozice: absolutní; z-index: 5;  .nivo-directionNav display: none! important .nivo-html-caption display: none;  .nivo-caption position: absolute; vpravo: 20px; zarovnání textu: střed; top: 130px; width: 192px; z-index: 60;  .nivo-caption p margin: 0 .nivo-caption .title styl písma: kurzíva .nivo-controlNav position: absolute; dno: 10px; vpravo: 20px; výška: 15px; width: 192px; zarovnání textu: střed; zobrazení: blok; z-index: 51;  .nivo-controlNav a background: transparent url (img / button.png) centrum neopakování; displej: inline-block; výška: 14px; šířka: 14px; text-odrážka: -9999px; kurzor: ukazatel;  .nivo-controlNav .active background: transparent url (img / button_active.png);

Konečný výsledek + Stáhnout

Toto je náš konečný výsledek, klikněte zde a uvidíte pracovní demo.

Nelze dosáhnout určitého kroku? Zde je výsledek PSD soubor a kompletní projekt pro vás otestovat a hrát si s.

Image Slider Tutorial PSD soubor
Image Slider Tutorial Kompletní projekt