Main menu WIP: C&C needed
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=16294
Printed Date: 09 September 2025 at 9:32pm
Topic: Main menu WIP: C&C needed
Posted By: Raf
Subject: Main menu WIP: C&C needed
Date Posted: 09 May 2013 at 4:15pm
This image is meant for the title / main menu screen of a game of mine. I've been working for quite a while now on getting the title right (following c&c of a PJer). I think the shape of the letters is pretty much done now. The problem, however, is finishing it. I've tried an outline in several shades of blue, but none quite worked. Then I tried a background kinda thing like here, but it looks plain weird. So any help in how I can get the title from OK to great, are more than welcome! Alongside with that, I've been trying out drawing rain in the window, but it always ends up looking odd. Does anybody know of tutorials or such on this sort of thing? Thanks in advance, Raf |
Replies:
Posted By: RileyFiery
Date Posted: 10 May 2013 at 9:28am
| Could always try less detailed rain, long lines basically. As the title I would imagine Raindrop Racers would be more prominent. http://www.mobygames.com/images/shots/l/169755-diddy-kong-racing-nintendo-64-screenshot-the-title-screens.jpg - Example |
Posted By: Raf
Date Posted: 11 May 2013 at 6:35am
Alright, thanks! I've made the title more prominent, and gave the long lines rain a try. This is the result:
Now I'm wondering whether or not I need to add a pattern to the letters, the backdrop, or to both. The rain I'm not too sure of either. It looks OK to me, but it's best to double-check :P Is it OK like this, or should it be thicker? In the game itself, I'll animate it, but I can only do so when knowing exactly what it should look like. Is this rain good, feeling-wise, or should I change the colour / amount of lines / length / ... ? |
Posted By: Raf
Date Posted: 11 May 2013 at 12:28pm
|
Turned the letters into a font (which only works on multiples of 12 as size, making it sliiiightly useless...)
Added the buttons, the sponsor placeholder and credits / help / mute buttons. The result is this: 
Now I can look into animating the buttons (when hovering over them) and animating the rain. If anybody has any suggestions on how to improve this further, I'd love to hear them! |
Posted By: RileyFiery
Date Posted: 11 May 2013 at 1:26pm
|
I would add a wallpaper design to the wall, or something like a poster. Other than that, it's looking pretty good to me. You could go with more varying size of rain. http://www.pixeljoint.com/pixelart/14360.htm">*  This one isn't really pixel art, but I think you could do the top effect on the top of the window to make it look like he's staring at storm clouds. http://1.bp.blogspot.com/-b-jwHmdcD4I/Tq4pntgVfJI/AAAAAAAABDg/r87smBc1_Bw/s1600/pixel-rain.jpg - http://1.bp.blogspot.com/-b-jwHmdcD4I/Tq4pntgVfJI/AAAAAAAABDg/r87smBc1_Bw/s1600/pixel-rain.jpg |
Posted By: Raf
Date Posted: 11 May 2013 at 3:14pm
Followed your suggestions of the wallpaper, the more varying lengths of rain, and that effect at the top of the window. I changed the concept a bit, adding a dark layer on top and a less dark one below it, giving the rain a darker colour in the top one as well. You can't fully see it, as the title goes in front of it. I think it looks amazing now! Now those buttons, do they need sprucing up, or are they good the way they are? In my eyes, they're still lacking (yet I don't know how to improve them, or why they'd be lacking), but my eyes have seen them from too close, so I'd rather double-check with you guys. Edit: Oh yeah, I also changed the colours of one button, to what it'll look like when moving the mouse over it. |
Posted By: Numberplay
Date Posted: 12 May 2013 at 8:45am
| Shouldn't you add some scenery in the window? |
Posted By: jalonso
Date Posted: 12 May 2013 at 2:30pm
|
Your piece was sent back because we had no idea what it was. it looked unfinished and you said nothing in the description explaining it was a title screen that was in development. It simply looked empty and WIPish so lots of PJers just voted NO, k. Also, fix the figure so its more likeable or at least readable. Cartoony, goofy whatever the style it should read instantly ;) ------------- |
Posted By: Raf
Date Posted: 12 May 2013 at 3:13pm
|
No worries 'bout sending it back. Compared to how it's progressed now, it's indeed not good at all.
I'll see what I can do about the figure. It's a tricky part, as it doesn't show much, just a back. |
Posted By: jalonso
Date Posted: 13 May 2013 at 5:37am
|
That the figure is facing away from the viewer makes no difference. You can make the hair interesting through lighting, shadows, color, etc. That the shirt is similar in color to the shirt is not that good a design choice. The shirt can also have stripes or something to help stylize things. Find a ref image of a figure in a similar pose to improve its anatomy too. Again, it can be simple, cartoony or whatever 'look', just work on improving the design of things. ------------- |
Posted By: Raf
Date Posted: 13 May 2013 at 7:10am
|
Oops, pressed "Post reply", thinking it would take me to a reply form. It actually submits an empty form, instead Confused Anyhoo, I've tried several colours out for the figure. This is the one that seems to work best:  It does give the entire image a completely different feel. It feels more depressing. I've tried several warm colours, but none seem to work. They'd keep the image's feel better, though. Now to add some more details. The tricky part with the hair, is that, if I add more highlights, it either quickly becomes way too much, or it'll look like Cthulu. |
Posted By: Raf
Date Posted: 13 May 2013 at 2:06pm
* Adjusted the colours of the hair a bit * Cleaned the lines of the hair up * Added more detail to the hair * Added a sh*tflap and polkadots to the... piece of clothing. I'm at 24 colours at the moment. |
Posted By: Numberplay
Date Posted: 13 May 2013 at 7:12pm
| Nothing stops you from using existent colors to replace some others. Also I feel like you would need AA on the character. |
Posted By: Etheric_Shock
Date Posted: 14 May 2013 at 4:24am
| I like where this WIP has gone. :) |
Posted By: Hapiel
Date Posted: 14 May 2013 at 4:57am
|
Hey Raf, Some suggestions: Make the polka dots bigger and more obvious, or remove them! Right now they look kinda funny Perhaps differ in the rain color, some bright some dark so there is the perception of depth. More dark ones than bright ones. Concider redoing the whole RAINDROP RACERS font. Be consistent with line width (both in top and bottom half. One width for all horizontal and one width for all vertical lines), possibly base your font on an existing font. Maybe make the I taller and the drop smaller. THe font for the buttons look fine. ------------- |
Posted By: Raf
Date Posted: 14 May 2013 at 12:10pm
|
* Made the polka dots bigger
* Anti-aliased the girl's clothes * Differed the rain color * Changed the title font 
I'm not too happy about the title font. I thought the previous one was better. |
Posted By: Mr.Fahrenheit
Date Posted: 14 May 2013 at 2:45pm
I made an edit of your anti-aliasing. 
I used colors from the image already rather then the ones you seem to have created for that express purpose. I cleaned it up to be less blurry and I used some dithering to smoothen the aaing levels. |
Posted By: Raf
Date Posted: 14 May 2013 at 2:55pm
|
Thanks! I was worried about a huge colour explosion from the AA and the additional rain colours, but couldn't find any colours already in the pic that fit. It's great to have it done properly. I'm gonna put it next to my attempt, to see which colours you took, and how you did it :D
Edit: Oh... crap. Can't find a pattern in it, a logical way of dealing with it. The AA I did, was following this tutorial: http://fc09.deviantart.net/fs71/f/2011/165/2/a/anti_aliasing_tutorial_by_blue3-d3iwd6y.png It says to change the colour of each pixel that touches at least two pixels of the other colour. That's something I can do. What you did seems more done on feeling (some get 3 pixels of one colour before fading out while others get 2, yet there's no difference between the pixels they touch, the size of the line, ... ). It means I'll have to find a way to get the hang of this feeling, instead of being able to reason my way out of which pixels should get what colour 
Edit edit: Waitwaitwait, you seem to stop on exactly 1 pixel before the end of the line for most lines, except the really long ones, and fill up with the first colour, then fade out -- again, except for the really long lines. Found rule nr. 1 to follow 
|
Posted By: Raf
Date Posted: 15 May 2013 at 7:43am
|
* Added Mr. Fahrenheit's AA (still haven't fully figured out how to do that, but at least it makes a great reference) * Went back to the old font, and changed it a bit. The sizes left and right were always the same, same as sizes up and down. I guess it just looked differently, as the right sides tend to be rounded while the left sides tend to be square. I fixed that up a bit, and am quite curious on your opinions on it.  |
Posted By: king_bobston
Date Posted: 15 May 2013 at 11:24am
|
Your improvement with this piece is awesome! I'm not an expert with AA, but it may be helpful anyway; When I use AA I imagine a non pixelated line crossing through the pixelgrid (zoomed in). Depending on how much of the line hits a pixelblock or how many pixelblocks are hit within the grid I decide to add AA. As a rule of thumb more AA means smoother lines but less crisp look, less AA means more crispness but less possible un-jagged lines. I hope that makes sense. There is a lot more to AA, but as said I'm not experienced enough. |
Posted By: jalonso
Date Posted: 15 May 2013 at 2:49pm
|
Doing good. I still would like to see something done with the hair so its no a 'ball'. ------------- |
Posted By: Raf
Date Posted: 15 May 2013 at 2:54pm
| You mean like adding a hairpin / ribbon / ..., making a different hairstyle, or adding more shading? |
Posted By: jalonso
Date Posted: 15 May 2013 at 3:20pm
|
I know this is forward facing and a different style but I just mean break up the 'ball' shape http://www.pixeljoint.com/files/icons/newportrait.gif">
 http://www.pixeljoint.com/files/icons/full/dbase.gif"> ------------- |
Posted By: Raf
Date Posted: 15 May 2013 at 3:35pm
| Ohhhhhhhhhhhhhhhhhh! Now that guy from Mystic Quest (Final Fantasy Adventure) his hair "sticking out" (my brothers and I always laughed about that) makes sense! Alright, I can do this. Gonna look for some references for this one's hair and then I'll fix it right up! |
Posted By: Raf
Date Posted: 15 May 2013 at 4:40pm
First attempt. I'm not fully satisfied with it, but could do with some pointers before I mess it up completely.
|
Posted By: Mr.Fahrenheit
Date Posted: 15 May 2013 at 6:35pm
| For my AA I pretty much just tried to stop the aa before it became banding and lined up with the steps of the actual shirt. It is pretty heavily based on feeling but just make sure to check back at the 100% zoom to make sure it isnt too blurry or not aaing enough. For the longer steps like on the left side, I had to do some " http://www.wayofthepixel.net/index.php?topic=3346.0 - dithersmoothing "-ey stuff just to make it smooth it enough. |
Posted By: Hapiel
Date Posted: 16 May 2013 at 4:44am
|
Hey Raf, what is the dark blue thing in the top part of the sky? magic shadow? a cloud? whatever it is, make it more obvious. Also, I am against dithersmoothing but the opinions on this differ of course. Perhaps work some more on your title, texture your letters and give them some depth. I prefered the other typeset you tried out. ------------- |
Posted By: Raf
Date Posted: 16 May 2013 at 4:51am
|
I added two layers of clouds: the lighter one, and a darker (more closer to the viewer) one. If it looks odd, I can change it to be just the lighter one. The letters are still troubling me, yep. The ones I still got, I'm still not 100% happy with. I think they're better than the other typeset, though. I got no idea how to improve either, so I'm leaving them like this for now. Adding texture to them might be a good idea, though. I was initially thinking of giving it this sort of texture:  Which is why I prefer the rounded typeset. Is the hair of the girl ok now? It still seems off, but I can't put my finger on why. Edit: Ok, that type of texture isn't going to work. The letters don't have enough mass and I don't have enough skill to pull that off. Time to look for another possibility |
Posted By: Raf
Date Posted: 16 May 2013 at 6:08am
|
Here we go. Put the other typeset back, as it might have worked better with the other idea I had (diagonal rain pattern). Had to change the colours a bit and add two outlines. Also took out the darker blue at the top of the window. I prefer the pic with that. It feels like it's lost some depth with it gone.  |
Posted By: RileyFiery
Date Posted: 16 May 2013 at 11:59am
I think the title should be more centered and the menu buttons should be more to the right. This is more of a personal preference though.   Any who, I'm glad you kept working on this. It's quite the improvement from your first attempt. The title text, you might be better off matching it to the buttons, or go for a round bubbly look http://round bubbly look - . http://https://lh5.googleusercontent.com/-p5CBsIwBbww/TfhSqdNDBeI/AAAAAAAAEV4/g1OUQ7p5rjE/s800/PopTag.png">  https://lh5.googleusercontent.com/-p5CBsIwBbww/TfhSqdNDBeI/AAAAAAAAEV4/g1OUQ7p5rjE/s800/PopTag.png - https://lh5.googleusercontent.com/-p5CBsIwBbww/TfhSqdNDBeI/AAAAAAAAEV4/g1OUQ7p5rjE/s800/PopTag.png ^- Better example http://https://lh5.googleusercontent.com/-p5CBsIwBbww/TfhSqdNDBeI/AAAAAAAAEV4/g1OUQ7p5rjE/s800/PopTag.png - |
Posted By: Raf
Date Posted: 16 May 2013 at 12:43pm
| That bubbly look is what I've tried, but simply can't get right. I always end up with a weird light spot with plenty of corners, at best. |
Posted By: RileyFiery
Date Posted: 16 May 2013 at 8:27pm
Here's an example I whipped up for bubble text: (Too lazy to do the E and S) Here it is before I applied highlights, a shadow, and thicker outlines:  I suck extremely at making fonts, but hopefully this helps. |
Posted By: Trevos
Date Posted: 16 May 2013 at 11:16pm
Hi. What do you think about this "dragon"? |
Posted By: jeremy
Date Posted: 17 May 2013 at 2:03am
| I think you should start your own thread for it! |
Posted By: Raf
Date Posted: 17 May 2013 at 3:14am
|
Originally posted by RileyFiery Here's an example I whipped up for bubble text: (Too lazy to do the E and S) Here it is before I applied highlights, a shadow, and thicker outlines: I suck extremely at making fonts, but hopefully this helps. Thanks! I've started working on this last night, with some great help from Dragonmarx, but had to stop as it was already way past bedtime. Finished it today, nicking your colours and the shade idea. Here's the result:  Edit: Btw, the main problem that kept me from getting started well on the letters, was that the letters were darker than the background. That seems to ruin the bubble effect. |