Hur man skapar en appikon i Illustrator

Sep 14, 2025

Hur

Sida 1 av 2:

Så här skapar du en appikon i Illustrator: Steg 01-11

Så här skapar du en appikon i Illustrator: Steg 01-11
Så här skapar du en appikon i Illustrator: Steg 12-23

I denna Illustratör , Jag ska visa dig hur man skapar en kalkylatorappikon i Adobe Illustrator CC . Vi använder olika formverktyg, penna, tillsammans med Illustratörens 3D-funktioner. Förhoppningsvis kommer du att lära dig några praktiska tips längs vägen.

Du måste också ladda ner ett par Gratis teckensnitt För denna handledning: DS-DIGITAL och Bebas neue . Om du inte redan har det kan du få Adobe Creative Cloud här .

Men först, låt oss ta en titt på det slutliga resultatet:

01. Öppna ett dokument

illustrator font icon — Klicka på bilden för att förstora

Skapa ett nytt dokument i Illustrator med 600px bredd och 450px höjd.

02. Skapa bakgrunden

illustrator app icon — Klicka på bilden för att förstora

Välj rektangelverktyget (M) och välj # 44484D Fyll färg för att rita en rektangel som täcker duken som bakgrunden.

03. Gör basen

Vi börjar med att skapa ikonens bas. Välj så rektangelverktyget (M) och klicka på duken för att visa alternativfönstret. Ange 280px Bredd, 265px höjd och tryck på OK för att rita en rektangel som visas nedan. Plocka # E7ded0 som fyllfärgen.

Därefter omvandlar vi det till en rundad rektangel. Välj den här rektangeln med hjälp av urvalsverktyget (V) eller klickar på det ringformade målet som är närvarande på höger sida av respektive skikt. Och gå till Effect & GT; Stilize & gt; Runda hörn. Ange 50px för radien och slå OK.

Click image to enlarge — Klicka på bilden för att förstora

04. Ange effekt

Välj den här rektangeln och gå till Effect & GT; 3d & gt; Extrude & amp; Fasa. Applicera givna inställningar här.

05. Applicera en gradient

För att applicera subtil gradient över basen, dra en rektangel som täcker hela 3D-formen med vilken fyllning som helst. Konvertera den nu till en rundad rektangel med 50px hörnradie.

Byt nu fyllningen med en svartvit-svart gradient med hjälp av lutningsverktyg (g). Ändra sitt blandningsläge till färgbrännare med 20% opacitet i transparenspanelen (Shift + Ctrl + F10).

06. Skapa en annan rektangel

Därefter dra en annan rektangel med 280px bredd och 178px höjd med # e9e3d9 Fyll färg och vit färgslag. Välj 1pt slagvikt från toppkontrollfältet.

Konvertera den nu till en rundad rektangel med 40px radie.

Efter det, använd efterföljande gradient på den och ändra sitt blandningsläge för att multiplicera med 50% opacitet i transparenspanelen (Shift + Ctrl + F10).

07. Gör rundad rektangel

Rita en annan rektangel på 230px med och 35px höjd med # bcba95 fyllning färg och för stroke applicera ljus till mörkgrå gradient som visas nedan. Välj 3pt slagvikt från toppkontrollstången.

Konvertera denna rektangel till en rundad rektangel med 10px hörnradie.

08. Gör en glödseffekt

Välj sedan den här nya rektangeln och gå till Fönster och GT; Utseende För att visa panelen Utseende eller tryck på Skift + F6. Välj nu fyllningsattributet och klicka på ikonen för dubbletter som valt objekt längst ner på utseendepanelen för att duplicera fyllningen. Och ersätta den här nya fyllningen med Black & AMP; Vit gradient vid 90 grader som visas ovan.

Håll den här rektangeln vald och gå till Effect & GT; Stilize & gt; Inre glöd. Applicera givna inställningar här. När du är klar, ändra gradientfyll blandningsläge för att multiplicera med 30% opacitet.

09. Kopiera rektangel

Välj den här nya rektangeln och tryck på Ctrl + C för att kopiera och tryck på Ctrl + B för att klistra in i ryggen. Dra den här kopian 1-2 steg nedåt. Ta nu bort dess fyllnadsattribut genom att dra dem för att radera ikonen längst ner på utseendepanelen och ge den 3PT-stroke av # D1d2d4 Färg.

10. Lägg till text

Därefter lägger vi till lite text på skärmen. Välj typverktyget (t) för att skriva texten med # 404041 fyll färg. Jag har använt DS-Digital font här.

Tryck nu på CTRL + C för att kopiera och tryck på CTRL + B för att klistra in i ryggen. Dra den kopierade texten 1-2 steg nedåt och ändra fyllnadsfärgen till # 808284 .

11. Gör basen

Därefter skapar vi Knapps bas. Välj rektangelverktyget för att rita en rektangel med följande dimensioner med # 847d72 Fyll färg och samma ljus till mörkgrå gradient på stroke som används i steg 7. Välj dock 1pt stroke-vikt här.

Och omvandla den till en rundad rektangel med 25px radie.

Därefter duplicera dess fyllningsattribut i utseendepanelen och Applicera Black & AMP; Vit gradient vid 90 grader. Ändra dess blandningsläge för att multiplicera med 50% opacitet.

Nästa sida: De sista stegen för att skapa en ikon-app i Illustrator ...

Nuvarande sida: Så här skapar du en appikon i Illustrator: Steg 01-11

Nästa sida Så här skapar du en appikon i Illustrator: Steg 12-23

Hur man skapar en appikon i Illustrator

01. Öppna ett dokument

02. Skapa bakgrunden

03. Gör basen

04. Ange effekt

05. Applicera en gradient

06. Skapa en annan rektangel

07. Gör rundad rektangel

08. Gör en glödseffekt

09. Kopiera rektangel

10. Lägg till text

11. Gör basen

Hur - Mest populära artiklar

Hur man använder Cloud Storage som en kreativ

Hur man komprimerar bilder: En webbdesigners guide

Hur man målar ett slott med sketchup

Skapa en animerad ångtexteffekt

Lär dig att animera för barn

Hur man digitalt skulpterar i Zbrushcore

Hur man skulpterar och utgör ett tecknadshuvud i Zbrush

Skapa enkla illustrationer för webben

Kategorier