Icon for Emulationstation

dat-atr-ash commented 7 months ago

Hello, dear SylEleuth,

first of all, thank you for this beautiful icon pack!

I needed an icon for Emulationstation, a frontend for Retroarch.

I took the bright template you provide in this repo and adjusted the colors of this file I found in the Emulationstation repo: https://github.com/Aloshi/EmulationStation/blob/master/data/resources/splash.svg.

Note that there are two overlapping 'shadows' and that the resulting colors are not strictly part of the palette.

I don't know if the licenses are compatible (GPL 3 here, MIT there).

If licenses are compatible and you like the result, please feel free to incorporate this icon in your pack. Or let me know if I should open a PR. Never done that, but I'll be happy to learn how to do it.

Also, please let me know if metadata has to be edited before this can be used, should you decide to do so.

SylEleuth commented 7 months ago

Hi.

Thank You for your kind words. Let's jump straight to icons making stuff.

Main part of the above icon are letters "ES", everything else is a background. So colour of the base should be darkest blue, filling the whole space (no need for gradient like in the template, because next shade of the blue is too bright)
Base of the original icon has 2 slated corners that have to be dropped here because all corners are round.
Main dark colour is #282828 and main bright is @ebdbb2. Anything above that spectrum (#1d2021 and #fbf1c7ff respectively) should be used only in specific situations, e.g. when the main element is bright (#ebdbb2) and You need to put something brighter on it. "ES" letters should be in standard bright, even though the original ones are #ffffff. You also made them gradient and in original they are solid, and because of gradient's direction and position it looks like "S" is brighter then "E".
Shadows colour should be left untouched. If palette doesn't have colours You need, opacity is Your friend.
Because base is now bigger than the original one, You would have to extend shadows to the edges.
I don't know why original icon has 7 one pixel size red elements that are barely/not visible. If it's a mistake? Can't figure it out.

I've just crated the icon but instead of showing it here I thought that You would like to try again. It's a few minutes of work for me, but if You decide that's too much for You I can push it right now.

PS. Application icons come in pair with "small" 16px versions located in "16" and "symbolic" folders.

dat-atr-ash commented 7 months ago

Hello again,

thank you for your answer.

And also, thank you for the challenge! It took me some time to understand exactly what had to be changed. And then way too much time to try and figure out how to fix things. Neither is English my native language nor did I ever learn anything design related. Or how to use Inkscape, for that matter.

Anyway, here is what I came up with.

Since there are definitely flaws and I'm still not 100% sure I understood the instructions correctly, you might be better off using your own. But still this was a nice challenge and a fun, if overrun, lunch break (plus some.. :smile: ) . Thanks a bunch!

dat-atr-ash commented 7 months ago

PS. I also did these where the shadows go over the bezel. Obviously that's incorrect from a physical object point of view but I think I like them better. :shrug:

SylEleuth commented 7 months ago

Shadow should go over bezel so the second version is almost perfect. Only 2 comments:

"ES" should be much bigger, original has only few pixels padding, so I would make it 25-30px in this case (on left and right)
please save it as "Optimised SVG" (it says that it should be saved that way for 16 and symbolic icons, but truth is it should be used always, I'm changing that information right now)

Symbolic icon is a monochrome icon modified from the big one. In this case just "ES" letters without background. Very easy to make: Named emulationstation.svg in 16 folder and just the same copy in symbolic folder with a name changed to emulationstation-symbolic.svg.

Fix the big one and You can push it. If You're confused about monochrome version just leave it and I will add it myself. It will require manual formatting anyway at some point, something that Inkscape won't do, but not now (when I will be doing rework of apps/16). You can take what I did or do it Yourself and push all 3 icons. Or just big one. Your choice.

dat-atr-ash commented 7 months ago

Okay. Here is the revised version.

Settled for 25px margin on the sides, as the difference top/bottom <--> left/right seems more intentional that way.

And here is the whole folder structure including the miniatures:

ES.zip

Basically . . |_16: emulationstation.svg Monochrome 14 width |_Scalable: emulationstation.svg Coloured 256x256 |_Symbolic: emulationstation-symbolic.svg Monochrome 14 width

If everything is correct I'll happily learn how to push these changes either tomorrow evening or the day after that.

dat-atr-ash commented 7 months ago

PS. By 'happily learn how to', I mean read those guides Github provides. Just to clear that up.

SylEleuth commented 7 months ago

16px:

maximize icons to the edges (on the sides), if You look at the grid it should be nicely aligned
no nested groups (no groups whatsoever)
all elements merged
if You look at the code there shouldn't be any "transformations", it happens when you take grouped elements and resize them

scalable:

shadows are misaligned with the base, You might be thinking that "it's just a little bit" and "no one will see it" but I try to polish every elements before push and my ocd wouldn't allow me to just leave it as is

dat-atr-ash commented 6 months ago

Hey,

pardon, life happened. Will come back to it. Regarding your last message, did I again miss some detail in your documentation?

Have to admit that first I didn't read it at all. But thought I got it after your secound message, where you explicitly reffered to it.

However, maybe Sunday I'll have the time to complete everything. Sorry for the delay and thanks for your patience.

Kindest regards,

Chris

Am 10. April 2024 09:20:59 UTC schrieb Syl Eleuth @.***>:

16px:

maximize icons to the edges (on the sides), if You look at the grid it should be nicely aligned

no nested groups (no groups whatsoever)

all elements merged

if You look at the code there shouldn't be any "transformations", it happens when you take grouped elements and resize them

scalable:

shadows are misaligned with the base, You might be thinking that "it's just a little bit" and "no one will see it" but I try to polish every elements before push and my ocd wouldn't allow me to just leave it as is

-- Reply to this email directly or view it on GitHub: https://github.com/SylEleuth/gruvbox-plus-icon-pack/issues/46#issuecomment-2047000630 You are receiving this because you authored the thread.

Message ID: @.***> -- Sent from my Android device with K-9 Mail. Please excuse my brevity.

SylEleuth commented 6 months ago

No worries, I assumed that amount of details I've provided overwhelmed You. I was going to ask if You want me to do it, but if You still up to it then go ahead.

dat-atr-ash commented 6 months ago

Got a day off today and will continue on the icons.

16 now looks looks like this in text editor:

`

The icon:

Scalable: I assume by base you mean the letters, not the background?

Following that assumption I think this might be ok:

SylEleuth commented 6 months ago

16 looks great, scalable with no changes. I didn't mean letters nor background. I meant shadows. Bottom looks like this:

dat-atr-ash commented 6 months ago

Okay, this was an absolutely enormous pain in the lower back. Tremendously enormous I will say.

I tried every path function that could possibly result in what I wanted. And they all did. In the exact same way. With the exact same flaw.

Wow!

So in the end I resorted to what in my mind was brute force and a lot less reliably exact: manually manipulating handles and curves. Didn't even know you could do that with curves. So at least I learned something. Painfully so, but still.

There will definitely be some imperfections but here is the result:

SylEleuth commented 6 months ago

Inkscape is not perfect in that matter. I tried many things and in the end I have to correct everything manually. It's still 2 pixels short, but I will accept it. Good job, now push it.

dat-atr-ash commented 6 months ago

Okay, that's actually kind of a relief.

I maybe need a bigger monitor to see the difference plus maybe different settings for snapping but I can't tell cause I can't see. But I tried to eliminate those two pixels.

Is this better?

Ooooops.. Forgot to make the other shadow visible:

dat-atr-ash commented 6 months ago

Monitor with higher resolution that is. Not per se bigger. But that might also help..

SylEleuth commented 6 months ago

I don't see any changes, but as I said You can pull request now. Just use options from here while saving.

SylEleuth commented 6 months ago

Closing for now. You can open when You are ready, or let me know if You want me to do that. One day the time will come and will have to do it anyway.

SylEleuth commented 1 month ago

https://github.com/SylEleuth/gruvbox-plus-icon-pack/commit/9f10e83683442b2b080433f55d668296b61de0e7

SylEleuth / gruvbox-plus-icon-pack

Icon for Emulationstation #46