Slik lager du et prisintervallfilter i Adobe Illustrator

I den følgende opplæringen lærer du hvordan du oppretter et prisklassefilter som vil se bra ut i et mobilprogram eller et nettstedgrensesnitt. Vi jobber i Adobe Illustrator med noen grunnleggende verktøy for å skape et viktig element for enhver designers portefølje.


Trinn 1

Åpne Illustrator og trykk Kommando + N for å opprette et nytt dokument. Skriv 600 i breddeboksen og 300 i høydeboksen, klikk deretter på Avansert-knappen. Velg RGB, skjerm (72ppi) og kontroller at boksen "Juster nye objekter til pikselruten" ikke er merket før du klikker OK.

Aktiver gridet (Vis> Vis grid) og Snap to Grid (Vis> Snap to Grid). Du trenger et rutenett hver 1px. Bare gå til Edit> Preferences> Guides> Grid, skriv 1 i gridline hver boks og 1 i underdelingsboksen. Du kan også åpne Info-panelet (Vindu> Info) for et forhåndsvisning med størrelsen og plasseringen av figurene dine. Ikke glem å bytte måleenheten til piksler fra Rediger> Innstillinger> Enhet> Generelt. Alle disse alternativene vil øke arbeidshastigheten betydelig.


Steg 2

Bruk rektangulærverktøyet (M) ved å lage en 301 ved 3px form og fyll den med R = 50 G = 50 B = 50. Velg dette tynne rektangelet, fokus på Utseendepanelet (Vindu> Utseende) og legg til et nytt fyll med knappen Legg til ny fylling (peket av pilen i det følgende bildet). Velg denne nye fyllingen, sett fargen på R = 25 G = 25 B = 25 og gå til Effekt> Sti> Offset-vei. Skriv inn en -1px Offset og klikk OK. Gå tilbake til Utseendepanelet, kontroller at ingen fylling eller strekk er valgt, og gå til Effekt> Stylize> Avrundede hjørner. Skriv inn en 1,5px radius og klikk OK.


Trinn 3

Fokus på venstre side av formen som ble gjort i forrige trinn. Ved hjelp av rektangelverktøyet (M), opprett to, 1 til 3px rektangler. Fyll begge skjemaene med R = 50 G = 50 B = 50, plasser dem som vist i det første bildet, og gjør dem til en sammensatt bane (Objekt> Sammensatt sti> Lag). Velg denne ferske sammensatte banen og gå til Effect> Stylize> Rounded Corners. Skriv inn en 0,5 px radius, klikk OK og gå til Effekt> Forvreng og transformer> Transform. Skriv inn dataene som vises i det tredje bildet, og klikk OK.


Trinn 4

Ved hjelp av rektangelverktøyet (M), opprett to, 1 til 4px rektangler. Fyll begge skjemaene med R = 50 G = 50 B = 50, plasser dem som vist i det første bildet, og gjør dem til en sammensatt bane (Objekt> Sammensatt sti> Lag). Velg denne ferske sammensatte banen og gå til Effect> Stylize> Rounded Corners. Skriv inn en 0,5 px radius, klikk OK og gå til Effekt> Forvreng og transformer> Transform. Skriv inn dataene som vises i det tredje bildet, og klikk OK.


Trinn 5

Med rektangulærverktøyet (M), opprett en form på 359 til 96 px, fyll den med den lineære gradienten som vises nedenfor, send den til baksiden (Shift + Control + [) og legg den som vist i bildet nedenfor..


Trinn 6

Velg rektangelet som ble gjort i forrige trinn, fokus på Utseendepanelet, legg til et nytt fyll, sett fargen på R = 210 G = 210 B = 210, og dra den i bunnen av panelet. Gå tilbake til den første fyllingen, velg den og gå til Effect> Distort & Transform> Transform. Skriv inn dataene som vises i følgende bilde, og klikk OK.


Trinn 7

Vellgjør rektangelet i femte trinnet, fokus på Utseendepanelet, legg til en tredje fylling og dra den i bunnen av panelet. Velg denne nye fyllingen, legg til den lineære gradienten som vises i følgende bilde, og gå til Effekt> Sti> Offset Path. Skriv inn en 1px Offset og klikk OK.


Trinn 8

Vellgjør rektangelet i femte trinn, fokus på Utseendepanelet, pass på at ingen fylling eller strekk er valgt, og gå til Effekt> Stylize> Avrundede hjørner. Skriv inn en 3px radius, klikk OK og gå til Effekt> Stylize> Drop Shadow. Skriv inn dataene vist i toppvinduet, klikk OK og gå igjen til Effekt> Stylize> Drop Shadow. Skriv inn dataene som vises i midtvinduet, klikk OK og gå igjen til Effekt> Stylize> Drop Shadow. Skriv inn dataene vist i bunnvinduet og klikk OK. Til slutt skal formen din se ut i det følgende bildet.


Trinn 9

Ved hjelp av Ellipseverktøyet (L), opprett en 9px sirkel, fyll den med R = 88 G = 88 B = 88 og legg den som vist i det følgende bildet.


Trinn 10

Tilbakestill formen som ble gjort i forrige trinn, fokus på Utseendepanelet og legg til en ny fylling. Velg den, sett fargen på R = 190 G = 190 B = 190 og gå til Effect> Path> Offset Path. Skriv inn en -1px Offset og klikk OK.


Trinn 11

Vellgir sirkelen som er laget i det niende trinnet, fokus på Utseendepanelet og legg til en tredje fylling. Velg den, legg til den lineære gradienten som vises i det følgende bildet, og gå til Effekt> Sti> Offset Path. Skriv inn en -1px Offset, klikk OK og gå til Effect> Distort & Transform> Transform. Skriv inn dataene som vises i følgende bilde, og klikk OK.


Trinn 12

Tilbakestill sirkelen som ble gjort i det niende trinnet, fokus på Utseendepanelet og legg til 1pt slag. Velg den, sett fargen på svart, juster den til utsiden og senk opasiteten til 20%. Fortsett å fokusere på Utseendepanelet og legg til et sekundslag for denne formen ved å bruke knappen Legg til ny strekk (peket av pilen i det følgende bildet). Velg denne nye takten, gjør den 1pt bred, sett fargen på R = 50 G = 50 B = 50 og juster den til innsiden.


Trinn 13

Vellgir den 9px-sirkelen og lag en kopi foran (Kontroll + C> Kontroll + F). Velg den og flytte den 84px til høyre som vist i bildet nedenfor.


Trinn 14

Velg det tynne avrundede rektangelet som ble gjort i det andre trinnet, og lag en kopi foran (Kontroll + C> Kontroll + F). Velg denne kopien og endre størrelsen på bildet som vist på bildet nedenfor. Hold høyden satt til 2px, men senk bredden til 85px. Flytt til Utseendepanelet og endre fargeegenskapene for denne nye formen. Først velg fyll og sett fargen ved R = 0 G = 69 B = 33 velg deretter slag og sett fargen på R = 57 G = 181 B = 74. Til slutt skal ting se ut i det tredje bildet.


Trinn 15

Velg de sammensatte stiene som ble gjort i trinn 3 og 4, og gå til Effekt> Stylize> Drop Shadow. Skriv inn dataene som vises i følgende bilde, og klikk OK.


Trinn 16

Bruk typeverktøyet (T), legg til litt enkel tekst som vist nedenfor. Bruk tekstegenskapene og fargekodene som vises i følgende bilde.


Trinn 17

Velg tekstbrikkene som ble lagt til i forrige trinn, og legg til Drop Shadow-effektene som vises i følgende bilde.


Trinn 18

Endelig kan du enkelt endre den generelle fargen på hovedformen. Velg det grå rektangelet som ble gjort i det femte trinnet, fokus på Utseendepanelet, legg til en ny fylling og kontroller at den går øverst i panelet. Velg den, sett fargen på R = 196 G = 154 B = 108, senk dens opasitet til 70%, endre blandemodus til Farge og gå til Effekt> Sti> Offset Path. Skriv inn en 1px Offset og klikk OK. Du kan tydeligvis velge en annen farge for denne nye fyllingen, du kan prøve andre blandemoduser, eller du kan øke / redusere opacitetsprosenten. Det finnes utallige muligheter.


Konklusjon

Nå er arbeidet ditt gjort. Slik ser det ut.