Astuce Comment créer une icône de dossier de style propre

Dans le tutoriel suivant, vous apprendrez à créer une icône de dossier propre. En utilisant des formes simples et le panneau d'apparence, vous verrez à quel point il est facile de créer une superbe icône.


Étape 1

Créez un document RVB de 250 x 250 pixels. Activez la grille (Affichage> Grille) et l’alignement sur la grille (Affichage> Aligner sur la grille). Ensuite, vous aurez besoin d'une grille toutes les 5px. Allez dans Édition> Préférences> Guides et grille, entrez 5 dans le quadrillage chaque case et 1 dans la zone Subdivisions. Vous pouvez également ouvrir le panneau Info (Fenêtre> Info) pour un aperçu en direct avec la taille et la position de vos formes. N'oubliez pas de remplacer l'unité de mesure en pixels dans Edition> Préférences> Unité> Général. Ces options augmenteront considérablement votre vitesse de travail.


Étape 2

Choisissez l'outil Rectangle (M) et cliquez sur votre plan de travail. Entrez 190 dans la zone de largeur et 140 dans la zone de hauteur, puis cliquez sur OK. Remplissez cette nouvelle forme avec R = 28 G = 117 B = 188 et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 7px, cliquez sur OK puis sélectionnez Objet> Développer l'apparence..


Étape 3

Continuez avec l'outil Rectangle (M). Cette fois, créez une forme de 65 x 25 pixels et placez-la comme indiqué dans l'image suivante. Remplissez-le avec R = 28 G = 117 B = 188 et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 7px, cliquez sur OK puis sélectionnez Objet> Développer l'apparence..


Étape 4

Sélectionnez les deux formes créées jusqu'à présent et cliquez sur le bouton Unir du panneau Pathfinder..


Étape 5

Resélectionnez l'outil Rectangle (M), créez une forme de 190 x 130 pixels et placez-la comme indiqué dans l'image suivante. L'accrochage à la grille facilitera votre travail. Remplissez-le avec R = 39 G = 170 B = 225 et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 7 px, cliquez sur OK et récupérez l’outil de sélection directe (A). Sélectionnez le point d'ancrage supérieur gauche et déplacez-le de 15 pixels vers la gauche, puis sélectionnez le point d'ancrage supérieur droit et déplacez-le de 15 à droite. Maintenant, votre forme devrait ressembler à la deuxième image. Sélectionnez-le et allez à Objet> Développer l'apparence.


Étape 6

Continuons avec le fichier. Sélectionnez l'outil Rectangle, créez une forme de 125 x 180 pixels et remplissez-le de blanc. Sélectionnez cette nouvelle forme et accédez au panneau Apparence. Ouvrez le menu déroulant et cliquez sur Ajouter un nouveau remplissage. Cela va ajouter un deuxième remplissage pour votre forme. Sélectionnez-le dans le panneau Apparence, définissez sa couleur sur R = 39 G = 170 B = 225, puis sélectionnez Effet> Déformer et transformer> Transformer. Entrez les données affichées sous l'image n ° 2, cliquez sur OK, puis ajoutez un troisième remplissage. De nouveau, définissez sa couleur sur R = 39 G = 170 B = 225, puis ajoutez les deux effets de transformation illustrés sous l’image n ° 3. N'oubliez pas d'ajouter 29 dans la zone de copie pour le deuxième effet..


Étape 7

Sélectionnez la forme créée à l'étape précédente et accédez à Objet> Développer l'apparence. Sélectionnez le groupe résultant et accédez à Objet> Transformation> Rotation. Entrez un angle de -83,5 degrés puis cliquez sur OK. Maintenant, votre fichier doit être placé comme indiqué dans la troisième image.


Étape 8

Déplacez le groupe créé à l'étape précédente entre les deux formes bleues (dans le panneau Calques). Sélectionnez ce groupe et allez à Effet> Déformer et transformer> Transformer. Entrez les données indiquées ci-dessous, cliquez sur OK, puis sélectionnez Objet> Développer l’apparence. Maintenant, sélectionnez les trois formes blanches et remplissez-les avec le dégradé linéaire montré dans la troisième image.


Étape 9

Sélectionnez la forme bleue en face avant, ajoutez un deuxième remplissage et utilisez le dégradé linéaire indiqué dans la première image. Le texte jaune de l'image en dégradé représente le pourcentage d'opacité, tandis que le texte blanc représente le pourcentage d'emplacement. Ajoutez un troisième pour la même forme et utilisez le dégradé radial indiqué dans la deuxième image..


Étape 10

Désactivez l'alignement sur la grille (Affichage> Aligner sur la grille), puis sélectionnez Edition> Préférences> Général et entrez 1 dans la zone Incrément de clavier. Resélectionnez la forme bleue avant, appuyez une fois sur Ctrl + C, puis appuyez deux fois sur Ctrl + F. Cela ajoutera deux copies devant. Sélectionnez la copie du haut et appuyez deux fois sur la flèche vers le bas. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 125 G = 204 B = 237.


Étape 11

Resélectionnez la forme bleue avant et créez deux nouvelles copies (Contrôle + C> Contrôle puis F> Contrôle + F). Sélectionnez la copie du haut et appuyez une fois sur la flèche du bas. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 33 G = 143 B = 206.


Étape 12

Passons à la forme arrière bleue. Tout d’abord, réglez sa couleur sur R = 39 G = 170 B = 225, puis ajoutez un second remplissage et utilisez le dégradé linéaire présenté ci-dessous..


Étape 13

Sélectionnez la forme noire bleue et créez deux copies (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut et appuyez deux fois sur la flèche vers le bas. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 125 G = 204 B = 237.


Étape 14

Resélectionnez la forme bleue arrière et créez deux nouvelles copies (Contrôle + C> Contrôle puis F> Contrôle + F). Sélectionnez la copie du haut et appuyez une fois sur la flèche du bas. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 33 G = 143 B = 206.


Étape 15

Activer l'alignement sur la grille. Dupliquez la forme bleue avant (Contrôle + C puis Contrôle + F), puis saisissez l'outil Rectangle (M), créez une forme de 220 x 130 pixels et placez-le comme indiqué dans la première image. Sélectionnez cette nouvelle forme, sélectionnez l'outil Supprimer le point d'ancrage (moins) et cliquez sur le point d'ancrage inférieur droit. Sélectionnez la forme obtenue, ainsi que la copie de la forme bleue avant, puis cliquez sur le bouton Intersection du panneau Pathfinder. Remplissez la forme obtenue avec le dégradé linéaire indiqué dans la troisième image et réduisez son opacité à 10%.


Étape 16

Enfin, ajoutons un simple effet d’ombre. Pour cette étape, vous aurez besoin d'une grille toutes les 1px. Allez dans Edition> Préférences> Guides et grille et entrez 1 dans le quadrillage chaque case. Choisissez l'outil Rectangle (M) et créez une forme 192 x 11px. Remplissez-le avec R = 65 G = 64 B = 66, placez-le comme indiqué dans la première image et déplacez-le dans le bas du panneau Calques. Ensuite, sélectionnez Effet> Styliser> Coins arrondis. Entrez un rayon de 7 pixels, cliquez sur OK, puis sélectionnez Effet> Flou> Flou gaussien. Entrez un rayon de 2 pixels, cliquez sur OK, baissez l'opacité à 25% et vous avez terminé..


Conclusion

Et voila. Une icône de dossier à partir de quelques formes simples. Essayez d’expérimenter avec différentes couleurs et arrière-plans pour voir ce que vous pouvez créer. S'amuser!