Could always try less detailed rain, long lines basically. As the title I would imagine Raindrop Racers would be more prominent. Example

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!

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.

Edited by Raf - 11 May 2013 at 3:16pm

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.

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.

* 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.

Edited by Raf - 13 May 2013 at 2:08pm

I like where this WIP has gone. :)

* 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.

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

Edited by Raf - 14 May 2013 at 3:03pm

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.

You mean like adding a hairpin / ribbon / ..., making a different hairstyle, or adding more shading?

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!

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 "dithersmoothing"-ey stuff just to make it smooth it enough.

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


Edited by Raf - 16 May 2013 at 5:11am

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.
https://lh5.googleusercontent.com/-p5CBsIwBbww/TfhSqdNDBeI/AAAAAAAAEV4/g1OUQ7p5rjE/s800/PopTag.png
^- Better example


Edited by RileyFiery - 16 May 2013 at 12:19pm

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.

I think you should start your own thread for it!