Så här skapar du en bildreglage med Photoshop & jQuery

Otvivelaktigt är bildreglaget ett av de vanligaste elementen i företags webbdesign på grund av dess relativt stora storlek som kan dra upp besökarens uppmärksamhet när de anländer till webbplatsen. Även om webben har börjat ompröva användbarheten för bildreglaget, anses den fortfarande som en måste-lärande för nykomlingen av webbdesignindustrin.

I denna webbdesigntutorial lär vi oss att skapa anpassad bildreglage ovan med Photoshop, som du kan förhandsgranska det slutliga resultatet härifrån. Inte bara ska vi illustrera det i Photoshop, vi kommer också att göra det till en funktionell design genom att konvertera den till HTML / CSS och lägga till jQuery för dess fantastiska glidande effekt.

Låter som en massa komplicerade bitar som är inblandade, men i själva verket är det ganska enkelt och mycket lätt att förstå, låt oss börja då!

Mer intresserad av att anta en bildreglage och anpassa den på vägen? Här är inlägg dedikerade till dig.

• Bildreglage: 23 jQuery-reglage
• Bildreglage: 18 WordPress-plugins

Komma igång

För denna handledning behöver du följande resurser:

• 26 Repeterbara pixelmönster från PSDfreemium.
• jQuery-biblioteket
• Nivo Slider plugin
• Modernizr
• Hittade papperstexturer från VandelayPremier
• (Alternativ) 13 HQ Old Paper Textures från overdosse
• Rinjani av Ciaciya
• Stupa av Agnes Sim
• Tally av Nino Satria
• Erbjudanden från Timo Balk
• Uluwatu-Bali av Aris Wjay

Del I - Designa bildreglage

Steg 1: Ställa in bakgrund

Börja med att skapa en ny fil med storlek 1000 × 700 px. Fyll bakgrund med färg # efc89e.

Lägg till mönsteröverlägg med hjälp av gratis pixelmönster från PSDfreemium.

Steg 2: Slider Base

Aktivera rektangelverktyget. Skapa en rektangel med storlek 940 × 450 px. Du kan använda vilken färg som helst, det spelar ingen roll.

Dubbelklicka lager för att öppna dialogrutan Lagstil. Lägg till Layer Style Drop Shadow, Outer Glow och Stroke.

Detta är resultatet. Glidbanan har nu en fin ram med mjuk skugga bakom den.

Steg 3

Lägg till ett foto och placera det ovanför skjutreglaget. Tryck Ctrl + Alt + G för att konvertera det till Clipping Mask och sätt in fotot i skjutreglaget.

Steg 4: Ribbon

Rita en rektangelform med färg # f4e1ae som ska användas som ett band.

Dubbelklicka på formens lager och aktivera Bevel and Emboss, Gradient Overlay och Pattern Overlay med följande inställningar.

Detta är resultatet efter att du lagt till lagstilar.

Steg 5

Låt oss lägga till pappersstruktur på bandet för att göra det mer realistiskt. Placera texturen ovanpå bandformen. Konvertera det till Clipping Mask genom att trycka på Ctrl + Alt + G.

Steg 6

Låt oss måla några skuggor och belyser på bandet. Skapa nytt lager ovanför bandet. Måla svart på den nedre delen av bandet. Konvertera det till Clipping Mask (Ctrl + Alt + G) och minska dess opacitet till 10%.

Steg 7

Upprepa tidigare process till övre delen av bandet. Men den här gången lägger du till markering genom att måla vit och minska dess opacitet till 50%.

Steg 8: Stygn

Aktivera pennaverktyg. Tryck F5 för att öppna Börsinställning. Ställ penselstorlek till 1 px och öka avståndet tills vi får en streckad linje i förhandsgranskningsområdet.

Steg 9

Rita 1 px svart linje ovanpå bandet. Minska opacitet till 20%. Duplicera lager genom att trycka på Ctrl + J. Höger Ctrl + I för att invertera sin färg. Öka opacitet till 50%. Aktivera Flyttverktyget och tryck sedan på nedåtpil och vänsterpil en gång för att nudge den.

Här ses resultatet med 100% förstoring.

Steg 10

Upprepa denna process för att dra andra stygn på en annan sida av bandet.

Steg 11: Lägg till utsmyckad form

Ställ in förgrundsfärgen till grå. Använd mjuk borste med storlek 1 px för att dra en utsmyckad form. Var kreativ, du kan använda vilken form du gillar. Därefter dra en 1 px linje och radera sedan dess yttre kant med ett mjukt Eraser Tool. Dubbla linjen, vänd den horisontellt och placera den på andra sidan.

Steg 12

Markera alla utsmyckade lager och slå ihop det i ett lager genom att trycka på Ctrl + E. Dubbelformad och placera den under den ursprungliga utsmyckade formen. Tryck Ctrl + I för att invertera sin färg. Aktivera Verktygsverktyget och tryck sedan ned pilen en gång för att släcka den 1 px neråt.

Steg 13: Bildinformation

Skriv bilddata i bandet.

Steg 14: Navigation

Därefter ritar vi några cirklar för glidnavigering. Rita en cirkelform med färg: # 8d877c på underdelen av bandet.

Lägg till inre skugga med följande inställningar.

Detta är resultatet. Cirkeln blir nu ett grunt hål.

Steg 15

Håll Alt och dra sedan cirkelformlagret för att duplicera det.

Steg 16

Låt oss ställa aktivt tillstånd på en av dessa länkar. Välj en av cirkeln och ändra dess färg till # bebbb5. Lägg till inre skugga, övertoningsgrad och slag.

Steg 17

Håll Ctrl och klicka sedan på miniatyrbilden i bandbasen i panelen Lager. Skapa nytt lager under bandet och fyll det med svart. Aktivera Flyttverktyg och tryck några gånger på vänster och nedåtpil.

Steg 18

Mjuka det genom att utföra Gaussian Blur filter. Klicka på Filter> Blur> Gaussian Blur.

Steg 19

Placera bandskugga ovanför glidlagerramen. Konvertera det till Clipping Mask genom att trycka på Ctrl + Alt + G.

Steg 20

Minska skuggopacitet till 40%.

Steg 21

Måla bandskugga på bakgrunden. Minska opacitet till 20%.

Steg 22

Använd Pen Tool för att dra tillbaka en del av bandet. Ställ in färgen till # b68f63. Placera den bakom skjutreglaget.

Detta är resultatet som ses vid 100% förstoring.

Steg 23

Duplicera den form som vi just har skapat och placera den bakom toppen av bandet. Vänd det vertikalt.

Steg 24: Slutresultat i Photoshop

Detta är vårt slutresultat i Photoshop. Därefter fortsätter vi att koda den till en funktionell reglage.

Del II - Konvertera till HTML / CSS

Steg 25 - Ställa in filer

Skapa en ny mapp som heter My-Photo-Slider. Inne i den här mappen skapar du ett nytt tomt HTML-dokument (index.html), blank stilark (style.css) och mapp för bilder (img). Vi måste också inkludera jQuery-bibliotek och Nivo Slider-plugin till mappen. När vi använder HTML5-markup måste vi lägga till en IE-hack för att aktivera HTML5-element på IE 8 eller nedan. Vi använder ett skript som heter Modernizr för att rymma IE.

Steg 26 - Grundläggande HTML Markup

Öppna index.html i din favorit kodredigerare. Definiera DOCTYPE (vi använder HTML5), huvud element (där vi lägger till titlarna på dokumenten och länkar CSS och JavaScript (jQuery Library, Nivo Slider och Modernizr). Vi lägger också till en div wrapper (för att centrera layouten), rubrik element och glidförpackning.

Steg 27 - Slice PSD

Öppna PSD-mockupen och skiv ut alla nödvändiga bilder. För bilden, låt oss ta tag i följande bilder från sxc.hu (inloggning krävs, om du inte har ett konto ännu kan du registrera dig gratis). Ändra storlek på alla bilder till 920 × 430 px. Lägg alla bilder i bildmappen (img).

1. Rinjani av Ciaciya
2. Stupa av Agnes Sim
3. Tally av Nino Satria
4. Erbjudanden från Timo Balk
5. Uluwatu-Bali av Aris Wjay

Steg 28 - Skapa huvud

Lägg till följande kod mellan

och

.

 
 Mina fotogläder 
 

Nu lägger vi till stil i rubriken. Vi lägger också till stilen för kropps- och wrappelementen. Lägg alla stilar i stilarket, style.css.

 / * Basic Styling * / body bakgrund: transparent url (img / bg.jpg); typsnitt: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; marginal: 0; padding: 0;  en skiss: 0 ingen #pagewrap margin: 120px auto; padding: 0; positioner: relativ; höjd: 100%; bredd: 960 x;  rubrik display: block; float: höger; margin-höger: 40px; bredd: 192px; z-index: 52; positioner: relativ;  h1 bakgrund: transparent url (img / separator.png) no-repeat center bottom; / * Lägg till en separator linje under rubriken * / font-size: 18px; font-weight: bold; höjd: 70 bildpunkter; line-height: 1,1; marginal: 55px 10px 0; text-align: center; text-trans: versaler;  

Steg 29 - Lägg till fotoreglaren

Nu ska vi lägga till koden till huvuddelen av vårt dokument, fotoglaget. Låt oss lägga till bilderna först. Placera följande kod mellan

.

Och lägg sedan till bandet och bildtexten för bilderna.

 
 
 Fotograf:
 Enrico Nunziati
 Plats:
 Namib öken
 Modell:
 Dead Vlei
 Datum:
 18 mar 2011 
 
 Fotograf:
 Lina Dhammanari
 Plats:
 Lombok Island, Indonesien
 Modell:
 Mount Rinjani
 Datum:
 8 maj 2008 
 
 Fotograf:
 Agnes Sim
 Plats:
 Borobudur, Indonesien
 Modell:
 Stor Stupa
 Datum:
 12 juni 2008 
 
 Fotograf:
 Nino Satria
 Plats:
 Taman Safari Indonesien
 Modell:
 Tally Giraffe
 Datum:
 16 aug 2009 
 
 Fotograf:
 Timo Balk
 Plats:
 Ubud, Bali, Indonesien
 Modell:
 offer~~POS=TRUNC
 Datum:
 20 dec 2009 
 
 Fotograf:
 Aris Wjay
 Plats:
 Uluwatu-Bali
 Modell:
 Vacker strand
 Datum:
 20 juli 2011 
 

Nu, om vi öppnar index.html i webbläsaren har vi något liknande:

Steg 30

Vi behöver fortfarande fixa reglaget utseende med hjälp av CSS.

 #slidewrap position: absolute; #slider position: relative; höjd: auto; bredd: 920px; gränsen: 10px solid #fff; boxskugga: 0 0 5px # 444; margin: 10px;  .ribbon bakgrund: transparent url (img / info-bg.png) no-repeat; höjd: 482px; bredd: 192px; position: absolute; höger: 40px; top: -3px; z-index: 50;  #slider img position: absolute; top: 0px; vänster: 0px; display: none;  

Detta är vad vi har nu.

För närvarande har vi länkat Nivo slider plugin men vi har inte kopplat upp manuset. Så låt oss ansluta skriptet genom att lägga till dessa JavaScript-funktioner mellan och element.

Steg 31: Slider Style

Det sista steget är att lägga till stilen på reglaget.

 / * Nivo Slider-stilar * / .nivoSlider position: relative;  .nivoSlider img position: absolute; top: 0px; vänster: 0px;  / * Om en bild är insvept i en länk * / .nivoSlider a.nivo-imageLink position: absolute; top: 0px; vänster: 0px; bredd: 100%; höjd: 100%; kant: 0; padding: 0; marginal: 0; z-index: 6; display: none;  / * Skivorna och rutorna i Slider * / .nivo-skivan display: block; position: absolute; z-index: 5; höjd: 100%;  .nivo-box display: block; position: absolute; z-index: 5;  .nivo-directionNav display: none! important .nivo-html-caption display: none;  .nivo-caption position: absolute; höger: 20px; text-align: center; topp: 130 x; bredd: 192px; z-index: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: absolute; botten: 10px; höger: 20px; höjd: 15px; bredd: 192px; text-align: center; display: block; z-index: 51;  .nivo-controlNav en bakgrund: transparent url (img / button.png) no-repeat center center; display: inline-block; höjd: 14px; bredd: 14px; text-indent: -9999px; markören: pointer;  .nivo-controlNav .active background: transparent url (img / button_active.png);  

Slutresultat + Ladda ner

Detta är vårt slutresultat, klicka här för att se den fungerande demo.

Kan inte nå vissa steg? Här är resultatet PSD-fil och komplett projekt för att du ska testa och spela med.

• Bildskärmshandledning PSD-fil
• Image Slider Tutorial Complete Project