[C+C] Title Screen Conundrums

[Zizka]

Hello guys!

I have no experience making title screens or compositions in general. On the other hand, I am under the impression that a title screen can make or break a game (to some extent).

So I need help with just about anything. Mostly composition from the pros, who can guide me in the right direction.

1st version:


2nd version:


3rd version:


Should I stick to one font or should I use many?

The idea is to have the main character sit on a top of ruined robots. He is blowing the smoke of his volt gun.

Am I along the right path here?

[Drazelic]

Your colors are all over the place. Like, it seems like every single robot has its own color palette, and the result is that the image feels more like a collage- or a deviantart-tier sprite comic- than a coherent singular screen. Heck, even your font is made of different configurations clashing with each other. Fire text, cookiedough text, metal text- pick something and stick to it, I'd say.

Work the title screen as a whole, I'd suggest. Rather than focusing on individual robots, layout the palette and shadows and highlights in big general blobs first, and definitely try to unite the palette a bit more.

Instead of thinking of the pile as a bunch of robots, think of it as one big macro-entity composed of robot-shaped granules? Treat it as a painting, rather than a collage.

Most of this advice is mindset-stuff rather than actual design tips, unfortunately, so I understand if you don't find it that helpful.

[Decroded]

firstly what is the resolution of the game?
You've got 2 res here so not sure which is more appropriate.

I'm not a fan of any of these compositions so it's good u haven't developed them too far.
All the elements are broken up and priority is all over the place.

I think its good to tell some kind of story on a title screen that is relevant to the game's content.
perhaps tell us more about the character and the elements here.
is the hair dryer a weapon?
is the cigar significant?
whats the deal with the robots etc?

I'm thinking u have the character up fairly close and we use hair dryer cord and cigar smoke to make some interesting lines to create drama.
its good if the hero takes priority after the text and then there's stuff happening in the background like perhaps we see the evil robolord commanding his bots into battle or whatever.

its also maybe a good idea if the scene works with and without the text so u can show the screen then drop in the text to dominate the screen but don't stress about that if its too much to think about.

[Zizka]

firstly what is the resolution of the game?
You've got 2 res here so not sure which is more appropriate.

640x480.

is the hair dryer a weapon?
is the cigar significant?
whats the deal with the robots etc?

The main character is the toaster. The hair dryer is an enemy.

There's no cigar, he's blowing the smoke off the power chord arm, his weapon  .

The robots are his enemies.

its good if the hero takes priority after the text and then there's stuff happening in the background like perhaps we see the evil robolord commanding his bots into battle or whatever.

The main bad guy, is Doctor Dough, a slob of dough.

I had done this before reading your reply:


I'd like the bad guy to be in the shadows behind, with his hands creeping like he's about to grab Pan (the slice of bread in the toaster).

I'm thinking u have the character up fairly close and we use hair dryer cord and cigar smoke to make some interesting lines to create drama.

I don't understand how to do this. Could you do a rough edit please ?

[IrresponsibleFreelancer]

Sorry im not good enough to do an edit but i can point out some problems i see with the hands.  The pinky is the same size if not bigger than the middle finger which makes no sense, the pinky is also weirdly in front of the ring finger if you look at it.  Finally the thumbs final digit is too long and thin.  This is easy to figure out if you just look at your own hand as you sketch it out.  They all look good (and i personally would stck to the toaster font for the whole title cuz it looks awesome but watch your colours make sure they go well together use a colour wheel if you have to and worry about staying faithful to the colours of each character later or not at all.

[Zizka]

Thanks for the feedback!

Is this any better?

[Zizka]

So it's been over a week and I thought I'd share an update, too quiet around this here place. 



I think it's starting to shape up.

Again, criticism is very encouraged. 

[Joe]

This is the title screen, but there doesn't seem to be a way to start the game, are you taking that into account?
What you have is way too busy. You need to think about visual priority and clarity of idea.
I didn't touch the chrome font but as is it's too intense, too attention grabbing.
Also, how did you not think of this bread font???



Simplify! Or, draw everything out beforehand... but the more complex you want it, the harder it's gonna be to manage competing elements.
Who is the star of the show? Well, he's being drowned out by everything else. If you squint your eyes and noone told you where to look, you'd think the black guy is the main character.
If I understand correctly, this isn't actually a game, you're just practicing title screens right?
He needs a more dynamic pose, something like this. I know that's a villain but the pose is still valid.

[Johasu]

My biggest concern with the composition isn't simply the competing elements all struggling against each other but the contrasting style of the elements themselves.

The chromed "Super Toaster Guy" portion is incredibly controlled when compared to everything else on the page. So much so that it makes every other element appear to be of considerably lesser quality.

Another thing that catches my eye is the angle of the lighting/shadows on the chromed Title isn't consistent with the lighting shading of the elements that are set directly on it.
The shadows cast down and to the left behind.  The sprites sit on top it but their shading is to the right.

[Zizka]

@Joe:
Back in the days, you had a title screen first then you'd press a key to get to the options like "new games" and stuff. So this is how this is going to work too.

Also, how did you not think of this bread font???

I guessed you must've missed my first message in the thread  .

It's a real game, not practice.

Basically, I tried to give more space to Pan (the toaster) in this version and more perspective too.

@Johasu: I'll need to make sure the rest of the other elements end up being up par then!

Here's the new version, still wip but making progress:


Any better?

[Pinux]

Not bad, I love what you've done but I would love to play this if it was a game to get xP  it reminds of super Mario bros 3

[Gil]

Everything's still fighting for attention. Also, there's something like detail density that's all over the place too. Some parts have super high detail (font, toaster guy), and they're surrounded by spaces of no detail at all.

Start with a good composition, in low detail, and work your way up.

[Parkerbaby]

Right now the scene looks very disjointed--the characters seems placed haphazardly, not centralized as they would be for a title-screen. I think you're trying to pack too much action into the scene, also. He's blowing on his pronged hand, off to the side, and casually punching the egg man with the other hand--but exerting no body-force to do so.

I would simplify the scene and center it--put the pronged hand in front of him rather than off to the side. An idea like this:

[Zizka]

Shit, I didn't receive a notification e-mail that I had new replies  .

@Pinux: Thanks! Still not good enough for me but I'm getting there.

@Gil: I think the focus of the scene is getting clearer

@Parkerbaby: Ah damn, I should have thought of that! It's simple but it works.

Anyway, might as well show you what I came here for. I've added perspective to the thing and well, tried to have a better composition overall.

[Zizka]

Seeing as there were no comments I figured I needed to roll up my sleeve and work on this some more.

Here's the new version, not sure about the shadows though:

[Cyangmou]

the 1px black outlines look puny for the comic-style you are going for.
Would be much better if you would use heavier and more dynamic outlines.

[Zizka]

Thanks Cyangmou.

If I understand correctly, the outline should be heavier where there's more shadow.

I don't understand how to make them more "dynamic" however unless you mean changing the line width often.

[Hillstylelife]

Sorry I don't have any critique for you, but does "Team Toaster" happen to be a reference to Imgur, by any chance?

[Decroded]

Thanks Cyangmou.

If I understand correctly, the outline should be heavier where there's more shadow.

I don't understand how to make them more "dynamic" however unless you mean changing the line width often.

no i think what he means is because of the scale of the canvas and the cartoony style, u can use bold lines of varying thickness like 2 or 3 pixels.
the "rules" for this vary from outlines on sprites
I don't have a reference for how and why a line would vary in thickness but if u look at comic art its usually thicker around the outside of main forms and thinner inside a subject, and is also used to control the priority of the subject and help separate it from background.
I'm sure there's some write-up about it somewhere.

[Zizka]

@Hillystylelife:

Nope. Just the name of the team (as the game is about a toaster).

-Spent some more time on the title screen:
1. cleaned some stray pixels here and there.
2. the eyes of Doctor Dough are now looking at Pan.
3. Fixed the perspective of the floorboards.
4. Added shadow to the “X”.
5. Got rid of the curtains on the left.
6. Made the skull darker and smaller in order to make it harder to notice.
7. Tweaked the front hair dryer some. Tried to change the shape of the cheek, fixed the shadows on the handle too.
8. I don’t feel like the shadow on the head of the front hair dryer is right but I don’t now how to fix it.
9. Added an outline to the impact thing. I also reshaped some bits and pieces which looked wrong
10. Changed the line width of the outline of a few things. This was a suggestion by Cyangmou.
11. I redid the boots for the front hair dryer. They looked messy. Also added an outline to them.
12. I changed the perspective on the head dryer on the floor.
Things which I’m aware needs fixing:
1. The light/shadows for the front hair dryer.
2. The empty space at the back. I need to find a way to fill this out somewhat.

Version 15

I don't have a reference for how and why a line would vary in thickness but if u look at comic art its usually thicker around the outside of main forms and thinner inside a subject, and is also used to control the priority of the subject and help separate it from background.

That's what I tried to do! 

The various outline width does make things look better I'll admit! 

[Parkerbaby]

Spoiler

Spoiler

Spoiler

Spoiler

In my opinion no real progress has been made from the first iteration. Still too busy and no visual priority.

[Zizka]

@ParkerBaby:

You see no difference between this:


and this?


Yikes, that's depressing  .

[PixelPiledriver]

I'd suggest exploring many more varied color comps at a much smaller size.
Here's a few variations on an idea.
You could come up with a bunch of others.



Here's a couple more.

[Zizka]

Hahaha! I really like those. Man, you're something special I swear!



Especially this one.


This being said, is there no way I could somehow salvage something I've already got with the one I have right now? I don't know, I'd feel bad to scrap the whole thing considering the amount of time I've spend on it. 

[PixelPiledriver]

This being said, is there no way I could somehow salvage something I've already got with the one I have right now?(

How much time?

That's really up to you.
You might find a better idea.
Or this might be your best.
But I'm not suggesting you scrap every pixel you've put down.

Your canvas is somewhat big to make composition exploration fast and simple.
Even with the same array of props and characters, it would be good to sketch out thumbnails of different arrangements.
Or tear into it a this size with the select tool.

Do you have this in layers?
Upload a file to mess with and I'll show you what I mean.

[StarRaven]

Don't fall victim to the sunk cost fallacy! Every moment you've spent working on this has been spent learning, so it's not time wasted even if you decide not to use what you have so far. Save it and maybe you can use something from it later, but don't hold on if letting go will get you a better end product.

[Decroded]

good point starraven though I would suggest learning next time not to put in so much pixel-level work until the composition has been organised.
This helps avoid that horrible feeling most of us have had.
and +1 for starting on smaller canvas as PPD mentioned.

[Zizka]

@PPD: Forty hoursish I'd say.

*crowd laughter*

Yeah but it's true!

@Starraven:
Yah, I did learn, that's true.

I'd like to implement the "X" like PPD did but what I have right now. Maybe get rid of a lot of stuff to pull it off. It's not like it *has to* be complicated:



I like the whole punching idea. I think it looks good. I just need to "optimize" it somehow and get rid of all the fluff around it.

[Zizka]

Alright so back to the drawing board:



It's based on PPD's mock-up:


I'm taking things slowly this time so that I don't end up doing details for something I'm going to end up scrapping.

[HarveyDentMustDie]

Zizka I think you are missing the point here. PPD perfectly showed you how even small canvases can look great. It's not strange at all that you've spent 40 hours on previous version cause it takes time to fill up canvas that's 640x480px. Cut it down 2x or 4x and try to draw on it and when you are finished just increase the size back to original size and this way you won't have any distortions. It will save a lot time and it will still look nice. You need to be very skilled artist to properly fill big canvas without much problems. And considering that resolution of your game graphics is not big, smaller title screen will be very appropriate.

If you are really into making big image, you can draw whole design in small canvas with same aspect ratio, and when you are satisfied increase the size and clean everything in final resolution. You will have much more control over design and spend less amount of time.