1. Mode Graphique
    1. 1- Principes fondamentaux
      1. Processus de conception
      2. Caractéristiques d'un grand logiciel
        1. Haute performance
        2. Facilité d'utilisation
        3. Aspect attractif
        4. Fiabilité
        5. Adaptabilité
        6. Interoperabilité
        7. Mobilité
      3. Principes de conception
        1. Principes (1)
        2. Principes (2)
        3. Principes (3)
      4. Pensez aux utilisateurs
        1. Compatibilité internationale
        2. Accessibilité aux handicapés
        3. Etendre l'interface
      5. Priorités
    2. 2- L'expérience du Mac
      1. L'environnement
        1. L'environnement (1)
        2. L'environnement (2)
      2. Les technologies
        1. Les technologies (1)
        2. Les technologies (2)
        3. Les technologies (3)
        4. Les technologies (4)
      3. Installation et mises à jour
        1. Packaging, installation
        2. Les assistants
    3. 3- L'interface Aqua
      1. Entrées utilisateur
        1. La souris
        2. le clavier
          1. Fonction des touches
          2. Raccourcis-clavier
          3. Navigation au clavier
        3. Sélection
        4. Edition de texte
      2. Glisser-déposer
        1. Glisser-Déposer (1)
        2. Glisser-Déposer (2)
      3. Le texte
        1. Les fontes
        2. Le style
      4. Les icônes
        1. Genres et familles d'icônes
        2. Création des icônes
        3. Icônes des barres d'outils
        4. Images propres au système
      5. Les pointeurs
      6. Les menus
        1. Comportement des menus
        2. Conception des menus
        3. La barre de menus
          1. Les menus (1)
          2. Les menus (2)
          3. Les menus (3)
        4. Menus contextuels et du Dock
      7. Les fenêtres
        1. Type et apparence
        2. Eléments
          1. Barre de titre
          2. Barre d'outils
          3. Barre de recherche
          4. Barre latérale
          5. Barre inférieure
          6. Les Tiroirs
        3. Comportement des fenêtres
          1. Comportement (1)
          2. Comportement (2)
          3. Superposition
          4. Défilement
        4. Les panneaux
          1. Les panneaux
          2. Panneaux transparents
          3. Autres panneaux
      8. Les dialogues
        1. Types de dialogues
        2. Aspect et comportement
      9. Fenêtres de dialogues
        1. Recherche, Préférences, Ouverture
        2. Enregistrement
        3. Choix, Impression
      10. Les contrôles
        1. Contrôles du cadre
          1. Contrôles en capsule
          2. Contrôles hérités
        2. Les boutons
          1. Boutons poussoirs
          2. Boutons en icônes
          3. Boutons de recherche
          4. Boutons de gradient, et d'aide
          5. Boutons à champfrein
          6. Boutons ronds
        3. Contrôles de sélection
          1. Boutons radio
          2. Cases à cocher
          3. Contrôles segmentés
          4. Boutons et menus pop-Up
          5. Menus Action
          6. Boîtes de combinaison
          7. Contrôles de chemin
          8. Puits, sélection de date
          9. Menus pop-down
          10. Glissières
          11. Contrôles pas-à-pas et placards
        4. Indicateurs
          1. Indicateurs de progression
          2. De niveau, de capacité
          3. D'estimation, de pertinence
        5. Contrôles de texte
          1. Champs d'entrée
          2. Champs à jeton
          3. Champs de recherche
          4. Listes de défilement
        6. Contrôles de visualisation
          1. Triangles d'affichage
          2. Boutons d'affichage
          3. Vues en liste
          4. Vues en colonnes
          5. Vues éclatées
          6. Vues à onglets
        7. Contrôles de groupage
          1. Séparateurs
          2. Boîtes de groupage
        8. Règles de disposition
          1. Dans le corps de la fenêtre
            1. Fenêtre de préférences
            2. Fenêtre à onglets
            3. Alerte, Dialogue
          2. Contrôles réduits et mini
            1. Contrôles réduits
            2. Mini contrôles
          3. Groupement des contrôles
          4. Positionnement dans la barre inférieure
      11. Glossaire
        1. Entrées en anglais
          1. 1- A à C
          2. 2- D à H
          3. 3- I à R
          4. 4- S à Z
        2. Entrées en français
          1. 1- A à C
          2. 2- C à G
          3. 3- I à P
          4. 4- P à Z
        3. `
    4. 4- Les leçons de Lion
      1. L'environnement de Mac OS X
      2. Principes fondamentaux
      3. L'expérience utilisateur
        1. Règles de conduite (1)
        2. Règles de conduite (2)
        3. Règles de conduite (3)
        4. Règles de conduite (4)
        5. Règles de conduite (5)
        6. Règles de conduite (6)
      4. Les technologies d'Apple
        1. Les technologies (1)
      5. -->
  2. Mode Commande

Les icônes (2) : Création des icônes




Ce que dit Apple :

Des icônes opulentes, esthétiques, représentent une part importante de l'expérience d'un utilisateur de Macintosh. Il s'attend à de belles icônes, qui racontent l'histoire de l'application d'une façon claire, et digne d'être retenue.

Cette section fournit des astuces et suggère un processus de création d'icônes que vous pouvez suivre pour concevoir et créer vos propres icônes. Puis elle propose des conseils supplémentaires qui vous aideront pour la conception et la création d'icônes d'applications sous Mac OS 10.5 ou plus.

Si vous avez besoin de créer des icônes de barre d'outils, lisez cette section d'abord, comme guide général, parce que beaucoup de règles et de techniques s'appliquent à la fois aux icônes d'applications et à celles des barres d'outils. Puis, voyez la section suivante.


1- Conseils pour concevoir des icônes

Beaucoup des suggestions faites ici s'appliquent aussi aux autres graphiques que vous pouvez développer pour votre application, par exemple, pour améliorer un item d'une étiquette ou d'une liste.

• Pour de beaux graphiques, faites appel à un graphiste professionnel.

• La perspective, et l'ombrage sont les composants les plus importants d'une belle icône. Utilisez une seule source de lumière, disposée au dessus de l'icône.

• Utilisez une représentation universelle que les gens vont facilement reconnaître. Evitez de vous appesantir sur un aspect secondaire d'un élément. Par exemple, pour une icône de courrier, une boîte à lettres rurale sera plus difficile à reconnaître qu'un timbre poste.

• Recherchez la simplicité. Essayez de trouver un objet unique qui accapare l'action de l'icône et représente le contrôle. Commencez avec une forme basique.

• Utilisez judicieusement la couleur pour aider l'icône à exprimer son histoire ; ne mettez pas de la couleur seulement pour que ce soit coloré. Des gradients réguliers sont normalement meilleurs que des changements brutaux de couleurs.

• Evitez d'utiliser les éléments de l'interface Aqua pour vos icônes ; elles peuvent être confondues avec l'interface réelle.

• N'utilisez pas de copie des produits matériels d'Apple pour vos icônes. Ces symboles sont protégés, et la conception matérielle change fréquemment.

• Ne réutilisez pas les icônes du système Mac OS X dans votre interface ; cela peut confondre les utilisateurs de voir la même icône utilisée de façons différentes à des endroits multiples.


2- Suggestion d'un processus de création d'icônes

Quand vous créez une icône, vous devez au moins fournir les fichiers suivants :
• une image de 128 x 128 pixels (pour les icônes du Finder dans toutes les versions de Mac OS X)
• une image de 512 x 512 pixels (pour le Finder sous Mac OS X version 10.5 ou supérieure)
• un masque qui définit les bords de l'image pour que l'OS puisse déterminer quelles régions peuvent être cliquées.

Les icônes qui s'affichent dans le Finder sont présentés à des tailles différentes : elles sont agrandies dans le Dock, elles peuvent être vues à leur pleine taille, et les utilisateurs peuvent définir leur taille préférée. Pour de belles icônes à toutes les tailles, vous devriez aussi proposer des images personnalisées ("hints") à deux autres tailles : 32 x 32 et 16 x 16 pixels. Bien que le Dock n'utilise pas les hints, (il utilise un algorithme élaboré sur la version 128 x 128 pixels), les "hints" sont importants pour conserver des détails cruciaux dans les icônes du Finder.

Si vous créez une icône qui ne changera jamais de taille (un bouton à chanfrein par exemple), vous pouvez fournir l'image uniquement dans sa taille réelle.

Voici les étapes suggérées pour créer une icône :

1- Dessinez l'icône.
Portez sur le papier (pas dans un logiciel) le concept et les détails. Vous pourrez alors appliquer l'idée en ouvrant une application de création d'image.

2- Créez une illustration logicielle de l'icône.
Bien que vous puissiez souhaiter que l'icône terminée ressemble à une photo, dans la plupart des cas, il n'est pas souhaitable de commencer par une photo. Une illustration fournit beaucoup plus de souplesse pour représenter le concept dans un très petit espace. Une illustration vous assure aussi un contrôle sur les détails, la perspective, la lumière et les ombres, la texture.

3- Rajoutez les détails et la couleur.
Pour chaque amélioration que vous apportez à une icône en taille plus grande, demandez-vous si elle apporte réellement quelque chose de plus à la facilité d'utilisation de l'icône, ou si elle ne fait que compliquer er brouiller les choses.

4- Rajoutez l'ombrage.
L'ombrage fournit aux objets leur dimension et leur réalisme. Il contribue aussi à lier les éléments de l'icône, pour éviter que cela ne ressemble à un collage. La source de lumière doit être au dessus et légèrement en avant de l'objet. L'ombre résultante doit donner l'impression que l'icône repose sur une surface.

5- Dans un programme de création d'image, manipulez l'image pour obtenir des effets précis, et créez un masque pour l'icône.

5- Convertissez l'icône en un fichier .icns. Vous pouvez utiliser Icon Composer, qui est situé dans /Developer/Applications/Utilities. Il y a aussi des logiciels tiers pour cette tâche.


3- Création d'icônes pour Mac OS X 15.0 ou plus

Si l'application est destinée à Mac OS X 10.5 ou plus, vous devez fournir une version en 512 x 512 pixels de l'icône. En faisant cela, assurez-vous de créer une image 512 x 512 pixels pour elle même, pas à partir d'une version 128 x 128 pixels par exemple. L'image ne doit pas avoir de marques épaisses, ou sembler "vectorisée". Une image de 512 x 512 pixels doit être de meilleurs qualité et fournir :
- une texture plus riche
- plus de détails
- un plus grand réalisme.

Par exemple, l'icône en 512 x 512 pixels de l'application Front Row révèle le grain du bois et la texture du velours de façon plus réaliste que la version en 128 x 128 pixels.

Vous devez aussi faire attention à la manière dont Cover Flow affiche l'icône de votre application dans le Finder. Avec Cover Flow, les icônes sont affichées sur un fond noir au dessus d'une surface très réfléchissante; De ce fait, vous pouvez avoir à ajuster votre icône de la façon suivante :

• Si votre icône inclut une ombre portée, rendez cette ombre entièrement noire.
Si l'ombre portée contient des nuances de gris, le gris va s'afficher sur le fond noir, et l'ombre apparaîtra comme une lueur.

• Si votre icône est très foncée, ou a des bordures noires, pensez à y rajouter une légère lueur sur la bordure intérieure pour qu'elle se différencie du fond noir de Cover Flow.
Si vous ne le faites pas, l'icône va se dissoudre au milieu du fond noir.

• Evitez de donner à votre icône des valeurs alpha trop élevées (c'est à dire, beaucoup de transparence), en particulier dans sa moitié inférieure. Des zones avec une transparence trop forte peuvent disparaître.
Dans la vue panoramique (Cover Flow), le Finder dispose les icônes pour qu'elles apparaissent posées sur le même plan. Pour ce faire, il examine la bordure inférieure de l'icône, en recherchant les pixels qui sont assez opaques pour permettre cet alignement. S'il y a une transparence trop importante à la base de votre icône, le Finder ighore cette zone transparente au profit des premiers pixels opaques qu'il trouve, et les utilise pour déterminer l'alignement sur le plan ; les pixels transparents qui sont plus bas seront éliminés.

titre

Les bordures noires d'une icône peuvent inclure une lueur intérieure pour se présenter mieux sous Cover Flow.

Pour comprendre pourquoi ces ajustements peuvent être nécessaires, vous pouvez examiner les applications standard de Mac OS X sous 10.5 ou plus. Par exemple, l'icône de Spaces incorpore une lueur blanche sur la base inférieure, qui la rend plus visible sur le fond noir.

titre

Des valeurs alpha élevées à la base de l'icône se trouvent éliminées avec Cover Flow.

(Remarquez l'effet optique qui semble donner une certaine inclinaison à l'image).

Par ailleurs, l'icône de Mail inclut une marque de tampon qui s'étend plus bas que l'image du timbre (figure ci-dessus à gauche). Comme cette partie de l'icône a de fortes valeurs alpha, le Finder utilise un pixel opaque sur le coin inférieur gauche de l'image pour aligner l'icône, et fait disparaître une partie de la marque de tampon (figure ci-dessus à droite)


4- Mettre votre œuvre à l'échelle

Il vous faudra sans doute passer du temps à mettre votre icône à plusieurs échelles. Les ressources d'icônes des applications doivent être fournies dans ces tailles :
• 512 x 512 pixels
• 128 x 128 pixels
• 32 x 32 pixels
• 16 x 16 pixels

Si vous avez l'habitude de partir d'un modèle de grande taille, et de le rapetisser, il est très utile de partir d'une dimension multiple des tailles de pixels dont vous avez besoin. Si vous utilisez en même temps une grille de dimension appropriée dans votre application de création d'image en créant l'image de base, vous pourrez conserver nettes les icônes réduites, et limiter l'importance des retouches nécessaires.

Par exemple, partez d'une version en 1024 x 1024 pixels comme image maîtresse, et définissez une grille de 8 pixels. Chaque bloc de la grille mesure 8 x 8 pixels, et représente un pixel sur une icône de 128 x 128 pixels. En créant le fichier, associez l'image à la grille pour éviter le flou associé à des demi-pixels résultant de la réduction d'échelle.

L'utilisation d'une grille de 8 pixels fonctionne bien pour créer des icônes de 512 x 512 pixels, mais vous pouvez augmenter la précision en utilisant une grille de 2 x 2 pixels pour créer l'image maîtresse.

Si vous n'êtes pas content(e) des résultats quand vous réduisez à 32 x 32 ou à 16 x 16 pixels, vous pouvez redessiner l'image à ces échelles. Si vous procédez ainsi, l'utilisation d'une grille appropriée peut aussi réduire le travail à faire. Par exemple, une grille de 32 pixels avec une image de 1024 x 1024 pixels pour une icône de 32 x 32 pixels, ou une grille de 64 pixels pour une icône de 16 x 16 pixels.


Mes commentaires :

Je continue à penser que des icônes de 512 x 512 pixels représentent une perversion du concept d'icône. L'icône est une représentation imagée d'un objet (ou d'une tâche) du système informatique. Elle en permet un accès direct et facile, et pour cela, il suffit qu'elle soit bien visible sur l'écran. Sur les écrans actuels, avec des résolutions qui peuvent atteindre 2560 X 1600 pixels, des icônes de 128 x 128 pixels sont largement suffisantes, et c'est ce qu'utilise Apple pour l'affichage des applications dans le Finder ; on ne risque pas de les rater...

L'exigence d'icônes de 512 x 512 pixels pour Mac OS X 10.5 ou supérieur est donc étonnante ; est-ce que les algorithmes de représentation sur l'écran utilisés par Apple exigent cette résolution ? Il n'en est rien dit.

Rien n'empêche de partir d'images en 1024 x 1024 pixels pour construire des icônes, mais permettre l'affichage d'icônes de plus de 128 x 128 pixels ne sert pas à grand chose et ne fait que gâcher de l'espace sur un écran qui est toujours trop petit. C'est différent pour des vignettes d'images ou de photos où l'agrandissement jusqu'à 512 x 512 pixels (ou plus) est pleinement justifié pour apprécier des détails de l'image.

Apple montre aussi dans cette section les pièges de l'interface mortuaire. Pour pouvoir être visibles sur un fond noir, comme sous Cover Flow, des icônes normalement dessinées doivent être bricolées, de façon compliquée et peu satisfaisante, avec des lueurs ajoutées sur des bordures noires, des transparences qui font disparaître une partie de l'image, et des astuces comme un pixel opaque pour fixer la base de l'icône de Mail.

figure

Même avec la glissière à zéro, l'espacement des icônes est démesuré.

Est-ce une déformation dérivée de l'interface tactile, Apple semble de plus en plus attirée par le gigantisme : c'est vrai pour les fenêtres démesurées des images dans Aperçu ; c'est vrai pour les noms attribués (sans nécessité) aux copies d'écran ; c'est encore vrai pour les distances démesurées appliquées dans la présentation par icônes.

Mais quel est l'intérêt de fenêtres démesurées avec des marges énormes, ou d'icônes visualisées à 512 x 512 pixels ? C'est gênant, c'est tout !