Share
I följande handledning lär du dig att skapa en på / av-knapp. Det är enkelt att skapa och du lär dig att skapa ett objekt som är perfekt som ett webelement eller en ikon. Låt oss börja!
Skapa ett 200 x 200 px RGB-dokument. Slå på rutnätet (Visa> Grid) och Snap to Grid (Visa> Snap to Grid). Därefter behöver du ett rutnät var 5px. Gå till Redigera> Inställningar> Guider och galler, ange 5 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.
Välj Rektangelverktyget (M), skapa en form av 90 x 140 px och fyll den med R = 65 G = 64 B = 66. Öppna Utseendepanelen (Fönster> Utseende), välj fyll och gå till Effekt> Stylize> Inner Glöd. Ange de data som visas nedan och klicka sedan på OK.
Välj den form som gjordes i föregående steg, öppna menyn för utseende på Utseendepanelen och klicka på Lägg till ny fyllning. Detta lägger till en andra fyllning för din form. Välj den, sätt dess färg till R = 20 G = 20 B = 20 och gå till Effekt> Förvräng & Transformera> Transformera. Ange de data som visas nedan Bild # 1 klicka på OK och gå till Effect> Warp> Arc Lower. Ange de data som visas nedan bild # 2, klicka på OK och gå till Effekt> Blur> Gaussian Blur. Ange en radius på 1px och klicka på OK. Se till att den här nya fyllningen fortfarande är vald, sänk dess opacitet till 70% och flytta den under den första fyllningen (i Utseendepanelen).
Lägg till en tredje fyllning för din rektangel. Välj den, sänka dess opacitet till 15%, ändra blandningsläge till Multiplicera, gå sedan till Effekt> Konstnärligt> Filmkorn. Ange de data som visas nedan och klicka sedan på OK.
Återställ rektangeln och lägg till en första stroke. Gör det 0,5pt bredt, rikta det inåt och sätt färgen på R = 20 G = 20 B = 20. Välj det från Utseendepanelen och klicka på ikonen Kopiera markerad artikel längst ner på Utseendepanelen. Detta kommer att duplicera stroke. Välj den här kopian, sätt dess färg på R = 109 G = 110 B = 113 och gå till Effekt> Förvräng & Transformera> Transformera. Ange de data som visas nedan och klicka sedan på OK.
Återmarkera hela rektangeln och gå till Effect> Stylize> Rounded Corners. Ange och 5px radie och klicka sedan på OK. Nu ska du se på den följande bilden.
Välj Ellipse Tool (L), skapa en 5 till 5px form och placera den enligt bilden nedan. Snap to Grid kommer att underlätta ditt arbete. Fyll den med R = 88 G = 89 B = 91 välj sedan fyllningen och gå till Effekt> Stylize> Drop Shadow. Ange de data som visas nedan och klicka sedan på OK.
Återställ den form som gjordes i föregående steg och lägg till en ny fyllning. Välj den, sätt dess färg till R = 20 G = 20 B = 20 och gå till Effekt> Förvräng och omvandla> Transformera. Ange de data som visas nedan, klicka på OK och gå till Effect> Distort & Transform> Pucker & Bloat. Ange igen de uppgifter som visas nedan och klicka på OK.
Därefter måste du lägga till en kopia av denna cirkel i varje hörn. Du kan skapa tre kopior och flytta dem i hörnen, eller du kan välja cirkeln och lägga till de två Transform-effekterna som visas nedan.
Välj den avrundade rektangeln och gå till Objekt> Path> Offset Path. Ange en -20px Offset och klicka på OK. Den resulterande formen ska se ut i den andra bilden. Markera den och tryck D för att lägga till standardegenskaperna (vit fyllning och svart slag). Nu ska din form se ut i den tredje bilden. Återställ markeringen, sätt in strecket på utsidan, ställ in färgen vid R = 10 G = 10 B = 10 för både fyllning och stroke och gå sedan till Effekt> Stylize> Rounded Corners. Ange en 5px radie och klicka på OK. I slutet ska din form se ut i den fjärde bilden.
Välj den form som gjordes i föregående steg och gör en kopia framför (Kontroll + C> Kontroll + F). Välj den här kopian, ta bort stroke, sätt fyllfärgen på R = 255 G = 255 B = 255 och gå till Objekt> Expand Utseende.
Välj pennverktyget (P) och rit en 60px horisontell bana. Lägg till en tunn, röd stroke så att du kan skilja det lättare från resten av formerna. Välj den tillsammans med den vita formen som skapades i föregående steg och öppna panelen Justera. Välj markeringsverktyget (V), klicka på gränsen för den vita formen (den ska bli betonad) och klicka sedan på knappen Horisontell inriktning och vertikaljustering på panelen Justera. Nu ska din horisontella väg vara snört som visas i den tredje bilden. Återmarkera den med den vita, rundade rektangeln och klicka på Divide-knappen från panelen Pathfinder. Detta kommer att dela din vita form i två lika former.
Välj den grupp som skapades i föregående steg och tryck på Shift + Control + G för att gruppera den. Låt oss nu fokusera på de nedre formerna. Välj den, fyll den med R = 75 G = 75 B = 75 och lägg till en ny fyllning och använd den linjära gradienten som visas nedan bild # 2. Den gula nollpunkten från gradientbilden står för opacitetsprocent.
Gå inte till Snap to Grid och gå till Redigera> Inställningar> Allmänt. Ange 0,5 i rutan Övning av tangentbord och klicka sedan på OK. Återställ den form som redigerades i föregående steg och gör två exemplar framför (Kontroll + C> Kontroll + F> Kontroll + F). Välj den översta kopian och tryck på uppåtpilen (för att flytta den 0,5 px uppåt). Återmarkera båda kopiorna och klicka på Minus Front-knappen från panelen Pathfinder. Fyll den resulterande formen med R = 147 G = 149 B = 152.
Nu, låt oss flytta till toppformen. Välj det och gå till Effekt> 3D> Extrude & Bevel. Ange de data som visas nedan, klicka på OK och gå till Objekt> Expand Utseende. Ta en titt i panelen Lager och du hittar en ny grupp. Öppna den och ta bort de två klippklippen.
Välj de former som markeras i den första bilden och klicka på Unite-knappen från panelen Pathfinder. Fyll den resulterande formen med den linjära gradienten som visas i den andra bilden.
Aktivera Snap to Grid och välj Direct Selection Tool (A). Välj de ankarpunkter som markeras i den första bilden och flytta dem ned som visas i den andra bilden. Återigen kommer snap till nätet att underlätta ditt arbete. Fyll denna form med R = 65 G = 64 B = 66 Lägg till en andra fyllning och använd den gradient som visas i den fjärde bilden.
Avaktivera Snap to Grid och välj sedan formen redigerad i föregående steg och gör två exemplar framför (Kontroll + C> Kontroll + F> Kontroll + F). Välj den översta kopian och tryck på nedåtpilen. Återmarkera båda kopiorna och klicka på Minus Front-knappen från panelen Pathfinder. Fyll den resulterande formen med R = 128 G = 130 B = 133 och sänka dess opacitet till 85%.
Slutligen, om du väljer att rotera din knapp 90 grader kommer det att se ut i den första bilden. För att fixa skuggan välj den stora rundade rektangeln, gå till bottenfyllningen, öppna transformeringseffekten och ersätt befintliga data med den som visas i den andra bilden. Gör detsamma om du valde att använda Transform-effekten för att multiplicera skruvarna.
Där har du det, en enkel men elegant på och av knapp. Jag hoppas att du har haft det här.
Accentsconagua