Finish flatui theme for xmb menu

[gouchi]

Icons needed to release flatui theme for xmb menu

https://docs.google.com/spreadsheets/d/1omEsTRa-wLSgWlALHpOsBDLax1-yyfYLGkfWVKu3BPU/edit?pref=2&pli=1#gid=0

[L-A]

Howdy, Karim contacted me about this, I'm planning on lending a hand.

I'd like to know the source of the color icons that are already done, and if there's documentation about how they insert in the larger context of the interface and theme (some level of guidelines). Otherwise I'd probably start there.

Cheers!

[kivutar]

Hello @L-A and welcome onboard :)

The sources are there, in the src folder: https://github.com/libretro/retroarch-assets/tree/master/xmb/flatui

Here is how they insets in the menu:

(Note that the icons in the vertical list are colliding, this is something we don't want to change that in the code, so you have to bake a margin in the images.)

We're trying to align as much as possible on a 64x64 grid. Then we export in png format at 256*256. This way, when the screen size is divided by a power of two, we get a pixel perfect downscaling.

Palette here http://flatuicolors.com/

This other theme can serve of reference for sizes if needed: https://github.com/libretro/retroarch-assets/tree/master/xmb/monochrome

Thanks for your help! Let me know if you need more informations.

[L-A]

Oh, that menu screenshot helps a bunch. Thanks!

[L-A]

Is there a preferred stance regarding stickers and logos? I see there are a few -contentassets using CDs, which I'd try to make uniform.

Starting at the top of the list, the 3DO content could use a simplified label like this:

But I want to know if it's a reasonable thing to do before I do it in other assets.

[kivutar]

I think it's too much details compared to other icons in the set.

[L-A]

Glad I asked. I'll do the same thing as the monochrome assets for now – CD contents will be generic CDs.

[jancborchardt]

Btw @gouchi if you are still looking for help here, or have additional design work, you are welcome to open a job on the @opensourcedesign job board at http://opensourcedesign.net/jobs/ :)

[gouchi]

@jancborchardt yes thank you. For now, @L-A is still working on it ;-)

[L-A]

Indeed! I'm slowly moving forward in the icon list.

If someone comes across this and wants to jump in (it's pretty fun work, and simple to split!) just say the word and we'll team up.

[kivutar]

Great! Can you push your work on github and submit a PR so we can have the icons you already made?

[L-A]

Just did :)

[L-A]

Hi! I apologize for giving this update so late: The icons are still on my list, but big life changes mean I have to prioritize different projects for a while. <3

[kivutar]

No problem :)

[gouchi]

No problem and thank you for your contribution @L-A !

[CoalaJoe]

Need feedback for the PSP Icon i made.

The black portion down left will be erased for the png

[kivutar]

I love it.

Two things to make it compliant with the guidelines:

• No labels, you can remove PSP, SELECT, START, even the symbols
• Create a 64x64 SVG file, with a grid of 4x4, align all the important lines of your SVG to this grid, as much as you can. Then export it to 256x256 png. This is to ensure that the icon will still look pixel perfect when rendered at 50% or 25%.
• We have a circle blueprint somewhere (we need to find it), the icon must be included in this circle. This is to ensure a consistent size over all the icons of the theme. But most icons in the Flatui were done before we add this rule, so it's not important if you don't do it.

[CoalaJoe]

Ok. Thanks for the feedback.
I think the symbols on the right are important for the identification of the system.

[kivutar]

Look at the PSX icon, there are no symbols and we still identify it well. It will be the same for the PSP. Peole identify the system using not only the icon, but also the cartridge icon, and the name on the top left of the screen.

[kivutar]

Oups, I just took a look at the PSX icon, and the symbols are there. So you can keep them. Sorry.

[CoalaJoe]

Okay :)

[CoalaJoe]

I made the svg 256x256 do I really need to down convert?

[kivutar]

Yes, if not aligned on a 64x64 grid, the icon will look blurry when in innactive state, rendered at 50%.

[CoalaJoe]

How is it?

[L-A]

Hi @CoalaJoe! If you'd like, I have an additional source file (PSD) I can share with you. It's already squared at 256px, and it can easily export at .25 dimensions. It helped me a lot with the preview.

[kivutar]

You can see it's not aligned, I pushed an aligned version on the repo, you can compare

[CoalaJoe]

@L-A Sure! I hope I can open it. I do not have Photoshop.

[Alcaro]

Several other programs support PSD. GIMP, for example.

[RobLoach]

Feature Icons popped up in my feeds. Open source icons, that we could use for anything missing.

[sergioad]

Hi there, I love FlatUi but it is incomplete so here are my notes: by now FlatUI has many recicled icons from Monochrome in the quick menu, the add favorite icon is missing and also the close content icon is way too big compared to the allready themed RetroAchievements icons, it needs a rescaling

I hope make your work a little bit easier

[ofry]

Missing some icons:

[WARN] [XMB] Asset missing: assets\xmb\flatui\png\movies.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_room.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_room_lan.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_room_relay.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\wifi.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\zip.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\movie.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\key.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\key-hover.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\dialog-slice.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_achievements.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_audio.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_exit.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_frameskip.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_info.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_help.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_network.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_power.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_saving.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_updater.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_video.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_record.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\Libretro - Pad.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_mixer.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_log.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_osd.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_ui.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_user.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_privacy.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_latency.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_drivers.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_playlist.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_quickmenu.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_rewind.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_overlay.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_override.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_notifications.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_stream.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_shutdown.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_DPAD-U.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_DPAD-D.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_DPAD-L.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_DPAD-R.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-U.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-D.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-L.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-R.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_STCK-P.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_SELECT.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_START.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_BTN-U.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_BTN-D.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_BTN-L.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_BTN-R.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_LB.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_RB.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_LT.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\input_RT.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_check.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_add.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_brightness.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_pause.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_apply_toggle.png
[WARN] [XMB] Asset missing: assets\xmb\flatui\png\menu_apply_cog.png

[ofry]

@alfrix Thank you for fixing it.

[baxysquare]

So I've been toying with the idea of merging or adapting the Retroactive icons to the FlatUI color palette to contribute to and possibly complete the set. I went into 2600 Controller and noticed there are colors there that are not on the palette at FlatUI Colors. So I'm wondering if we're using some sort of expanded palette like the one I found on another GitHub project. Any insight would be appreciated.

---

[alfrix]

i used the first one when i did the update, and it seems that i updated the pngs of the 2600 but didn't update the svg

[RobLoach]

I like the FlatUI feel, and would love to see it expand. Merging RetroActive and FlatUI could make sense, since the icons and goals are similar.

[baxysquare]

I like the FlatUI feel as well, but would prefer to use the expanded 40 color palette over the 20.

These days, I just don't feel like I have time to maintain 4 themes plus contribute to Monochrome. At this point, I tend to favor of fuly maintaining Systematic and Automatic, while "retiring" or very lightly maintaining Retroactive and Neoactive.

[jstolarek]

I'd like to thank everyone who has so far contributed to flatUI theme - it is fantastic! I would really love to see the whole icon set getting finished. Right now I'm adding the missing icons from other sets as a stop-gap solution.

[baxysquare]

We had discussed the possibility of merging RetroActive and FlatUI into a single theme. I've opted to work on other projects for now. That said, the RetroActive icons are an ideal foundation to work from. You'd need to remove the translucent border and down-convert to the FlatUI 20 color palette and populate the theme with the missing icons.

[baxysquare]

I've just submitted #421, which is known as the FlatUX theme. I have taken RetroActive, removed the translucent borders and applied the expanded 40 color FlatUI color palette to every icon. When possible, I tried to integrate design elements from the original FlatUI set. It's meant to serve as the first step toward merging the two themes as has been discussed over the last few years.

Keep in mind, this theme is not active at this time. It's supposed to lay the groundwork for universal themes as discussed on #341. That means FlatUX will not debut until universal themes become the new standard format. There's plenty of time for anyone to update, make changes and contribute to this theme in the meantime, and anyone who wishes to is encouraged to do so.

Once universal themes roll out and FlatUX is made live, RetroActive and NeoActive will be officially retired and will not be converted to universal themes. Whether FlatUI is officially retired in favor of FlatUX is up to the community.

[shibenb]

Hello, flatui xmb was missing Nintendo - Family Computer Disk System-content.png so I made one, taking monochrome as base. please see if you guys like it.

[baxysquare]

It looks nice. For FlatUI media, the labels are set to "Peter River" blue and any flourishes that may have been a part of the label design are removed. Here's the FlatUI version of the NES and Super NES Game Paks as examples:

EDIT: I took a second look and noticed the icon doesn't adhere to the FlatUI 20 color palette as discussed above. The yellows would need to be converted to Sunflower and Orange. The blacks you would convert to Wet Asphalt or Midnight Blue and the white would need to be changed to Clouds.

I quickly worked it up in Photoshop so you can see what I mean.

[shibenb]

I love it! In case you didn't work in scratch mode, will you be able to pass me the png file if you still have it?

Another thing that I worked on is Nintendo - Game Boy Color asset, which is oddly a purple themed when that is more of a GBA's known color. GBC pop-culture known color is yellow. So here's my take on it:

Can you point me to where to see the color pallette of Flat UI?

EDIT: Found it! Right above:
#17 (comment)

But that's a lot of different set of generic flat ui palettes. Which one are we following for particularly retroarch flat ui theme?

[baxysquare]

The only file I saved was the file that you see on the post.

For FlatUI, you use the 20 color palette, officially called FlatUI Palette V1.

As an aside, at this point, nobody seems to care if we replace FlatUI with FlatUX, even though it's complete and ready to roll out. I'm thinking I'll replace RetroActive with FlatUX via Pull Release. FlatUX uses the 40 color palette and is a fully fleshed-out, expanded version of FlatUI.

[shibenb]

Thanks for pointing to the right palette.

Yes I see the comments above about flatui 20 colors being limiting. About FlatUX, my take it much outside. I believe there are quite a few similar looking themes, most looking like monochrome and flatui. I feel there should only be 4, packaged with the download, giving people a good ranged variety: 1. monochrome, 2. flatui (or flatux), 3. pixel, and 4. semi-realistic (mac/xp/vista/iphone1 style). All other themes can be downloadable content. But I know I am thinking waaaaay out of the box.

For FlatUI, I will be posting fds-content (missing), gbc (with the usual gbc yellow instead of the gba purple), scummvm system and content (both missing).

[baxysquare]

Thanks for your perspective and feel free to contribute to FlatUI. I would encourage you to seriously consider making your own theme design. It's a lot of work, but it's amazing when it all comes together.

Rather than ship with four or even two themes, I'd say ship with only monochrome and make the rest downloadable via a themes menu. Perhaps that would make all the others more discoverable, plus it would cut down on the bloat in the mainline download.

I would love to see a thriving community of theme developers and end users, similar to what has occurred with Emulation Station development. But the reality is there doesn't seem to be much interest in the forums, on Discord, or in this repository, and I'm not quite sure why that is.

Of the handful of people that are interested in themes, most of them prefer to contribute to existing themes, rather than create their own end-to-end design. The fact that XMB was replaced as the default by Ozone, without an easy way to change the theme design, further complicates the matter. I was hoping that the Universal Theme proposal might spark interest, but there doesn't seem to be much interest in pushing the user experience beyond where it currently is.

The reality is, most people have no idea any of the other theme designs other than monochrome exist. It leaves the remaining themes hiding in the shadows. As an artist it makes me a bit sad. But I'm not a programmer, so there's not much I can do to help make things better.

[shibenb]

I never understood the decision to replace xmb with ozone. Back in the day I remember making sense of xmb UI (the whole idea of downloading cores and then loading your content) on my own and somehow it was intuitive. I have seen a lot of people new to RA not able to follow ozone and leave disgruntled feedback about RA on forums etc.

Well anyway, there must be good reasons. Universal Themes Proposal seems like a good idea. Let's hope that brings in people to create themes and all, like you said. Would be fun to see!

I quite agree with shipping the application with 1 theme only. And may be add an automated option which can download the themes user wants, similar to how cores and shaders are downloaded. I wonder why it is not done for wallpapers either.

I have considered making a theme, at least for myself, then I saw the number of icons in the png folder and then I got intimidated lol. But I totally get what you are saying, it must be quite gratifying. I like to tinker but I am not an artist though.

Just for fun, let me share my "Contra Games" playlist+content pngs, haha. I know, I know, no where close to flatui palette with its gradients and all. But I don't mind it as long as it collects my fav Contra games in one place.

[baxysquare]

I see the need for Ozone, but I think the user should be able to choose their UX on initial startup. For example, Ozone lends itself better to Android or other handhelds, while XMB looks better on a TV or Computer Monitor. As someone who also uses a MiSTer and Batocera, there's definitely room for diversity in UX.

On the theme thing, I can see why it would be intimidating. But if you work on it a bit here and there, before you know it you'll have a fully functional set. You can always put monochrome icons in as place holders, so the function is there, but it give you a better sense of what needs to be prioritized.

[shibenb]

Hey @baxysquare bro, thanks for your encouragement, I discovered inkscape and it is fascinating! (I did not know about the svgs, was working in ps like an idiot lol). I did the icons I was talking about, with a starting point from some flatux icons, followed the palette you mentioned.




Should I create a merge request? Or is flatui getting nuked and getting replaced by flatux?

[baxysquare]

Those are nice designs. Vector-based apps like Inkscape, Illustrator, Affinity Designer, CorelDRAW, etc. are the preferred apps for creating icons for this repository. We've talked about requiring all submissions to be SVG, so that they can be rendered into PNGs via scripts. That would cut down the size of the repository and make it more agile for project use. Photoshop is a fine place to start, but I'm glad you found your way to Inkscape. You're definitely on the right track.

You're welcome to submit your contributions as a Pull Requests. Admins will review and approve the merge. I believe @fpscan handles most of the merges these days, if you look through the history of merged pull releases.

As for FlatUI getting nuked and replaced by FlatUX, that decision should come from the admins and the community. Personally, I feel FlatUI and FlatUX are both so similar, I don’t see much point in keeping them both. But if there's interest in keeping both themes and making both available, I don't want to stand in the way of those efforts.

I’m at the point where I’d like to see people using FlatUX instead of having it buried in the repository as an easter egg, so I’m thinking I’m going to get it moved into position to replace RetroActive, and I’ll remove NeoActive entirely. That will make it usable in XMB and people can decide whether to use FlatUX on the XMB. What do you think?

[shibenb]

Thanks Baxy, I will connect with @fpscan to understand the merge process of the project. I like flatui but after exploring your FlatUX designs, I would really want to try it out in xmb. I can always simply clone that repo and do so, but flatux definitely should officially be available on xmb whichever existing theme it replaces.

[shibenb]

Dear @fpscan and @baxysquare can you please take a look at the merge requests #450 #451 and #452