Hi Burr,

>Again, once the release is out, there will probably be some customization that others do offered up in the forum.

I hope to have colorize icon for all MoI UI.
Wish user can contribute for this project.

Looks like Michael busy with scripting :)

About Photoshop you have a similar free one online SUMO PAiNT ;)
http://www.sumopaint.com/home/

Hi Pilou...

Thanks for the link.
Maybe we can also use software like Inskape or Gimp.
The problem is not on the appication that I have to use, but I dont know on how to use Photoshop to convert from GREY Icon to COLOR Icon.

It will be vey good if Iyes can give us tutorial on how to convert from Grey to Color Icon.
Then later I can convert another Icon by my self or maybe another MoI user can help :)

Thanks !

< It will be vey good if Iyes can give us tutorial on how to convert from Grey to Color Icon.

In Sumo Paint that is Menu Adjustments / Color Balance ;)

The thing to rememeber is it's not an "ICON" but a simple image in PNG format. Most photo software applications have an adjustment operation that will do something basic like this. You will just need the abilty to save it out as a PNG again.

Look for "color Adjustment" or "HUE" or something like that. Even the simple software that comes with todays digital cameras usually have the abilty to "Adjust" the image.

@ Pilou & Burr...

Thanks for your guide on how to edit MoI png to be more colorful.
I will create a new thread for collection of MoI Color UI.

Thanks ! :)

Sumo Paint has the PNG and then also the transparency for it ;)

Hi Guys...

A little problem when change the color of Offset.
When I pick the button it will go like this :



Normally in other default button is below :




Any clue... ?

Thanks ! :)

EDIT : Michael...., maybe you can split discussion that related to modify MoI Icon.

Just testing modify rect section, but got this :

Hi Anis, WHat you need to look for when you re-save your image is to set the "
Transparency color". WHen you do the save with PNG, there should be an option to set this, then use a color picker to set the background as transparent.

FYI.

Hi Anis,

> A little problem when change the color of Offset.
> When I pick the button it will go like this :

It looks like it's got a solid white color for the background rather than a transparent background.

Like Burr mentions, the background needs to be maintained as transparent for it to look like the regular icons.

- Michael

Hi Michael, I have I funny request, There are few icons are not include in the ui\icons folder. Will it be possible to have them also in there, in case someone like me wants to replace them? I know how to work around it but is a bit long to do every time with every Beta :(

Hi neo, no unfortunately I'm not able to put a few particular icons in the \ui folder because they are licensed from an icon collection and the license terms say that the icons must be baked in to the resources of the application.

For those ones you'll notice in the HTML where the buttons are defined, that the icon file name says res:// in it, that means to look up the icon from the compiled resources section of the program. You need to change those to point to your icon file when you want to replace those ones.

- Michael

Hi Burr & Michael....

I already try looking for the transparent.
But sorry, still cant figure it.... :(

Thanks !

Anis, it will be in the dialogue when you are actually "Saving" the PNG. But perhaps the app your using doesnt have it?

So mine looks like this:



I would use the little eyedropper tool to select the background.

Hi Anis, well most of the time bitmap editors will indicate transparency by having a kind of checkered looking background like this:



The above is a screenshot taken from Paint Shop Pro after loading the OffsetIcon.png file, notice the gray and white checkered background? That means it is transparent.

If you have only a solid white background then you will get a solid white color in the button as well just like you are showing.

So somehow you are doing some incorrect steps that loses the transparency.

One thing to make sure is that you save as PNG format, not JPG - JPG files do not support any transparency in them so saving as JPG would be one easy way to lose transparency information.

You may want to check online for some tutorials on bitmap manipulation stuff, for example there seem to be several video tutorials for photoshop if you search on google or youtube for "photoshop colorize" or similar type things.

- Michael

>You need to change those to point to your icon file when you want to replace those ones.

I did that, replacing them with my own custom icons But as I said is a bit long to do every time with every Beta :(

Perhaps you could consider designing some like the rest of them (I really like your style)

Hi neo,

> Perhaps you could consider designing some like the rest
> of them (I really like your style)

Unfortunately doing icons is really quite finicky and time consuming work - I'm pretty happy when I get a chance to use some predefined ones.

So it's not likely that I will get a chance to do new ones for those anytime soon.

One thing that I did update though is how the icons are loaded for these special res:// cases .

In the next v2 beta, when there is a res:// icon it will first check to see if there is a PNG icon of that same name in the \ui\icons subfolder, and if it is it will load that file rather than get it from the built-in resources.

So that means in the next v2 beta you will be able to override those icons by just dropping new ones in \ui\icons and you do not need to alter the HTML.

For example to override the File icon which in the HTML is specified as res://FILEICON you can create a file at \ui\icon\FileIcon.png and it will use that one.


One note - the icon for Edit/Copy that was previously res://COPYICON has now been changed to res://COPYCLIPBOARDICON to avoid the collision with the existing CopyIcon.png which is the Transform/Copy icon.


So in the next v2 beta the icons that you can provide to override the resource ones are:

CopyClipboardIcon.png
PasteIcon.png
DeleteIcon.png
UndoIcon.png
RedoIcon.png
SaveIcon.png
SaveAsIcon.png
FileIcon.png
OpenIcon.png
NewIcon.png
ImportIcon.png
ExportIcon.png
OptionsIcon.png
HelpIcon.png
HistoryIcon.png


- Michael

THANK YOU MICHAEL

That's a cool update, Michael, and I don't even bother with the icons! :-P

-Will