Share
I följande handledning lär du dig hur du skapar ett prisintervallfilter som skulle se bra ut i ett mobilapps eller webbplatsgränssnitt. Vi jobbar i Adobe Illustrator med några grundläggande verktyg för att skapa ett viktigt element för någon designersportfölj.
Öppna Illustrator och klicka på Command + N för att skapa ett nytt dokument. Ange 600 i breddrutan och 300 i höjdlådan och klicka sedan på knappen Avancerat. Välj RGB, Screen (72ppi) och se till att rutan "Justera nya objekt till pixelnät" inte är markerad innan du klickar på OK.
Aktivera rutnätet (Visa> Visa rutnät) och Snap to Grid (Visa> Snap to Grid). Du behöver ett rutnät var 1px. Gå bara till Redigera> Inställningar> Guider> Grid, ange 1 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.
Använd Rektangulärverktyget (M) genom att skapa en form av 301 med 3px och fyll den med R = 50 G = 50 B = 50. Välj den här tunna rektangeln, fokusera på Utseendepanelen (Fönster> Utseende) och lägg till en ny fyllning med knappen Lägg till ny fyllning (pekad av pilen i följande bild). Välj den här nya fyllningen, sätt dess färg på R = 25 G = 25 B = 25 och gå till Effekt> Sti> Förskjutningsväg. Ange en -1px Offset och klicka på OK. Återgå till Utseendepanelen, se till att ingen fyllning eller stroke är vald och gå till Effekt> Stylize> Avrundade hörn. Ange en 1,5-poligradie och klicka på OK.
Fokusera på vänster sida av formen som gjordes i föregående steg. Använd rektangelverktyget (M) genom att skapa två, 1 x 3x rektanglar. Fyll båda formerna med R = 50 G = 50 B = 50, placera dem som visas i den första bilden och vrid dem sedan till en sammansatt sökväg (Objekt> Sammansatt sökväg> Gör). Markera den här fria sammansatta sökvägen och gå till Effekt> Stylize> Rounded Corners. Ange en 0,5 px radie, klicka på OK och gå till Effect> Distort & Transform> Transform. Ange data som visas i den tredje bilden och klicka på OK.
Använd rektangelverktyget (M) genom att skapa två, 1 till 4px rektanglar. Fyll båda formerna med R = 50 G = 50 B = 50, placera dem som visas i den första bilden och vrid dem sedan till en sammansatt sökväg (Objekt> Sammansatt sökväg> Gör). Markera den här fria sammansatta sökvägen och gå till Effekt> Stylize> Rounded Corners. Ange en 0,5 px radie, klicka på OK och gå till Effect> Distort & Transform> Transform. Ange data som visas i den tredje bilden och klicka på OK.
Med rektangulärverktyget (M) skapar du en form av 359 med 96 px, fyll den med den linjära gradienten som visas nedan, skicka den till baksidan (Shift + Control + [) och placera den enligt följande bild.
Återställ rektangeln som gjordes i föregående steg, fokusera på Utseendepanelen, lägg till en ny fyllning, sätt dess färg på R = 210 G = 210 B = 210 och dra den i panelen. Återgå till den första fyllningen, välj den och gå till Effekt> Förvräng & Transformera> Transformera. Ange data som visas i följande bild och klicka på OK.
Återställ rektangeln i femte steget, fokusera på Utseendepanelen, lägg till en tredje fyllning och dra den längst ner på panelen. Välj den här nya fyllningen, lägg till den linjära gradienten som visas i följande bild och gå till Effect> Path> Offset Path. Ange en 1px Offset och klicka på OK.
Återställ rektangeln i femte steget, fokusera på Utseendepanelen, se till att ingen fyllning eller stroke är vald och gå till Effekt> Stylize> Avrundade hörn. Ange en 3px-radie, klicka på OK och gå till Effekt> Stylize> Drop Shadow. Ange data som visas i det övre fönstret, klicka på OK och gå igen till Effekt> Stylize> Drop Shadow. Ange data som visas i mittfönstret, klicka på OK och gå igen till Effekt> Stylize> Drop Shadow. Ange data som visas i nedre fönstret och klicka på OK. I slutet ska din form se ut i följande bild.
Använd Ellipse Tool (L), skapa en 9px cirkel, fyll den med R = 88 G = 88 B = 88 och placera den enligt bilden.
Återställ den form som gjordes i föregående steg, fokusera på Utseendepanelen och lägg till en ny fyllning. Välj den, sätt färgen på R = 190 G = 190 B = 190 och gå till Effekt> Sti> Förskjutningsväg. Ange en -1px Offset och klicka på OK.
Återmarkera cirkeln som görs i det nionde steget, fokusera på Utseendepanelen och lägg till en tredje fyllning. Markera den, lägg till den linjära gradienten som visas i följande bild och gå till Effekt> Path> Offset Path. Ange en -1px Offset, klicka på OK och gå till Effect> Distort & Transform> Transform. Ange data som visas i följande bild och klicka på OK.
Återmarkera cirkeln som görs i det nionde steget, fokusera på Utseendepanelen och lägg till 1pt stroke. Välj den, sätt färgen till svart, rikta den till utsidan och sänka opaciteten till 20%. Håll fokus på Utseendepanelen och lägg till en andra stroke för denna form med knappen Lägg till ny stroke (pekad av pilen i följande bild). Välj den här nya stroke, gör den 1pt bred, sätt färgen på R = 50 G = 50 B = 50 och rikta in den till insidan.
Återställ den 9px-cirkeln och gör en kopia framför (Kontroll + C> Kontroll + F). Välj den och flytta den 84px till höger som visas i följande bild.
Välj den tunna avrundade rektangeln som görs i det andra steget och gör en kopia framför (Kontroll + C> Kontroll + F). Välj den här kopian och ändra storlek på bilden enligt bilden nedan. Håll höjden inställd till 2px, men minska bredden till 85px. Flytta till Utseendepanelen och ändra färgegenskaperna för den här nya formen. Välj först fyllningen och ställ in färgen vid R = 0 G = 69 B = 33 och välj sedan stroke och ställ in färgen vid R = 57 G = 181 B = 74. I slutet skulle sakerna se ut i den tredje bilden.
Återställ de sammansatta banorna som gjordes i steg 3 och 4 och gå till Effekt> Stylize> Drop Shadow. Ange data som visas i följande bild och klicka på OK.
Använd typverktyget (T), lägg till lite enkel text som visas nedan. Använd textegenskaperna och färgkoderna som visas i följande bild.
Återmarkera de textstycken som lagts till i föregående steg och lägg till Drop Shadow-effekterna som visas i följande bild.
Slutligen kan du enkelt ändra den övergripande färgen på din huvudform. Återmarkera den grå rektangeln som gjordes i det femte steget, fokusera på Utseendepanelen, lägg till en ny fyllning och se till att den ligger högst upp på panelen. Välj den, sätt färgen på R = 196 G = 154 B = 108, sänka opaciteten till 70%, ändra blandningsläge till Färg och gå till Effekt> Path> Offset Path. Ange en 1px Offset och klicka på OK. Klart kan du välja en annan färg för den här nya fyllningen, du kan prova några andra blandningsmetoder eller du kan öka / minska uppacitetsprocenten. Det finns otaliga möjligheter.
Nu är ditt arbete gjort. Så här ska det se ut.
Accentsconagua