View Profile Gagangrene
Equine and Eldritch both start with "E"

18, Male


Warren Tech Central


Joined on 10/5/15

Exp Points:
323 / 400
Exp Rank:
Vote Power:
4.65 votes
Global Rank:
B/P Bonus:
7m 3d

Drawing a health bar

Posted by Gagangrene - March 31st, 2020



This post isn't for Anonfilly

I made a lil health bar for A game affectionately titled "AYUG."

Having joined midway through their development, I had a weird combination of overchoice and listlessness in work to look for, as a lot of things aren't in the game but were being worked on already. The Health bars though, they were newly programmed, and nobody was working on them, so I decided I'd work on that.

The game is set in various medieval time periods, similar to how For Honor and Darkest Dungeon are, without extreme concern for historical accuracy in the plot, so that's the context of how I should make this look.

With that, I decided to mix the visuals of curvy metal and dirty vials, because that just felt right for an old timey look. Did Alchemists even use vials? I didn't actually have any references, I should probably get on redoing it.

But back to what I did do.

First, I made my canvas size 512x2048, filled it with red, and then shrunk down the red box by 75%, realized that that's not enough vertical space to draw on, and increased the height to 1024. I would use this red rectangle as a guideline to draw everything else around.

Next, I added another layer, hit "select pixels" on the red bar layer (ctrl+clicking on the layer's thumbnail works too), inverted the selection, all so that I wouldn't draw on top of the red bar, and keeping the ends of the bar visible. Also turned on symmetry. I did this so players would be able to accurately know their health even when only a sliver is remaining or a sliver from full. I drew the "metal" as a silhouette, but I just kinda guessed on what that silhouette should be. Once I was happy with the outer silhouette, I deselected everything, and drew those 3 bars to indicate 4ths of hp. I probably could've made the 1/4 and 3/4 lines more accurate. Also, to get straight lines, I just held down shift and dragged the mouse. I like those solid thick lines.


With all that done, I turned off symmetry, made a clipping layer to put on top of the "silhouette" layer, and painted on the white reflections. At first, I just scribbled white where I think the light reflects the most. Then, I used the smudge tool, and smudged the scribbles across the rest of the silhouette. FInally, just applying another lil scribble of white to make the highlight stick out more. Also, to bevel it out a bit, I set my paint brush to clear, and drew over edges.

Lastly, I made a 3rd layer, put it below the silhouette but above the bar, selected the pixels of the red bar again, scribbled around the edges of the red bar, and then smudged them inward to get that dirty look, From that, I called it done.

I need to do it AGAIN, but better.