Share
I denna snabba tips skapar vi en uppsättning webbknappar med hjälp av 3D-effekter i Adobe Illustrator. Varför? På det sättet kan vi glömma att använda olika borstar och effekter för att lägga till höjdpunkter och skuggor, och vi kan uppnå detta i ett enda steg, dra nytta av ljusinställningarna och fasformerna tillgängliga. Låt oss börja!
Låt oss börja med den grundläggande formen för den här webknappen, så ta det rundade rektangelverktyget och klicka någonstans på din tavla för att öppna rutan Avrundad rektangel. Där anger du siffrorna och du får den form som vi behöver. Välj ljusgrå som fyllfärgen.
Med den här rektangeln vald, gå till Effektmeny> 3D> Extrude & Bevel. På höger sida av bilden nedan kan du se standardinställningarna, endast rotations koordinater ändras. Jag skulle gärna använda fasformerna oftare men ibland genererar de inte bara de resultat jag vill ha. I det här fallet, om du väljer Tall-Round som Bevel-formen, är förändringen mer än uppenbar. Du kommer att få den rundade kanten och du behöver inte oroa dig för höjdpunkterna och skuggorna senare.
Om du ökar höjdvärdet blir den avrundade kanten tjockare.
I fönstret Extrude & Bevel Options trycker du på knappen Fler alternativ för att öppna hela dialogrutan och fokusera på den nedre delen. Om du vill markera det övre vänstra hörnet flyttar du ljuset till vänster enligt nedan eller till botten om du vill markera det nedre högra hörnet.
Slutligen är här de inställningar jag har använt. Ändra koordinaterna, välj Tall-Round som Form-formen, höja höjden från 4 pt till 6 pt och flytta ljuset något till vänster.
Medan 3D-knappen väljs, gå till Objekt-menyn och välj Expand Utseende. Använd nu Direct Selection Tool (A) för att välja den inre rundade rektangeln och fyll den med den linjära gradienten som visas. Ställ vinkeln till 90 grader. Med den här rektangeln vald dubbelklickar du på Innehåll (eftersom denna form är i en grupp) i Utseendepanelen och på så sätt ser du de befintliga attributen. Gå sedan till Effect-menyn> Stylize och använd den inre glöd-effekten med de visade inställningarna.
Om du har befintlig fyllning vald i Utseendepanelen klickar du på ikonen Dubbla markerad artikel längst ner och du får en ny fyllning. Ändra gradienten till den som visas med vit och svart och sätt vinkeln till 50 grader. Ändra blandningsläge till skärm (svart blir transparent) och minska opacitet till 75%.
Duplicera denna andra fyllning som du gjorde tidigare och behåll samma gradient. Ställ vinkeln till 140 grader och öka Opacity-värdet från 75% till 90%.
Välj nu med Direct Selection Tool (A) den inre rektangeln och välj Kopiera och klistra in på Objekt-menyn. Dra i den nya rektangeln utanför panelen Lager, eftersom vi inte vill ha den där. Ta bort de befintliga attributen och ge den ett svart slag. Medan denna rektangel väljs, går du till Objekt> Ban> Lägg till ankarepunkter två gånger för att lägga till några extra poäng. Ta sedan saxverktyget (C) och klicka på de två angivna punkterna för att klippa formen och ta bort sökvägen från botten.
Nu behöver du en konstborste. Jag har förklarat hur man gör det i det här snabba tipset i steg 9. Den enda skillnaden är att den här gången började jag från en 100 x 3 px ellips istället för 200 x 5 px. När du har dragit den i borstpanelen för att spara den som en ny konstborste, använd den för att stryka banan från toppen. Ställ in vikten till 2 pt.
Kopiera och klistra in framför den inre rektangeln och dra den utanför knappgruppen framför den. Ta bort de befintliga skenorna och ge den en svart fyllning (1). Kopiera och klistra in framför den svarta rektangeln och ändra fyllfärgen så att du kan skilja dem. Flytta den röda rektangeln lite upp genom att trycka uppåt-tangenten på tangentbordet två gånger (2). Tangentbordsökningen bör sättas till 1 px (Redigera-menyn> Inställningar> Allmänt).
Välj båda formerna och välj Subtrahera från formområde> Expand from Pathfinder Panel. Den resulterande tunna formen ska ha en svart fyllning (3). Ändra blandningsläget till Multiplicera och minska opacitet till 20% (4).
Därefter ritar du en bana över knappen som i bilden nedan med hjälp av pennverktyget (P). Kopiera och klistra in igen på den inre rektangeln, ta bort de befintliga utseendena och bara ge den en svart stroke. Markera den här rektangeln och även den blå banan och klicka på Divide i panelen. Från Objekt-menyn välj Ungroup och ta sedan bort formen från botten.
Fyll den form som erhålls med en linjär gradient från vit till svart och sätt vinkeln till minus 90 grader. Ändra blandningsläge till skärm (svart blir transparent) och minska opacitet till 30%.
Låt oss fortsätta med texten. Med typverktyget (T) typ "TRY NOW" med ett teckensnitt som heter Anja Eliane, storlek 35 pt. Du kan hitta teckensnittet här. Från Objekt-menyn välj Expand och fyll i texten med den linjära gradienten som visas. Ställ vinkeln till minus 45 grader. Gå sedan till Effect-menyn> Stylize och använd Drop Shadow-effekten med hjälp av inställningarna nedan.
Skriv nu "30 DAY TRIAL" med Arial Bold, storlek på 15 pt och välj sedan Expand från objektmenyn. Fyll texten med vit och använd sedan igen Drop Shadow-effekten med de visade inställningarna.
Från menyn Symboler (Fönster-menyn> Symboler) öppnar du menyn Symbolbibliotek och i pilens kategori hittar du pil 24. Dra det till ditt arbetsområde och tryck på ikonen Bryt länk till symbol längst ner på panelen. Avmarkera det två gånger och gå till Effektmeny> Stylize> Round Corners och använd en 3 px Radius (1). Fyll pilen med den linjära gradienten som visas och ge den en 0,5 pt Stroke med den angivna färgen (2).
Flytta pilen på knappen och gå till Effektmeny> Stylize och använd Drop Shadow-effekten.
Om du väljer den här pilen väljer du Expand Utseende från objektmenyn för att expandera de två effekterna som tillämpas, gå till Objekt-menyn> Transformera> Skala, välj 80% och klicka på Kopiera. Du kommer att få den mindre pilen. Ordna dem som i bilden och se till att de är horisontellt inriktade. Välj dem båda och gå till Objekt-menyn> Transformera> Reflektera. Välj Vertikal och klicka sedan på Kopiera. Ordna de två nya pilarna på höger sida och knappen är klar.
Allt som saknas är en skugga under knappen. Ta ellipsverktyget (L) och dra en platt ellipsa längst ner och välj sedan svart som fyllfärgen (1). Skicka den här ellipsen bakom knappen och gå till Objekt-menyn> Path> Offset Path och använd en minus 7 px Offset. Du kommer att få en mindre ellips i mitten (2). Ställ opaciteten för den större ellipsen till 0% och välj dem båda och gå till Objekt-menyn> Blanda> Blandningsalternativ. Där väljer du 25 angivna steg och går tillbaka till objektmenyn> Blanda> Gör (3). Minska opacitet för den resulterande blandningsgruppen till 75% och om du lägger knappen på en viss bakgrund ändrar du också blandningsläget till Multiplicera.
Här är den sista webknappen:
Från denna knapp kan du få många andra färgvariationer. Allt du behöver göra är att göra en kopia av knappen och ändra några saker. I bilderna nedan kan du se tre exempel: blå, grön och lila. Alla former som syns i bilden nedan har inte ändrats. Håll dem som de är. De som är dolda innebär att de kommer att ändras och vi tar var och en individuellt.
Låt oss börja med den avrundade rektangeln. Välj det med Direct Selection Tool (A) och kolla på Utseendepanelen. Ändra den första gradientfyllningen med den nya gradienten som visas och behåll alla andra attribut som de är. Gör samma sak för de gröna och lila webknapparna.
För texten ändrar du bara mellanstoppets mellanstopp från ljus orange till ljusblå respektive ljusgrön och ljuslila. "30 DAY TRIAL" förblir densamma.
Välj nu pilen och ändra gradientfyllningen och streckfärgen enligt vad som anges. Effekterna förblir desamma.
Slutligen, som du gjorde i steg 10, välj Expandera utseende och skala sedan pilen för att få den mindre. Reflektera de två och du är klar.
Detta är den sista bilden och här är de fyra webbknapparna redo att användas. Om du vill spara dem för webben, kolla in en annan handledning där jag förklarar hur du gör det i detalj.
Accentsconagua