AuthorTopic: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup  (Read 12581 times)

Offline Endpiece

  • 0001
  • *
  • Posts: 28
  • Karma: +0/-0
    • View Profile

[C+C] [WIP] Menu Design/Beat-Em-Up Mockup

on: July 23, 2009, 09:07:20 pm
I'm currently working on a website that acts as a webcomic host and online portfolio. At the moment I'm working on the flash splash of the site - a functional front-end that allows newcomers and regular visiters to find the pages they want to visit. Since my site deals with comics and arts, I needed two buttons for each category (latest and archive) alongside a blogroll link and 'about' page.

The first idea involved using parodies of videogame boxes as navigation buttons, the results of which are displayed below. They're alright but not my cup of tea. If anyone else wants to use them, go ahead.



The second, current idea uses a more streamlined colour scheme to go with the website (mimicking the Nintendo Game Boy's 4-colour palette). Obviously the picture will be zoomed in to at least 200, maybe 300% for the final menu. Below is a WIP .gif preview.



Highlighting a sign in the final menu will change the animation of the guy's arm to pinpoint your choice, whilst highlighting the guy himself will bring up the 'about/faq/email' page.

Question for you veterans and newcomers - what changes can I make to this menu, aside from the obvious need for a background? Are there any other stylistic or compositional mistakes I need to fix?
« Last Edit: September 15, 2015, 02:21:15 pm by Endpiece »

Offline LoTekK

  • 0010
  • *
  • Posts: 215
  • Karma: +1/-0
    • View Profile
    • LoTekK.com

Re: Menu Navigation Design

Reply #1 on: July 24, 2009, 08:46:40 am
Compositionally, my initial feeling is that the guy should be on the left, pointing right. Same deal with the orientation of the arrows (first, and consequently last, arrows should point right). Love the art itself, though, and the GB palette made me smile.

[edit]Quick edit:

[/edit]
« Last Edit: July 24, 2009, 08:57:29 am by LoTekK »

Offline honored

  • 0001
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile

Re: Menu Navigation Design

Reply #2 on: July 24, 2009, 12:04:53 pm
Compositionally, my initial feeling is that the guy should be on the left, pointing right. Same deal with the orientation of the arrows (first, and consequently last, arrows should point right). Love the art itself, though, and the GB palette made me smile.

Hmm the right arm (on the picture the most on the left) looks a little odd.
Maybe you could fix this up?

Offline Endpiece

  • 0001
  • *
  • Posts: 28
  • Karma: +0/-0
    • View Profile

Re: Menu Navigation Design

Reply #3 on: July 24, 2009, 12:57:46 pm
Compositionally, my initial feeling is that the guy should be on the left, pointing right. Same deal with the orientation of the arrows (first, and consequently last, arrows should point right). Love the art itself, though, and the GB palette made me smile.

Ah, right! I didn't realise it at first but from a Western standpoint left-pointing-to-right makes more sense. Cheers!

Hmm the right arm (on the picture the most on the left) looks a little odd.
Maybe you could fix this up?

I think the guy's sleeve is what's bugging me the most - gravity's meant to be pulling it down, but it has a very unnatural shape in the image at the moment. At least I think that's what you meant - the arm length's already been explained in the first post.

I'm going to have another go at editing the picture. I will flip it horizontally eventually, but the way things are set up on the document (layers, layers everywhere  :-[) I don't want to flip it until I have a background in place. Any ideas?

EDIT:



Changed the hand a bit - I wanted it to be more detailed, but not to contrast too much with the character model.
« Last Edit: September 15, 2015, 02:22:05 pm by Endpiece »

Offline Endpiece

  • 0001
  • *
  • Posts: 28
  • Karma: +0/-0
    • View Profile

Re: [C+C] [WIP] Menu Navigation Design

Reply #4 on: September 21, 2009, 02:09:52 am
I'm in the midst of creating a videogame screenshot mockup for general pixelart practice. The general scheme I'm going for is the Game Boy Color's palette, as seen in the "Mock the Ocean's Sphere" thread.

The idea is a RPG battle set in a graveyard - four (!) characters on the hero's team, and a giant mook and braggart/archrival on the 'bad' side. Each is color-coded (red/blue/yellow/black/green) save for the giant mook, whom I'm still working on. Some draft designs:



Generic tree.



Initial graveyard locale. Nice top-down view, but considering switiching out for a more side-on approach. Beta designs of characters (brown/yellow-coloured character currently being 'worked on' as we speak - it really looks unreadable there).



Progress shot of three characters. I'll post more as they're finished.

The big question I have is: how do you get the absolute most out of the absolute least? That is, how would you be able to create great sprites like the ones from the GBC Blue Ocean or SNES Final Fantasy games with such a small size and smaller palette? It's really quite frustrating, especially if your first thoughts on such a project were as ignorant as mine ("Oh, fewer pixels, quicker job!").

22/09/09 Edit:

« Last Edit: September 15, 2015, 02:21:50 pm by Endpiece »

Offline Endpiece

  • 0001
  • *
  • Posts: 28
  • Karma: +0/-0
    • View Profile

Re: [C+C] [WIP] Menu Navigation Design

Reply #5 on: September 23, 2009, 05:03:50 am
23/09/09:



This probably won't be permanent - the background needs a greater sense of spatial depth (the character outlines clash with the background even now) and it's mirrored at the moment. I had also intended a bleaker graveyard theme in this mockup, but as I started studying previous Game Boy and Neo Geo Pocket screenshots, the palette got a tad out of hand. The giant mook isn't finished either - still has an excess palette, and dodgy lower body. We'll see how things go later on.

Question: Pixelation has a forum feature where clicking on a picture balloons the resolution of the image, as in a zoom-in. In Firefox the image is filtered - is this supposed to happen?

The characters are just standing around at the moment, yes. I'd anticipated a cutscene before the actual fight starts to get underway. Once I've got the designs sorted out properly, I can get into drawing attack/hurt sprites.

Edit:



Colour adjustment. Attempting to stick to the 'max 4 colours per background tile' rule. Unless I've goofed up somehow and that's NOT how the GBC worked? I'll look it up again in the morning.
« Last Edit: September 15, 2015, 02:28:16 pm by Endpiece »

Offline ndchristie

  • 0100
  • ***
  • Posts: 2426
  • Karma: +2/-0
    • View Profile

Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup

Reply #6 on: September 24, 2009, 01:41:27 pm
That is how it worked but you're limited to the number of 4 color palettes you're allowed to assign.  The specs are somewhere on this forum if you look a bit :).
A mistake is a mistake.
The same mistake twice is a bad habit.
The same mistake three or more times is a motif.

Offline Endpiece

  • 0001
  • *
  • Posts: 28
  • Karma: +0/-0
    • View Profile

Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup

Reply #7 on: September 24, 2009, 03:44:37 pm
Found said specs in the Blue Sphere thread of all places. Why didn't I remember that? Anyway:

- Use GBC's Limitations
   - 8x8 Tiles
   (done and done)
   - 8 four color palettes for the BG
   (Ah, this is the one I think I'm going to have trouble with. I'll start combing through the picture for excess colours.)
   - 8 four color palettes for the sprites (one of the four being transparent)
   (in other words everyone has a max of three colors, so that's fine - except for the mook, who I still have to work on)
   - RGB555 for the colors (optional for those who can't set the colors that way)
   (trying to sort this out in GraphicsGale though its a tad bitchy on the issue)
   - 160x144pxls
   (done)
- Be clever with your tile usage!
- Animation is optional

EDIT:





Not sure what to do about the score/health counters, but other than that the BG uses 5 palettes(!) with overlapping colours. I can probably optimise it further, but would it be worth the effort?
« Last Edit: September 15, 2015, 02:36:01 pm by Endpiece »

Offline blumunkee

  • 0010
  • *
  • Posts: 325
  • Karma: +1/-0
    • View Profile

Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup

Reply #8 on: September 24, 2009, 09:22:29 pm
The Batman thread by Arne also has a good discussion of NES limitations.

For the backgrounds, I'd say use the blue as a global background color and make clever use of the other 3 colors.

These are looking quite good. Love the characters. The design of the yellow thing with boobs slightly confuses me thou.

Offline Endpiece

  • 0001
  • *
  • Posts: 28
  • Karma: +0/-0
    • View Profile

Re: [C+C] [WIP] Menu Design/Beat-Em-Up Mockup

Reply #9 on: September 24, 2009, 10:07:12 pm
For the backgrounds, I'd say use the blue as a global background color and make clever use of the other 3 colors.

I'll test that out now, and see what I can get from it. Maybe a nice mix of blue and green to better fit the clocktower.

Quote
These are looking quite good. Love the characters. The design of the yellow thing with boobs slightly confuses me thou.

Colette's reference design was actually an amalgamation of several different designs - we had this project about the ideal comic-book/cartoon girl, and everyone threw in random suggestions, like the front/back bangs, large tits, giant robot hands, hotpants, etc. I think some of the artists did a good job with it, but I'm finding it difficult to make a standout design for Colette that doesn't look like a complete mess. If you've any suggestions, I'm all ears!

Edit: thanks, Pawige!
« Last Edit: September 15, 2015, 02:36:25 pm by Endpiece »