HUD WIP
Printed From: Pixel Joint
Category: Pixel Art
Forum Name: WIP (Work In Progress)
Forum Discription: Get crits and comments on your pixel WIPs and other art too!
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=16220
Printed Date: 09 September 2025 at 7:54am
Topic: HUD WIP
Posted By: -
Subject: HUD WIP
Date Posted: 25 April 2013 at 10:51am
I'm working on a hud on fighting games. Its an energy bar that displays the health of the character. |
Replies:
Posted By: AtskaHeart
Date Posted: 25 April 2013 at 12:32pm
| You should get rid of the banding. |
Posted By: -
Date Posted: 25 April 2013 at 8:47pm
|
What do you mean by that?
|
Posted By: Etheric_Shock
Date Posted: 26 April 2013 at 4:47am
| The blue and gray parts. The lines of color are matching up at exact places, creating lines. The pixels are popping out too much when you do this. If you still don't understand, go to the resource/tutorial section and try to find something on banding. |
Posted By: -
Date Posted: 26 April 2013 at 7:18am
|
I went through it, i still can't understand that banding.
Is it the black outline that needs to be removed or is it the gray part? Can you show me? |
Posted By: gnodab2
Date Posted: 26 April 2013 at 7:43am
|
The pixels are in differetn sizes... thats confusing me. What program did you use? How is your workflow making pixels? |
Posted By: -
Date Posted: 26 April 2013 at 8:02am
I made improvements.
|
Posted By: Noburo
Date Posted: 26 April 2013 at 8:31am
| You still haven't addressed the banding issue. If you don't know what banding is, browse through the http://www.pixeljoint.com/forum/forum_posts.asp?TID=5692 - Noobtorials thread over in resources. There are a few posts that go over it. |
Posted By: r1k
Date Posted: 26 April 2013 at 9:03am
this is the banding we're talking about: Look up how to do anti-alaising. It can give a more effective solution to that section. also, you should post your image at 1x, since the forum has built in zooming if you click an image. It also lets people edit your image to help you. Youve also enlarged your image to some wierd proportions where each pixel isnt the same size anymore. |
Posted By: -
Date Posted: 26 April 2013 at 9:45am
Ok I think I removed that banding now.
|
Posted By: -
Date Posted: 27 April 2013 at 8:35am
|
Umm... Any comment here?
|
Posted By: r1k
Date Posted: 27 April 2013 at 9:52am
like I said you might get more response if you post it at 1x and without mixed resolutions. The colors are too saturated. Try making some kind of gradients in the bars so they arent just solid colors. The design looks kind of like a sideways hammer. Will there be text above the bar or something? Heres an example of how to use anti alaising. the design is a little questionable. I would look at some other fighting games from ideas. Heres a few I found: http://3.bp.blogspot.com/-EbCSGVOCcsI/T1thOLfe8OI/AAAAAAAACPM/6ypvGVD-3Rg/s1600/blazblue-screen.jpg - http://3.bp.blogspot.com/-EbCSGVOCcsI/T1thOLfe8OI/AAAAAAAACPM/6ypvGVD-3Rg/s1600/blazblue-screen.jpg http://screens.latestscreens.com/wii/screenshots/guiltygearxxaccentcore/Guilty_Gear_Core_Screenshot_Wii_UK_1957.jpg - http://screens.latestscreens.com/wii/screenshots/guiltygearxxaccentcore/Guilty_Gear_Core_Screenshot_Wii_UK_1957.jpg http://www.gametrailers.com/side-mission/files/2012/04/street-fighter-IV-Volt.jpg - http://www.gametrailers.com/side-mission/files/2012/04/street-fighter-IV-Volt.jpg |
Posted By: -
Date Posted: 27 April 2013 at 11:11am
Its better than the previous ones I made that's for sure. Also I wonder if i did too much banding for the blue.... |
Posted By: Noburo
Date Posted: 27 April 2013 at 12:34pm
| I don't mean to be harsh, but you aren't going to get many more responses to your threads if you continue ignoring basic requests from people trying to help. It makes it very difficult for us to make any kind of edits when your pieces are zoomed in, as well as with the pixels sizes not matching up properly. As r1k has mentioned a couple times already, it really is in your best interest to post at a 1x resolution, similar to the edit he made. (Even if the end result is intended to be at 2x) Also, your most recent image was at some point in time saved as a jpeg, which created compression artifacts, essentially ruining the piece. Do you have another version prior to it being saved as a jpeg? Once you take care of these, I would be happy to help further, and go over in more detail the banding issues. |
Posted By: -
Date Posted: 27 April 2013 at 11:03pm
|
So how can I post it in 1x resolution in imageshack?
|
Posted By: Numberplay
Date Posted: 28 April 2013 at 7:34am
|
By making the picture's pixels 1 pixel wide only.
Here's how 1x resolution looks like 
|
Posted By: -
Date Posted: 28 April 2013 at 10:09am
Now? |
Posted By: Noburo
Date Posted: 28 April 2013 at 6:56pm
|
It is definitely a move in the right direction, though you've still got a ways to go. Keep with it! First off, so you can understand better what banding is, take a look at this more in depth write up on the topic.
http://www.pixel.schlet.net/#C2 - http://www.pixel.schlet.net/#C2 It should automatically scroll you to the correct section, if not, make sure you are reading the "Banding primer" section. Now after you have read through that and get a better understanding of what banding is, take a look at the edit below. I have included r1k's edit in the image below as well, (Also borrowed a few of his colors.) as he very cleanly demonstrates a way of removing the banding, simply by increasing the size of the border. In my edit, I tried to more closely match what you have created with the smaller borders, and was able to remove most of the banding through use of anti-aliasing. If you want to go this route, hop on over to the Noobtorials section I previously mentioned and read up on it. Also, in the blue gradient you created, you use a few too many colors, almost to the point that it has started to look blurry. Save this picture, zoom in and really look over it. Good luck! 
|
Posted By: -
Date Posted: 30 April 2013 at 9:27am
|
Posted By: Noburo
Date Posted: 30 April 2013 at 4:30pm
| So by the looks of your most recent update, you are really missing the point of what we're saying. Did you read the link I posted? |
Posted By: -
Date Posted: 08 May 2013 at 10:45am
|
I thought banding was suppose to mean fat pixels you know like too many colors for one object.
I'm sorry but I just can't understand that banding quite well. Its really that difficult for me. |
Posted By: SJL
Date Posted: 09 May 2013 at 3:07pm
Hopefully this can shed some light on the situation
From left to right: A line without AAing, a line with banding, and a line with AAing. Banding gives it that undesirable choppy effect, rather than the smoothness AAing does. Banding is basically when you try to antialias but pretty much just line up the antialiasing ("blending") color with the outline. |
Posted By: -
Date Posted: 12 May 2013 at 12:05pm
|
I got it now thanks.
|