Share
I denna Snabbtipshandledning lär du dig att använda Illustrator för att skapa en enkel webbformulärdesign. Genom att följa några enkla tekniker får du en ren och modern registreringsblankett på nolltid!
Skapa ett dokument med 570 x 370 pixlar. Slå först på rutnätet (Visa> Grid) och Snap to Grid (Visa> Snap to Grid). Därefter behöver du ett rutnät varje 10px. Gå till Redigera> Inställningar> Guider och galler, ange 10 i rutnätet varje ruta och 1 i rutan Indelningar.
Du kan också öppna Info-panelen (Fönster> Info) för en live-förhandsgranskning med storleken och positionen på dina former. Glöm inte att byta måttenhet till pixlar från Redigera> Inställningar> Enhet> Allmänt. Alla dessa alternativ ökar din arbetshastighet avsevärt.
Med rektangelverktyget (M) skapar du en form av 450-370px och fyller den med den linjära gradienten som visas nedan.
Fokusera på den övre sidan av formen. Välj Add Anchor Point Tool (Plus) och lägg till två ankarpunkter i punkterna markerade med gul i den första bilden. Välj sedan Direct Selection Tool (A), välj ankarpunkterna markerade med rött och dra dem 70px ner. I slutet ska din form se ut som den slutliga bilden.
Markera rektangelverktyget (M) igen och skapa en form av 330 till 90 px och placera den som visas i den första bilden. Fyll det med R = 77 G = 195 B = 255 och skicka det till baksidan (Shift + Control + Vänster fäste).
Återgå till den grå formen. Markera den, gå till panelen Utseende, öppna menyn för utflyttning och klicka på Lägg till ny fyllning. Detta lägger till en andra fyllning för din form. Nu behöver du ett mönster för denna nya fyllning. Gå till panelen Swathes, öppna utflyttningsmenyn och gå till Öppna Swatch Library> Mönster> Basic Graphics> Basic Graphics_Textures. Återställ den nya fyllningen, klicka på "USGS 7 Vineyars" -mönstret och ändra dess blandningsläge till Multiplicera och sänka dess opacitet till 5%.
Fortsätt med att lägga till en vit stroke. Gör den 3px bred, anpassa den till insidan och sänka opaciteten till 50%. Med den form som fortfarande är vald öppnar du utflödesmenyn i Utseendet. Den här gången klickar du på Lägg till ny stroke. Välj detta nya slag, byt ut färgen med R = 120 G = 120 B = 120 och gör den 1px bred.
Återmarkera hela banan. Gå först till Effekt> Stylize> Drop Shadow. Ange de data som visas nedan och klicka på OK. Med formen som fortfarande valts går du till Effekt> Stylize> Rounded Corners. Ange en 7px Radius och klicka på OK. Se till att den här effekten ligger ovanför streckningarna i Utseendepanelen. Du kan helt enkelt klicka och dra det.
Låt oss flytta till den blå formen. Först lägg till en ny fyllning. Välj den och använd den linjära gradienten som visas nedan. Ändra dess blandningsläge till Överlagring och sänk dess opacitet till 50%. Lägg till en tredje fyllning. Gör det svart, byt blandningsläge till Multiplicera, sänk dess opacitet till 12% och gå till Effekt> Konstnärligt> Filmkorn. Ange de data som visas nedan och klicka sedan på OK.
Fortsätt med den blå formen. Lägg till en 3px, anpassad till inåtslaget (R = 225 G = 244 B = 253) och sänk dess opacitet till 50%. Lägg till en andra stroke, ändra storlek till 1px och byt färg till R = 0 G = 112 B = 185. Återmarkera hela banan och gå till Effekt> Stylize> Rounded Corners. Ange en 7px Radius och klicka på OK.
Välj rektangulärverktyget (M) och skapa en form av 270 till 40 px. Fyll den med linjär gradient och placera den enligt nedan.
Fokusera på formen som gjordes i föregående steg. Välj fyllningen från Utseendepanelen och gå till Effekt> Stylize> Inner Glöd. Ange de data som visas nedan och klicka på OK. Lägg till en vit stroke. Gör den 3px bred, rikta den till utsidan och sänka opaciteten till 50%. Lägg till en andra stroke, ändra storlek till 1px och ändra dess färg till R = 167 G = 169 B = 172. Återmarkera hela banan och gå till Effekt> Stylize> Rounded Corners. Ange en 3px Radius och klicka på OK.
Välj den form som gjordes i föregående steg och gör två kopior (Kontroll + C> Kontroll + V> Kontroll + V). Placera dem enligt bilden nedan.
Återmarkera rektangelverktyget (M) och skapa en form av 120 x 30 px. Fyll det med R = 77 G = 195 B = 255 och placera det enligt bilden nedan. Lägg till en ny fyllning för denna form och använd den linjära gradienten som visas i följande bild. Välj den här nya fyllningen, ändra dess blandningsläge till Överlagring och sänka dess opacitet till 50%.
Lägg till en tredje fyllning för formen som gjordes i föregående steg. Gör det svart, byt blandningsläge till Multiplicera, sänk dess opacitet till 10% och gå till Effekt> Konstnärligt> Filmkorn. Ange de data som visas nedan och klicka sedan på OK. Lägg till en 1,5px, inriktad på inåtslaget (R = 225 G = 244 B = 253) och sänk dess opacitet till 50%. Lägg till en andra stroke, ändra storlek till 1px och byt färg till R = 0 G = 112 B = 185. Återmarkera hela banan och gå till Effekt> Stylize> Rounded Corners. Ange en 15px Radius och klicka på OK.
Till sist lägger vi till texten. Jag har använt kopparstd-teckensnitt med en storlek på 30pt för "registreringsformuläret" och 20pt för resten av texten. Följ de färger som visas nedan och lägg till den diskreta Drop Shadow-effekten för varje text.
Där har du det, en enkel och smidig utseende registreringsform. Du kan använda de tekniker du har lärt dig i den här handledningen för att skapa ytterligare webbelement och mönster.
Accentsconagua