Comment créer une icône d'application dans Illustrator

Sep 12, 2025

Comment

Page 1 sur 2:

Comment créer une icône d'application dans l'illustrateur: étapes 01-11

Comment créer une icône d'application dans l'illustrateur: étapes 01-11

[dix] Comment créer une icône d'application dans l'illustrateur: étapes 12-23

Dans ce Tutoriel d'illustrateur , Je vais vous montrer comment créer une icône d'application de calculatrice dans Adobe Illustrator cc . Nous utiliserons différents outils de forme, outil de stylo, ainsi que les caractéristiques 3D de l'illustrateur. J'espère que vous apprendrez peu de conseils utiles en cours de route.

Vous devrez également télécharger un couple de polices libres Pour ce tutoriel: Ds-numérique et Bebas neuf . Si vous ne l'avez pas déjà, vous pouvez obtenir Adobe Creative Cloud ici .

Mais d'abord, regardons le résultat final:

01. Ouvrez un document

illustrator font icon — Cliquez sur l'image pour l'agrandir

Créez un nouveau document dans Illustrator avec une largeur de 600px et une hauteur de 450px.

02. Créer le fond

illustrator app icon — Cliquez sur l'image pour l'agrandir

Sélectionnez l'outil de rectangle (M) et choisissez # 44484D Remplir la couleur pour dessiner un rectangle recouvrant la toile comme arrière-plan.

03. Faites la base

Nous allons commencer par créer la base de l'icône. Alors sélectionnez l'outil Rectangle (M) et cliquez sur la fenêtre Canvas pour afficher les options. Entrez la largeur de 280px, la hauteur 265px et appuyez sur OK pour dessiner un rectangle comme indiqué ci-dessous. Prendre # E7ded0 comme la couleur de remplissage.

Ensuite, nous le convertirons en un rectangle arrondi. Sélectionnez ce rectangle à l'aide de l'outil de sélection (V) en cliquant sur la cible en forme d'anneau présentée à droite de la couche respective. Et aller à effet & gt; Stylize & GT; Coins rounds. Entrez 50PX pour le rayon et appuyez sur OK.

Click image to enlarge — Cliquez sur l'image pour l'agrandir

04. Définir effet

Sélectionnez ce rectangle et allez à Effec & GT; 3D & GT; Extruder et amplir; Biseau. Appliquez des paramètres donnés ici.

05. Appliquer un gradient

Pour appliquer un gradient subtil sur la base, dessinez un rectangle recouvrant toute la forme 3D en utilisant n'importe quelle couleur de remplissage. Maintenant, convertissez-la en un rectangle arrondi avec un rayon de coin 50px.

Remplacez maintenant son remplissage avec un gradient noir blanc-blanc à l'aide d'un outil de dégradé (G). Changez son mode de mélange en couleur de couleur avec une opacité de 20% dans le panneau de transparence (Maj + Ctrl + F10).

06. Créer un autre rectangle

Ensuite, dessinez un autre rectangle avec une largeur de 280px et 178px hauteur à l'aide de la couleur de remplissage # E9E3D9 et de la course de couleur blanche. Choisissez un poids de course 1PT à partir de la barre de commande supérieure.

Maintenant, convertissez-la en un rectangle arrondi par rayon 40px.

Après cela, appliquez le dégradé suivant et modifiez son mode de mélange pour multiplier avec 50% d'opacité dans le panneau de transparence (Maj + Ctrl + F10).

07. Faire un rectangle arrondi

Dessinez un autre rectangle de 230px avec une hauteur 35px à l'aide de la couleur de remplissage BCBA95 et pour les accidents vasculaires cérébraux, appliquez la lumière au dégradé gris foncé, comme indiqué ci-dessous. Sélectionnez le poids de la course 3PT à partir de la barre de commande supérieure.

Convertissez ce rectangle en un rectangle arrondi par rayon de coin 10px.

08. Faites un effet de lueur

Ensuite, sélectionnez ce nouveau rectangle et allez à Window & GT; Apparence Pour afficher le panneau d'apparence ou appuyez sur Maj + F6. Maintenant, sélectionnez l'attribut de remplissage et cliquez sur l'icône de l'élément sélectionné en double au bas du panneau d'apparence pour dupliquer le remplissage. Et remplacez ce nouveau remplissage avec Black & Amp; Gradient blanc à 90 degrés comme indiqué ci-dessus.

Gardez ce rectangle sélectionné et allez à Effet & GT; Stylize & GT; Lueur intérieure. Appliquez des paramètres donnés ici. Une fois que vous avez terminé, modifiez le mode de mélange de remplissage de gradient pour multiplier avec 30% d'opacité.

09. Copier le rectangle

Sélectionnez ce nouveau rectangle et appuyez sur Ctrl + C pour copier et appuyez sur Ctrl + B pour coller dans le dos. Faites glisser cette copie 1-2 étapes vers le bas. Retirez maintenant ses attributs de remplissage en les faisant glisser pour supprimer l'icône au bas du panneau d'apparence et donnez-lui une course 3PT de # D1D2D4 Couleur.

10. Ajouter du texte

Ensuite, nous ajouterons du texte sur l'écran. Choisissez l'outil de type (T) pour taper le texte en utilisant # 404041 Remplir la couleur. J'ai utilisé la police DS-Digital ici.

Appuyez maintenant sur Ctrl + C pour copier et appuyez sur Ctrl + B pour coller dans le dos. Faites glisser le texte copié 1-2 étapes vers le bas et changez de couleur de remplissage sur # 808284 .

11. faire la base

Ensuite, nous allons créer la base du bouton. Sélectionnez l'outil Rectangle pour dessiner un rectangle avec les dimensions suivantes en utilisant # 847D72 Remplir la couleur et la même lumière au gradient gris foncé sur la course utilisée à l'étape 7. Cependant, choisissez un poids de course 1pt ici.

Et convertir en un rectangle arrondi de 25px rayon.

Après cela, dupliquez son attribut de remplissage dans le panneau d'apparence et appliquer le noir et l'ampli; Gradient blanc à 90 degrés. Changez son mode de mélange pour multiplier avec une opacité de 50%.

Page suivante: Les étapes finales pour créer une application icon dans Illustrator ...

[dix] 1

[dix] 2

Page actuelle: Comment créer une icône d'application dans l'illustrateur: étapes 01-11

Page suivante Comment créer une icône d'application dans l'illustrateur: étapes 12-23

Comment créer une icône d'application dans Illustrator

01. Ouvrez un document

02. Créer le fond

03. Faites la base

04. Définir effet

05. Appliquer un gradient

06. Créer un autre rectangle

07. Faire un rectangle arrondi

08. Faites un effet de lueur

09. Copier le rectangle

10. Ajouter du texte

11. faire la base

Comment - Most Popular Articles

Comment éliminer les rides dans Photoshop

Ajouter des couleurs numériques aux dessins au crayon

5 Fonctionnalités chaudes de CSS et comment les utiliser

Dessine une geisha Bad-Ass

Peindre une vie quotidienne expressive dans les acryliques

Comment utiliser des formes de mélange pour animer des caractères

Comment prendre votre logo vectoriel de 2D à 3D

Comment créer une belle peinture de paysage aquarelle

Catégories