Sci-Fi Background (sketch stage)

[TheJBurger]

So I'm going to take Loominous' advice about posting backgrounds in an early stage. Here's one I just started:



The setting is a laboratory on a space cruiser that has been in a heavy battle and is damaged. The pods on the right are for cryo-stasis and then there are some computers on the left and more junk everywhere.

I guess I mainly want crits on the design/composition right now. This is just a preliminary stage, and I'll probably add some more junk and change stuff later.

After the sketch stage, I don't really know where I'll go with this. I'm changing my technique from sketch-->final product constantly; I used to just draw a line art sketch and paint under it every individual object from scratch, but on my more recent works, I've been using the sketch, and just refining it and tuning it until it reaches a clean version that is final.

[Seleceus]

First off:  Very nice for an early stage.

As far as composition goes there's a little perspective tweaking on the left hand units that could be done, and another console, table, or somesuch wouldn't hurt in the middle of the room.  It's quite a large space to be so empty on a space ship.

Using a graphics app. that allows layering would help keep you from needing to change your editing approach so often, if at all.  By placing your pencil sketch on the bottom layer, then using a different layer for each room component (ie: walls, pipes, lighting, computers, individual cryo units, etc...) you can edit each without having to redraw entire areas.

[loominous]

I think it looks nice, and when refined it would probably work well.

It doesn't pull me in though, and if I was to see it pass by, it would go unnoticed. That's fine if you're content with functional backgrounds, but if you want to go beyond that, then I think some of these things might be worth considering:

Perspective
- It's uses pretty much a one point perspective, which has this theater/sit com feel. It has a friendly look, but it's not very interesting.

Values
-The values are more or less the same over the whole background, which doesn't give any subdivisions or pull the focus to any area, which gives a static impression.

Design
-The room is a large box, which is probably the most boring room design you can pick.

-Most of the space is empty floor or room, which is also uninteresting.

Composition
-The lack of overlapping elements makes it look flat.

-The lack of foreground objects further reduces the depth. Foreground objects aren't just used to frame the environment, but to also give the illusion of depth. This isn't because it's a painting, but because we're dealing with a flat surface that is supposed to trick us into thinking it's a 3d space, so this is stuff that cinematographers and photographers also have to deal with, as their medium is as flat as ours.


Ideas
The pods look cool, and I'd probably focus the whole composition on them. I'd do this by rotating the camera so we'd see more of the wall they're attached to, push closer to it (decrease the room size as well probably), and perhaps use the console thing on the left as a foreground. I'd make the light predominant around the pod area, or possibly by making them have some bright leds or lights or whatnot to pull focus, and keep the other areas dark, save for a console perhaps.

I'd also make the room more interesting by breaking the box design. An easy way is to simply add another box, though offset, like so:



In this design, I used the inner box outlines to form a vertical division (so the room would have two different levels, though with a small vertical difference). This is another easy way to add interest, and I try to use it as much as possible. It's easy to miss the option to include vertical divisions, but they can really enhance the layout.

Planning out the room like this when you have several things to include is a nice quick way to solve issues, and it will also make you less prone to make the space around the camera clear of objects, which happens easily. By first decorating the room roughly like this, you can then look for a good place to put the camera, and use whatever is there as foreground, which can make it much more spontaneous than if you start empty and simply place objects after you've determined the position.

Anyway, this camera placement is more interesting, but it's also more movie like, and lacks the feel of classic adventure game one point perspective. So whether it enhances the style or not is up to your taste.

Hope it helps.

[TheJBurger]

First off:  Very nice for an early stage.

As far as composition goes there's a little perspective tweaking on the left hand units that could be done, and another console, table, or somesuch wouldn't hurt in the middle of the room.  It's quite a large space to be so empty on a space ship.

Using a graphics app. that allows layering would help keep you from needing to change your editing approach so often, if at all.  By placing your pencil sketch on the bottom layer, then using a different layer for each room component (ie: walls, pipes, lighting, computers, individual cryo units, etc...) you can edit each without having to redraw entire areas.

Thanks, and yes, I do use photoshop and I am experienced in layers.

Loominous: Thank you for your advice. It's exactly what I'm looking for.

I think it looks nice, and when refined it would probably work well.

It doesn't pull me in though, and if I was to see it pass by, it would go unnoticed. That's fine if you're content with functional backgrounds, but if you want to go beyond that, then I think some of these things might be worth considering:

Perspective
- It's uses pretty much a one point perspective, which has this theater/sit com feel. It has a friendly look, but it's not very interesting.

One reason I use one point perspective is because I'm afraid of how sprites interacting with the background will look on a 2P perspective.

Values
-The values are more or less the same over the whole background, which doesn't give any subdivisions or pull the focus to any area, which gives a static impression.

That's true, but I haven't really assigned all the values I've wanted to in my sketch.

Design
-The room is a large box, which is probably the most boring room design you can pick.

Guilty here  . All of my rooms come out as boxes whether I like it or not. I'll try to redesign it based off your advice.

-Most of the space is empty floor or room, which is also uninteresting.

Composition
-The lack of overlapping elements makes it look flat.

-The lack of foreground objects further reduces the depth. Foreground objects aren't just used to frame the environment, but to also give the illusion of depth. This isn't because it's a painting, but because we're dealing with a flat surface that is supposed to trick us into thinking it's a 3d space, so this is stuff that cinematographers and photographers also have to deal with, as their medium is as flat as ours.

Thank you for clarifying. Foreground objects to me, at least, seem to be added in there just for the sake of "this is a picture. It has foreground objects." Whenever I add them they usually just feel tacked on to me, so I haven't fully utilized them.

Ideas
The pods look cool, and I'd probably focus the whole composition on them. I'd do this by rotating the camera so we'd see more of the wall they're attached to, push closer to it (decrease the room size as well probably), and perhaps use the console thing on the left as a foreground. I'd make the light predominant around the pod area, or possibly by making them have some bright leds or lights or whatnot to pull focus, and keep the other areas dark, save for a console perhaps.

Those are some excellent ideas. I'll try to see what I can come up with.

For this room (if to be used in game) I had two concerns in mind regarding the composition:

1) It has to be functional with a sprite, so that makes me scared of 2 point perspective (I know, I shouldn't be).
2) The objects of interest (which the player will interact with) would be the back door, a computer console, and the pods. If I was to change the composition, especially with 2 point perspective, I'm worried about odd scaling and alignment with the objects that the player must use.

I'd also make the room more interesting by breaking the box design. An easy way is to simply add another box, though offset, like so:



In this design, I used the inner box outlines to form a vertical division (so the room would have two different levels, though with a small vertical difference). This is another easy way to add interest, and I try to use it as much as possible. It's easy to miss the option to include vertical divisions, but they can really enhance the layout.

Planning out the room like this when you have several things to include is a nice quick way to solve issues, and it will also make you less prone to make the space around the camera clear of objects, which happens easily. By first decorating the room roughly like this, you can then look for a good place to put the camera, and use whatever is there as foreground, which can make it much more spontaneous than if you start empty and simply place objects after you've determined the position.

Anyway, this camera placement is more interesting, but it's also more movie like, and lacks the feel of classic adventure game one point perspective. So whether it enhances the style or not is up to your taste.

Hope it helps.

Thanks for all your advice. I'll try to post a revamped background soon. 

[pslim]

I'm always a little amazed by what people do with graphics tablets, but I think this sketch looks really cool. I like the wires hanging down, and it sort of reminds me of Alien.

What is supposed to happen in the middle of the room? Does it really require that much space?    You might put in a center console or computer with input stations on both sides, or something kind of useful sciency center island like that.

regarding the suggestions made by loominous -- loom, how would you suggest working out the drawing perspective if you were to aim the camera the way you've drawn in your example?

[loominous]

Values
-The values are more or less the same over the whole background, which doesn't give any subdivisions or pull the focus to any area, which gives a static impression.

That's true, but I haven't really assigned all the values I've wanted to in my sketch.

This is a bit of a risky approach. Values are just as important to composition as objects, and leaving out important value sections is like leaving out major objects out of the sketch. It might work out, but it just as well might not, and not including them kind ruins the point of the sketch.

The value problem I mentioned wasn't about a lack of value details - these don't really belong in a sketch anyway - but major value differences. Atm, the average value of all the major surfaces are roughly the same. This makes the whole image pretty much a one value/colour surface, which isn't very exciting.

By having large areas of contrasting values (doesn't mean they should be extreme values, just contrasting)  placed next to each other, to form large abstract shapes, you create interest on a purely compositional level, where the objects themselves are irrelevant, where merely the major shapes n values, the stuff you'd be able to see if you squinted your eyes firmly, would be enough to attract interest.

Working with small thumbnails will keep you focused on these big issues initially, and it's a good idea to every now and then zoom out to view the image in a tiny format when you start refining. In a large format, we tend to focus on details and miss these big issues, which are incredibly important. (I usually use the photoshop navigator window as a constant thumbnail view of the image, and shift my eyes from the canvas to it pretty much constantly, to see how the stuff I'm working on works as a whole)

If you look at the current image in a small format, you'll pretty much only notice the lights in the upper corners, and shadows in the lower corners. Assuming that these aren't the areas which you wish to attract the most attention to, this is a major problem. Ensuring that the objects and values to pull focus to the areas that you consider important or interesting should be the main point of the initial sketches in my opinion.

how would you suggest working out the drawing perspective if you were to aim the camera the way you've drawn in your example?

I'd just eyeball it pretty much. Assuming that you have experience in drawing in perspective, I'd just improvise the perspective in the initial thumbnails without perspective lines etc, unless it's a very complex image (another way is to draw out multiple perspective lines from vanishing points that you set up initially, to work as a sort of grid, which you can then refer to when you draw the objects, without having to check them individually, which is almost as quick).

This is just for the initial small scribbly thumbnails though, to keep them loose and fast. Once you think a design has promise, it's good to check the lines to make sure they end up in their proper vanishing points.

There are ways to work out a 3d perspective from a 2d overhead view like this in an exact manner, but unless you have to adhere to the original sketch religiously, I wouldn't recommend it. Just because it looks neat in a blueprint view like this doesn't mean it'll look good through the camera. So I'd follow it loosely, making adjustments as I'd go along to enhance it, and possibly rework large areas.

I think perspective is a bit over rated in general. Medieval paintings could look great but lack it completely. If a painting would have to have one big flaw, I'd chose perspective.

That said, I think learning perspective is crucial to proper understand of form and other things, so I consider the understanding of it very important. I just think it gets way too much attention. A well designed image with crappy perspective will look nice though funky; a poorly designed image with good perspective will look crap.

[TheJBurger]

I probably spent more time on this than I should've:

EDIT: Broken link. See same picture further down.

I moved the pods over to the right, and I squished them together so they would fit behind the right wall. I also moved the console over there so the player could interact with it. I added a railing because I thought it might help with "overlapping" objects. I tried putting the machinery in the foreground but I don't know how it worked out. And lastly, the back ceiling kind of tripped me up with the varying heights, so I cheated on it or something by raising it.

Loominous: If I may ask a question, what method do you use to darken/lighten areas for lighting? Currently, for darkening, I'm using a seperate layer with a plain black brush on different opacities. For brightening, I previously used a white brush (on different opacities), but they appeared to wash out things. On this picture I'm using a color/lighting layer (with a mask) set to overlay mode.

What do you think of the new design?

[Afflict]

Brilliant! Amazing transition!

[nihilyst]

It's astonishing what a change of view can do ... great sketch.

[Uhfgood]

I thought the original was great, but now it looks much, much more interesting, and yet even with the foreground elements and the room size diminished, it still looks very usable, like I wouldn't have any trouble navigating it.

[loominous]

I think the new design looks great, reminds me of Willy Beamish for some reason.

I especially like your design of the consoles in the foreground (quite a distant foreground, perhaps add a pipe or something closer to the camera to have multiple foreground layers. One reason many foregrounds you see in here look fake is that they have no depth, and look more like black paper silhouettes. By having multiple properly shaded foreground layers of various distances, you avoid this, and just add a sense of depth, as well as more complexity to the composition, which should prove more interesting).

It could use some cropping though, as the upper region seems very redundant, unless it's included for a reason. I'd crop it at the lower end of the big pipe I think.

As it is, I'd start refining, as the composition probably won't need any major revamping.

-

About colouring, if it's monochromatic like this, I rely on adjustment layers to keep the colours to a specific palette, at least initially. It allows me to paint in whatever colour I want, and let the adjustment layers apply the right colour for the values. I explain it in this thread, or so I recall.

If you have any questions about the content in the link, just ask, as I might've introduce some foreign tools.

[Hudders]

Wow, this looks awesome. Great transformation.

One thing I would do though is switch around the levels; I think it would be more realistic if the pods were on a raised platform rather than a sunken one, (particularly as regards the location of the door - if it opens onto a raised platform, is there a step on the other side?).

[radiowaves]

The second one looks best!

One question though. Are you going to scale the character sprite as it moves across the room? If not, you may want to consider changing your viewpoint again and giving the place very minimal walk area..

[pslim]

Regarding radiowaves' suggestion, it might be cool to clutter non-essential areas of the floor with debris, since you said the ship is meant to be damaged. The wires are great but to me don't give an overwhelming sense of damage so much as disrepair. Maybe one of the tanks can be cracked as well. Either way, though, it's looking really good.

[TheJBurger]

I especially like your design of the consoles in the foreground (quite a distant foreground, perhaps add a pipe or something closer to the camera to have multiple foreground layers.

Can you give me an example? The only way I could see of doing that would be to obstruct the picture by putting a big pipe in front of the machinery (closer to the camera).

It could use some cropping though, as the upper region seems very redundant, unless it's included for a reason. I'd crop it at the lower end of the big pipe I think.

No, it's not included for a reason. However, I'd like to keep the picture at 320x200. I tried adding a solid black area to the top above the pipe, but I don't think it looks very good.

Wow, this looks awesome. Great transformation.

One thing I would do though is switch around the levels; I think it would be more realistic if the pods were on a raised platform rather than a sunken one, (particularly as regards the location of the door - if it opens onto a raised platform, is there a step on the other side?).

Thank you, and yeah, I'd probably agree about the raised platform. If I thought about it earlier I probably would've changed it, but I got to a point in the drawing where it seemed it would do more harm than good by making such an alteration.

The second one looks best!

One question though. Are you going to scale the character sprite as it moves across the room? If not, you may want to consider changing your viewpoint again and giving the place very minimal walk area..

If this was to be used in a game, yes, I'd probably scale the character.

Latest version:



Generally speaking, I cleaned up the picture to make it more presentable and I lowered the opacity of the outlines a bit. I added several objects (debris, more wires, tiny stuff) and made some subtle changes, such as half of the door now being stuck.
I changed the lighting a little, so now the main light source is a hole in the roof.

Going on from here:

Outlines: When I first started drawing out on the PC, I treated outlines as the evil of the world. I only used them for a sketch layer, and drew every object from scratch using the sketch as reference. As I got better at drawing, I relied on the sketch more and more, until it became so detailed I worked on it for the final product.
So what I'm saying is, I don't know if I should keep the outlines, get rid of them, or slowly work them out.
I kind of used the sketch method (that I'm using for the space picture) for La Croix Pan, except I used a color base before I started refining things. I would detail the sketch and lower the opacity more and more, while also painting over it. My picture went from a completely 100% opacity sketch, to this:
(animated)


Colors: I didn't really have an idea of what kind of color scheme I wanted for the space room. All I had in my head was a kind of blue wash out look to it, so I filled the base with that color. I tried adding in colors of what I thought the different objects would have, and it came out like a bad, rainbow, ugly palette. So, I don't really know how to color it at this stage.

[ThreeOhFour]

I really like this BG.

I have a small suggestion to offer which may or may not help you. I thought colour wise you could keep everything the same blue colour and perhaps just add highlights with different light colours given off by computer screens, etc.

I have done a very bad paintover to show you what I mean:



Also, I like the outlines in the picture. Because its a space room I think the outlines give it a more man made appearance - if you were to smooth everything out, it might look too natural.

These are just the two cents I have to offer. Your picture is very nice, and I am sure it will be even better soon if you plan to continue to refine it. Good work!

[loominous]

Here's a late edit, which I actually did a couple of days ago, but cursed firefox quit on me just as I was about to press the post button. As writing the accompanying explanations is a relatively uninteresting and frustratingly slow residual to the actual photoshopping - it often takes quite a bit longer than the edit - it's not something I eagerly redo.

Anyway, having gathered enough energy to undertake it once again, here's a couple of ideas:



Values

- I think the values could be pushed a bit further. What I did was to brighten the pod area to contrast more against the right foreground. The value difference creates a kind of atmosphere effect that increases the depth, much like you'd see outdoors or in a fog. I added to this by darkening the upper left corner. A thing to note is that there can't be any dark values in the brighter area, or the effect will be ruined.


Composition

- What this value difference also does is to create a more interesting, at least imo, composition, where you have a clear division on the right between contrasting blocks of value (I added to this by placing a pipe to add another depth level, and to make the silhouette more interesting). By darkening the upper left corner I created a large diagonal rectangle along with the foreground consoles. I usually add these kind of large diagonal shapes, and  I think it worked pretty well in this case. The upper left corner is totally uninteresting, so by lowering the contrast and darkening the area, the focus is pulled away from it, and along with the other parts it creates a kind of diagonal tube that draws the attention of to the pod area. It's usually a good idea to keep the corners from attracting attention, so the eye is drawn toward the centre areas.

- The contrasting blocks these new values creates is the kind of contrast I spoke of in another post above (or so I recall), where it's not a matter of cranking up the overall contrast of the image, which usually fails, but instead create contrast by positioning blocks of values with contrasting values next to each other.



The left area looks more contrasty due o the fact that the extreme values are placed next to each other, and the areas keep their individual contrast range low. What often happens is that you get an image similar to the right area, where the only thing to do to get rid off the washed out values is to up the overall contrast, which usually ends up with a harsh fake look.

- Cropped off the upper parts, as they steal focus from the important/interesting areas.


Colours

- I think the colour palette can be pushed quite a bit further. Atm it has this quite dull monochromatic look with basically one hue. What I did was to make the colour change depending on their value, and make it go from reddish blues, to blues, to grays, to orange.

The simplest way to do this is by using a 'Color balance' adjustment layer, where you can affect the colour of darks, mids, n brights. The problem is that the control is very crude, and you can't affect the darks without affecting the mids etc.

By using 'Curves' (another adjustment layer type), you achieve precise control, but it's on the other hand a bit harder to understand.



So the coloured curves you see are the colour channels, and the black one is them all gathered (RGB). The bottom left corner corresponds to the dark values, as indicated by the gradients on the sides, and the upper right corresponds to the bright values.

So if you wish to for instance increase the reds in the darks, you create a bump in the lower left part of the red curve, as I've done. If you want to add yellow to the brights, you create a dip in the blue channel in the upper right regions of the curve (since yellow is the opposite of blue).

By doing this you can quickly create a palette from which you can then expand. The great thing is that it's completely accurate, so you can colour stuff afterwards, without having to worry about getting the right colour at the right place, just as if you had used the palette when you painted it.

- By having the palette go from darks to brights with contrasting colours, the overall contrast is boosted, but again, without actually altering altering the image contrast levels, so you get a sort of soft high contrast.

- From this palette I'd add subtle changes in hue to the different areas. To avoid the rainbow effect, rely on careful application of colours, and just hint the colour, especially if it's a contrasting one to the area it's applied to.


Additional stuff

- Added reflections in the floor from the objects in the room, most notably from the brighter areas.


Here's the photoshop file, for reference.

Edit: Fixed link

[TheJBurger]

Thanks again Loominous. I tried to incorporate your changes and the end result looked closer to yours than I would've expected.


(old=blue :: new=yellow)

I made most of your changes and I lowered the outlines a bit (most notably on the door). Also, this was my first time working with Curves, so I hope that came out right.

[deadsuperhero]

JBurger, that looks amazing. Beautiful stuff!

[Blue]

Wow! That looks great