Full Version: MoI UI redesign

Show messages:  1-7  8-27  28-47  48-50

Hi DesuDeus,

> The icons are vectors but they're on a 64 pixel grid (that means they downscale perfectly)

Vectors by their nature just inherently do not downscale perfectly - it's because things like the stroke width do not stay exactly proportional to everything else when they are rendered at a small size.

It's just part of the nature of how vector drawings work that downscaling to a small size is problematic. Just basing them on a 64 pixel grid does not really change that...

The problem is not so apparent with very sparse lightweight drawings, it gets much worse when the icon becomes more complicated.

- Michael

---

I just need to adjust the line weight because they're a bit soft (not dark enough)

And yes they downscale nicely because the lines, borders and so on are snapped to adjacent pixels.




Capture d’écran 2014-02-24 à 11.48.43.PNG  Capture d’écran 2014-02-24 à 11.48.49.PNG  Capture d’écran 2014-02-24 à 11.50.11.PNG 

---

Tbh I wouldn't mind a grayscale version of the UI

---

Yes I plan to make two version, one grayscale and one dark with light icons (kinda like Cinema 4D or Photoshop when you set it to darker)

---

Michael ...

Just a comment about the UI. I suggest you continue with your path ... it is simple and it works well for me.
It is great that users can customize it for their own specific preferences.

I'm getting a feeling that another update to MoI ver 3 beta is coming soon. I look forward to it.

cheers,
eric

---

Hi DesuDeus,

> And yes they downscale nicely because the lines, borders and so on are snapped to adjacent pixels.

That will be ok for these very simple and sparse ones, but not for drawings that are more complex with some more details in them.

Again, the problem is that things like the stroke width on a shrunken down vector image does not really scale exactly in proportion to the vectors, and so if you have for example 2 parallel lines that are close to each other it's fairly easy for the strokes on each of those lines to collide into one another in a shrunken down version.

If you don't believe me, just try making an icon that has some close together lines in it like ones that are separated only by 1 or 2 pixels and then see how that shrinks down as vectors.

This is a longstanding problem in vector graphics in general, for fonts there is a highly complex "hinting" mechanism that is used that alters the vector paths by nudging things around by small amounts when things are shrunken down.

- Michael

---

Hi Michael;

Moi icons are very nice. Do you use special tool to make them?

Thanks
-sharif

---

Hi Sharif,

> Moi icons are very nice. Do you use special tool to make them?

Most were made with PaintShop Pro, a few are licensed icons and some use MoI screenshots as well.

- Michael

---

Hi Michael,

I think that using .svg icons is not bad idea. But it seems that MoI doesn't support them at this moment. Today I've tried to use both external svg icon file and Base64 encoded string, but everything I got is "image not found" sign. It's strange, because WebKit supports svg images. Check please, is image/svg+xml MIME type enabled?

---

Hi Max,

> I think that using .svg icons is not bad idea.

It would be ok for high resolutions screens, but a bad idea for lower resolution screens - as explained above vector drawings do not tend to shrink down as well as they enlarge.

It's best for the UI to use mechanisms that work on both low and high resolution screens, rather than only on things that work on high resolution screens alone.


> But it seems that MoI doesn't support them at this moment.

SVG is disabled in the WebKit build that MoI uses, because it bloats up the size of the web kit binaries by quite a bit.

- Michael

---

Hi Michael.

>>SVG is disabled in the WebKit build that MoI uses, because it bloats up the size of the web kit binaries by quite a bit.
Thank you for your answer.
So, in this case it's better to leave everything as is :)
Anyway we can use a high resolution icons for high resolution screens.

---

Hi Max,

> Anyway we can use a high resolution icons for high resolution screens.

That's what's happening already... The icons are quite a bit higher resolution (64x64 pixels) than what is typically displayed, the UI can already be increased in pixel size by quite a bit before there will be any actual stretching happening on the current icons.

Basically the current UI system already handles an increase in screen resolution very well, while at the same time handling lower resolution screens as well. It's just not something that needs to be messed with for this particular purpose because it's already doing that job.

- Michael

---

Hi Desudeus

I really like your icons.
Maybe its because i'm using a Mac as well or maybe its just a matter of aesthetic preference.

I'm not saying that the current icons are ugly! Actually, Moi has some of the best and most meaningful icons of any software i've ever used.

I will definitely try them once they are ready.

Dinos

---

Thanks Dinos

Yes I'm on a Mac too so I like pretty icons :D

Here's some progress for the dark UI (icons are not all done yet)

Fun fact, you can use the new icons on both dark and light UI :)

Dark UI

https://dl.dropboxusercontent.com/u/44982094/MoIUI/NewUI1.jpg

https://dl.dropboxusercontent.com/u/44982094/MoIUI/NewUI2.jpg


Old UI with old icons

https://dl.dropboxusercontent.com/u/44982094/MoIUI/OldUI.jpg

---

Hi DesuDeus, re: question about viewport title in your screenshot - sorry currently there isn't any way to adjust that particular color, it's drawn by the 3D engine not by any HTML so right now there isn't any way to change any CSS attributes to control that particular thing.

- Michael

---

I'm confused.... these look exactly like the current icons to me. What's the difference?

---

Here's an advantage of the new icons, they work nice on both light and dark background

Comparaison with the original icons (left are untouched)
https://dl.dropboxusercontent.com/u/44982094/MoIUI/Icons_light.jpg (on white)
https://dl.dropboxusercontent.com/u/44982094/MoIUI/Icons_dark.jpg (on dark)

For example you see that the "Extend" icon doesn't work on dark background
The grid array icon has not the same size of the circular array one
The align icons have a weird aliasing

And so on... For now I'm just "fixing" little things


@Michael

Ok too bad, maybe in next version you could hide it with a script? I remember I asked if it was possible to turn them on/off for when you do high resolution screenshots :)

@Sun

That's because the current ones I'm making first are just a "relift", I will also do all the volume icons (sphere, cube etc..) and those will be really different

---

Here's an update of the dark UI with the things still left to do :)

01
https://dl.dropboxusercontent.com/u/44982094/MoIUI/DarkUI1.jpg
https://dl.dropboxusercontent.com/u/44982094/MoIUI/DarkUI1_comments.jpg

02
https://dl.dropboxusercontent.com/u/44982094/MoIUI/DarkUI2.jpg
https://dl.dropboxusercontent.com/u/44982094/MoIUI/DarkUI2_comments.jpg

---

Slight update,

Fixed the checkboxes
Changed the "options" a bit

---

Hi DesuDeus,

While I was skeptical about the need to redo MoI icons, I'm really fan of your dark UI version !
Thanks for the great job !

---

Show messages:  1-7  8-27  28-47  48-50