Slik lager du et app-ikon i Illustrator

Sep 11, 2025

hvordan

Side 1 av 2:

Slik oppretter du et app-ikon i Illustrator: Trinn 01-11

Slik oppretter du et app-ikon i Illustrator: Trinn 01-11 [1. 3]
Slik lager du et app-ikon i Illustrator: Trinn 12-23 [1. 3]

I dette Illustrator Tutorial , Jeg vil vise deg hvordan du lager et kalkulatorappikon i Adobe Illustrator CC. . Vi bruker forskjellige formverktøy, pennverktøy, sammen med 3D-funksjonene til Illustrator. Forhåpentligvis lærer du få praktiske tips underveis.

Du må også laste ned et par gratis fonter For denne opplæringen: DS-Digital og Bebas Neue. . Hvis du ikke allerede har det, kan du få Adobe Creative Cloud her .

Men først, la oss se på det endelige resultatet:

01. Åpne et dokument

illustrator font icon — Klikk på bildet for å forstørre

Opprett et nytt dokument i Illustrator med 600px bredde og 450px høyde.

02. Lag bakgrunnen

illustrator app icon — Klikk på bildet for å forstørre

Velg rektangelverktøyet (M) og velg # 44484D. Fyll farge for å tegne et rektangel som dekker lerretet som bakgrunnen.

03. Lag basen

Vi starter med å lage ikonets base. Så velg rektangelverktøyet (M) og klikk på lerret for å vise alternativer-vinduet. Skriv inn 280px bredde, 265px høyde og trykk OK for å tegne et rektangel som vist nedenfor. Plukke # E7ded0. som fyllingsfargen.

Deretter konverterer vi det til et avrundet rektangel. Velg dette rektangelet ved hjelp av valgverktøyet (V) Orby å klikke på det ringformede målet til høyre på høyre side av respektive lag. Og gå til Effect & GT; Stylize & gt; Runde hjørner. Skriv inn 50px for radiusen og trykk OK.

Click image to enlarge — Klikk på bildet for å forstørre

04. Sett effekt

Velg dette rektangelet og gå til Effect & GT; 3D & GT; Ekstrudere & amp; Skrå. Påfør oppgitte innstillinger her.

05. Påfør en gradient

For å påføre subtile gradient over basen, tegne et rektangel som dekker hele 3D-formen ved hjelp av en hvilken som helst fyllfarge. Nå konverter det til et avrundet rektangel med 50px hjørnerradius.

Nå erstattet fyllingen med en svart-hvit-svart gradient ved hjelp av gradientverktøy (G). Endre blandingsmodus til fargebrenning med 20% opacitet i gjennomsiktighetspanelet (Skift + Ctrl + F10).

06. Opprett et annet rektangel

Deretter tegner du et annet rektangel med 280px bredde og 178px høyde ved hjelp av # E9E3D9 Fyll farge og hvitt fargestøtte. Velg 1pt slagvekt fra toppkontrollen.

Nå konverter det til et avrundet rektangel med 40px radius.

Deretter må du søke etter gradient på den og endre blandingsmodus for å multiplisere med 50% opacitet i gjennomsiktighetspanelet (Shift + Ctrl + F10).

07. Lag avrundet rektangel

Tegn et annet rektangel med 230px med og 35px høyde ved hjelp av # bcba95 fyllfarge og for slag påfør lys til mørkegrågradient som vist nedenfor. Velg 3pt slagvekt fra toppkontrolllinjen.

Konverter dette rektangelet til et avrundet rektangel med 10px hjørnerradius.

08. Lag en glødende effekt

Deretter velger du dette nye rektangelet og gå til Window & GT; Utseende for å vise utseendepanelet eller trykk Shift + F6. Velg nå Fyll-attributtet og klikk på ikonet for duplikat valgt element nederst på utseendepanelet for å duplisere fyllingen. Og erstatt denne nye fyllingen med svart og amp; Hvit gradient på 90 grader som vist ovenfor.

Hold dette rektangelet valgt og gå til Effect & GT; Stylize & gt; Indre glød. Påfør oppgitte innstillinger her. Når du er ferdig, endrer du gradientfyllingsmodus for å multiplisere med 30% opacitet.

09. Kopier rektangel

Velg dette nye rektangelet og trykk Ctrl + C for å kopiere og trykk Ctrl + B for å lime inn på baksiden. Dra denne kopien 1-2 trinn nedover. Fjern nå fyll-attributter ved å dra dem for å slette ikonet nederst på utseendepanelet og gi det 3pt slag av # D1d2d4. farge.

10. Legg til tekst

Deretter legger vi til litt tekst over skjermen. Velg Type Tool (T) for å skrive inn teksten ved hjelp av # 404041. Fyll farge. Jeg har brukt DS-digital skrift her.

Trykk nå Ctrl + C for å kopiere og trykk Ctrl + B for å lime inn i ryggen. Dra den kopierte teksten 1-2 trinn nedover og endre fyllfargen til # 808284. .

11. Gjør basen

Deretter lager vi knappens base. Velg rektangelverktøyet for å tegne et rektangel med følgende dimensjoner ved hjelp av # 847D72. Fyll farge og samme lys til mørkegrågradient på stroke som brukt i trinn 7. Imidlertid velger du 1pt slagvekt her.

Og konvertere det til et avrundet rektangel med 25px radius.

Deretter, dupliserer fyllingsattributtet i utseende-panelet og bruk svart og amp; Hvit gradient på 90 grader. Endre blandingsmodus for å multiplisere med 50% opasitet.

Neste side: De siste trinnene for å lage et ikon app i Illustrator ...

1 [1. 3]
2. [1. 3]

Nåværende side: Slik oppretter du et app-ikon i Illustrator: Trinn 01-11

Neste side Slik lager du et app-ikon i Illustrator: Trinn 12-23

Slik lager du et app-ikon i Illustrator

01. Åpne et dokument

02. Lag bakgrunnen

03. Lag basen

04. Sett effekt

05. Påfør en gradient

06. Opprett et annet rektangel

07. Lag avrundet rektangel

08. Lag en glødende effekt

09. Kopier rektangel

10. Legg til tekst

11. Gjør basen

hvordan - Mest populære artikler

Kart Illustrasjon: En trinnvis veiledning

Bygg prototyper med Adobe XD

Forstå Unity Asset Import Pipeline

Opprett 3D-tekst i Photoshop: En trinnvis veiledning

Slik bruker du Adobe Capture CC

Lag en vektorforskyvning mesh børste

5 tips for å forbedre VR-kreasjonene

Hvordan illustrere for en hendelse

Kategorier