Eyeland Studio: Custom Design
Member Log-In:  Go 
Forgotten password?
 HOME   GAMES   CONTACT   
· Products ·
 Template Foundry
 Games in a Flash


 Ping-A-Pal


 Custom Design

· Links ·
Games in a Flash
Triplejack
BestGuyWins
Edufunzone
iPlayworld
Tutorial: Forging Worlds

Here's a unique method of forging your own mineature world inside your computer using Photoshop! The process I'm about to describe will create planet-like terrains that are seamless textures - whch means you can tile them side-by-side and top-to-bottom and it will always look like a continuous piece of terrain. Build the perfect planet by texture mapping your creation onto a sphere, or just use it as a desktop or web page background.

Step 1: Create the planetary canvas.
First, create a new image in LAB color mode, with white as the background color. Size matters in making the image seamless, so make it 512x512 pixels. You can always scale it down later if needed. If you'd like to make the image larger than 512x512, make sure the dimensions are multiples of 256. So, 1024x1024 should also work fine. When the new image is open, hit 'D' on the keyboard to load the default black and white colors.

Step 2: Create the base colors and textures.
Select the Lightness channel and fill it with 50% gray (EditFill). On both the A and B channels, run the Difference Clouds filter (FilterRenderDifference Clouds) a couple times. It usually helps to create a more varied texture if you run the Equalize filter (ImageAdjustEqualize) between each two uses of Difference Clouds. In this example, I ran Difference Clouds once on channel A, and on channel B, I ran the sequence: Diff.Clouds, Equalize, Diff.Clouds, Equalize, Diff.Clouds. It doesn't really matter how many times you use the filter, but make sure that in the end, your LAB channel displays lots of different colors, like the image at right. By running Difference Clouds on these channels many times, the continents on your planet will end up smaller and have "stringy" landforms. If you only use the filter a couple of times, you'll end up with larger continents. Select the Lab Channel, and you will see a very colorful texture. Convert the image to RGB Mode (ImageModeRGB Mode).
RGB Mode, Background Layer

Step 3: Apply the base terrain color.
Select the Background Layer, and make an adjustment layer above it by Ctrl-clicking on the new layer icon on the layer palette. Select Hue/Saturation from the Type pop-up list, and hit OK. When the Hue/Saturation dialog pops up, check the Colorize checkbox, and adjust the controls to approximate the color you want to use for the majority of your planet's land. I used Hue 100, and Saturation 50 to make a nice green shade. Hit OK when you've found the perfect color.
Base Terrain Color Layer

Step 4: Apply variation to the terrain color.
Run the Clouds filter (FilterRenderClouds) on the adjustment layer to create some variation in the green color that it is applying. Because the clouds filter will probably leave some areas that are very unnatural looking for your planet, increase the intensity of the green by going into the Brightness/Contrast dialog (ImageAdjustBrightness/Contrast), and increasing the brightness while decreasing the contrast. I used Brightness 60, Contrast -20. Hit OK like you've never hit OK before!
Base Terrain Color Layer (Varied)

Step 5: Make a relief map for your terrain.
Select the Background layer again, select all (Ctrl-A), and copy it (Ctrl-C). In the channels palette, create a new channel, and paste the terrain into it (Ctrl-V). Hit Ctrl-D to drop the selection. To make the variations in the relief map strong, Equalize the channel (ImageAdjustEqualize) and add some noise make the terrain rougher, if you would like. In the FilterNoiseAdd Noise dialog, I applied Noise of intensity 10*.
Relief Map Channel

Step 6: Make an ocean map from the relief map.
Now that you have a relief map for your terrain, you need to define what areas will be covered by water. With your relief map channel still active, select the magic wand tool, and set its Tolerance setting to 32**. Click on a part of the channel that is very dark, and then select all areas that are about that brightness by choosing SelectSimilar. Sha-zam! You have a map defining where the oceans will be. Save the selection (SelectSave Selection). In the channels layer, Channel #4 should be your relief map, and Channel #5 should be your ocean map. You can double-click on these channels to rename them to "relief" and "ocean" if it would make it easier to keep track of them.
Ocean Map Channel

Step 7: Create a terrain layer.
Go back to the layers palette now, and select the Hue/Saturation adjustment layer. Click the new layer button to create a new layer above your other two layers. Fill the layer with 50% Gray (EditFill). Go into the Lighting Effects Filter (FilterRenderLighting Effects) and set up a directional light that uses your Relief Map as the Texture Channel. I left all of the other options alone, but I did adjust the location and direction of the light (see screen shot). Hit OK.
Terrain Layer

Step 8: Apply the terrain to the colors.
You should see a gray terrain that looks a bit like the moon. From the Apply Mode popup list at the top of the layers palette, choose Hard Light mode. This will combine the brightness levels from the relief layer with the color values of the layers below it. My terrain looked too shiny with the hard light mode, so I made it more subtle by setting the contrast to -40 in the Brightness/Contrast dialog.
Terrain Layer (Hard Light)

Step 9: Reduce terrain in ocean areas.***
With the gray terrain layer still active, Ctrl-click on Channel #5 (the ocean channel) in the Channels palette to load the selection for the water. Blur this part of the terrain a 2 pixel radius with the Gaussian Blur Filter (FilterBlurGaussian Blur). Hit Ctrl-D to drop the selection.

Step 10: Add water.
Select the gray terrain layer again if it isn't already active, and click on the new layer button once again. Run the Clouds filter to add some brightness variation. Ctrl-click on the ocean channel (#5) to load that selection. Invert the selection (Shift-F7) and hit the delete key. Then, hit Ctrl-D to drop the selection. Yuck, boring gray water, eh? That's not what we want! In the layers palette, set the apply mode to Hard Light mode. Bring up the Hue/Saturation dialog (Ctrl-U), and check the Colorize checkbox. Now, play with the controls until you've found a suitable water color. I used Hue -140, Saturation 50, and Lightness -20. Hit OK, and the water is finished!
Water Layer

Right now, you've got yourself a nice-looking terran planet texture. Pretty slick, don't ya think? At this point, you've either given up because this ludicrously-complex project is taking way too much time, or you actually want to do even more with it. If the latter is the case, you can keep going and add some more features to your planet. Specifically, I'm going to show you how to add a little more color variation to your planet, as well as some clouds as the finishing touch.

Step 11: Add more color variation.****
Somehow the image looks too "perfect" up to this point, almost as if the planet were made of plastic. What am I going to do about it, you ask? Well, I'm going to add some color variation to the entire image, not just to the terrain as in Step 4. Create a new Hue/Saturation adjustment layer above your water layer. I decided to add more reddish shades to my planet, so I turned on the Colorize checkbox in the Hue/Saturation dialog and set Hue 0, and Saturation 50. After hitting OK, apply the Difference Clouds filter a few times in a row to get a good amount of variation. Choose ImageAdjustEqualize. On the Layers palette, adjust the opacity slider until the color variation looks good. I set it to 50%. Notice that the image now has patches of land and sea that have a little bit more red than the rest of the image.
Color Variation Layer

Step 12: Make a cloud mask.
No planet is complete without some clouds. Well, at least the nice planets in my galaxy all have happy little clouds. So, I'm gonna make some clouds. If you don't like clouds, then I suggest you tell all of the future inhabitants of your world that they'd better bring some extra breathing air, because there isn't going to be much of an atmosphere to inhale. Oh yeah, back to Photoshop. It's time to make another new layer. Once you've done so, make some clouds with the Clouds filter. I bet you didn't see that one coming, eh? Run the Difference Clouds over it a few times to add more variation. I used Difference Clouds about 12 times in a row. ImageAdjustEqualize it now! Next, open the Levels dialog by striking the Ctrl-L key combo. In the Levels dialog, slide the middle slider in the Input Levels section around (usually to the right), until you find an acceptable amount of cloud coverage (see screen shot). Hit OK.
Cloud Mask Layer

Step 13: Make the clouds airborne.
Bring up the Color Range dialog by choosing SelectColor Range. Make sure it is set to use Selected Colors, and that the first eyedropper button is pressed. Click on the darkest spot of the clouds in your document. Set the fuzziness slider to 200, and hit OK (see screen shot). Then, hit Delete to leave only the brightest areas of the clouds, and hit Ctrl-D to drop the selection. Set the apply mode to Lighten, and set the opacity slider to roughly 70%. Now, copy that layer by dragging it onto the New Layer button. Select the bottom copy of the clouds layer. This layer will become the shadows under the clouds. Open the Levels dialog with a swift attack on the Ctrl and L keys. In the Output Levels section, set the second text box from 255 to 0. This makes the layer completely black wherever it is opaque. Hit OK. Set the opacity of this layer to 50%, and change the apply mode back to Normal. Now, for the FINAL step, bring up the Offset Filter (FilterOtherOffset). Set the horizontal and vertical offset to 10 and 10, respectively, or try other values to make the clouds appear to float higher or lower. Make sure that Wrap Around is selected, and then hit OK. You're DONE!
Final Planet Map with Clouds

Click for full-size version.

You're Done!
If you're wondering what on Earth (no pun intended) this thing is good for, the answer is "to look cool". By completing this tutorial, you've got yourself a planet texture, or a genuine Rand McNally for some alien world, but you don't exactly have a planet. In the next tutorial (included on the Photoshop Web Foundry CD and Interface Foundry), I'm going to show you how to wrap this texture onto a sphere (in both Photoshop and in 3D apps), and then animate it so your planet spins. In the mean time, you should know that this planet texture is seamless, which means if you tile it as your desktop wallpaper or on a webpage, the edges of the image are nearly undetectable! Try it!

It's a good idea to save your planet texture now, in PSD format, so you can come back and edit the individual layers later. For instance, if you don't like the terrain color you used, you can go right back and double-click on the base terrain color adjustment layer and re-adjust the hue instead of having to recreate the whole thing over from scratch. If you want to save a JPEG version, select the Background layer, select all, then do a merged copy (Ctrl-Shift-C) and paste into a new document, which can be saved as a JPEG.

However, it doesn't hurt to run through the tutorial again. Because the Clouds and Difference Clouds have a lot of randomization in them, you'll get a completely different planet every time!

Sample Planets
Planet by Scott Balay
Planet by Scott Balay
Planet by Ron Kittle
Planet by Ron Kittle
Planet by Scott Hamlin
Planet by Scott Hamlin

Notes
* (From Step 5) Adding just this small amount of noise can make the resulting terrain look very rough, creating lots of little bumps. To create a smoother terrain, skip the Noise filter or use a smaller value.

** (From Step 6) Setting the tolerance to a smaller value will produce larger land masses, and larger tolerances will produce larger ocean areas.

*** (From Step 9) While blurring the ocean areas adds more depth to the overall image, it is the only step that slightly affects the seamlessness of the image. If you look closely at the background of this page, you can barely detect subtle little lines at the edges of the image, but only in ocean areas. If you can't even see them, then this side effect probably isn't a problem at all, especially if the image will be used as a 3D texture map where the edges may be hidden on the other side of the sphere, or too small to see.

**** (From Step 11) You can add even more color variation (and probably more realism) by repeating this step, creating multiple Hue/Saturation adjustment layers with different colors and settings. Experiment a little to see if you can create distinctive desert/forest/snow-covered regions. Remember that you can use the Ocean Map Channel to force the adjustment layer to only affect land or ocean areas. You can do so by loading the Ocean Map Channel and deleting that part of the adjustment layer, similar to Step 10.

Design Now
  Games In A Flash — custom flash games  
©1999-2005 Eyeland Studio Inc.   All Rights Reserved.