je préfère utiliser Photoshop pour créer mes icônes ICO. Un ICO a des tailles définies et vous voulez vous assurer qu’elles sont parfaites en pixels à chaque taille. Avec ma méthode Photoshop, vous aurez le contrôle sur la conception de chaque taille d’icône individuelle, contrairement à la méthode Illustrator. Ceci est bénéfique car il vous permet d’ajouter plus de détails aux icônes de plus grande taille.

Étape 1: Créer un fichier modèle. Vous pouvez télécharger le fichier de modèle PSD que j’ai créé., Ce n’est rien de spécial, mais cela donne à chaque taille d’icône un cadre pour l’endroit où l’icône doit s’adapter. Vous pouvez choisir les tailles que vous voulez et les afficher dans l’ordre que vous souhaitez, mais c’est ma mise en page préférée. Une fois que vous avez terminé, enregistrez le PSD et verrouillez-le pour éviter les écrasements accidentels!

je suis conscient que les plans de travail font quelque chose de très similaire et ne nécessiteraient pas l’étape suivante., Cette méthode a été créée avant que les plans de travail ne soient disponibles dans Photoshop et j’ai constaté que je préfère cette méthode à l’utilisation des plans de travail de toute façon. Si Adobe continue à améliorer les plans de travail, je pourrais changer un jour.

Étape 2: créez une Action Photoshop. Cette action va recadrer le plan de travail à l’intérieur du cadre, enregistrer l’image au format PNG, annuler le recadrage et répéter pour le reste des tailles. Plutôt que d’essayer de l’expliquer par écrit, je vais juste vous montrer. Consultez ma vidéo rapide ci-dessous et vous aurez l’idée.,

Étape 3: Créer votre icône! Je travaille sur un autre article de blog sur la façon dont je crée mes icônes. Une fois qu’il est prêt, je reviendrai et je le lierai ici. Vous pouvez maintenant passer à la section Conversion ci-dessous.

Illustrator icône de l’exportation de la méthode

beaucoup de gens préfèrent faire leurs icônes dans Adobe Illustrator et je comprends pourquoi. Illustrator est idéal pour les icônes SVG (le futur) mais je préfère utiliser Photoshop quand il s’agit D’ICO.,

Étape 1: Créer un fichier modèle. Vous aurez besoin de deux plans de travail; un à 16×16 et l’autre à 24×24. Nous faisons cela pour essayer d’éviter autant que possible la sous-pixellisation lors de l’expansion vers les plus grandes tailles. Vous pouvez télécharger le fichier de modèle AI que j’ai créé.

Étape 2: Créez votre icône! Je travaille sur un autre article de blog sur la façon dont je crée mes icônes. Une fois qu’il est prêt, je reviendrai et je le lierai ici.,

Step 3: Export the artboards. Go to File > Export > For Screens or use the keyboard shortcut ⌥+⌘+E. In this next screen you want to export both artboards as PNGs at 1x, 2x, 3x, and 4x scale., Après l’EXPORTATION, Vous pouvez supprimer l’icône 72px (échelle 24px @ 3x) et choisir l’icône 48px que vous souhaitez conserver (échelle 16px @ 3x ou 24px @ 2x). Vous pouvez maintenant passer à la section Conversion ci-dessous.

Heads up! Si vous rencontrez des problèmes pour afficher la taille correcte des ICO exportés à partir D’Illustrator, exécutez les png Illustrator exportés via ImageOptim.