Photoshop: How to Create a Health Bar?
1Link Coming Soon: https://mc-game-zone.wixsite.com/mc-game-zone/coming-soon-01-1
PSD File: https://www.dropbox.com/scl/fi/fgr396qldva8ffltu8nko/hp_bar.psd?rlkey=k266ak5hi6yarc81pipr8v999
1. New, width 1440, height: 900
2. Retangle Tool, Fx Effect, Color Overlay, Gray, Image, Trim, You can make you're HP bar whatever color or shape, just an Example. Trim means, Photoshop will cut stage window to only your object shape, and get rid of background you do not need, saving space usage
3. New Layer, Fx Effect, Color Overlay, Light Blue, Edit, Transform Path, Skew, Ctrl T, Scale, Fx Effect, Stroke, Size 5px, Position Stroke Inside
4. Hold down Alt and drag over another hp line these are you're health points, which will turn red when you get hit.
5. Can name you're layers, hold Shift and press right key to move each hp line over about 5 spaces to the right, to get them even, to move them a inch away just use the right key arrow button
6. Edit, Transform, Skew, Fx Effect, Stroke, Size 5, Position Inside, to put Stroke inside the Hp Bar
7. Now we need a face, and we can change the face to getting hit at the same time losing a bar line color from blue to red
8. Drag new layer to the top, just hold down on the left click button on the mouse and drag to the top in the layers area, want the face to be on top of everything
9. Round Rectangle Tool, Overlay make background White, Stroke, Size 4, Color: Green, Skroke Outside
10. New Layer, create the face, make each item created on a new layer, so you can modify it, use the Clipping Mask to hide objects, face window has a clipping mask on the head to show less of the face window, but show a oval look
11. Save each hp bar, from full hp health to 0, like shown, Save it out as a PSD, then as each piece from full to 0 hp health as a png
12. Right click on the layer you want to modify, if you can not locate it in the layers area, Photoshop highlights the layer on Right Clicked on, Fx Effect, Color Overlay, Red, if you want the correct color of Red, copy the #ff0000 number at the button
13. Repeat the process.... the correct shade of Red using those numbers #.........
14. Going to start showing a change in the face, he is getting hit alot, make some battle damage on face, change the rectangle box stroke to yellow, used the Paint Brush and Smudge Tool to also show damage
15. You can also use the eye dropper to get the correct shade of Red too
16. Adding in a Flash from all Red to all Yellow to show more of a impact, before timing out, and going to End Game.
17. Faster way, just bring in the last png image, Image, Adjustments, Hue/ Saturation, drag Hue: to +35 to see the change, so from Red to Yellow, flashes for about 5 seconds then moves to End Game
18. Then you would import all these hp png images into Game Maker Studio to animate and use a code controller to make it just down when getting hit, and jump up when getting health. There is a video on that, for adding HP in you're game using Game Maker Studio