St. Patricks Tophat

All development of pixel art, maps and other graphics.


Post Reply
Scorpius
Peon
Peon
Posts: 12
Joined: 12 Jul 2016, 04:43

St. Patricks Tophat

Post by Scorpius »

So this is a St patricks top hat i made this is my first time trying to do pixel art i would like to know everyone's opinions.
I dont know how to add it here so i will put it as a attachment.
Attachments
stpatrickstophat.png
stpatrickstophat.png (1.13 KiB) Viewed 6179 times
User avatar
EJlol
TMW Furniture
TMW Furniture
Posts: 1224
Joined: 06 Sep 2005, 08:42

Re: St. Patricks Tophat

Post by EJlol »

I dont know how to add it here so i will put it as a attachment.
That is the right way. By adding it as an attachment, we are sure it will stay there. If you upload it to another website, most websites will remove the gif after a few years.

As for the pixelart:
The tie around the hat should curve a little bit up, because of the perspective. It should be parallel with the top face of the hat, hope that makes sense. If not, I can draw some pictures for you to explain it a little bit better.

Another suggestion I have is that black doesn't mean no shading. In the real world pure black almost doesn't exist. (If you want to know what pure black looks like I suggest searching for "Vantablack", you will see it looks quite weird.) You can still see shadows and highlights on black clothes. You can still some textures on black items, etc. So try to use dark grey as a base color for black, and then add some highlights and shadows to it. If you don't know how to shade, there are some great tutorials on shading pixelart on the internet. The same goes for the golden thing, it can also use some shading.
User avatar
Speiros
Novice
Novice
Posts: 72
Joined: 24 Jul 2017, 11:42
Location: Born in Candor, living as a nomad around Tulimshar and Woodland areas.

Re: St. Patricks Tophat

Post by Speiros »

It looks really good :D

So does Vantablack, to be honest...lol. What is the pixel colour code for it? -f-f-f-f-f-f?
_

Let me help you understand pirate talk.
Arrrr!!! (The letter "R", and any other sentence or emotion imaginable, excepting the following ones); Arrrr!!! (angry "R"); Arrrr!!! (relaxed "Aaahh"); Arrrr!!! ("Man Overboard! Quick! Grab the ropes! Loosen the raft!"); Arrrr!!! ("What a lovely day! Sun shining..."); Arrrr!!! ("Oh no. Looks like more rain. Are our garments dry? Can we stop using them as a secondary sail yet?")
User avatar
EJlol
TMW Furniture
TMW Furniture
Posts: 1224
Joined: 06 Sep 2005, 08:42

Re: St. Patricks Tophat

Post by EJlol »

#ffffff (sometimes shorten to #fff) would translate to rgb(255, 255, 255) to since FF in heximal is 255 in decimal (more explanation here). This means that the red, green and blue light (hence rgb) in your monitor are burning at their full strength. If you combine red, green, and blue light the result would be white. In other words #ffffff gives you white, and not black. For white the same applies to black, full white doesn't exist in the real world.

As for the value colour of vanta black, it probably would be #010101 since it still returns some colour (though very very less, a lot less than the normal black colour).

If you want to know more about colour value's and which colour has which value, I suggest playing with this and see what kind of colours you can create by changing the sliders.
User avatar
Speiros
Novice
Novice
Posts: 72
Joined: 24 Jul 2017, 11:42
Location: Born in Candor, living as a nomad around Tulimshar and Woodland areas.

Re: St. Patricks Tophat

Post by Speiros »

EJlol wrote:
As for the value colour of vanta black, it probably would be #010101 since it still returns some colour (though very very less, a lot less than the normal black colour).
.
Yeah, I put in the minus signs to show it is the complete opposite. if 000000 isn't dark enough, then I thought the minuses might be :lol:
_

Let me help you understand pirate talk.
Arrrr!!! (The letter "R", and any other sentence or emotion imaginable, excepting the following ones); Arrrr!!! (angry "R"); Arrrr!!! (relaxed "Aaahh"); Arrrr!!! ("Man Overboard! Quick! Grab the ropes! Loosen the raft!"); Arrrr!!! ("What a lovely day! Sun shining..."); Arrrr!!! ("Oh no. Looks like more rain. Are our garments dry? Can we stop using them as a secondary sail yet?")
Scorpius
Peon
Peon
Posts: 12
Joined: 12 Jul 2016, 04:43

Re: St. Patricks Tophat

Post by Scorpius »

ok EJlol i will try those things ty for the feedback. and ty DeadManWalking .
Scorpius
Peon
Peon
Posts: 12
Joined: 12 Jul 2016, 04:43

Re: St. Patricks Tophat

Post by Scorpius »

Ok i think i fixed it...
Attachments
stpatrickstophat2.png
stpatrickstophat2.png (1.27 KiB) Viewed 6126 times
User avatar
Reid
Lead Developer (SoM)
Lead Developer (SoM)
Posts: 1549
Joined: 15 May 2010, 21:39
Location: Artis
Contact:

Re: St. Patricks Tophat

Post by Reid »

I mainly see two problems:
First the perspective is wrong, it is an usual mistake that should not be hard to fix up on this hat, remember that we have a 45degree top view.
45 degree.png
45 degree.png (22.57 KiB) Viewed 6112 times
Then the color palette is a bit too green and saturated. https://betterin2d.com/2014/08/02/pixel ... r-palette/ this tutorial explain well the brightness and hue shifting needed for your palette.
Although, we already have some green palette in-game, you could use or check out the brimmed hat palette!
brimmedhat.png
brimmedhat.png (1.91 KiB) Viewed 6112 times
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
Scorpius
Peon
Peon
Posts: 12
Joined: 12 Jul 2016, 04:43

Re: St. Patricks Tophat

Post by Scorpius »

Ok ty Reid i will try to fix. :alt-0:
Scorpius
Peon
Peon
Posts: 12
Joined: 12 Jul 2016, 04:43

Re: St. Patricks Tophat

Post by Scorpius »

Ok How is this green? and i did not understand the thing about the perspective. Sorry :alt-8:
Attachments
Leprechaunhat.png
Leprechaunhat.png (1.31 KiB) Viewed 6102 times
User avatar
EJlol
TMW Furniture
TMW Furniture
Posts: 1224
Joined: 06 Sep 2005, 08:42

Re: St. Patricks Tophat

Post by EJlol »

That's because Reid didn't explain it at all, and just showed a picture that actually could use some improvement. The picture basically tries to explain at what angle the 'camera' is, and... that's it. It doesn't explain much :(

Image

This one is in my opinion a little bit better. In the top row you see the shapes that you want to draw, and the bottom row shows what you actually need to draw to draw in perspective. Because the camera is at a 45 degree angle, the height gets 'squashed'.

You can see when the coin rotates, the height changes (the top one is very thin, almost no height, the bottom one is the full height).
Image

I hope this explains it a little bit better. Now to draw the correct perspective, all you need to do is multiply the height by 0.7. So if you draw a circle, and that circle is 32 pixels height, and 32 pixels width, to draw in perspective you need to draw a circle that is 32 * 0.7 ~= 22 pixels height. So a 22 pixels height and 32 pixels width.

I hope this explains it a little bit better.
Attachments
perspective_example.png
perspective_example.png (4.54 KiB) Viewed 6098 times
Scorpius
Peon
Peon
Posts: 12
Joined: 12 Jul 2016, 04:43

Re: St. Patricks Tophat

Post by Scorpius »

Ok that makes some sense i will try to do that. ty :alt-0:
Post Reply