| Return to CIS 300. |
|
In this lab, you will learn to make tesselated textures to be used in games. In addition, you will be introduced to Illustrator to learn some of the basics of vector graphics.
Textures are a vital asset to nearly any modern game. They are the paint used on 3-D objects and 2-D objects of varying size. You may be designing a sidescroller that uses a texture for the sky, or a first-person shooter that uses textures for everything from the ground the player walks on to the gun in his hand. These examples draw on 2 main categories of textures: those of definite size and those of indefinite size. A definately-sized texture will usually be UV-mapped -- a process used by 3-D engines that decides exactly which pixel to take from a texture and where to place it on a 3-D polygon -- while indefinitely-sized textures will be used as a basic tile repeated to paint across a 2-D surface instead of using a solid color.
This lab focuses on the repeatable kind. Making a repeatable pattern is really not hard if you know how, and that is the purpose of this lab. First save this image to your computer as a jpeg (Right Click->Save Image As...).
Before we get into the lab, we need to understand how the Clone Tool (also known as the Rubber Stamp Tool) works. It is located here:
Open the stone pattern in photoshop, then select the Clone Tool. Right under the menus are the Clone Tool's options. It has a brush shape and size just like the airbrush or eraser, an "Aligned" checkbox, a "Sample All Layers" checkbox, and some other options that we don't care about right now. Set it to a hard-edged circular brush of size 30 and make sure that both "Aligned" and "Use All Layers" are checked. Now hold down "alt" for PCs or "option" for Macs and click on any area in the image. You just sampled that area; it's like you made a big 30-pixel stamp of the area you just clicked on. Now left click without holding down any keys somewhere else on the image. Keep clicking around and see the result. If you don't see anything, make sure your Opacity and Flow are both at 100%, and that your Mode is set to normal (in the options next to the brush size).
Notice that as you paint and move the stamp around, the sample moves along with it. It also remembers where you last sampled from. In other words, you could alt-click the top of a vertical line, move the cursor to the right, and then left-click and drag the mouse downard to make a copy of the line. If you let up the left mouse button and then click it down again, the line will continue where it left off. You cannot make a new line unless you alt-click on the line to resample it. Try this out by picking a color and painting a spot on a new layer. Now use the clone tool and sample the spot. You can keep clicking around the rest of the image, but you cannot make another spot unless you go back and alt-click it again. Now uncheck the "Aligned" checkbox. This makes the sample area reset each time you let go of the left mouse button. Sample the dot and left-click around. Each time you push down on the mouse, you start with the dot.
The "Sample All Layers" button determines whether your sample the merged image, or just the selected layer. When this is checked, you sample exactly what you see (although you only paint it onto the currently selected layer). If you uncheck this box, then you only sample from the currently selected layer. Play around with the Rubber Stamp until you get comfortable with it; it's about to become your best friend in the next step!
A tessellation is any pattern than can be seamlessly repeated (both horizontally and vertically). You're going to make the stone texture into a tessellation. Here's how:
When you are done, you should name your texture Stone.jpg. This is one of the files that you will submit.
After finishing making Stone.jpg, you should make 2 tesellated of your own tessellated textures. They can be anything you want, but you might recieve extra credit for "really good" ones.
Play around with the amazing assortment of filters that photoshop has to offer. You will often use Filter->Render->Clouds and Filter->Noise->Add Noise... (almost always with "Monochromatic" checked) as a starting block. There are also a wealth of texture tutorials online. If you just type "Photoshop _____ texture tutorial" (where _____ is the type of texture you want to create, ie "wood" or "rusty metal") into Google, you should be able to find dozens of suitable tutorials. Here are a few sites that have some particularly good tutorials:
It is also a good idea to find a picture of what you are really after. You want a nice wood grain? Just take a picture of a table or scan the surface. Even if you make your texture from scratch, it's very helpful to have an example of what it "should" look like right next to you as you work.
You can use a real picture as the basis of 1 of your textures if you want, but at least 1 must be made from scratch. You should name these files Texture1.jpg and Texture2.jpg, appropriately.
Now that you're a Photoshop pro, it's time to introduce you to Illustrator. That's that "other" Adobe program that no one really knows how to use.
To truly understand the difference between Photoshop and Illustrator requires an understanding of rasterized graphics (a la Photoshop) versus vectorized graphics (a la Illustrator). Photoshop deals mostly with bitmaps; not the file format (although it DOES use .bmp!) but a map where each coordinate is one pixel and each pixel is represented by a specific number of bits to determine its color and luminosity. If you zoom in far enough, you can see each pixel. You can never actually get a smooth curve in a bitmap.
Illustrator, however, deals mostly with vectors. That is, it remembers a formula to create a shape and then only rasterizes that shape to display it on the screen (or print, export, etc). Each time you move the image or zoom in, it just uses the formula to produce a new bitmap to send to the screen. This means that you can zoom in as far as possible and only be able to see individual pixels if your display is at a low-enough resolution. Vectors have the distinct advantage of being non-destructable. You can shrink vector shapes and then stretch them out and they do not degrade in quality. Large posters are often done using vectors because they will be smooth even when printed on several square feet at 600 dpi. You'd need several gigabytes of storage space to save a bitmap of that magnitude!
There are many tools available to you in Illustrator, but the Pen Tool really takes the cake. It is located here:
Let's practice! Open a new document in Illustrator. Select the Pen Tool. Now left click anywhere on the canvas. You should see a little blue dot. This is your first anchor point in the curve you are about to make. Now click somewhere else. Voila, you have a line. Now make a third point, but instead of clicking, press and drag the left mouse button. A little bar with 2 dots on it appears and follows your cursor. Letting go of the mouse locks that bar in place and lets you make a new point. The dots from the handlebars and anchor points all represent points that Illustrator uses to make a spline, or a mathematical representation of a curve. If you select your curve and stretch it out, it's still smooth!
Play around some more with the Pen Tool. If you want to make a sharp corner, just click on the last point you created. This will remove the bar coming from that anchor point, thus permitting sharp corners. For example, press and hold the left mouse button on a blank canvas to make a new curve. Now press and drag another anchor point. If you were to click a third point, your curve would be smooth. Before creating your third anchor, click on your second anchor to remove its handle bar. Now create a third anchor point. You should have a corner at the second anchor point.
If you make a mistake and the curve you are creating becomes deselected, just click on the last point (with the Pen Tool selected) to continue the curve. This removes the last handle bar, though, so if you don't want a corner there just press and drag the last anchor point to regain control of the curve. When you are placing anchor points, clicking on the first anchor point closes the curve. To modify anchor points after you have created your curve, click on the Direct Selection Tool (the white arrow next to the regular Selection Tool) or press A and then drag-select any anchor points you want to modify. You can even change the handle bars once you have an anchor point selected. Also, if you want to add a new anchor point in the middle of a curve, select the Pen Tool (press P) and click on the curve. Clicking on an anchor point with the Pen Tool will remove it.
Now it is time for the assignment. Save the following image as a jpeg named MohanRules.jpg.
Next go into Illustrator. Open MohanRules.jpg. This is actually a vector shape with a texture on it specified by MohanRules.jpg. Select the picture with the Selection Tool (V) and go to Object->Lock->Selection. This will prevent you from accidentally moving it. If you want to unlock it, go to Object->Unlock All.
Select the Pen Tool. Change the fill color (located where the foreground color is in Photoshop) to transparent (the gray box with a red slash through it) and the stroke color (located where the background color is in Photoshop) to black. Change the stroke to 3. You may have to go to Window->Stroke to make the little stroke box appear. Now trace Mohan's name.
Now for the Rulez! Set the stroke to 6 and pick any color for the stroke. Trace Rulez! To ensure that the hole in the "R" is visible, you may have to move some shapes up or down. Each shape is basically on its own "layer" (not the actual Layers that operate the same way as they do in Photoshop) so that when 2 shapes overlap, one always comes out on top. To move a shape up or down, select it and go to Object->Arrange->Bring Forward or Send Backward. Once done, select all of the letters in Rulez and give them a fill color. Now select all of your objects (you can't select MohanRules.jpg because it's locked) and go to Object->Group. Now you can move them all at once easily. Move them off to the top and marvel at their beauty.
When you are done, save the file as MohanRules.ai.
Now you know the basics of the Pen Tool. Illustrator is an amazingly robust program, with MUCH more to offer than just basic shape creation. Go get some books or go online and find some tutorials to unlock Illustrator's true potential. It may be a frustrating program to learn, but it's worth the pay-off once you become proficient!
Create a zip file containing the following files:
Submit this zip file as "lab3art.zip" to CMS.
Due Wednesday February 13, 2008 at 11:59pm