Interface Mock Up

[xenogia]

Hi Guys,

For my game being a noir-sh esque game.  I'm am trying to figure what type of texture I would go for the interface.  As you can see below I am using a grungy type texture.  Is there anything else I could to spruce it up.



As you can see this an FMV game, and I was thinking of going something like the Gabriel Knights 2 interface.

NOTE: This is just a mock up picture, it a 3rd-person game also.

[Shane 'ProgZmax' Stevens]

Well aside from incorporating the interface into area you could add cracks, a design that goes around the rectangle, and you can make it a bit more visually interesting by adding some color.  What I've done here are two quick photoshop examples using a foreground layer and adjusting the photo filter setting while tweaking the blending type between Normal and Multiply.

This keeps the relative brightness down while adding a bit of color to the design.




This makes the image brighter but also more varied. 



The color could be anything you like but I would tend to stick to red or blue tones for a mystery.  The grey would actually work if the entire game were black and white, but as it stands the lack of color seems a bit out of place with the photo realistic backgrounds.

[xenogia]

Cheers ProgZ, i'll definetly take into consideration

[Ali]

I'd suggest you don't use a textured GUI. Just using black bars to create a letterbox effect will make your photographic backdrops nicely cinematic. I'd be wary of imitating GKII's visual style because I didn't find it to be very effective. As a player, I definitely would want to use a Sierra-style GUI in a game like this.

A sparse GUI with inventory items / menu options that appear when the cursor moves over them might work very nicely. I also think there's more you can do with the photographic source to create a noir-like mood. This is a quick mockup showing reduced saturation, colder colours, higher contrast, depth of field and some rough shading.

[xenogia]

Wow that is truly impressive Ali, I definetly like that

I tried to do what you did, but nowhere near as good.  I'm not sure what settings you used.  But I definetly made the image a little moodier and darker.



or there is this one.

[GarageGothic]

Love your edit, Ali. Reminds me of the X-Files game.

Xenogia, I think the first version has too little contrast - the second one is looking better, but you could adjust the saturation depending on the atmosphere you want to convey (for instance - is this the player's apartment and supposed to be a homey place, then the colors could be brighter, but if the player is rummaging through someone else's stuff, and should feel suspense, this is a good style).

[Jakerpot]

Ali edit is the best one, i think. Your 2 ones are too dark/black-white.

[Ali]

Your versions show definite improvements. The first is so desaturated that you might as well make it black and white - that way the reds wouldn't have that pinkish tone. The second has better tone, but as GG observes it may be too intense for some purposes.

I'm afraid I didn't save my version. I had a go at re-creating it to take you through the steps I used in case you want to try to retain a bit more colour, like I did. Here is the .PSD and an action set so you can take a look at the changes I made:

http://www.2dadventure.com/ags/Mockup.zip

I hope that's useful!

[xenogia]

Thanks Ali, I really appreciate your help.

EDIT: I thought maybe the action scripts might work in GIMP but they don't.  Tis a shame.

[Ali]

Well, here is a screenshot of the settings (possibly a bit useless to you):


As you can see, I dropped the saturation, then the gamma, and then I increased blue, green to a lesser extent and lowered red. I imagine you followed the same sequence, but I thought I'd post in case you were interested.

[Haddas]

Would it be possible to add some noise to the TV?

[xenogia]

Would it be possible to add some noise to the TV?

Haddas already done that, I have some footage of 8mm film grain, which is over the top, though highly transparent.

[Haddas]

Goodie! what about something like this?




Not like, for this particular scene but for something else that might work. Security cam related stuff.

[xenogia]

Goodie! what about something like this?




Not like, for this particular scene but for something else that might work. Security cam related stuff.

That's pretty grand could I get a copy of that animation?

[xenogia]

Actually quickly, just so you know this is how the scene actually looks.

[Ryan Timothy B]

Haddas: The viewing of a tv screen camera effect is a great idea and simple to do.

Xenogia: Although I do like the new colors you have, I still prefer Ali's brighter colors.  They help separate everything making it easier to focus on individual things like the chair and tv for instance.  Perhaps a crossbreed between yours and Ali's if you really want to go for that faded noir look.

[Haddas]

The animation was made in photoshop.

I drew this, highlighted it and defined this as a pattern.


(this one's enlarged for viewing ease though, and you can vary the width of the stripes and everything yourself. just experiment)


Then I created a new layer and filled it with the pattern.


Then I changed the hue and saturation (set it to colorize) and adjusted it to a greenish tint. Set the layer blend mode to whatever suits best for the particular picture.



To animate, just move the layer around a little for each frame!