Site hosted by Angelfire.com: Build your free website today!

'CoolMUI' tutorial

[Questions&Answers] [The main interface] [Buttons] [String gadgets] [Scrollbars] [Sliders] [Examples] [Tips&Tricks] [Download] [Links] [Main]


Configuring the main interface:

First have look at the standard/default look of MUI (click to enlarge):

Well, what can I say - it looks grey, dusty and veeery outdated. No modern GUI today looks like that. We definitely should change this. There is this outdated and too small font, Topaz, pink (!) colour for selection and everything is just a dull grey in grey. Even the 3D effect of the buttons and string gadgets is a very simple one.

If you follow this tutorial step by step you should achieve something like this (click to enlarge):

I like it! What do I have to do first?

1) Change the font to a nice looking proportional font. Topaz looks outdated and was originally made for lower resolutions, so the proportions of the buttons look wrong as they try to fit the font. I recommend to use XHelvetica.font or maybe Arial. First you should change the fonts in the 'window' area (f.ex: XHelvetica font 13 as the default/normal font and XHelvetica.font 9 for small sizes and a bigger font (like CGTriumvirate 22) as the big font. Second change the font of the buttons (see 'buttons' area) to XHelvetica 13 aswell. (You could also use ApplePL font to achieve a MacOS GUI look.)

2) First download my CoolMUI set and the WCP-image set by Matt Chaput. The CoolMUI set features directories containing patterns, which we will use in this tutorial. The WCP set is a collection of beautiful image-sets for MUI by Matt Chaput. . Dearchive both and copy the directories of the CoolMUI archive (gui, button, lists, scrollbar, slider) to your MUI:Patterns directory. Do the same with the WCP image set (copy it to MUI;Images). It's a good idea to collect all MUI-relevant patterns in several dirs in your MUI:patterns. This way, you don't get lost in hundreds of drawers and files. Also, if you change your HD structure, MUI applications may have trouble to find the patterns. I really recommend to collect everything MUI-related in one place (the MUI dir).

3) Now click the section 'groups'. There you should change the different areas of MUI. Choose the 'softgrey_light' image for the first area, use the 'softgrey_default' for the second area and for the registers use the 'blue-stripes_light' pattern. (Find them in the directory 'gui'). Click on 'Test' and have a look. Much better now, eh? It is very important that the colours match in contrast and look bright to achieve a clean look. The 'softgrey'-patterns used here are blended grey tones and although they just look grey, there is a kind of structure in them, which gives an impression of a creamy, soft and clean effect.

4) At the 'buttons'-area, change the radio- and checkbox-images to the equivalent WCP images. Next go to the string section and choose the WCP images (see download-section) for 'standard', 'file' and 'dir'.

5) Well, that's it for the main interface config. TIP: It's always a good idea to activate the snapshot and popup-menu gadgets of the MUI window, so that you can snapshot every MUI application (not all MUI apps feature a 'MUI settings'- option) with ease. (Find this config at the 'windows' section)

back to main