Rask Tips Hvordan lage et enkelt registreringsskjema design

I denne Quick Tips-veiledningen lærer du hvordan du bruker Illustrator til å lage et enkelt webdesign. Ved å følge noen få enkle teknikker vil du ha et rent og moderne registreringsskjema på kort tid!


Trinn 1

Lag et dokument på 570 ved 370px. Først slår du på rutenettet (Vis> Rutenettet) og Snap to Grid (Vis> Snap to Grid). Deretter trenger du et rutenett hver 10px. Gå til Rediger> Innstillinger> Guider og rutenett, skriv inn 10 i Rutenettlinjen hver boks og 1 i Retningslinjene.

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 øker arbeidshastigheten betydelig.


Steg 2

Med rektangulærverktøyet (M) lager du en 450 x 370 px form og fyller den med den lineære gradienten som vises nedenfor.


Trinn 3

Fokus på den øverste siden av formen. Velg Add Anchor Point Tool (Plus) og legg til to ankerpunkter i punktene som er markert med gul i det første bildet. Deretter velger du Direct Selection Tool (A), velg ankerpunkter markert med rødt og dra dem 70px ned. Til slutt skal formen din se ut som det endelige bildet.


Trinn 4

Velg rektangulærverktøyet (M) og opprett en form for 330 til 90 px, og plasser den som vist i det første bildet. Fyll det med R = 77 G = 195 B = 255 og send det til baksiden (Shift + Control + Left Bracket).


Trinn 5

Gå tilbake til den grå formen. Velg den, gå til Utseende-panelet, åpne avtrekksmenyen og klikk på Legg til ny fylling. Dette vil legge til en ny fylling for din form. Nå trenger du et mønster for denne nye fyllingen. Gå til panelet Swathes, åpne flytmenyen og gå til Open Swatch Library> Mønster> Grunnleggende grafikk> Grunnleggende Graphics_Textures. Velg den nye fyllingen, velg "USGS 7 Vineyars" -mønsteret og endrer deretter blandingsmodusen til Multiply og senker dens opasitet til 5%.

Fortsett ved å legge til et hvitt slag. Gjør det 3px bredt, juster det innvendig og senk dets opasitet til 50%. Med formen fortsatt valgt, åpner du utløpsmenyen for Utseendet. Denne gangen klikker du på Add New Stroke. Velg dette friske slag, erstatt farge med R = 120 G = 120 B = 120 og gjør det 1px bredt.


Trinn 6

Velg hele banen. Gå først til Effekt> Stylize> Drop Shadow. Skriv inn dataene som er vist nedenfor, og klikk OK. Med formen fortsatt valgt, gå til Effekt> Stylize> Avrundede hjørner. Skriv inn en 7px radius og klikk OK. Kontroller at denne effekten ligger over strekkene i Utseendepanelet. Du kan bare klikke og dra den.


Trinn 7

La oss flytte til den blå formen. Først legger du til en ny fylling. Velg den og bruk den lineære gradienten som vises nedenfor. Endre blandingstilstanden til Overlegg og senk densiteten til 50%. Legg til en tredje fylling. Gjør det svart, endre blandingsmodus til Multiply, senk opaciteten til 12%, og gå til Effect> Artistic> Film Grain. Skriv inn dataene som vises nedenfor, og klikk deretter OK.


Trinn 8

Fortsett med den blå formen. Legg til en 3px, justert til innsidenslag (R = 225 G = 244 B = 253) og senk dens opasitet til 50%. Legg til et nytt slag, endre størrelsen på 1px og endre fargen til R = 0 G = 112 B = 185. Velg hele banen og gå til Effect> Stylize> Rounded Corners. Skriv inn en 7px radius og klikk OK.


Trinn 9

Velg Rectangle Tool (M) og opprett en form for 270 x 40 px. Fyll den med den lineære gradienten og legg den som vist nedenfor.


Trinn 10

Fokuser på formen som ble gjort i forrige trinn. Velg fyllingen fra Utseendepanelet og gå til Effekt> Stylize> Inner Glow. Skriv inn dataene som er vist nedenfor, og klikk OK. Legg til et hvitt slag. Gjør det 3px bredt, juster det ut på utsiden og senk opaciteten til 50%. Legg til et nytt slag, endre størrelsen på 1px og endre fargen til R = 167 G = 169 B = 172. Velg hele banen og gå til Effect> Stylize> Rounded Corners. Skriv inn en 3px radius og klikk OK.


Trinn 11

Velg formen som ble gjort i forrige trinn, og lag to kopier (Kontroll + C> Kontroll + V> Kontroll + V). Plasser dem som vist på bildet nedenfor.


Trinn 12

Velg Rektangulærverktøyet (M) og opprett en form for 120 x 30 px. Fyll det med R = 77 G = 195 B = 255 og legg det som vist på bildet nedenfor. Legg til en ny fylling for denne formen, og bruk den lineære gradienten som vises i følgende bilde. Velg denne nye fyllingen, endre blandingsmodus til Overlegg og senk dens opasitet til 50%.


Trinn 13

Legg til en tredje fylling for formen som ble gjort i forrige trinn. Gjør det svart, endre blandingsmodus til Multiply, senk opaciteten til 10%, og gå til Effect> Artistic> Film Grain. Skriv inn dataene som vises nedenfor, og klikk deretter OK. Legg til 1,5 px, justert til innsidenslag (R = 225 G = 244 B = 253) og senk dens opasitet til 50%. Legg til et nytt slag, endre størrelsen på 1px og endre fargen til R = 0 G = 112 B = 185. Velg hele banen og gå til Effect> Stylize> Rounded Corners. Skriv inn en 15px radius og klikk OK.


Trinn 14

Til slutt, la oss legge til teksten. Jeg har brukt Copper Std font med en størrelse på 30pt for "Register Form" og 20pt for resten av teksten. Følg fargene som vises nedenfor, og legg til den diskrete Drop Shadow-effekten for hver tekst.


Konklusjon

Der har du det, et enkelt og glatt utseende registreringsskjema. Du kan bruke teknikkene du har lært i denne veiledningen for å lage flere webelementer og -design.