OverlayHD Skin Icons and Images...

[IanSav]

Hi All,

As I prepare what I think will be a release candidate for the next version of OverlayHD I would like to ask if there are any computer graphics artists or designers out there that would like to offer their assistance and services to improving the graphics and icons in OverlayHD.

I would like to keep the general look and feel of the icons I now have but would like to:

• improve the clarity of the existing icons,
• add lots more icons to the library:
  • ensure that there is a "Setup" and non "Setup" version of every icon,
  • create more icons for all the menu screens,
  • refine or replace some existing icons to better reflect the function or area they represent.

I think the grey icons with blue highlights are fine. In the clean up I think we may remove the transparency of the reflections. I would also welcome other suggestions for alternate versions of the skin.

If you are able and interested in helping out please post your interest here. I will handle all the coding so don't hold back if you are purely interested in the graphics themselves. I would like to keep the discussions public so that users can follow, and contribute, to the refinement process.

Regards,
Ian.

[steve_666]

Hi,
what do you need, maybe i can give it a go to help out.

[IanSav]

Hi Steve,

Thank you for responding.

Do you use the OverlayHD skin? If so I am looking to clean up the icons used in many of the menus. I would also like to get a lot more similar looking icons to better represent the menus and functions available on the PVR.

For example the following image was hand edited by me to clean up the image. But I need more of these images fixed plus lots more in a similar 3D style.

Original image...

mainmenu_movies_musicvideos.png (17.09 KiB) Viewed 6404 times

Refined image...

mainmenu_movies_musicvideos.png (19.67 KiB) Viewed 6404 times

I also want a version of the cog setup overlay so that there can be a functional image and setup version of that functional image.

Functional image...

mainmenu_tasks_browser.png (7.15 KiB) Viewed 6404 times

Setup image...

mainmenu_tasks_setup_browser.png (15.39 KiB) Viewed 6404 times

What do you think?

Regards,
Ian.

[steve_666]

Hi,
I cant remember which one i had before i updated to the current firmware :/
I remember you could change the splash screen, fonts etc, i think it was yours? i cant remember the name of it.
I just downloaded the new version just need to install it.

To the icons; have you thought more of a flat type icons or are you set on the 3d style?
Are you set on the reflection style also?
I just want to see what you are aiming for etc

[IanSav]

Hi Steve,

To the icons; have you thought more of a flat type icons or are you set on the 3d style?
Are you set on the reflection style also?
I just want to see what you are aiming for etc

While I like and am used to what I have now you are not the first person to suggest a change. What do you suggest? Please note that if we change it will need to be a comprehensive change. I want the finished product to be uniform and coherent.

Regards,
Ian.

[steve_666]

For sure uniform and coherent thats a must.
This is just my personally opinion and i dont want to diminish the great work you have done at all.

I would go in the direction of flat and more colour, or you can sill stick with the grays but i wouldnt go 3D type.
Other people that use your Skin should comment also to let you know what they think is a good direction and what they would like.
I like the style of the full metal skin but dont like the icons and backgrounds.
Have a look around at icons see whats around.
Just a thought, i can try help either way

[IanSav]

Hi Steve,

For sure uniform and coherent thats a must.
This is just my personally opinion and i dont want to diminish the great work you have done at all.

I would go in the direction of flat and more colour, or you can sill stick with the grays but i wouldnt go 3D type.
Other people that use your Skin should comment also to let you know what they think is a good direction and what they would like.
I like the style of the full metal skin but dont like the icons and backgrounds.
Have a look around at icons see whats around.
Just a thought, i can try help either way

I am okay using more colour if it isn't to loud. As for design, I would like to use imagery that is mnemonic to the function. I am not a fan of the minimalist Material Design that seems to be spreading everywhere. If you need to stare at the image and think hard to work out what it means or represents then it is a fail for me.

Do you have a suggestion on a style or image that should be considered?

Regards,
Ian.

[prl]

...
I am okay using more colour if it isn't to loud. As for design, I would like to use imagery that is mnemonic to the function. ...

It's preferable, though, if understanding an icon doesn't depend on colour. There are enough places where that's in the UI already. The coloured buttons are a classic of that, using colours that are affected by the two most common forms of colour blindness. That is mitigated in some contexts by displaying them in a consistent order.

But yes, definitely more easily understandable icons, and fewer like the media selection screen's "When a movie reaches the end" status icons (and to a lesser extent, the same screen's sort status icons).

[IanSav]

Hi Prl,

Very good point about the use of colour. Thank you.

Regards,
Ian.

[prl]

Well schooled by peteru.

Also, at one time colour-coded two Ethernet cables in a computer room underfloor* with red and green, not realising at the time that a colleague who also needed to differentiate the cables was red-green colour blind.

* Back in the days of "thick Ethernet" and "vampire taps"

[steve_666]

Yes not full on colour for sure, blue and white maybe (like whats on this forum).
I was thinking just colour icon backgrounds and simple icon.
I did a quick search and found this: http://comps.canstockphoto.com/can-stoc ... 361259.jpg
I admit its not the best sample but you get the idea.
As for colour blind people, i'm colour blind so i know what you mean thats why it needs to be simple easy to read quickly. just an idea.
whats your thoughts on that?
What program do you use to make the theme?

[Gully]

I did a quick search and found this: http://comps.canstockphoto.com/can-stoc ... 361259.jpg
I admit its not the best sample but you get the idea.

Agreed, especially with the shadow effect. Why do they bother?

[IanSav]

Hi Gully,

I did a quick search and found this: http://comps.canstockphoto.com/can-stoc ... 361259.jpg
I admit its not the best sample but you get the idea.

Agreed, especially with the shadow effect. Why do they bother?

I don't mind the shadow effect. It is a point of difference in a world of everything becoming the same.

Regards,
Ian.

[IanSav]

Hi Steve,

Yes not full on colour for sure, blue and white maybe (like whats on this forum).
I was thinking just colour icon backgrounds and simple icon.
I did a quick search and found this: http://comps.canstockphoto.com/can-stoc ... 361259.jpg
I admit its not the best sample but you get the idea.

I don't mind the concept and the sort of look. Personally I would prefer to stick to a single colour option for the UI. That said there could be an option to use sets of images with a different colour accent to give the users more choice in the final UI look.

By the way, in the current coding the icon space allocated is 300 pixels wide by 500 pixels high. The bottom half of the image is often sacrificed for information overlays. The top 300x250 is the prime icon real estate. (This is why the current images use a reflection for the bottom half of the image.)

As for colour blind people, i'm colour blind so i know what you mean thats why it needs to be simple easy to read quickly. just an idea.
whats your thoughts on that?

Your colour issues makes you more qualified than me to find a look and colours that work for the UI.

What program do you use to make the theme?

The whole OverlayHD UI was hand crafted by me. The skin is written in XML. I have written a Perl program that syntax and cross checks the skin for me.

Regards,
Ian.

[Gully]

I don't mind the shadow effect. It is a point of difference in a world of everything becoming the same.

Yes it does that but I think it muddies the image as well.

[steve_666]

Yes can do single colour, can do whatever you want thats the hardest part lol
Yes i can see you have done heaps of work on your skin and its great, customisation is fantastic.
I was thinking of just stuffing around with the skins on the system, just the png files to see what it looks like, havent done it before but hay worst i can do it break it

[IanSav]

Hi Steve,

Breaking a skin can make the system unbootable but system prompt access is available so you can get out of trouble. If I may ask, how computer literate are you? Are you okay with command line access? What about reading Python code? Do you have the basics of XML?

The best way to start is grab a skin and start looking at how it hangs together. Start with small changes and then build up from there.

Regards,
Ian.

[steve_666]

nope nope and nope
I'm an artist and i do graphic design stuff also
I just stuffed around with the icons on the menu and it worked so thats good, but no i have to go out so i'll try again later.
I'll add a picture if i can

[IanSav]

Hi Steve,

nope nope and nope
I'm an artist and i do graphic design stuff also
I just stuffed around with the icons on the menu and it worked so thats good, but no i have to go out so i'll try again later.
I'll add a picture if i can

If you constrain yourself to editing images without changing their size you can make any changes you like without affecting the skins. This is more or less how the Full-Metal-Wizard skin came into existence.

I have absolutely no issue working together with you to achieve a good result for all OverlayHD users. I can provide all the coding and XML knowledge you may lack. I am also fine with helping you to come up with your own skin if you so desire.

In a past life I worked with graphical artists who had no programming skills and we came up with some great results.

Regards,
Ian.

[prl]

Remember that a lot of the icons that appear in the UI are referenced from the code, not from the skin files, though the files themselves are part of the skin.

[steve_666]

Quick sample of what i did before.
Simple blue icons when selected turn white.

[IanSav]

Hi Prl,

Remember that a lot of the icons that appear in the UI are referenced from the code, not from the skin files, though the files themselves are part of the skin.

I still believe that so long as the images don't change size and still indicate the same meaning there should be no issues with Steve changing any of the image files.

It should be noted that it would be preferred that the changes be made to a skin and not the built in defaults.

Regards,
Ian.

[IanSav]

Hi Steve,

Quick sample of what i did before.
Simple blue icons when selected turn white.

Do those icons have an edge colour? It is difficult to discern over that loud Harvey Norman background.

If not I would prefer to see protection for all icons such that they all stand out without regard to *any* possible colour or content on the TV background.

Regards,
Ian.

[prl]

Hi Prl,

Remember that a lot of the icons that appear in the UI are referenced from the code, not from the skin files, though the files themselves are part of the skin.

I still believe that so long as the images don't change size and still indicate the same meaning there should be no issues with Steve changing any of the image files.
...

My point was more that if you want to find out what PNGs are used in a screen, you can't always find what they are from just looking at the skin files. But since steve_666 has modified the images in GeneralMenu, he may well have worked that out already.

[prl]

Hi Steve,

Quick sample of what i did before.
Simple blue icons when selected turn white.

Do those icons have an edge colour? It is difficult to discern over that loud Harvey Norman background. .
...

I was going to make a similar point myself.

Also, the "Play" icon has a white highlight that doesn't seem matched by the other non-selected icons.

[steve_666]

images are just png same size saved direct over existing named images, easy way of doing it. Backed up original files of course.
No edge colour just icon flat colour, and i dont like the white edges
The first 2 icon seem to be the worst when it comes to that highlight, i noticed also on the OverlayHD it does it also. Does it do it on your machine?
I'm just doing basic mods to get the feel on the files and how they look on screen, when i get home i'll try different things.
Whats the best way to stop that highlight/white around the edges?

[IanSav]

Hi Steve,

images are just png same size saved direct over existing named images, easy way of doing it. Backed up original files of course.
No edge colour just icon flat colour, and i dont like the white edges

This should be quite safe to do. As for edge colouring, we can workshop a way to make the icons stand out above the TV background.

The first 2 icon seem to be the worst when it comes to that highlight, i noticed also on the OverlayHD it does it also. Does it do it on your machine?
I'm just doing basic mods to get the feel on the files and how they look on screen, when i get home i'll try different things.
Whats the best way to stop that highlight/white around the edges?

Are you talking about the transparent edge to some images? If so that appears to be a bug in the transparency and layers of the UI system. The best way to minimise it is to reduce the amount of anti-aliasing with the transparency background.

Regards,
Ian.

[steve_666]

Ok so just a UI issue, thought as much

[IanSav]

Hi Steve,

Ok so just a UI issue, thought as much

Annoying isn't it.

To get a start on identifying a new icon image style could you please create a sample replacements for the following images:

Menu image...

mainmenu_tasks_setup.png (18.83 KiB) Viewed 6457 times

Setup image...

The first could be considered to be the main menu icon for the Setup menu while the second would be a generic settings change screen icon. (This would be a default where no more specific settings image is available.) I would like to explore the style that you previously posted though I would be open to check out other ideas.

Regards,
Ian.

[IanSav]

Hi Steve,

Are you still around? Is there still interest in providing graphical assistance?

Regards,
Ian.

[steve_666]

Hi, sorry been busy with family and work.
Yeah can still help

[IanSav]

Hi Steve,

Brilliant. I am keen to see new eyes and ideas to help improve OverlayHD and any other skinning projects you care to try.

Regards,
Ian.

[steve_666]

Do you like any of these?

[IanSav]

Hi Steve,

I don't mind any of those. The first two with some colour are brighter or cheerier (if that makes sense) but I would prefer squared off corners (to go with the rest of the UI).

The imagery within all the proposals is really very good and offers the mnemonic links to the functionality that I wanted to introduce.

The last two image appear, for my lack of finding a better word, dull. How do you think they would go with a pastel colour background? Sort of like the sample panel you previously posted.

EDIT: I also prefer the image to be centred in the space. Is there a reason the second two icons are offset?

Regards,
Ian.

[steve_666]

cheerier

Yes understand lol

The last two image appear, for my lack of finding a better word, dull. How do you think they would go with a pastel colour background? Sort of like the sample panel you previously posted.

EDIT: I also prefer the image to be centered in the space. Is there a reason the second two icons are offset?
Ian.

Yeah they are just simple ones, they are offset because it was just a quick edit and thats the way the original files where. To be honest i cant remember where they are in the system :/

[IanSav]

Hi Steve,

Do you have any updates? How best can we move forward?

Regards,
Ian.