Create din egen Juicy Tabbed Slider (Free PSD + Coding oppdatering!)
Igjen, dette er en sak der du kan tinker med effekten for å få resultatene du ønsker. En mørkere skygge vil gjøre bildet virker mer dramatisk og dypt innfelt. En lettere skygge (eller ingen skygge i det hele tatt) vil gjøre bildet virker mer flat.
Whallah!
Lag tabbed Knapper
Venstre og Høyre tabbed knappene på siden er en del av hoved appell av denne type slider fordi de bryter utenfor rammen bare litt og skape en mer interessant form til vår slider
Start. ved å tegne en sirkel (hold nede Shift-tasten for å beholde den en perfekt sirkel ved bruk av Ellipse verktøyet). Størrelsen bør være ca 60px (du kan se på infopanelet som du tegner sirkelen for å se den størrelsen som vises i teksten der).
Deretter legger du til en 1px stroke å bruke samme farge vi brukte for bakgrunn ramme
Som en bonus -. legge en lys skygge for å etterligne den skyggen som vi trakk inn under rammen. The Drop Shadow som vi brukte var ca 15% opacity, Avstand tre, og størrelse 4. Vinkelen bør gjenspeile vår lyskilde i midten av rammen -. Så i dette tilfellet er det ca 130 grader
Nå kan du legge våre piler. Du kan bruke en vanlig Photoshop Shape eller en "> >" tekstversjon av pilene ved hjelp av din favoritt skrift. Du kan også tegne din egen i Illustrator hvis du foretrekker å få en helt unik form. I vårt tilfelle brukte vi "> >" bruker fonten Lucida Sans.
Deretter gruppe sammen sirkelen Shape lag og pil-laget ved å velge dem begge og trykke Ctrl + G.
Nå tegne en maske over gruppen for å gjøre det synes som om det er bare så vidt overlapper vår ramme. For å gjøre dette: Tegn en rektangulær markering Marquee, deretter trykker du på "Legg til lagmaske" -knappen når du har gruppen mappen valgt
Det er bra om denne "gruppen" maske er at det også masker alle av. Layer Styles. Hvis vi prøvde å bare maskere sirkelen selv, ville slaget og skygge skal beskjæres i tillegg, noe som gjør dem synlige over rammen (som vi ikke ønsker).
Til slutt, bare kopiere knappen gruppen og flip den horisontalt. Vi skal flytte den på plass over til venstre side av dokumentet. Den eneste virkelige tips her er at vi trenger også å justere skygge vinkel til 50 grader for å matche vår lyskilde i midten av rammen. Sørg for at du slår av Global Lys velgeren for å sikre at du ikke justerer den andre skyggen.
Lag på sirkelknappen Module
Det siste elementet i denne glideren er den lille "sirkel knapp modul" som vil vise hvor mange bilder du har i lysbildet.
Start med å lage en enkel 13px sirkel (igjen, hold Shift for å få det perfekt). Vi ønsker å legge til en annen 1px stroke rundt utsiden ved hjelp av samme farge som alle tidligere slag (# c8c8c8 for demo).
Til slutt legger du en veldig subtil gradient over sirkelen (Lys grå [# D9D9D9 ] blending til hvitt på toppen). Du kan justere farging av gradient som passer dine preferanser, men ideen her er å gjøre sirkelen føles mer som en knapp som brukeren kan trykke ned på.
Duplicate den opprinnelige sirkelen et par flere ganger og dytte dem over til siden (du bør ha så mange sirkler som du har bilder i lysbilde).
Disse sirklene er fryktelig vanskelig å se nå ... så la oss legge til en bakgrunn for dem å være litt mer synlig på lyse bilder.
Start med å tegne en Avrundet rektangel med en 10px radius (du kan justere avstanden til dine egne ønsker). Deretter setter Fill til 50% for å gjøre det litt se gjennom.
Sist, satt en 2px Stroke (# a7a7a7) med en tetthet rundt 50% for å gjøre det også gjennomsiktig. Den endelige effekten skal være en gjennomsiktig avrundet rektangel med en subtil grensen.
Final trinn! Legg en mindre sirkel over en av de opprinnelige sirkler og plasser den i midten. Justere farge (du kan bruke en gradient eller farge) som passer din egen merkevarebygging farger. Du vil merke at i demoen, vi brukte de samme fargene som vi bruker i Webdesigntuts logo.
Congrats! Du er ferdig!
Utmerket arbeid! Nå som du har grunnleggende slider oppsett, kan du enkelt justere størrelsen som passer til dine egne prosjekter. Du kan også Reskin dette for å bruke forskjellig farger bakgrunner, restyled knapper, eller til og med legge teksturer til selve rammen. Grensen er egentlig opp til deg - bare huske på de grunnleggende prinsippene som vi oppsett her og du gjør bra
.