Quick Tips: Hvordan lage en enkel Register Form Design
Dette innlegget er en del av en serie kalt Web og Interface Design Med Vector.Quick Tips: Hvordan lage en enkel Web Button Set Bruke Utseende PanelCreate en stilisert Navigasjonslinje og Slice det for Web

I denne hurtig Tips opplæringen vil du lære å bruke Illustrator til å lage en enkel web-skjema design. Ved å følge noen enkle teknikker vil du ha ren og moderne register skjema på et blunk!

Trinn 1

Lag en 570 ved 370px dokumentet. Først slår du på Grid (View > Grid) og Fest til rutenett (View > Fest til rutenett). Deretter trenger du et rutenett hver 10px. Gå til Rediger > Preferanser > Guides & Grid, skriver 10 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 dine figurer. Ikke glem å bytte måleenheten til piksler fra Rediger > Preferanser > Unit > General. Alle disse alternativene vil øke arbeidshastigheten.

Trinn 2

Med rektangel Tool (M), lage en 450 ved 370px form og fylle den med lineær gradient vist nedenfor.

Trinn 3

Fokus på oversiden av formen. Plukk Legg Anchor Point Tool (Plus) og legge til to ankerpunkter i punktene markert med gult i det første bildet. Deretter plukke Direct Selection Tool (A), velger ankerpunktene markert med rødt og dra dem 70px ned. Til slutt formen din skal se ut som det endelige bildet.

Trinn 4

Velg rektangel Tool (M) og lage en 330 ved 90px form og legg den som vist i den første bilde. Fyll den med R = 77 G = 195 B = 255 deretter sende den til baksiden (Shift + Ctrl + Venstre Bracket).

Trinn 5

Gå tilbake til den grå form. Velg det, gå til Utseende panel, åpne fly-out menyen og klikk på Legg til ny Fill. Dette vil legge til en annen fylling for formen. Nå trenger du et mønster for denne nye fyll. Gå til Skår panel, åpne fly-out menyen og gå til Open Swatch Library > Patterns > Basic Graphics > Grunn Graphics_Textures. Reselektere den nye fyll, klikk på " USGS 7 vineyars " mønster deretter endre blending mode til Multipliser og senke opacity til 5%.

Fortsett ved å legge en hvit strek. Gjør det 3px bred, justere den til innsiden og senke opacity til 50%. Med formen fortsatt er valgt, åpner fly-out menyen i Utseende. Denne gangen klikk på Legg til ny Stroke. Velg denne friske takter, bytter farge med R = 120 G = 120 B = 120 og gjøre det 1px bred.

Trinn 6

Velg det hele banen. Først går du til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK. Med formen fortsatt er valgt går til Effect > Stilisere > Avrundede hjørner. Skriv inn et 7px Radius og klikk på OK. Sørg for at denne effekten ligger over streken i Utseende-panelet. Du kan bare klikke og dra det.

Trinn 7

La oss gå til den blå formen. Først legger en ny fyll. Velg den og bruke lineær gradient vist nedenfor. Endre blending mode til Overlay og senke opacity til 50%. Legg en tredje fyll. Gjør det svart, endre blending mode til Multipliser, senke opacity til 12% og deretter gå til Effect > Artistic > Film Grain. Skriv inn dataene nedenfor og klikk på OK.

Trinn 8

Fortsett med den blå formen. Legg en 3px, justert til inne hjerneslag (R = 225 G = 244 B = 253) og senke opacity til 50%. Legg et andre slag, endre størrelse på det å 1px og endre sin farge til R = 0 G = 112 B = 185. Reselect hele banen og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 7px Radius og klikk på OK.

Trinn 9

Velg rektangel Tool (M) og lage en 270 ved 40px form. Fyll den med lineær gradient og plasser den som vist nedenfor.

Trinn 10

Fokus på formen gjorde i forrige trinn. Velg fyllet fra Utseende panel og gå til Effect > Stilisere > Indre glød. Skriv inn dataene nedenfor og klikk på OK. Legg en hvit strek. Gjør det 3px bred, justere den til utsiden og senke opacity til 50%. Legg et andre slag, endre størrelse på det å 1px og endre sin farge til R = 167 G = 169 B = 172. Reselect hele banen og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn en 3px Radius og klikk OK

Trinn 11

Velg den formen laget i forrige trinn og lage to kopier (Ctrl + C > Ctrl + V > Control + V).. Plasser dem som vist på bildet nedenfor.

Trinn 12

Velg det rektangel Tool (M) og opprette en 120 av 30px form. Fyll den med R = 77 G = 195 B = 255 og plassere den som vist i følgende bilde. Legg til en annen fylling for denne form og bruke lineær gradient er vist i følgende bilde. Velg denne nye fyll, endre blending mode til Overlay og senke opacity til 50%.

Trinn 13

Legg til en tredje fyll for formen gjorde i forrige trinn. Gjør det svart, endre blending mode til Multipliser, senke opacity til 10% og deretter gå til Effect > Artistic > Film Grain. Skriv inn dataene nedenfor og klikk på OK. Legg en 1,5px, justert til inne hjerneslag (R = 225 G = 244 B = 253) og senke opacity til 50%. Legg et andre slag, endre størrelse på det å 1px og endre sin farge til R = 0 G = 112 B = 185. Reselect hele banen og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 15px Radius og klikk på OK.

Trinn 14

Til slutt, la oss legge til teksten. Jeg har brukt kobber Std skrift med en størrelse på 30pt for "Register Form" og 20 pkt for resten av teksten. Følg fargene vist nedenfor kan du legge den diskrete Drop Shadow effekt for hver tekst.

Konklusjon

Det du har det, en enkel og glatt ute register form. Du kan bruke de teknikkene du har lært i denne opplæringen for å foreta ytterligere web-elementer og design.