How å lage en Vector Bilde Slider i Adobe Illustrator
Bilde glidere har vært en vanlig element av webdesign i løpet av de siste årene, spesielt i portefølje design. I dagens tutorial, jeg skal vise deg hvordan du oppretter et bilde glideren i Adobe Illustrator.
Trinn 1
Hit Command + N for å opprette et nytt dokument. Skriv inn 600 i boksen Bredde og høyde boksene klikk deretter på knappen Avansert. Velg RGB, Screen (72ppi) og sørge for at " Rett nye objekter til Pixel Grid " er merket før og klikk på OK. Aktiver Grid (View > Vis rutenett) og Fest til rutenett (View > Fest til rutenett).
Deretter trenger du et rutenett hver 5px. Gå til Rediger > Preferanser > Guides > Grid, skriv 5 i linjenettet hver boks og en i underinndelinger boksen. Du kan også åpne infopanelet (Vindu > Info) for en live forhåndsvisning med størrelsen og plasseringen av figurer. Ikke glem å bytte måleenhet for å piksler fra Rediger > Preferanser > Enhet > General. Al disse alternativene vil øke arbeidshastigheten.
Trinn 2
Bruke rektangelverktøyet (M), opprette en 540 etter 220px form, fyll den med R = 28 G = 117 B = 188 og gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 5px radius, klikk på OK og gå til Object > Utvid Utseende.
Trinn 3
Deretter trenger du dette bildet. Lagre det på harddisken din og dra den inni AI-fil. Velg det og fokusere på Transformering-panelet (Vindu > Transform). Kontroller at " Constrain bredde og høyde proporsjoner " knappen er valgt, skriv 210 i høyden boksen deretter plassere bildet som vist i det første bildet. Fest til rutenett skulle lette arbeidet ditt. Bruke rektangelverktøyet (M), opprette en 40 ved 210px form, fyll den med hvit, plasser den som vist i det andre bildet og gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 5px radius, og klikk OK.
Trinn 4
Åpne Gjennomsiktighet-panelet (Vindu > Transparent). Velg det bildet og den hvite formen gjort i forrige trinn, åpner fly-out menyen i Transparency panel og klikk på Make Opacity Mask. Til slutt din maskerte bildet skal se ut i det andre bildet. Flytt til Lag-panelet og låse den for å være sikker på at du ikke vil uhell velge /flytte den.
Trinn 5
For dette trinnet trenger du dette bildet. Lagre det på harddisken din og dra den inni AI-fil. Resize det som din gjorde i tredje trinn og plasser den som vist i det første bildet. Bruke rektangelverktøyet (M), opprette en 40 ved 210px form, fyll den med hvit, plasser den som vist i det andre bildet og gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 5px radius, og klikk OK.
Trinn 6
Velg det bildet og den hvite formen gjort i forrige trinn, åpner fly-out menyen i Transparency panel og klikk på Make Opacity Mask. Til slutt din maskerte bildet skal se ut i det andre bildet. Flytt til Lag-panelet og låse den.
Trinn 7
Fokus på bildet til venstre maskert. Bruke rektangelverktøyet (M), opprette en 40 ved 210px form, fyll den med svart og plasser den som vist i det første bildet. Flytt til Lag-panelet og dra denne nye formen under det maskerte bildet. Kontroller at denne svarte firkanten er fortsatt valgt og fokus på utseendet panel. Velg fyll, senke Opacity til 50% og o til Effect > Warp > Utbulning. Oppgi dataene nedenfor, klikk på OK og gå til Effect > Sti > Offset Path. Skriv inn et -10px Offset, klikk på OK og gå til Effect > Blur > Gaussian Blur. Skriv inn et 5px radius, og klikk OK.
Trinn 8
Velg det svarte firkanten gjort i forrige trinn, fokus på Utseende panel og legge til en annen fylling ved hjelp av Legg til ny Fyll knappen. Velg denne nye fyll, gjør det svart, senke opacity til 10% og gå til Effect > Warp > Utbulning. Oppgi dataene nedenfor, klikk på OK og gå til Effect > Sti > Offset Path. Skriv inn et -10px Offsettrykk, og klikk på OK.
Trinn 9
Velg det rektangelet redigeres i forrige trinn, lage en kopi i front (Ctrl + C > Ctrl + F) og bringe den til fronten (Shift + Ctrl +]) . Velg denne kopien og fokus på utseendet panel. Først, fjern de to fyllingene. Deretter legger en 5PT slag. Sett farge på R = 225 G = 225 B = 225, justere den til inne og senke Opacity til 20%.
Hold fokus på Utseende panel og legge til en andre slag for denne form ved hjelp av Legg til ny Stroke knappen. Velg denne nye slag, gjør det 2PT bred, setter sin farge på R = 200 G = 200 B = 200 og justere den til innsiden. Legg et tredje slag for denne formen, setter sin farge på R = 30 G = 30 B = 30, gjør det 1pt bred og justere den til innsiden. Til slutt, må du legge til en diskret avrundede hjørner effekt for denne formen. Fokus på Utseende panel, sørg for at det ikke fyll eller hjerneslag er valgt og gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 5px radius, og klikk OK. Til slutt ting skal se ut i det andre bildet.
Step 10
Velg det to rektangel laget og redigeres i de tre siste trinnene og kopiere dem (Ctrl + C > Control + F). Dra begge kopiene til høyre og plassere dem som vist i det andre bildet. Fokus på Lag-panelet og sørg for at formen med flere fyllinger er plassert under det maskerte bildet, mens formen med flere slag er plassert over det maskerte bildet.
Step 11
For dette trinnet trenger du dette bildet. Lagre det på harddisken din og dra den inni AI-fil. Velg det, fokus på Transformering-panelet (Vindu > Transform), skriv 540 i bredden boksen deretter plassere dette bildet som vist i det første bildet. Bruke rektangelverktøyet (M), opprette en 540 250 piksler form, fyll den med hvit, plasser den som vist i det andre bildet og gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 5px radius, og klikk OK.
Step 12
Velg det bildet og den hvite formen gjort i forrige trinn, åpner fly-out menyen i Transparency panel og klikk på Make Opacity Mask. Til slutt din maskerte bildet skal se ut i det andre bildet. Låse den.
Step 13
Bruke rektangelverktøyet (M), opprette en 540 250 piksler form, fyll den med svart og plasser den som vist i det første bildet. Flytt til Lag-panelet og dra denne nye formen under det maskerte bildet lagt i forrige trinn. Kontroller at denne svarte firkanten er fortsatt valgt og fokus på utseendet panel. Velg fyll, senke Opacity til 50% og gå til Effect > Warp > Utbulning. Oppgi dataene nedenfor, klikk på OK og gå til Effect > Sti > Offset Path. Skriv inn et -10px Offset, klikk på OK og gå til Effect > Blur > Gaussian Blur. Skriv inn et 5px radius, og klikk OK.
Step 14
Velg det svarte firkanten gjort i forrige trinn, fokus på Utseende panel og legge til en annen fylling. Velg denne nye fyll, gjør det svart, senke Opacity til 10% og gå til Effect > Warp > Utbulning. Oppgi dataene nedenfor, klikk på OK og gå til Effect > Sti > Offset Path. Skriv inn et -10px Offsettrykk, og klikk på OK.
Trinn 15
Velg det rektangelet redigeres i forrige trinn, lage en kopi i front (Ctrl + C > Ctrl + F) og bringe den til fronten (Shift + Ctrl +]) . Velg denne kopien og fokus på utseendet panel. Fjern de to fyllingene deretter legge til en 2pt slag. Sett farge på R = 225 G = 225 B = 225 og justere den til innsiden. Legg et andre strøk for denne formen, gjør det 1pt bred, setter sin farge på R = 30 G = 30 B = 30 og juster den til innsiden. Til slutt, sørg for at det ikke fyll eller hjerneslag er valgt (i Utseende-panelet) og gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 5px radius, og klikk OK.
Trinn 16
Bruke rektangelverktøyet (M), opprette en 170 250 piksler form, fyll den med lineær gradient vist nedenfor, og plasser den som vist i det første bildet. Velg denne nye rektangel, bytte til Slett Anchor Point Tool (-) og klikker på bunnen, til høyre festepunkt fjerne den. Dette bør slå rektangelet i en trekant. Velg den sammen med den blå avrundet rektangel gjort i det andre trinnet, åpne Pathfinder-panelet og klikk på Snitt knappen. Senk Opacity av den resulterende formen til 5%.
Step 17
Med rektangelverktøyet (M), opprette en 170 av 20px form og fylle det med lineær gradient vist nedenfor. Bytt til Direct Selection Tool (A) og fokus på undersiden av denne nye rektangel. Velg den venstre forankringspunkt og flytte den 20px til høyre og deretter velge riktig ankerpunkt og flytte den 20px til venstre.
Deretter må du runde et hjørne script. Du finner den i Vectortuts + artikkel 20 gratis og nyttig Adobe Illustrator Scripts. Lagre det på harddisken din, går du tilbake til Illustrator og fortsette med Direct Selection Tool (A). Velg de to festepunktene fremhevet i det andre bildet og gå til Fil > Scripts > Andre Script. Åpne runde et hjørne Script, skriv en 10px Radius og klikk på OK. Til slutt figurer skal se ut i det tredje bildet
Trinn 18
Deaktiver Fest til rutenett (View > Fest til rutenett). Deretter gå til Rediger > Preferanser > Generelt og sørge for at tastaturet Økning er satt til 1px. Reselect formen gjort i forrige trinn, og lage to kopier foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopiere og flytte den 9px ned ved hjelp av pil ned på tastaturet. Reselect begge eksemplarene og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 25%
Trinn 19
Velg det formen gjort i det syttende trinn og lage to kopier i front (Ctrl + C >. Ctrl + F > Control + F). Velg den øverste kopiere og flytte den 1px ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 25%
Trinn 20
Velg det formen gjort i det syttende trinnet og går til Object >.; Sti > Offset Path. Skriv inn et -1px Offsettrykk, og klikk på OK. Velg den resulterende formen og lage en kopi i front (Ctrl + C > Control + F). Velg denne kopien og flytte den 1px opp. Reselect både formen gjort i dette trinnet og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med R = 125 G = 125 B = 125.
Trinn 21
Velg det formen gjort i det syttende trinn og fokus på utseendet panel. Først legger en 1pt slag, gjør det svart og justere den til innsiden. Deretter legger du til en annen fylling for denne formen og dra den i bunnen av Utseende panel. Velg denne nye fyll, gjør det svart, senke Opacity til 20% og gå til Effect > Sti > Offset Path. Skriv en 1px Offsettrykk, og klikk på OK.
Trinn 22
Velg det formen redigeres i forrige trinn, legge til en tredje fyll og dra den i bunnen av Utseende panel. Velg denne nye fyll, gjør det svart, senke Opacity til 30% og gå til Effect > Sti > Offset Path. Skriv en 1px Offset, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Oppgi dataene nedenfor, klikk på OK og gå til Effect > Blur > Gaussian Blur. Skriv en 2 piksler radius, og klikk OK.
Trinn 23
Bruke Ellipse Tool (L), opprette en 5px sirkel og legg den som vist i det første bildet. Fyll den med radial gradient vist nedenfor, legg en 1pt, svart strek og deretter gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk på OK
Trinn 24
Velg det sirkel laget i forrige trinn, og kopiere det (Ctrl + C > Control + F).. Velg denne kopien, flytte den 16px til høyre og fokus på utseendet panel. Legg en annen fylling for ny sirkel, satt sin farge på R = 39 G = 170 B = 225 og endre Blending Mode til Color Dodge. Reselect sirkelen gjort i forrige trinn og gå til Effekt > Forvrenge & Transform > Transform. Tast inn dataene vist i det andre bildet, og klikk på OK.
Trinn 25
Velg alle former laget i de siste åtte trinn og gruppere dem (Control + G). Aktiver Fest til rutenett (View > Fest til rutenett), velg denne nye gruppen og plassere den som vist i det andre bildet.
Step 26
Bruke Ellipse Tool (L), opprette en 30px sirkel, fyll den med lineær gradient vist nedenfor, og gå til Object > Sti > Offset Path. Velg den resulterende formen, deaktivere Fest til rutenett (View > Fest til rutenett) og lage en kopi i front (Ctrl + C > Control + F). Velg den og flytte den 1px ned. Reselect kopien sammen med den opprinnelige banen og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med R = 101 G = 101 B = 101
Trinn 27
Aktiver Fest til rutenett (View > Fest til rutenett).. Bruke rektangelverktøyet (M), opprette en 10 av 5px form og legg den som vist i det første bildet. Fortsett med rektangelverktøyet (M), skape en 5 av 10px form og legg den som vist i det andre bildet. Reselect både rektangel og klikk på Unite knappen fra Pathfinder-panelet. Velg den resulterende banen og gå til Object > Transform > Rotere. Skriv en -45 grader vinkel og klikk på OK.
Deaktiver Fest til rutenett (View > Fest til rutenett) og velg denne pilen form og prøve å plassere i midten av sirkelen. Reselect begge former (pilen og sirkel) og klikk på Minus Front knappen fra Pathfinder-panelet. Flytt til Lag-panelet og dra den resulterende formen under den tynne, grå banen gjorde i finalen av forrige trinn.
Trinn 28
Velg den formen laget i forrige trinn og fokus på utseendet panel. Legg en 1pt slag, justere den til innsiden, sette farge på R = 30 G = 30 B = 30 velg deretter fyll og gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk på OK.
Trinn 29
Velg det formen redigeres i forrige trinn, legge til en annen fylling og dra den i bunnen av Utseende panel. Velg denne nye fyll, gjør det svart, senk Opacity til 20% og gå til Effect > Sti > Offset Path. Skriv en 1px Offsettrykk, og klikk på OK. Legg en tredje fyll for denne formen, dra den i bunnen av Utseende panelet og bruke lineær gradient vist nedenfor. Velg det, senk Opacity til 15% og gå til Effect > Sti > Offset Path. Skriv en 2 piksler offset, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Oppgi dataene nedenfor og klikk på OK.
Trinn 30
Velg det to figurer som er opprettet i løpet av de siste fire trinn og konsernet dem (Control + G). Velg denne nye gruppen og plassere den som vist i det andre bildet.
Trinn 31
Velg gruppen gjorde i forrige trinn og gå til Object > Transform > Reflektere. Sjekk Vertikal knappen og klikk på Kopier-knappen. Velg den nyopprettede gruppen, drar den til venstre og plasser den som vist i det andre bildet.
Konklusjon
Nå arbeidet er ferdig og under er vår sluttresultatet, samt nærbilder av bildet glidebryteren. Med små justeringer kan du endre fargevalget for å passe enhver webdesign.