10 astuces simples pour créer vos propres icônes cool avec Photoshop

Il existe un grand nombre de jeux d’icônes gratuits en ligne, mais si vous souhaitez vous aventurer au-delà d’un usage particulier, vous devez également effectuer une vingtaine de problèmes. La licence et le manque de marque ne sont que deux d'entre eux.

Même si vous n'êtes pas un développeur de logiciels, apprendre à créer vos propres icônes est une compétence extrêmement utile. Vous pouvez donner à votre ordinateur un skin unique ou fournir vos services à la communauté et au monde de l'entreprise.

Ce n'est en aucun cas un tutoriel complet sur la conception d'icônes. Nous commençons tout juste à vous familiariser avec les bases rudimentaires: techniques, liste de contrôle de la conception et jeu d'outils de conception d'icônes..

Icon Techniques

Vous trouverez ci-dessous certaines spécifications à connaître concernant le format des icônes, notamment les résolutions d'image et les formats de fichier..

Taille

L'importance de la taille est discutée plus en détail ci-dessous. Pour l'instant, nous nous en tiendrons aux aspects techniques.

Les icônes sont toujours carrées. Cela signifie qu'une icône rectangulaire sera soit étirée, soit réduite pour remplir ou faire tenir la totalité de la toile. Dans les deux cas, les icônes très rectangulaires se détachent mal. Les tailles d’icônes suivantes sont les plus courantes:

• • • 16 x 16 px * **
    • 24 x 24 px
    • 32 x 32 px * **
    • 48 x 48 px * **
    • 64 x 64 px
    • 96 x 96 px
    • 128 x 128 px **
    • 256 x 256 px **
    • 512 x 512 px **

Windows XP recommande l'utilisation de résolutions * 16 x 16, 32 x 32 ou 48 x 48. Si aucun fichier n'est disponible, l'icône la plus proche en résolution, jusqu'à 256 x 256, sera redimensionnée. Avec les résolutions de bureau toujours plus élevées, il est conseillé de toujours inclure des résolutions plus grandes. Le format Apple ICNS prend en charge les formats 16 x 16, 32 x 32, 48 x 48, 128 x 128, 256 x 256 et même 512 x 512 **.

Format de fichier

Pour Windows, le format de fichier le plus couramment utilisé pour la distribution des icônes est ICO. La contrepartie Mac est ICNS (Apple Icon Image Format)..

La liste de contrôle de conception d'icônes

Il n'y a pas un seul tutoriel pour concevoir l'icône parfaite, encore et encore. Différents thèmes et conceptions requièrent des approches différentes et la «tendance actuelle» est en constante évolution. Vous trouverez ci-dessous trois principaux piliers de la création d'icônes qui se sont révélés être une réalité. Si vous débutez dans la conception d’icônes, veillez à toujours garder à l’esprit la liste de contrôle des icônes..

Indubitable

Avant tout, les icônes doivent être indéniables. La relation avec votre candidature doit être évidente pour tous, à travers les différences de temps, de culture et d’âge. Combattez la tentation de créer des icônes flashy sans importance et gardez un design simple, solide et évident..

Ne voyez pas cela comme un obstacle à votre créativité. les icônes peuvent être belles et inciter à la réflexion, mais ne doivent pas être ouvertes à l'interprétation (lire: devinettes à la fin de l'utilisateur).

Uniformité

Si vous concevez un jeu d'icônes, conservez l'uniforme de conception.

Assurez-vous que vous avez un fil conducteur qui relie ces icônes et montre la synergie aux utilisateurs. le tout doit être plus grand que la somme des parties.

Taille

Les icônes sont toujours créées dans plusieurs tailles. Cela affecte la conception à plus d'un titre.

Pour commencer, les icônes doivent être belles et reconnaissables, quelle que soit leur taille. Réduisez le contraste sur les côtés pour éviter les bords déchiquetés et faites en sorte que les détails importants ressortent suffisamment pour que l'accent soit conservé dans la plus petite implémentation de l'icône..

Sur le plan technique, les icônes sont mieux conçues à l’aide de vecteurs, d’images composées de formes infiniment évolutives, plutôt que d’un ensemble de pixels. Néanmoins, si votre résolution est suffisamment élevée, les bitmaps feront tout aussi bien l'affaire..

Le jeu d'outils de conception d'icônes

Photoshop est une excellente application pour concevoir des icônes. Vous avez (presque) tous les outils dont vous avez besoin pour créer des graphiques vectoriels ou manipuler des bitmaps, et pour appliquer des effets complexes et des ombres. Le plus important sera les outils suivants:

Outil stylo

L'outil Plume vous permet de créer des graphiques vectoriels évolutifs. Vous pouvez dessiner une forme en créant des nœuds et en faisant glisser pour ajuster la courbe de la ligne. C'est plus difficile à utiliser qu'il n'y paraît, mais c'est probablement le meilleur outil de choix. Nous avons déjà parlé de l'outil Plume dans le passé. Pour en savoir plus, reportez-vous à Photoshop Pathing: Comment utiliser Photoshop Pen Tool Comment utiliser Photoshop Pen Tool Comment utiliser Photoshop Pen Tool En savoir plus .

Plug-in de format de fichier ICO

Ce plug-in Photoshop ajoute le format de fichier ICO à vos paramètres d'exportation. La méthode d'installation dépend de votre système d'exploitation et de la version de Photoshop. Assurez-vous donc de consulter le site Web..

Apple Icon Composer

Malheureusement, cet outil n'existe pas pour le format de fichier ICNS d'Apple. Cet outil gratuit prend en charge le problème à la place. Il est livré avec le package Apple Xcode, que vous pouvez télécharger après un processus d'inscription (fastidieux). Ou vous pouvez Google pour le téléchargement.

Hongkiat: plus de 40 didacticiels Photoshop de conception d'icônes cueillies à la main

Le blog de design Hongkiat.com a compilé une liste de plus de 40 didacticiels de création d’icônes Photoshop. Cette liste couvre toutes sortes d'icônes et plusieurs degrés de difficulté. Parcourez la liste pour trouver l'inspiration et extrapolez les techniques utilisées pour réaliser vos propres conceptions..

Styles de calque

Les styles de calque intégrés à Photoshop sont un excellent moyen de donner la touche finale à vos icônes. Ouvrez le volet de style de calque en double-cliquant sur un calque ou avec le bouton droit de la souris dans la vue d'ensemble. Utilisez un trait gris de 1 px avec une opacité de 40 à 50% pour les bordures de votre icône et réglez vos ombres à 110 ° pour de meilleurs résultats. Essayez de ne pas utiliser les ombres autour l'icône, comme la plupart des systèmes d'exploitation le font déjà.

Avez-vous d'autres conseils rudimentaires sur la conception d'icônes? Dites-nous ce que vous pensez dans la section commentaires ci-dessous!

En savoir plus sur: Adobe Photoshop.