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.

[CoalaJoe]

I use iVinci.

[CoalaJoe]

@Kivutar A lot of alignings are messed up. And there is only 1 layer left?

[kivutar]

Ah, you're right, this one is wrong. Remember to set your grid to 4x4, on your screenshot it looks like 5x5.

[CoalaJoe]

I set it to 4px.

[kivutar]

But I see 5x5 squares on your screenshot. Inskscape allows having 4x4 squares

[CoalaJoe]

Here is a sample for Lutro:

The squares are 4px wide. there are 16 squares in my grid. You can see that in the image above. Btw. Any suggestions about the Lutro icon.

[baxysquare]

At first I was thrown off by the fact that the select and start buttons were rounded rectangles instead of half-circles. But if you're modeling from the PSP-3000 or PSP Street, the rectangles are correct. I had never noticed that detail before. As I make changes to Systematic, I'll keep that in mind. Thanks!

I think leaving off the Home and Volume buttons throws off the balance of the design. I recommend adding at least the home button. Alternatively, you could try it without Select and Start. After all, the D-Pad, Analog Nub and action buttons are what really make PSP "iconic."

[CoalaJoe]

@baxysquare Thank you for your feedback.

What do you think with the homebutton added?

[CoalaJoe]

Hey there. I wan't to add some more icons. But I need a place where I can get feedback and change the icons to the corresponding need. I don't think a Github Issue is the right place for that. Where can I share my ideas?

[baxysquare]

I guess you could start threads over at the Libretro Forum under RetroArch Additions | Themes. That said, I don't thing there's anything wrong with posting on this forum either.

[CoalaJoe]

@baxysquare Thanks :)

Anyone an opinion about this FlatUI Lutro icon?

[baxysquare]

Design-wise, it's very similar to what I've done for RetroActive & Systematic. Great minds think alike! My only issue is at the top right of the circle, the light red does not make a seamless circle.

[CoalaJoe]

Okay. Thanks I'll fix that!

Currently I do the Gamecube Icon. I don't know if I should go with a more material-design-like method. (Seen on the C-Stick)

[baxysquare]

I'm not familiar with the design language in FlatUI, but based on a quick look at the PNGs on GitHub, I would say Drop Shadows are a design faux pas. If you really want to go that direction, perhaps you should fork it make a "materialUI" theme.

[L-A]

If you want to follow the direction of current icons in the set, they're made with a two-tone scheme from a near-vertical light source:

Here's the PSD with my assets.

It's set to auto-generate both PNG and SVG files in separate folders (SVG requires some verifications, post-export). The layer nomenclature is self-explanatory. Pretty sure iVinci won't support the Generator features though.

[kivutar]

Your grid is still wrong, it must be 4x4 like this:

[CoalaJoe]

@Kivutar Do you mean the Lutro-Icon or in general? I'll try the PSD from @L-A and see how it looks like.

[kivutar]

I mean in general, in all your screenshots I see a 5x5 grid, you certainly have a way to change it to 4x4.

[CoalaJoe]

@Kivutar My programm only shows 5x5 grid. But the tile size is correct 4x4.

[CoalaJoe]

@L-A Can't open the psd with my editor T-T...

Do you think that's ok?

[CoalaJoe]

@L-A @baxysquare @Kivutar Any thought on this:

[baxysquare]

Looks great but it's missing a Z Button. I'd also round out the edges of the D pad to help it match the softness of the other buttons and sticks.

[CoalaJoe]

@baxysquare Added cour suggestions in #107. Thanks for the feedback.