HP bar icon should have a gradient about pso-tracker HOT 4 CLOSED

I made a small piece of art for one of my projects that could be of help. It's supposed to recreate PSO's ingame HP bar look at a higher resolution using a gradient.
HP_Bar_SVG.zip

Here's what it looks like : https://codepen.io/eleriaqueen/pen/mYKXLB

from pso-tracker.

It looks okay, is it mirroring the in-game colors precisely? Hard to tell looking at game screenshots but I can review it closer. It shouldn't be a problem to use either the gradient on the existing shape (just a rounded rectangle) or this directly with minor tweaks.

from pso-tracker.

For the codepen example the main green color I used is RGB(0 , 255 , 0).
Shading should be pretty close to in-game one except smoother of course.

That being said I didn't spend a huge amount of time trying to replicate it to perfection.

(Here's the original game asset, scaled by a factor of 4x on both axes, for reference. Do mind that original textures are compressed using DDS format so there are colour artifacts.)

Edit : I took a screenshot of PSOGC using Dolphin Emu with custom all-white HP/TP bar graphics to get the exact base colour for these bars as drawn by Gamecube GPU.
Don't mind the higher-than usual resolution on the rest of the UI, I was too lazy to disable my custom HiRes UI for the screenie.

from pso-tracker.

Nice research. For the gradients on pso-icons/equipment, I definitely took artistic license and didn't worry about exact pixel locations given how low-res the source material is. For something only 7 pixels tall I'll just worry about blending 7 colors and let the rounded rectangle suffice for a container shape.

P.S. Don't feel like you have to edit your posts if you have more to add on to the original post, if you were concerned about that. Notifications are only generated for the first post, and I already filter things like that to not buzz my phone every time or whatever.

from pso-tracker.