finished picture

pencil sketch

Keeping the proportions of your sketch the same as those of your intended background is usually a good idea; FoY backgrounds (the single screen ones) are 320 x 150 pixels in size, so I make my sketches roughly twice as wide as they are high.
The sketch was subsequently scanned as a 150 DPI grayscale image and saved as JPG image (using minimal compression and maximum picture quality).

top

1 - Going digital

To make this (and any of the Fountain of Youth) backgrounds, I'm using Photoshop 7.0 - but it might as well be done in other paint programs such as The Gimp or PaintShop Pro. As long as you use a paint program that can handle layers. I prefer to use a drawing tablet as well, but that is not imperative - all this can be done with a mouse (and regular breaks, to avoid getting RSI from the billions of mouse clicks).

Step 1.1 - Dawning of a new document
To start of I created a new RGB document, measuring 320 x 150 pixels. Always fill the background layer with white or a hideous color like pink - that way you will make sure that you've visited each and every pixel of the picture when you're done.

Step 1.2 - Sketches, Indies and guides
I pasted my scanned sketch into this document and scaled it to fit the document size. This new layer I called "sketch" and set its' blending mode to multiply and its' opacity to 50%. Giving your layers sensible names really helps, otherwise you'll end up with hundreds of layers with unhelpful names such as "layer 12 copy 4".
Making the "sketch" layer half transparent and setting its' blending mode to multiply, means you can easily compare your sketch with the rest of the layers that will make up the picture.

Next I pasted an Indiana Jones sprite into the document (calling the new layer "Indy"). This way I have a nice size reference for objects in the scene: doors, cars, buildings; everything can be easily cross-referenced with the Indy sprite. Finally I added a "guide" (one of those blue lines you can pull out of the horizontal and vertical rulers) to help me define the horizon (it wasn't exactly straight in the sketch). After all these "preparations" the document looks like this:

sketch, Indy sprite and guides in place

All other layers that I'm going to create are going to be below the "sketch" and "Indy" layer, these two will always be on top.

Step 1.3 - Thinking about depth
Most background pictures, but especially landscapes such as these, have distinct "regions" - there is the foreground (the outlined tree, and Indy on the path), the background (sky, sea, hills on the horizon and the fields behind the ridge) and all the stuff in between (the ridge with the ruins and the archeological dig). It makes sense to construct these "regions" back to front (starting with the sky). Each "region" is going to be made up of several layers in the Photoshop document.

top

2 - The background

The background of the picture is going to contain a nice blue sky with fluffy white clouds, some distant hills over the horizon and a smooth lake (which could also be the sea).

Step 2.1 - Making the sky
If you go out on a clear day and look at the sky you will notice that its' zenith (that is the point above your head) is a deep blue, while near the horizon it gets lighter and less blue. There is a perfectly good scientific reason for this, but this is not a meteorological lecture so I won't go into that. Suffice to say that to portray a clear bit of sky you need a color gradient: from blue at the top to a very pale blue/gray near the horizon. I made a linear gradient using a fresh blue (165,208,225 RGB) and a pale gray (230,230,230 RGB).

Next I created a new layer, called it "sky" and selected a rectangular area, as wide as the document, from its' top edge to where the horizon is supposed to be. This area I then filled with the color gradient.

the sky gradient

Step 2.2 - Making a body of water
Water is tricky stuff to draw - it hardly has any color of itself and it reflects its' surroundings. I used the following picture as reference material:

In this picture you see that the sea is dark blue near the horizon and more gray/green near the beach. Again, there is probably a perfectly good reason for this - that I don't know. I picked two colors for another linear color gradient: a lighter and darker variety of greenish blue (117,155,186 RGB) and (137,173,191 RGB).
Next I created another layer (called it "sea" - I know, hardly original), selected an area from the horizon to just below where the water would be visible in the picture (Using the "sketch" layer for reference). This area I filled with my new gradient, making sure that the darkest color was at the top. The document then looked like this:

sky and sea layers

Step 2.3 - Clouds
Ready to get all fluffy? Clouds are as tricky to do as water (but for different reasons). A graphic tablet and pen really help in making clouds - but it's far from impossible with a mouse. I used the brush tool (4 pixel brush, 93% hardness) and pure white to make my clouds in a new layer, and then shaded the underside of the clouds with very light gray (227,227,227 RGB) to simulate shaded areas.

I didn't make any clouds in the left part of the picture, because the hill in the foreground would obscure them anyway.

sky, sea and fluffy clouds

Step 2.4 - Hills
The horizon as it is now, is very flat, empty and dull - time to add something like faraway hills. Stuff that is very far away, like the hills that I'm going to add, tend to fade into the horizon color. This has to do with dust particles in the air, and reflection of light, and complicated meteorological science too complicated to go into right here (ok, I'll admit it - I don't really KNOW).
Just look at this nice reference picture:

glorious depth cueing

See how the hills in the distance get lighter and bluer? To simulate this I choose a pale green/blue color for the hills (155,209,198 RGB), I zoomed way in on the picture (I usually work in the 800% or 1600% magnification) and drew in my hills with the pencil tool (1 pixel brush) in a new layer.
I added some more low hills in slightly fresher color (198,234,193 RGB) in the same layer. At this point I started to think about the position of the sun, and decided to (virtually) place it in the top right corner of my picture. Always decide where your primary source of light is (even if you can't actually see it in the picture) - all shadows and highlights in your picture depend on it.

For the shaded side of the hills I used two darker tints of the colors, chosen from the Color Picker. I drew in the shadows with the 1 pixel pencil tool.

the hills are alive

Again, using the "sketch" layer for reference, the left portion of the horizon was ignored, as it will not be seen in the final picture.

Step 2.5 - Click fest
It doesn't show very well in the picture above, but you can really tell if you switch your monitor to (say) 640 x 480 resolution: the edges of those hills are jagged and hard. That is because I've used the 1 pixel pencil tool - it has no automatic anti-aliasing.
I prefer to do all my anti-aliasing by hand; that way I can control the amount of "blurring" that an edge gets. Using the eyedropper tool I pick up the color of an edge, then switch to the 1 pixel pencil tool and set its' opacity to 30%. Now you can add semi-transparent pixels to the edge, smoothly blending it into the background. By putting two or more pixels on the same spot you can get a 60% or 90% density. The process is tricky to explain, but the following pictures will make it clear(er):

No anti-aliasing

Step 1

Step 2

Step 3

Follow the same procedure to smooth all the harsh edges between the light and dark side of the hills. You can either pick the light color and pixel over the dark areas, or pick the darker color and work in the lighter side of the edge: it makes no difference.

Step 2.6 - Reflections
Remember I mentioned earlier that water reflects its' environment? Time to add some reflections to the surface of the water. I made copies of the "hills" and "clouds" layers, and placed them both above the original "hills" layer.
Then I flipped the contents of these new layers upside down (Edit > Transform > Flip Vertical) and shifted them down to right below the horizon (using the move tool and the cursor keys for this).
To make the reflections less "harsh" I set the opacity of the reflected clouds layer to 30%, and the opacity of the reflected hills layer to 40%. The result looks like this:

reflections added

Step 2.7 - Making waves
The reflections on the water look good, but the water looks very, very flat: it doesn't have any waves (yet). To fix this I added another layer (calling it "waves") and drew some short horizontal lines over the water area with pure white and the 1 pixel pencil tool.

unsophisticated ripples

As you can see I made more lines in the area closer to the "camera" (the lower part of the water area). Waves would seem larger there, and more defined. Then I applied a motion blur filter, with a setting of 4 pixels and a 90-degree (horizontal) angle. This blurs the white stripes in the horizontal direction only, fading their left and right points.
To enhance the feeling of depth I added a layer mask to the "waves" layer. In this layer mask I selected a box around the waves and filled it with a black-to-white linear gradient. This way the waves at the top of the sea (near the horizon) are 100% transparent, while the waves closer to us (near the bottom of the water) stay fully opaque.
The final effect was nice, but a bit too strong so I turned down the opacity of the "waves" layer to 80%.

surfin' time

top

3 - The Fields

It is now time to make the fields that can be seen behind the ridge with the excavation in it. Google provided me with a great reference picture (searching for "Mediterranean" and "landscape"):

To make the fields I created a new layer (get used to doing this: put everything that can be seen as a separate entity in its' own layer) and drew the outline of the fields with the 1 pixel pencil tool using a slightly subdued olive green (121,150,85 RGB). I then filled the outline with the same color, using the paint bucket tool (tolerance set to 0, and anti-aliasing turned off).
Next I locked the transparent pixels of the layer (there is a small icon above the layer list to do this). This way I can fiddle around to my hearts' content in the knowledge that I will always draw within the shape I just created.
With a darker version of the fields' green color I added shaded areas, and added some barren areas with a sandy color (147,140,98 RGB). All this using the 1 pixel pencil tool.

3.1 - Crops and trees
In the reference picture you can clearly see clumps of dark green trees (or bushes?) and lines of crops. To add crop lines to my picture I used the 1 pixel pencil tool, picked white as its' color and set its' opacity to 20%. Then I carefully drew parallel lines in the fields. I also added some pixels in the barren areas to give them some texture.

crop lines

For the clumps of trees I created a new layer, picked a very dark green color (60,112,61 RGB) and splotched "blobs" all over the fields using the ubiquitous 1 pixel pencil tool. I concentrated the trees in lines, in the lowest part of the landscape, and on the ridges.
After that I picked up the darker variety of the fields' color and added some shadow behind the trees, always keeping in mind the position of the virtual sun. The result looks something like this:

... and also the trees ...

To give the trees some more volume I added some darker areas (using the 1 pixel pencil tool at a 30% opacity with black as color) and some highlights with white (same tool settings).
After that I anti-aliased the fields layer (don't forget to unlock its' transparent pixels, otherwise you won't be able to anti-alias the edges). The final result (at least, part of it) looks like this:

look ... olives!

top

4 - The excavation

This is the big one - one of the main focus points of the picture, and an area with a lot of detail in it. It's also relatively big, occupying easily 40-50% of the picture surface. First thing I drew (in a new layer) was the bulk of the hillside with a "dirt" color like the one used in the fields (160,153,112 RGB). Using the "sketch" layer as my reference I then added shadow areas with a darker color (132,125,82 RGB) and lighter areas (178,171,129 RGB) with the 1 pixel pencil tool.

laying down the soil

The edges between the different soil areas are very hard and unrealistic. To remedy this I locked the layers' transparent pixels (thus protecting its' sharp edge against the backdrop) and smeared the layer with the smudge tool (6 pixel brush, 50% strength). I followed the imaginary contours of the landscape, as can be seen in the "sketch" layer. There is no trick or rule here, just go Bob Ross and "feel" the landscape ... I did not smear the edges of the actual excavation pit, because this feature is man-made I felt that the edges should be sharp.
After that I anti-aliased the top-edge of the ridge, resulting in this:

the Bob Rossed landscape

To add some texture to the soil I duplicated the entire soil layer, locked this new layers' transparency and filled it completely with medium gray (127,127,127 RGB). Then I applied an add noise filter (3%, monochrome, Gaussian) resulting in a layer full of gray specks, some lighter, some darker. To mix the original soil layer and the noise layer above it, I set the noise layers' blending mode to overlay, at 10% opacity.

Now all the soil has a uniform grainy look. This is fine on the hillside, but it looks too rough in the excavation pit. To fix this I added outlined the excavation pit (using the lasso tool, and clicking while holding the alt key - thus making a polygon selection) and deleted the noise within the selection.

A final addition to the texture of the hillside was adding two more layers (calling them "lines light" and "lines dark"). The "lines light" layer blending mode was set to screen at a 40% opacity. The "lines dark" layer was set to multiply, at a 50% opacity. In these layers I drew ridges and bumps, using the 1 pixel pencil tool, set to 30% opacity. I used black in the "lines dark" layer, and white in the "lines light" layer. I flicked the "sketch" layer on and off for reference every now and then.

texture added to the soil

4.1 - The temple
The structure that is being excavated was the next point on my list. Using the 1 pixel pencil tool and three varieties of a slightly brownish gray, I built up this "temple" in a new layer. Using the middle tone for the bulk of the building, adding highlighted and shadowed areas with the lighter and darker tones, much like making the initial soil layer of the excavation hill. I also added some toppled columns, fragments of masonry and a recently exposed tile floor to the excavation pit.

three tone temple

Using the 1 pixel pencil tool and some more varieties of the "temple color", I added details: windows, darker shadow areas, ridges and crenellations as well as some pattern to the tile floor. To make the building and its' fallen fragments cast shadow I picked black for a color, set the pencil tools' drawing mode to behind and it's opacity to 30%. Using the "behind" drawing mode lets you draw on the transparent pixels of the layer only. This way I added the shadows that are cast by the building and the columns. Finally I anti-aliased all of it.

the devil is in the details

4.2 - Setting up camp
To represent the campsite I added another layer and drew two ladders in it, descending into the excavation pit. After that I added a layer with the tents. These were done with the 1 pixel pencil tool and a range of greens. I didn't add tethering lines as that would make the picture too fiddly. Finally I added a layer with some crates and a generator (the gray blob, behind the crates).To all these layers I added shadow areas (as described in 4.1, using the "behind" drawing mode). The layers were then anti-aliased.

added the campsite

4.3 - The road
To draw the road I made a new layer, picked a gray (gravel) color (150,150,150 RGB) and with the 1 pixel pencil tool and the shift key I made the outline of the road with a number of straight, connected lines (the shift key is great for this). I filled it with the same color using the paint bucket tool.

Next I locked the layers' transparency and with an airbrush and a light and dark gray added lighter and darker areas to the road, thus showing its' undulations over the hilly countryside.

After that I unlocked the layers' transparency and applied a blur filter to it, softening the edges. To make the road less flat I then applied a 2% noise filter (Gaussian, monochrome) to it and with the 1 pixel pencil tool set to 30% opacity I added white and black lines to give it a more "worn" look.

the winding road

4.4. - The Car(s)
In the original sketch there are two cars on the parking lot: a truck and a smaller sedan-like car. I started drawing the truck (using the 1 pixel pencil tool, and constantly switching between a 100% and 1600% magnification to judge each individual pixel). After a fair deal of clicking it turned out rather nice. Next added its' drop shadow and anti-aliased it. I then started the smaller car, and that just didn't work: whatever I tried, it just looked like a blob of pixels. So I decided to keep just the truck and place it in a more central location on the parking lot.

4.5 - Green stuff
The hillside and excavation at this point are almost done, but they still look barren and more fitting in a desert scene. Time to add vegetation - first off I added another layer, picked a violent green color (124,177,53 RGB) and with the pencil tool set to a 8 pixel brush and 100% opacity, I drew in a green carpet to cover the hillside, avoiding those places where there would be no vegetation: the road, the campsite, the excavation pit and those areas that look too steep. The result looks like this:

nuclear accident, anyone?

The edges of the "carpet" where mottled here and there with a smaller brush. I then applied a blur filter, applied a 2% add noise filter and set the layers' blending mode to color burn, at 35% opacity. These exotic blending modes never fail to baffle me; I can simply not predict the look they will produce, so I usually end up switching them on and off in turn, arriving at a result through trial and error. However, this experiment turned out rather nice:

4.6 - Bigger green stuff
The hillside needs some larger vegetation as well: bushes and (for that authentic Mediterranean feel) cypress trees. So I added a new layer and drew bushes with a dark green color using the (now familiar) 1 pixel pencil tool. With a really dark green color (almost black) I drew in the cypress trees, using the "sketch" layer for reference. I then added volume to the bushes and trees in the following manner: locked the layers' transparency, added highlights with a pale yellow color (1 pixel pencil tool, 30% opacity, 255,247,153 RGB) and made the areas that don't catch the light darker (1 pixel pencil tool, 50% opacity, black). When doing this, keep the "shape" of the trees and bushes in mind: they are voluminous objects, so make them round and full. Having your pencil tool set to semi-transparent means you can go over spots again and again, building up their color gradually. Don't try to be too neat - those trees and bushes are a mass of leaves, not smooth blobs.

After this comes the big one: anti-aliasing all this. Unlock the layers' transparent pixels and get ready to add a few million semi-transparent pixels. When anti-aliasing the trees make sure you anti-alias their tops with long (5 or 6 pixels) ranges of pixels. This enhances their long, slender, tapering shape.

Finally I added another layer beneath the trees-and-bushes layer. In this layer I drew the shadow that trees and bushes cast upon the landscape (1 pixel pencil tool, black). Applied a blur filter and set this shadow layers' blending mode to multiply, 30% opacity.

some bigger green stuff

top

5 - The foreground

The foreground hilltop that Indy might stand on was made in mostly the same way as the excavation hillside. As I've already described that, I'll go over this bit of the picture in high speed - stopping every now and then to show you a peculiar rock formation or nice flower.

5.1 - Under foot
The ground-area was drawn in a new layer, using the same colors and techniques as described in section 4. I added a new layer and drew the rocks and toppled column with two tints of gray.

The ground layer was then smeared (6 pixel tool, 50% strength) and noise (2%, Gaussian, monochrome) was added. The rocks and columns were anti-aliased. I also added some more detail on the toppled column: highlights on the ridges, one of those square holes that held its' connecting metal bar, some cracks and specks.

All this anti-aliasing and detailing was done with - you've guessed it - the 1 pixel pencil tool. Where would we be without it?

Next I added a "dark lines" and "light lines" layer above the "ground" and "rock" layers (using exactly the same settings as described in section 4) and gave the rocks and ground some detail: highlights and shadowy areas on the rocks, cracks, ridges on the earth. The light and dark lines on the path I smoothed out with the smudge tool (4 pixel brush, 30% strength).

5.2 - Horticulture
Vegetation was added much like in sections 4.5 and 4.6; a green mossy carpet was created in a layer (keeping clear of the path) and bushes were drawn in another. I also added a "flower" layer between the "carpet" and "bushes" layers, put some 1 pixel dots on it with a pale yellow color, applied a blur filter and set the layers' blending mode to overlay. The effect is subtle, but just enough to give you a different sense of scale as compared to the excavation hillside.

starting to look like vacationland

5.3 - The gnarly tree
As a final element a foreground tree was added. I put a tree in the top right corner of the picture to counterbalance the temple and campsite and also to make the picture frame less "square". The trees' outline was drawn with black using the 1 pixel pencil tool, then filled with black.

I then protected the layers' transparent pixels and added some subtle dappled light to the tree trunk, branches and leaves, using a 20% transparent, 4 pixel pencil brush with very dark green and brown colors.

To anti-alias the tree I used a quick and dirty technique - just to show you of course. I scaled the tree to 90% of its' original size: this automatically anti-aliases the whole layer (edit > transform > scale). This trick works only if you want the whole layer anti-aliased (not just the edges) and when the size of the objects in the layer is not important to other layers. I personally think that anti-aliasing done by hand looks cleaner.

I added another layer, below the tree layer and drew the shadow it casts over the path and rocks with a black 1 pixel pencil brush. Blurred this layer, set its' blending mode to overlay and its' transparency to 20%.

5.4 - Finishing touches
The picture is almost done - however, I noticed that the "foreground", "excavation hillside" and "fields" sections of the picture tended to blend into each other visually. What this picture needs is more depth. So I decided to add some haziness.

I inserted a layer between the "fields" and "excavation hillside", filled it completely with pure white and set its' opacity to 10%. Then I inserted another layer, between the "excavation hillside" and "foreground" layers. Filled this one with pure white as well, and set its' opacity to 20%

This way the different areas of the picture become more defined, and the picture gets a lot more depth.

a few billion mouse clicks later ...

I hope you enjoyed this lengthy tutorial, and learned some new things. I know I enjoyed making it! If you have any questions or remarks, feel free to send me an email.

Misja van Laatum - may 2003

(Misja van Laatum graduated from the Utrecht College of Arts, way back in the nineties of the previous millenium. He is a freelance (web) designer, artist, games collector and FoY background maker. If you want to see more of his work, surf to www.miez.nl - and learn some Dutch in the meantime).

---

As you can see, computers and graphic arts go together like peanut butter and jelly.  You can probably use these hints for your web design projects as well.  If you've ever seen really well-made logos or business checks, there was a computer artist at work.  If Indy had a cool business card designed, it would be done by a graphic artist.

top