 |
Vendredi 19 avril 2024 - 03:53 |
| Translate |
|
| Rubriques |
| Réseaux sociaux |
|
| Liste des jeux Amiga |
|
| Trucs et astuces |
|
| Glossaire |
|
| Galeries |
|
| Téléchargement |
|
| Liens |
|
| Partenaires |
|
| A Propos |
|
| Contact |
|
|
|
Questions et réponses
Qu'est-ce que ce tutoriel ?
Il s'agit d'un petit tutoriel concernant la configuration de MUI 3.8. Il ne décrit pas comment installer MUI et ses classes, c'est juste la description d'une configuration personnelle qui va vous proposer un aspect plus moderne. Vous allez peut-être ne pas aimer (c'est une question de goûts) mais si vous aimez mes créations, alors jetez quand même un oeil à ce tutoriel. Toutes les textures, polices de caractères, images, etc. utilisées ici sont disponibles dans la section "Téléchargement" à la fin de cet article.
As-tu une quelconque qualification ?
J'étudie à l'institut de technologie SAE afin de devenir un styliste multimédia. Ces études incluent la conception d'écrans et d'interfaces. J'ai également dessiné un grand nombre d'interfaces utilisateurs, tout comme des thèmes, des boutons et des images pour les applications AmigaOS.
Je n'aime pas MUI !
MUI est peut-être plus lent que les autres systèmes d'interface comme ClassAct, BGUI ou Reaction, mais beaucoup d'applications importantes l'utilisent,et il s'agit également du système le plus avancé en termes de caractéristiques et d'options. Donc, que vous l'aimiez ou pas, il s'agit d'un important système pour interface.
Pourquoi as-tu écrit ce tutoriel ?
Parce que j'ai vu bien trop d'écrans Workbench ou MUI horriblement personnalisés par des amigaïstes qui semblaient complètement perdus quand il s'agissait de personnaliser leur interface graphique. Beaucoup de personnes m'ont demandé comment j'avais fait pour arriver à un tel aspect pour MUI, c'est pourquoi j'ai décidé de partager mes "secrets" avec vous en écrivant ce petit tutoriel. Encore une fois, les goûts et les couleurs varient et vous trouverez sans doute d'autres idées de configuration. Mais je crois que ce tutoriel vous donnera une bonne idée sur comment réaliser vos propres interfaces pour MUI.
Note : dans ce tutoriel, tout se base sur une résolution de 1024x768 en 16/24 bits. Si vous avez une résolution plus basse, vous devrez ajuster la taille des polices, des textures, etc. afin d'arriver aux résultats attendus. Les captures d'écran sont en allemand car c'est ma langue maternelle.
L'interface principale
D'abord, regardez ce que donne l'aspect standard / par défaut de MUI :
Si vous suivez ce tutoriel pas à pas, vous arriverez à quelque chose comme cela :
1) Changer la police et en prendre une jolie et proportionnelle. La Topaz est obsolète et a été créée originellement pour les petites résolutions, donc la proportion des boutons n'est pas respectée car ils tentent de s'accommoder à la police. Je recommande d'utiliser XHelvetica ou peut-être Arial. Vous devez d'abord changer la police dans la classe "Windows" (Fenêtres), prendre par exemple XHelvetica taille 13 en tant que police normale ou par défaut, XHelvetica taille 9 pour la petite police, et une plus grosse (comme CGTriumvirate taille 22) en tant que grande police. Le second changement concerne la police des boutons (dans la classe "Buttons" (Boutons)), nous prendrons XHelvetica taille 13 (vous pouvez aussi utiliser la police ApplePL qui permet de prendre l'aspect de Mac OS).
2) Téléchargez CoolMUI ainsi que WCP. L'archive CoolMUI propose des répertoires contenant des textures que nous utiliserons dans ce tutoriel. WCP est une collection de belles images pour MUI créées par Matt Chaput. Désarchivez les deux et copiez les répertoires de CoolMUI (Gui, Button, Lists, Scrollbar, Slider) dans votre répertoire MUI:Patterns. Faîtes la même chose pour WCP (à copier dans MUI:Images). C'est une bonne idée de réunir toutes les textures pour MUI dans différents répertoires situés dans MUI:patterns. Ainsi, vous ne serez pas perdu avec des centaines de fichiers. De plus, si vous changer la structure de votre disque dur, les applications MUI pourront avoir du mal à retrouver les bons fichiers ; pour éviter cela, je vous recommande de réunir tout ce qui concerne MUI en un seul endroit (le répertoire de MUI).
3) Cliquez sur la classe "Groups" (Groupes). C'est ici que vous pourrez personnaliser les fonds de MUI. Choisissez l'image "softgrey_light" pour le premier fond, puis "softgrey_default" pour le deuxième, et enfin "blue-stripes_light" pour les registres (qui se trouvent dans le répertoire "Gui"). Cliquez sur le bouton "Test" pour voir le résultat. N'est-ce pas mieux ainsi ? C'est très important que les couleurs apparaissent claires et avec du contraste pour que le résultat soit propre. Les textures "softgrey" utilisées ici sont un mélange de tons de gris bien qu'elles semblent être uniquement grises. Il y a en fait une sorte de structure dans ces textures qui leur donne un aspect lisse et crémeux.
4) Dans la classe "Buttons" (Boutons), changez les images pour les boutons radio et les coches avec leurs équivalents dans WCP. Ensuite allez dans la classe "Strings" (Saisie) et choisissez les images WCP pour "standard", "file" et "dir" (en français : "défaut", "fichier" et "répertoire").
5) Concernant la configuration principale de l'interface, il est toujours bon d'activer, pour l'ensemble des fenêtres MUI, les gadgets (ou cellules) pour figer la position de la fenêtre ("snapshot") et pour avoir le menu contextuel ("popup menu"). Pour cela, cochez dans la classe "Windows" (Fenêtres), la première et la troisième cellule du groupe "Control" (Contrôle).
Les boutons
D'abord, jetons un oeil sur l'aspect du bouton par défaut de MUI, puis celui de CoolMUI :
Ce que vous avez à faire :
C'est très simple : allez dans un premier temps dans la classe "Buttons" (Boutons) et choisissez le cadre de bouton "XEN". Choisissez aussi la police XHelvetiva taille 13. Il y a également deux images de fond à utiliser : une pour le bouton en état normal et une pour le bouton en état pressé. Ainsi, quand vous cliquerez un bouton, son image de fond et sa couleur changeront. Utilisez la texture "softgrey_default" pour le bouton normal et "softgrey_light" pour le bouton pressé (ces textures sont dans le répertoire "Button"). Alternativement, vous pouvez aussi essayer ceci : "softgrey_light" pour le bouton normal et "softgrey_default" pour le bouton pressé.
Note : l'affichage de la texture peut changer d'une configuration à l'autre car il est impossible de remplir avec exactitude tous les boutons avec la même image. Tout ceci parce que l'interface de MUI dans son ensemble s'adapte à la taille qu'on lui définit : par exemple les textures de petite taille se répètent dans un grand ensemble. Mais au final, cela devrait être joli.
Les cellules de saisie
Voici la cellule de saisie déjà configurée :
Tous ces paramètres sont disponibles dans la classe "Strings" (Saisie) de MUI. J'ai choisi le blanc pour la couleur de fond de la cellule de saisie active, et un blanc plus sombre (R:230 V:230 B:230) pour la couleur de la cellule de saisie inactive. Cela n'apparaît pas seulement plus propre, c'est également très utile d'avoir deux couleurs pour différencier les cellules actives et celles inactives. Le gadget de droite (image "pull-down") est repris de l'archive WCP.
Les barres de défilement
Voici la barre de défilement déjà configurée :
Ce que vous avez à faire :
1) Dans la classe "Scrollbar" (Barre de défilement), vous devez d'abord sélectionner un cadre pour la barre de défilement.
2) Sélectionnez ensuite la texture "scroll-vert-blue.iff" qui se trouve dans le répertoire "Scrollbar" de CoolMUI. Cela va donner des couleurs à votre barre et lui donner un aspect "3D". Note : là encore, l'affichage de la texture de la barre peut varier d'une configuration à une autre, cela en fonction de la taille de votre interface.
3) Dans le groupe "Barre", sélectionnez "Special" (Personnalisé) pour le type de cellule. Choisissez la barre de défilement avec le trou qui se trouve dans le lot d'images "AmiS". Vous pouvez aussi choisir un autre cadre (un avec bords arrondis par exemple).
4) Vous pouvez toujours choisir un cadre pour le bord de la barre. Celui sélectionné ici s'intègre à l'image de fond et donne une impression de profondeur.
Les glissières
Voici la glissière déjà configurée :
Cela est juste un exemple. Vous pouvez bien sûr utiliser des textures pleines de couleurs pour le fond de la glissière, mais comme vous pouvez le voir, vous pouvez aussi y dessiner des lignes (type règle d'écolier). Cette texture est nommée "slider-lines.iff" dans le répertoire "Slider" de CoolMUI, elle donne l'impression d'avoir une nouvelle fonctionnalité, celle de pouvoir ajuster le bouton au plus près. J'ai repris le style Mac OS ici pour le choix de la couleur bleue (R:168 V:210 B:255) du bouton de la glissière (notez également que vous pouvez aussi choisir un cadre pour le bouton et la glissière, ainsi que choisir la police de caractères).
Exemples
Tout ce que nous venons de voir concerne la configuration principale. Le reste est entre les mains de votre créativité et votre fantaisie. :)
Regardons maintenant le résultat que cela donne dans quelques applications utilisant CoolMUI :
C'est MagicASL, un super remplaçant en MUI des requêtes de fichiers ASL
Il s'agit du panneau de configuration de Voyager
La fenêtre de requête des polices, utilisant MUI
Voici maintenant quelques trucs et astuces :
1) Généralement, MUI a des milliers d'options de configuration, mais il y en a certaines qui ne pas reconnues, comme la couleur des listeurs. Pour parer à cela, pourquoi ne pas utiliser une texture à la place d'une couleur ? Dans CoolMUI vous trouverez une texture jaune appelée "yellow-light.iff" dans le répertoire "Lists".
2) Dans la plupart des réglages, la couleur du curseur pour le texte est la plupart du temps restée en bleu. Pourquoi ne pas la changer en orange ou en rouge ?
3) Il y a plusieurs manières de sauver votre configuration dans MUI. Si vous cliquez sur le bouton "Save" (Sauver) de MUI, votre configuration sera utilisée dans toutes les applications MUI dont les paramètres MUI n'ont pas encore été sauvés. Par contre, si vous ouvrez MUI à partir d'une application (disons Voyager) et que vous cliquez sur "Save", alors seuls les paramètres MUI de Voyager seront sauvés. Si vous souhaitez avoir plusieurs configurations, vous devez choisir "Save as" (Sauver comme) qui se trouve dans le menu de MUI, et donner un nom à votre configuration. Ainsi, vous pourrez configurer plusieurs thèmes MUI et passer de l'un à l'autre facilement (par exemple en pressant le bouton droit de la souris dans une zone vide de MUI et en choisissant un thème).
4) MUI peut réagir très étrangement si vous mélanger les versions de MCC, MCP, et des bibliothèques MUI (ces dernières doivent être placées dans MUI:libs et non SYS:libs !). Donc faîtes attention si vous devez copier des éléments de MUI à la main.
5) Vous n'aimez pas l'icône d'iconification de MUI et des applications MUI ? Pas de problème, copiez une icône que vous appréciée dans MUI:Icons/ et renommez là "def_MUI.info" (faîtes aussi, et d'abord, une sauvegarde de l'ancienne). Le type de l'icône doit être mis sur "Tool" (Outil).
6) Vous souhaitez ouvrir une application dans son propre écran ? Eh bien, lancez simplement l'outil PSI, qui se trouve dans le répertoire principal de MUI, et définissez un nouvel écran avec son nom, sa résolution, son nombre de couleurs, etc. Ensuite, lancez votre application et ouvrez la configuration de MUI de cette application. Dans la classe "System" (Système), vous verrez une cellule de saisie en haut à gauche : entrez le nom de l'écran dans cette cellule ou bien choisissez son nom dans le menu déroulant. Puis cliquez sur "Save" (Sauver) et votre application passera dans son propre écran.
7) Si vous souhaitez améliorer encore plus l'aspect de MUI et de votre Workbench, vous pouvez télécharger VisualPrefs. Il possède de superbes thèmes comme "Aqua" qui est utilisé pour les captures d'écran de cet article. Vous pouvez aussi y créer les vôtres.
8) Vous pouvez utiliser des textures pour quasiment tous les éléments de MUI, mais n'en abusez pas ! Trop de textures résulte en une interface moins claire.
9) Beaucoup d'applications MUI conservent des images en quatre couleurs assez laides (notamment pour leur barre d'outils). Martin Merz (auteur de MIcons) a fait un gros boulot en créant des images dans le style Glow pour ces applications. Donc le remplacement de ces barres d'outils est également recommandé.
Téléchargement
- CoolMUI (textures pour glissières, boutons, listeurs, etc.).
- Patterns archive additionnelle de textures.
- Fonts polices de caractères : XHelvetica, Arial, Xen et ApplePL.
- WCP images sympathiques pour MUI.
- MUIRicSet lot d'images pour MUI.
- Le site Web officiel de MUI.
- VisualPrefs.
- Les thèmes de Nowee pour VisualPrefs.
- MIcons.
- Mon site Web personnel.
|
