Share
I följande handledning lär du dig att skapa en grungy startknapp. Du kommer att lära dig hur man gör en 3D-stil knapp och en industriell utseende bakgrund med några enkla tekniker lite vektor textur. Låt oss börja!
Skapa ett dokument med 700 till 700 px och välj sedan rektangelverktyget (M). Skapa en 256 x 256 px kvadrat, fyll den med vit och namnge den "Grid".
Aktivera 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 rektangulärverktyget (M) och skapa en form av 15 till 395 px. Fyll det med R = 255 G = 222 B = 23 och duplicera det. Välj den här kopian, flytta den 15px till höger och fyll den med svart. Återmarkera båda rektanglarna och gå till Objekt> Förvränga & Transformera> Transformera. Ange 12 i rutan "Kopior" och 30px i rutan Flytta horisontellt, klicka sedan på OK och gå till Objekt> Expand Utseende.
Välj de former som gjordes i föregående steg, rotera dem och placera dem ovanför formen som gjorts i det första steget (som visas på bilden nedan). Se till att du täcker hela torget. Välj den gula formen och gå till Objekt> Sammansatt väg> Välj sedan de svarta formerna och gå igen till Objekt> Sammansatt väg> Gör.
Gör två kopior av "Grid". Välj den gula formen tillsammans med en kopia av "Grid" och klicka på Intersect-knappen från panelen Pathfinder. Välj de resulterande formerna och gå till Objekt> Sammansatt sökväg> Gör. Välj den svarta formen tillsammans med den andra kopian av "Grid" och klicka på Intersect-knappen från panelen Pathfinder. Välj de resulterande formerna och gå till Objekt> Sammansatt sökväg> Gör.
Välj originalformen "Grid" och ta den till Front (Shift + Control +)). Fyll det med ingen, lägg till en 15px, inriktad på inåtslaget (R = 255 G = 222 B = 23) och gå till Objekt> Expand Utseende. Välj den resulterande formen tillsammans med de andra gula formerna och klicka på Unite-knappen från panelen Pathfinder.
Välj den gula formen, lägg till en ny fyllning (från menyn för Utseende) och använd den linjära gradienten som visas i den andra bilden. Ta en närmare titt på lutningen, den gula texten står för opacitet och den vita texten står för Plats. Lägg till en tredje fyllning, gör den svart, sänka dess opacitet till 5% och ändra dess blandningsläge till Multiplicera. Välj denna fyllning (från Utseendepanelen), gå till Effekt> Konstnärlig> Filmkorn, mata in data som visas nedan bild # 3 och klicka på OK. Till sist lägger du till en 2px, anpassad till inåtslag. Gör den vit och sänka sin opacitet till 15%.
Välj Ellipse Tool (L), håll Shift och skapa 150 px 150px form. Dubbelklicka på den (i panelen Lager) och namnge den "Knapp". Duplicera denna form (Control + C> Control + F) och välj sedan kopian och gå till Objekt> Path> Offset Path. Ange en -5px-offset och klicka på OK. Välj den resulterande formen tillsammans med kopian och klicka på knappen Minus fram från panelen Pathfinder. Välj rektangelverktyget (M), skapa en 150 x 150 px form och placera den som visas i den fjärde bilden. Ta tag i verktyget för borttagningspunkten (-) och klicka på den nedre, högra ankarpunkten. Välj den resulterande formen tillsammans med den tunna formen och klicka på knappen Minus fram från panelen Pathfinder. Namn den här nyskapade formen "Right".
Gör en annan kopia av "Knapp". Välj den här kopian och gå till Objekt> Path> Offset Path. Ange en -10px Offset och klicka på OK. Välj den resulterande formen tillsammans med kopian och klicka på knappen Minus fram från panelen Pathfinder. Välj rektangelverktyget (M), skapa en 150 x 150 px form och placera den som visas i den fjärde bilden. Ta tag i verktyget för borttagning av ankarspets (-) och klicka på den övre, vänstra ankarpunkten. Välj den resulterande formen tillsammans med den tunna formen och klicka på knappen Minus fram från panelen Pathfinder. Namn den här nyskapade formen "Vänster".
Välj form "Knapp" och fyll den med R = 190 G = 30 B = 45. Välj fyllningen (från Utseckningspanelen) och lägg till den inre glödseffekten (Effekt> Stylize> Inner Glow) som visas under bild # 1. Lägg till en ny fyllning för denna form och använd den radiala gradienten som visas nedan. Välj denna andra fyllning och sänk dess opacitet till 75%.
Välj "Vänster", fyll i den linjära gradienten i den första bilden, sänka opaciteten till 80% och lägg sedan till en 5px Gaussian Blur-effekt (Effect> Blur> Gaussian Blur). Välj "Right", fyll det med den andra linjära gradienten, sänka opaciteten till 30% och lägg sedan till en 5px Gaussian Blur-effekt. Därefter måste du maskera dessa två former. Gruppera dem (Control + G) och öppna panelen Transparens. Duplicera "Knapp". Välj den här kopian, Ta den till Front (Shift + Control + Right Square Bracket) och fyll i den med vit (ta bort de extra fyllningarna och effekterna). Välj den här vita formen tillsammans med gruppen, öppna flytmenyn på panelen Transparency och klicka på Make Opacity Mask. Nu ska din grupp se ut som visas i den fjärde bilden.
Välj de former som gjordes under de senaste fyra stegen och placera dem enligt bilden nedan. Gör en ny kopia av "Knapp" och flytta den under den ursprungliga formen (i panelen Lager). Välj den här kopian, flytta den flera pixlar ner och till höger och fyll den med svart och lägg till en 10px Gaussian Blur-effekt. Välj Ellipse Tool (L), skapa en mindre cirkel och placera den som visas i den andra bilden. Fyll den med svart, sänk dess opacitet till 80% och lägg sedan till en 15px Gaussian Blur-effekt.
Välj typverktyget (T), klicka på din Artboard och lägg till den vita texten "Start". Använd informationen som visas i teckenfönstret och gå till Objekt> Expand. Välj den resulterande gruppen, lägg till Inflate-effekten (Effect> Warp> Inflate) och gå till Objekt> Expand Utseende. Välj de resulterande formerna och gå till Objekt> Sammansatt sökväg> Gör.
Låt oss nu lägga till en grungeeffekt för texten. Öppna borstpanelen (Fönster> Borstar). Öppna flyttmenyn och gå till Öppna borstebiblioteket> Konstnärligt> Artistic_ChalkCharcoalPencil. Plocka pennverktyget (P), dra en horisontell bana (som visas i den första bilden), klicka på Chalkborsten och gå till Objekt> Expand Utseende. Välj de resulterande formerna, fyll dem med svart och gå till Objekt> Sammansatt sökväg> Gör. Öppna panelen Transparens. Markera texten längs med den svarta sökvägen, öppna menyn Flyttningspanel, klicka på Make Opacity Mask och avmarkera kryssrutan. Slutligen, välj den här maskerade formen och sänka dess opacitet till 80%.
Välj Ellipse Tool (L), rita en 35by35px form och placera den som visas på den första bilden. Fyll den med vit, sänka dess opacitet till 90% och gå till Effect> Blur> Gaussian Blur. Ange en 15px Radius och klicka på OK. Återmarkera Ellipse Tool (L) och rita en 15by15px-form. Placera den som visas i den andra bilden, sänk dess opacitet till 40% och lägg sedan till en 5px Gaussian Blur-effekt.
Gruppera alla former som hittills skapats (Control + G) och ta tag i rektangelverktyget (M). Rita en form på storleken på din tavla (700 vid 700 px) och skicka den till baksidan (Shift + Control + Left Square Bracket). Välj den här rektangeln tillsammans med gruppen, välj markeringsverktyget (V), klicka på rektangelns kant (det ska bli betonat), klicka sedan på Horisontell Align Center och Vertical Align Center-knappar från Justera-panelen (Fönster> Justera ). Nu ska din grupp placeras i mitten av din tavla.
Kopiera den grupp som gjordes i föregående steg. Markera den och klicka på Unite-knappen från panelen Pathfinder. Välj den resulterande formen tillsammans med den större rektangeln och klicka på knappen Minus Front från panelen Pathfinder.
Välj den form som gjordes i föregående steg, fyll den med R = 40 G = 40 B = 40 och lägg till en ny fyllning. Välj den här andra fyllningen, gör den svart, sänka dess opacitet till 10%, ändra dess blandningsläge till Multiplicera, gå till Effect> Artistic> Film Grain. Ange de data som visas nedan och klicka sedan på OK. Till sist lägger du till en 4pt, inriktad mot insidan (R = 100 G = 100 B = 100) och en 2pt, svart, inriktad på insidan.
Återmarkera gruppen som gjordes i det sextonde steget, flytta den längst upp i panelen Lager och gå till Effekt> Stylize> Drop Shadow. Ange de uppgifter som visas nedan, klicka på OK och du är klar.
Nu när knappen är klar kan du tillämpa den på en mängd olika användningsområden, t.ex. ikoner, webbdesigner eller användargränssnitt. Du kan till och med använda de tekniker du har lärt dig i den här handledningen för att skapa ytterligare ikoner och element för en ganska cool webbdesign.
Accentsconagua