Perspective Doldrums....

[Corby]

Well, here's a background from a few years back I've given a paint over. I've only recently started to really pay attention to perspective and vanishing lines. While the floor isn't so bad, the walls on the side are.

So I guess my question is: How bad is it really? I realize I'll eventually have to fix these issues as I've done quite a bit screens without any regard to proper perspective.

Criticism on anything would be appreciated as I should really learn my lesson about now.

Old version:


New version:

[Anian]

Horizon line is maybe a bit too high...not sure if the lines are drawn correctly, but I think that's why the walls look odd. Stone blocks even semm to be getting smaller towards the edge of the screen which definetly is wrong.
You'll need to draw a grid to do those arches above the passages on the left and right.

[Moresco]

The floor is fine, but it gets a little off towards the right.  The door on the right, both of the hallways, and the bricks are badly off.  Your vanishing point accounts for the lines on the floor, as well as the lines on those walls.  So run some straight lines from the VP through the walls and mark where the bricks should be.  These lines don't need to represent part of the artwork, they're just guidelines, so make a separate layer and go nuts with lines.  Any lines you lay down will aide in helping you figure out your perspective.  The lines from the VP are called orthogonal lines and are parallel to each other in space.  They don't touch, basically.  Your verticals (unless it's 3-point perspective) will be straight, without any convergence.  So you can keep the verticals of your bricks, they're correct.

To fix the archways, run a line from the VP across the bottom where it meets the floor, and across the top where you expect the curve to begin (imagine there is no arch, but it's a rectangular doorway).   Now make an X between those four points....that's the center of that doorway.  Run a temporary vertical from that point  up to touch the height for the arch (how tall is up to you here), then just connect the two curves to that new point.  If you want the curve to be perfect on either side, that's a little bit more work and easier to explain in a tutorial.  I'll make one if you really think you'll use it.

Also, sweet background, I like it.

[cosmicr]

I think its fine except for the row of bricks above the horizon. At the vertical line where they meet the back wall the veritcal pixel height should be the same as the rest of the bricks below (or at least close). As the row continues towards the viewer the pixel height should increase to the point where you can't see the top of the brick closest to the viewer.

[Corby]

Thanks for all the advice. I'll keep practicing. How's this for an improvement?

If you want the curve to be perfect on either side, that's a little bit more work and easier to explain in a tutorial.  I'll make one if you really think you'll use it.

Thanks for the offer! Maybe I've improved the arc slightly in the above? I did throw down some lines while I was working at it.

[Khris]

That's a great background, it still lacks perspective-wise though.

Btw, you don't need to upscale pictures yourself, just use e.g. [img width=640].



Assuming the slabs are supposed to be squares, here's what I did:
First I drew the orange line below the green one. Then I put little equidistant helplines on it and drew the perspective lines.
Now the only "hard" part: I eyeballed the y position of the green line. Since we're looking "along" the floor rather than onto it, the closer it is to the camera the more foreshortening there will be. At this distance a square has roughly a 2D format of 2:1. Just image google "floor tiles" to get good reference pics.
With one row of squares in place, I drew the blue diagonal to get the y's of the other lines.

On to the door arcs:



I started with the basic door shape (dark blue). The arc was easily done using the bezier curve tool; starting at the bottom left and putting the end point at the top center, I moved the first anchor to the top left, the second closely to the end of the curve. Repeat for the right side or mirror the left.

Next step: establish a vp and draw the door and arc rectangles (orange). In the actual pic you'd move the blue helplines next to where you want the actual door.

Then: tons of helplines (green).
I halved the arc, drew diagonals, drew the horizontal helpline and continued it towards the vp.
Then I started with transferring the proportions to the right door: a vertical helpline, then the 45° lines.

Almost done (brown):
Since the 45° lines are parallel on the left side, they will meet in a single point for the right door. And since they are in the same plain as the door lines, their vp is directly beneath the other vp. So I connected the topmost green intersection with the top right corner of the orange door, then continued the line to the vertical horizon. (If this doesn't make sense, tilt your head 90° to the right.)

Final step (pink):
Move down from the intersections to the "horizontal" green helpline. The third 45° line from the top indicates the center of the door.

We end up with all the points we need to again use the bezier curve and approximate the arc (light blue).

Of course instead of all this you can simply draw straight door outlines, then use the perspective transformation tool in Photoshop, but where's the fun in that?

[Mad]

Other than the already mentioned problems with perspective, you should maybe also look into the lighting. Since the scene is solely lit by open flames, the colour of the highlights etc. is influenced by this.

I made a very quick and dirty paintover to illustrate this.



I only changed the highlights on the left to illustrate what I meant. You can do this far better with a bit more time than I invested.

I guess most backgrounds in this setting will have the same light sources, so you should think about the overall colour scheme from the start while  drawing your backgrounds.


ps: sorry about the watermark, but photobucket is down and I don't have time to google for another alternative without registration.

[Corby]

Thanks Khris! Great technique. Here's the steps I took:





I'll try the archway next, and thanks for the detailed explanation.

Btw, you don't need to upscale pictures yourself, just use e.g. [img width=640].

Has anyone noticed that using the img width tag makes the picture blurry in certain browsers?

Other than the already mentioned problems with perspective, you should maybe also look into the lighting.

I'll certainly give that a go, thanks!

[Shane 'ProgZmax' Stevens]

I love the floor texturing here, it's very convincing.  The problem, though, is that it clashes heavily with the extremely blended stone walls.  I think you'd get some nice results by putting some of the texture effort you did on the floor into the walls as well, making the stones more chiseled and rough.  The only other issue I see is the scale of the doors.  The top doors suggest one of those huge castle entrances, but compared to the side stairs and the door it's not large enough for that.  The placement of the handles especially is a bit confusing, almost like dwarfs man the entrance.

[Corby]

A new version with more interesting lighting (thanks MAD). Also, better brick texture, a bigger main door, and higher door handles (thanks ProgzMax).

[Sephiroth]

Hi there,

I just wanted to point out something I noticed:

-The junction between left wall and bottom wall is a strange thin black line, it seems too thin compared to the usual space there is between bricks.

-It looks like either the wooden part of the door or the surrounding bricks are a bit off, if you draw the vertical line in the center of the door you'll see what I mean. The bricks and floor are aligned but not the door.

I like it, and the textures are nice

Edit(after your last post): I have noticed something else, it's just a matter of personal taste and by no means a major issue, but I think it would look better if the whole door was slightly moved to the left, because it looks like it is not centered, there's much more space on the left part of the wall than on the right.

[Corby]

Thanks Sephiroth, I fixed that in the above version.

[Monsieur OUXX]

An important thing: The bricks on the wall look like a flat texture.
that is because :
- You've made the wall lighter around the torches -- but only as a lighter area. That's a good start, but...
- ...but you didn't make the EDGES of the bricks very light when they're very close to the torches. Similarly, you didn't darken the edges that don't face bricks.

Fix that (it takes 5 minutes) and your drawing will look much more "realistic" (or at least nobody will look at it thinking "there's something wrong but I don't know what it is")

[Corby]

Good point on the door Sephiroth, my eye didn't notice that.

Some more tweaks left to do, but I'm happy the way it turned out. Thanks for everyone's help, I learnt quite a bit.

[Shane 'ProgZmax' Stevens]

I'm liking the added texturing to the stone walls.  The room has a very distinctive, old school look to it now.  If you wanted to remove some of the additional smoothness without having to do massive touch-ups you could try loading it into photoshop and doing a color-reduce with different color counts and dither methods to see how it looks.  I've done a quick example where I've color reduced the background with simple 50% dithering to try and sharpen it up a bit.  Something else I did was to adjust the color temperature and balance to make the areas lit by the torch warmer (more orange and vibrant) and the areas in shadow colder (shifted more towards blue).  This is a nice post-processing trick you can try yourself to play around with highlights, midtones, and shadows to get some extra zing out of your background.





I probably pushed the highlights a bit much but it was mainly to show you how easily you can adjust the color balance with a few tweaks to get rid of pale, uninteresting colors.

[Monsieur OUXX]

- The room has a very distinctive, old school look to it now.
- If you wanted to remove some of the additional smoothness (...)
-  Something else I did was to adjust the color temperature and balance to make the areas lit by the torch warmer (...)

+1

[Corby]

How's this? First the walls were color reduced slightly with a bit of dither. Second, I targeted the walls for some more warm/cool colors, and a bit more warmness on the floor.

I may have been a bit more subtle with the new lighting, but hopefully the dull colors of the wall are less obvious? Should the areas of the wall farther away from the torches get more warm colors as well? For example, the wall with the right banner.

One thing I noticed: When full screened, or near to that, the colors are much more vivid than this preview.

PSD: here

[Neil Dnuma]

For lighting I did almost what Progz did. I'm unsure of the blue in the shadow areas though, unless there's other light sources than the torches (an offscreen window or somehing). I assumed it wasn't. The contrast is a bit too much now, I'll admit, but I wanted to show some other natural places to add a little more shadow.

I feel you've used the line tool quite a bit in the painting, a lot of the edges along the walls and doors were very straight, so I tried to make some of them a touch more organic, most visible in the foreground walls. Also, the area were the big door meets the floor; it was in perfect line with the wall on the sides, where normally I'd be a touch further back.

The whole thing feels a bit to schematic, as if it were built in a level designer or something, with perfectly symmetric square rooms. If you're creating more rooms, perhaps you could look into some more exciting ways to arrange them.

I do love the retro look, and the statue is really nice.

[Shane 'ProgZmax' Stevens]

I think it looks good, Corby.  Obviously, contrast and color temperature will eventually come down to individual visual taste, but hopefully my example gave you some information you can use on future backgrounds to bump up the colors and shadows with a few simple photoshop tricks.  I'm sure your next background will look even better with you taking all of this into account.

[Corby]

Thanks Prog! I've actually created some interesting lighting on some newer backgrounds so the technique has come in handy. The first version looked quite dull and the colors really add to the scene.

Here's the latest image, which I've slowly added more color to:



I'm now trying to add some support stones for the arcs, like here:

http://www.inkart.com/pages/borders/stonearch.html