First-ever hand-drawn background

[TerranRich]

Hey all,

This is just me toying around with making a background in Photoshop for my game. I might not do hand-drawn backgrounds at all for the game...I just wanted to try it out. I kinda like the semi-final result (resized x2, originally 320x240):



It's a corner of a hallway on a ship where everybody has been killed. The smudged parts of the walls were my attempts at making the walls look more natural after applying a grain effect. I think it screams "fail", but I dunno.

Now I know that I could show different levels of brightness on the walls as a result of the lights shining down. But how is it? What can I do to make it better? Paint-overs are welcome.

[cosmicr]

looks a bit bare. what was the function of the hallway? where are the doors? hope that helps. you've got the general priniciples right, you just need to expand on it.

[TerranRich]

This is the first screen the player sees upon leaving the starting room. This hallway establishes the fact that something bad happened on board the ship. Going further (to the right) the player sees more, and there are some doors.

Should I change the setup so that the doors are here instead? Is a bare hallway too much wasted space?

[MrColossal]

If this is the first screen the player sees that tells them something is wrong and that they are on a ship you need to add much more detail.

What kind of technology is on the ship? Can we see outside? What are the walls made of? Looks like concrete. No rivets or seams? No pipes?

This rooms looks like a bunker underground and not a ship.

http://www.bobsbits.tv/assets/images/gal_16.jpg

This is an extremely detailed image. It's a room from a submarine and look at all that crap! I'm not suggesting you add that much stuff to your room but there is so much in there to take inspiration from.

http://users.telenet.be/Blade/Hallway.jpg

Here's an awkward 3d image someone made and I found on google images. This hallway has some personality.

http://www.3dkingdom.org/modules/My_eGallery/gallery/asdf/Hallway3.jpg

Another one. Personality. I do not suggest a floor with a grate. So not practical. If you dropped ANYTHING you'd be screwed.

Again, I'm not suggesting lots of bits and bobs and greebles and wires and pipes for no reason. Take a look at some standard hallways:

http://z.about.com/d/hotels/1/0/A/Z/hallway.jpg
http://www.usswisconsin.org/Miscellaneous/Misc.%20Pictures/BB64%20Whaleboat/17%202nd%20floor%20hallway.JPG

These are hallways from hotels. The first one has some nice stuff going on in it. I do not suggest using wallpaper.

http://www.j-archive.com/media/2005-10-27_DJ_18.jpg
http://www.dcnoma.org/images/P8020024.jpg

These are hallways from the Pentagon.

http://www.hearthospital.com/aboutus/uploads/images/hires/patient_room_hallway.jpg
http://www.makeyougohmm.com/images/hospital_accident.jpg
http://www.worldrider.com/blog/photos/jeremiahs_bed_hospital.jpg

Hospitals. Pillars coming out of walls, fire extinguishers, emergency lights, runners along the bottoms of walls, etc etc...

Also: I recommend extruding the lights down so they have some shape to them and don't just look like white rectangles on the ceiling. Also the blood doesn't make much sense where it is right now. It's everywhere and no where at the same time. I imagine it shot out of a human's body but where were they standing to make that happen? Did their body fall and they were dragged away? Did the blood drip?

Also also also, is it a first person game? If so [and maybe if not] try to play with the lighting more so you don't have to draw the whole background. Turn one and a half lights on so they lead you out of the room and to the right and you can only place pools of light on the ground and slightly illuminate the surrounding walls.

Quick suggestions.

Eric

[Oddysseus]

MrColossal did a great job of telling you what's not in your picture, so I'll try to cover what is.

Good start, perspective-wise.  I would agree that the blood seems a little random.  I would suggest having more, and making sure it responds to gravity (drips) and inertia (blood covers walls in arcs when sprayed from arteries).  The alternative would be to go in the opposite direction, and have faint traces of blood here and there, barely visible.  This would set up that "Something's not quite right" mood, and you could save the real gore-fest image for later in the game, where it would have a bigger impact.
Oh, and the blood on the floor looked like to me like it was "hovering" at first, because its shadows are so low-contrast, and the texture of the floor is so strong.  It's actually a nice effect if the floor is meant to be highly reflective, like marble or something.  If it's not... well you might want to fix that.

Speaking of the floor, is it supposed to be bronze or something?  'Cause it looks brown.  Brown doesn't exactly scream "spaceship."  I know it's boring to have gray walls, floor and ceiling in spaceships, but you could maybe add a tint of color to it, like... ooh, ooh, how about colored lighting?  Nothing too obvious, maybe just a slight green cast or something.  Or, since something bad has happened on the ship, it stands to reason that the red "holy crap, panic!" security lights would be on.
As far as the suggestion of having some of the lights be out, you could explain that with phaser burns on the walls (and broken glass from the lights).  After all, people who leave that much blood on the walls are going to fight back against whatever is killing them.

On a pickier note, the value (darkness/lightness) of the floor seems very close to the value of the back wall, causing the two to "merge," flattening the image.  I'd recommend making one or the other lighter or darker, and possibly also drawing the bottom part of the back wall darker, to further distinguish between wall and floor.

The texture of the back wall works fine, I think, especially if it's going to be obscured by pipes, portholes, etc. as per MrCollossal's suggestions.  The texure doesn't work so well on the left, though.  I'd redo that.  And lastly, if you're gonna have pipes/seams, I'd recommend putting one right where the left wall and back wall meet.  Right now, the rigid 90 degree line kind of screams "You are looking at a game!" when it should be saying "This is a real place you are in right now, built and lived-in by real people."

Whew.  Sorry if that was too in-depth or wordy.  Which leads me to my last suggestion: moderation.  Like MrCollossal pointed out, you could clutter up your screen with all kinds of realistic crap, but it's better to choose only the things that express your important ideas: This is a spaceship.  People used to live/work/love here.  Most of those people are dead now, and you could be next.

[TerranRich]

Eric, thanks for all the comments. I will definitely have to think about function...even if I do go 3D. I definitely have to consider things like panels on the wall that serve a function (but aren't working) and other features.

Texturing is not my thing, but perhaps I need to draw inspiration from other sci-fi scenery and see what's being done about wall material. I honestly have no idea what the walls are made of. Something futuristic no doubt.

As for the lights, I think having them extrude from the ceiling would look too much like lights nowadays. This is set 190 years in the future and I think they'd have found a way to have light panels...perhaps some form of OLEDs (Organic Light-Emitting Diodes) like scientists are developing for the immediate future.

The blood was a last-minute addition and I used it to make it more obvious that something bad happened. The first screen that the player finds himself in, is a cryo-stasis room he was put in before the attack occurred. He wakes up, finds another crewman in another stasis tube, near death, but no real signs that anything bad has happened. Once the player leaves the room, that's when the mystery begins.

Basically, there are bodies here and there around the ship, but it could very well that a few bodies were dragged away for research or experimentation or what-have-you. I'll try to implement some more thought into the blood stains. It's an extra layer anyway.

I like the idea of obscuring certain parts of the background, as well as a lack of lighting in certain areas. The lighting is too perfect and too uniform, and I agree it needs some alteration in that regard.

Oddy, you're awesome. I love the idea of broken glass on the floor and phaser burns explaining the damage. I don't want to give too much away, but there are multiple methods of killing going on here.

And about the blood...are you sayign it shouldn't be so opaque? That it stands out too much from the surface beneath/behind it? Should I decrease the saturation of the color and/or make it a bit transparent?

And I have no idea what the floor was going ot be made of. I'm at a loss for colors on a futuristic starship. The walls were hard enough, and the floor was kind of just an afterthought. The floor was just a random color choice. I really have no idea what to do with the floor. Any suggestions?

As for red lighting, I feel that would make it hard to see anything. I could probably find some explanation for why emergency lighting isn't on, but for now I'm keeping the neutral lighting.

Like I said, I'm going to find some inspiration in other sci-fi work and see what features would normally be in a starship. I'm thinking things like section signage, like "Section 24-Beta" or something, in Bank Gothic font or something like that, plus conduits perhaps running along corners here and there, bending back into the wall at various points. Maybe a porthole on the left side, so it's not just a plain blank wall.

Thank you both for your comments! Any others are more than welcome! I will re-do this image later on tonight.

[m0ds]

Richy Rich, I'm impressed! When I say "impressed" I mean wow! I'm AMAZED I've never seen a hand-drawn background from you before! You've always, ALWAYS been a man of 3D bgs so this is very interesting coming from you. I agree the room is basic, and not very futuristic etc, but to be fair you've done well on the perspective.

With more detail, ie things in that room, I think you'll produce a great background.

Good luck!

[MrColossal]

some more reference of what I ment by play with the lighting:

http://hellboyanimated.typepad.com/.shared/image.html?/photos/uncategorized/blogalley_1.jpg
http://hellboyanimated.typepad.com/.shared/image.html?/photos/uncategorized/int_professors_office_day_03.jpg

http://hellboyanimated.typepad.com/.shared/image.html?/photos/uncategorized/blogprd_2.jpg

Especially the last one. You can see where all the action is going to take place, in that pool of light. You could put detail into the part that's important and let the rest bleed out. If that makes sense...

Here are some shots from Lure of the Temptress:

http://www.mobygames.com/game/dos/lure-of-the-temptress/screenshots/gameShotId,9608/

http://www.mobygames.com/game/dos/lure-of-the-temptress/screenshots/gameShotId,64503/
http://www.mobygames.com/game/dos/lure-of-the-temptress/screenshots/gameShotId,64501/
http://www.mobygames.com/game/dos/lure-of-the-temptress/screenshots/gameShotId,64502/

Especially the first one.

[Oddysseus]

I don't think you should make the blood transparent, but maybe it should fade more at the edges.  Blood tends to soak into/stain anything it's on, meaning it would get flatter the more it dries (think of it as a discoloration of the floor, rather than a liquid on the floor).  It should also contrast less with the background.  Blood starts to look dark and brown as it dries.

Unless you want the blood to look really fresh, in which case ignore what I just said and make the blood look gooey, and have it reflect the lights.

As for the floor, I mentioned tinting briefly in my last post, but I'll go into more detail now (sorry if you know all of this already).  The basic idea is that nothing in nature is pure gray.  Some man-made things (like spaceships) can be pure gray, but very rarely.  Most of the time, the gray has some other color mixed into it, like a little cool blue or warm yellow.  If you're just looking at it offhand, you'd think it was plain gray, but there is a very noticeable difference between, say, a greenish gray and a purple-gray, if you look at the two side-by-side.  What all this means is that you could have a completely gray room, as long as the walls, floor, and ceiling each had different colors mixed in with the gray (also, they would be darker/lighter than each other, as your picture already demonstrates).

The other thing is that all colors are affected by the color of the light that hits them, and the only time that the light is pure white is when things are lit by the sun at noon (which is why everything looks washed-out then).  At any other time, light either has a slight (almost unnoticeable) yellow or blue tint.  Of course, the scientists on your ship may have invented artificial lights that can simulate the noontime sun, so you can just ignore this part

If I'm remembering Star Wars correctly, the floor of the Death Star was just a dark, almost black slab that was very shiny, and reflected the wall lighting in all kinds of cool, wavy lines.

I think the floors in the original Star Trek were just flat and gray, and they did a good job of demonstrating my tinting example by appearing a little yellowish because of the wall lighting.  I could be wrong though.  I don't usually stare at the floors while watching Star Trek.

[TerranRich]

I don't know, I scrapped the room altogether and tried to draw it as a round, curved stretch of corridor. No matter what angle I used, it just didn't look right. I don't know what else to do. I randomly started doing character sketches, so I'm leaning more and more toward hand-drawing all the backgrounds.

Maybe I'll create the scene in 3D, then paint over it in Photoshop. Right now, I have no idea how to properly plan out a curved corridor. Any tips or ideas?

[Oddysseus]

I think making it in 3D first sounds easiest.  You could also try googling pictures of corridors, and see if you can find one that has the exact curve you're looking for (regardless of what's actually in the corridor).  Then, use it as reference when drawing your own, or place it on a separate layer and trace over it.  There's no shame in tracing, since the end result will probably look nothing like the starting picture anyway.

By the way, I think a curving corridor is a better idea for a spaceship interior than the room you had before.  Good luck, and remember: patience is the artist's greatest tool.

[TerranRich]

Okay fellas, I fired up the old tablet (well new really) and came up with this:



This is just a sketch, obviously. The final version will have cleaner and more geometrically-sound lines. What do you think? I put a random pipe in the upper-right corner, but I think the scene could work without any random pipes. The bars are hand rails...cuz you never knew when you'll have some beings on board that are used to lighter gravities...or heavier.

But either way, how is it for a preliminary sketch? I think it works.

My secondary concern is the overall look and feel of the game. I could definitely make the entire game in black outlines and colored (and shaded) fills. Check out a drawing I made, using a stock photography model for a basis:



Would this format work for a serious (but not TOO serious) sci-fi game?

[Hudders]

Reminds me of Mary-Louise Parker.

[TerranRich]

Also, I have a question: for people who draw in a paint program, how do you do it? My method is to have one layer (above the white background) for outlines, and a layer below that for the fills. Is there a better way? Or am I doing it fairly right?

[Khris]

I usually do it like this:

-outline layer (just the drawn outlines, no whites in between, set to multiply, 50% opacity)
-coloring layer
-pink bg layer

[Neil Dnuma]

Ditto, only separate layers for separate objects.

[Jens]

I'm doing sprites in Deluxe Paint II (/ DPII - Animation Studio), so there's no layers for those anyways.

For high-res portraits I'm using only one layer on a single-colour background-layer, starting by painting the general areas with one basic color tone. Then I put some more highlighted/shadowed areas on there and refine everything step by step (two b/w-speedpaints (of to me completely unknown people found on the web) I recently made with this technique can be found here: 1, 2). Coloured images (in the speedpaint style) would use the same technique; so no additional colourizing-layers.

I am not using outlines, if at all I just draw like three straight lines to mark the eye-/nose-/mouth-relations. I found out that using complete outlines can be tricky, especially to beginners like me, resulting in wrong shadows/highlights and proportions. Also I find it easier to blend colours on a single layer...

I think for painting practice it is more useful to rely on a single layer, as more layers just add complexity that one cannot handle properly when one has not enough skill to make the maximum out of one layer.

[ildu]

Yup, the top layer would be the line art. Occasionally you might want to have animation film-like post processing effects (beams of light, fog, dust, etc.) where those would be put on top of the linework. The layers under the line art are fills, and I usually have different layers for clearly separate parts and separate colors. On top of the fills you might have shading and highlight layers though. And then there's the background color, of course, which I choose by what fits the ambience I'm trying to create.

I like the infantile look of the Section 37-B, but I don't really like the woman. That bg colored would make a marvelous style. I think with the woman, the problem is not having pressure variation during drawing. Once you turn on opacity-by-pressure and thickness-by-pressure, it should start looking a lot better.

I think for painting practice it is more useful to rely on a single layer, as more layers just add complexity that one cannot handle properly when one has not enough skill to make the maximum out of one layer.

I would argue that the sooner you learn how to use layers (which isn't that great of a feat - just think of physical transparencies), the easier and quicker it will be to learn more. I don't see a single downside to layers other than the distancing of digital painting from traditional mediums. Anyhow, layers are pretty much a norm these days. I would really be amazed if I ever met a professional digital designer, who didn't know how to use layers.

[Jens]

Layers are useful for sure, also for pixel art -- Do you know the "random rooms" of Fate of Atlantis where you had a bunch of different rooms that actually were made out of a single empty basic room to which different objects (doors, wall decorations, robot-stuff, etc) were added to make it look like different rooms? It's so easy to create those random rooms with layers just by enabling the object-layers (door to the front, rear etc.).
Also for transparency effects, lighting, changes of colour and even doing safety-copies/backups while drawing it's useful.

However, I have the feeling that many people focus too much on those technical aspects rather than on a basic understanding of art/painting itself. For using layers in a professional way, you have to know what you want to do with them, what look you want to achieve. If you're unexperienced with lighting, forms and colours in general, blending-, highlight- and colourizing-etc- layers won't help there on the long run.
And to get this feeling, I find it more practical to do as much as possible on a single layer as one can quickly scribble and change lines and forms and can experiment alot on it.

And, trying to stay ontopic, let's have a look at the 2nd bg-sketch of TerranRich here. It looks more promising than the first one, although it's just simple outlines and doesnt use textures and transparency effects and stuff, doesnt it?

[TerranRich]

The "infantile" look of the Section 37-B sign is just because I drew it by hand...I will replace it with a real font in the final output.

And Jens, that's my plan for most of the corridors: various layers to give the appearance of different sections of corridor.

Like I said, that BG is just a sketch. I just wanted opinions and criticism on the layout and organization. The final product will be 20x better I can assure you.

As for the outlines on the woman picture...I know they're messy, but it was a 320x240 image that I zoomed in on. Photoshop tries to draw "in between" the pixels with the brush tool. Is there a way around that?