The Material Room

[Gare]

I’m starting this thread on material creation for a number of reasons. I have a personal artistic interest in building interesting patterns, textures, whatever we call the detailed fill we put in shapes... but I’ve also have been asked more than once on some steps to making them. So I invite any tips our members would like to provide right here as well as questions and discussions/evaluations of techniques. Please jump in!

First it would be good to define a material: it’s a design, simple or intricate, repeating or non-repeating, that adds to a composition by way of filling a shape. So we might call materials fills and even the infamously overused marble, granite and wood in modeling programs—sometimes called shaders—all fill this category. Dr. Alvy Smith is one of my heroes; a former Microsoft Fellow, he co-founded Pixar, he’s a brilliant mathematician and accomplished artist, and he even developed the Alpha channel in computer graphics along with the HSB color model—highly intuitive if you’ve ever working in a program that only offers RGB sliders! Dr. Smith once stated that the human eye tends to recognize objects by their fill over their shape. Let’s ponder this one for a moment: you want to do a drawing of an office. How do you visually describe an office? Largely, it’s a bunch of rectangular planes—the most visually complex shape is usually the telephone. Most of the detail in a good render of an office would come from use of color fills, a few textures, and patterns--the pattern in a corkboard, the desktop, the carpet.

So let’s begin by simulating a weave, just for example. A good weave can be used in modeling, fashion catalogs, it can be recolored and repurposed for a miasma of design situations. I’m going to show how to build a simple wicker weave using Xara here, but you can easily port the steps to Illustrator or Photoshop, but the advantage to weaving vector-style is that recoloring is easy and you can scale the design without blurring it or losing detail. Now a weave transverses itself and also repeats seamlessly, so some of the steps to follow involve setting up the workspace; here goes:

1.) Choose Window-->Control Bars and then check Button Palette. Alt+drag the orange wrench icon onto the toolbar to add Options—if you don’t even do this tutorial, you’ve customized Xara’s workspace within which you can work more quickly.

2.) As long as you’re customizing, why not Alt+drag all the Boolean operations to the options bar; add, subtract, intersect, combine, and slice you need all the time. Exit Control Bars.

3.) Click your new Options button on the toolbox and on the Units page, choose Inches for Page Units; on the General Page, type 0.01 in the Nudge size field, then Apply and OK to close.

4.) Create a two inch square; in Xara, you drag a rectangle, type 2in in the width field on the options bar, press Tab, and then type 2in; hit Enter. You’ll delete this square later, for now, give it a medium gray fill, no outline.

5.) Press Ctrl+K to duplicate the square, fill it with blue, and then disproportionately scale its with so it’s about 1:4 proportion and it sits on the left half of the square by nudging it.

6.) Press Ctrl+K to duplicate the rectangle and then nudge it to the right so it looks like you have the Roman numeral 2 sitting in the square.

7. Shift+click the blue rectangles and then add them together by clicking the Add Shapes button you put on the options bar in step 2 (or use Arrange->Combine Shapes->Add.

8.) Press Ctrl+K to duplicate the shape, type 90 in the rotate field on the options bar and then hit Enter. Fill the duplicate with red—see callout 1 on the figure below.

9.) Now to make the weave; let’s make the red shape tuck under the blue at top left and tuck under at bottom right. Create a shape that intersects the red shape at top left where it should tuck over the blue; you can cover almost the entire top quarter of the square. Shift+click to include the blue shape and then use Slice Shapes (click your new button on the options bar or press Ctrl+4). Deselect, and then click the top blue piece and the press Ctrl+F to put it to the front.

10. Create a new shape at the bottom right quarter of the square (in callout 2 below it’s the green rectangle), shift+click to add the red shape, Slice Shapes, select the bottom right red square and then press Ctrl+Shift+B to move it one down in object order. You got the weave going now. It’s time to shade it—where a piece of wicker appears to tuck under, there should be a shadow.

11.) Ctrl+K a horizontal piece; let’s do the top left blue guy. Fill it with black. Drag its top scaling handle down so it’s about .15 inches tall—look at the context bar for the measurement as you drag.

12.) Choose the transparency tool and the while holding Ctrl (to constrain transparency direction) drag straight up.

13.) Create three more of these transparency pieces using steps 11 and 12 and then shade the remaining areas. The bright colors—so you could see what you’re doing in earlier steps—aren’t necessary any more so fill them with a lighter and a darker brown fill. Your weave should look like callout 3 in the figure below.

14. Basically, you’re done. But if you want threads running through the wicker pieces, there’s a lot of ways to do this. In Xara, you can apply the fractal clouds fill by choosing the Fill tool and then choosing it from the options bar drop-down list. The fill direction handles appear on the shape, you click the center point, choose a color, then click the tip of either arrow and choose a slighter deeper or lighter fill color. Then you smoosh the arrow handle almost directly to the center fill point to distort the fractal clouds to look like fiber. But most likely the fibrous fill will not align properly when it ties. Try exporting to Photoshop and use Filter->Other->Offset, and then use the Clone tool or the smudge tool to remove the edge seams. Better still, don’t use Fractal Clouds in Xara at all; instead, bring a bitmap copy into Photoshop and then use Filter->Render->Fibers.

15.) Exporting: okay. Delete the background square and then select all the pieces and then press Ctrl+Shift+E. In the Export box, choose PNG as Save as type; click OK. On the Palette Options tab, choose TrueColor+Alpha from the Color depth drop-down and then click the Bitmap Size tab. If this is a material you want to use on a model in a 3D program consider what your scene render final size is going to be, because bitmap textures ideally should be the same size as they’re featured in your scene render. For example, you want a wicker sphere taking up most of a 640 by 480 pixel rendered scene. And you want the wicker to tile 10 times on the sphere. You could therefore get away in Xara exporting to about 48 pixels on a side. I usually render 2500 x 1740 scenes, and just as a self-invented rule, 600 by 600 pixel tiles work well in scenes of such dimensions. If your modeling program is forced to increase your material’s resolution, you’ll get artifacting. But because you designed a vector material, it can be scaled for export to bitmap at any resolution you like in the future. Look at callout 4 in the figure; click OK to export, you’re finished and your wicker has holes in it because PNG supports transparency. Nice!

To make a corresponding bump map for your wicker, you can simply assign grayscale values to a copy of your original. I’ve posted the Xara file here so you can unzip it and decompile it and use it if you like.


My Best,

Gare

[Gare]

Here's the wicker material applied to objects. Naturally, the texture can be used in 2D illustration such as the background to a fancy furniture catalog.


The thing I found interesting/frustraing about getting the holes in the wicker to disappear was that I'd originally created the bentwood chair seat as an extruded circle. But if you map the wicker to a solid, the holes are filled because the the solid extruded circle has two sides and the texture maps to the back as well as the front. So dim me after a while understood and I then replaced the solid object with a surface, a shell that has no depth, by using a NURBs circle.

My Best,

Gare

[Gare]

Marble usually consists of three or four variations on the same hue, with varying saturation and brightness. It’s no surprise that Photoshop and Corel Painter can so adeptly mimic marble because fractal math, when you play with the parameters, can make images that look like veins and storm clouds. And marble’s visual details look like veins and storm clouds!

Painter can render marble a little better than Photoshop; I’m going to show marble-making steps in Photoshop first, however. Filters->Render->Clouds and Clouds Difference both use something called a self-terminating fractal—at specific file sizes, the fractal math repeats, auto-creating seamless tiles.

1.) Create a new image in Photoshop that’s 256 by 256 pixels, or a multiple such as 512 by 512.

2.) Set the foreground color swatch on the Toolbox to any color and set the background color to a lighter, paler version of your foreground color.

3.) Choose Filter->Render->Difference Clouds. Difference Clouds does three things: it creates the chromatic inverse of the current image, it adds colors the more you apply the command and it progressively adds turbulence, a ropey kind that gradually looks like marble veins after a dozen applications.

4.) Press Ctrl+F a number of times. In callouts 1 and 2 in the figure below, I began with two shades of blue, but after 7 applications I got this predominantly puke-yellow number, but this is okay because we’re just shooting for texture and not texture color.

5.) Press Ctrl+U for the Hue/Saturation command. Let's create blue marble here--choose whatever predominant color is apparent in the Edit drop-down list. Then increase the bracketing on the bottom spectrum strip to include neighboring colors. In my own trial seen as callout 3 below, I added some orange to the overall hue I wanted to modify, then dragged the Hue slider to +151, a relative shift that gets me most of the direction in which I want to go.

6.) Press Ctrl+L (Levels) and then drag the White Point input slider to the left to make the marble more rich and dense. Use your eyes to evaluate the best density; see callout 4 below.


-g-

[Gare]

I’m building a marble material using Painter 6 in the steps to follow; Corel Painter 9 uses the same techniques but commands are located in slightly different areas; bear with me because this is a way-cool, practically automated procedure:

1.) You don’t need to open a new document in version 6—you do in 9 for some inexplicable reason; on the Patterns area of the Material palette (Ctrl+9 in version 9), click the menu flyout button and choose Make Fractal Pattern; see callout 1 below. These fractal patterns like Photoshop’s Clouds filter, are all self-terminating—you cannot make anything but a repeat pattern. Good!

2.) Fiddle with the Power slider (lower values make a better marble material) and the Feature Size (larger values are better) until you have a stormy clouds look. Click OK.

3.) On the Gradient area (Ctrl+8 in version 9), click the menu flyout and then choose Edit Gradient. Scoot the box out of the way so you have a clear view of the color picker wheel thingy.

4.) Create a five-stop gradient in greens (we’ll make green marble this time); callout 2 below shows my custom gradient—you create new stops by clicking the gradient strip and then with the color stop selected, you play with the color wheel. Your gradient does not need to make a progression from light to dark; in fact, you’ll get a better marble if you mix up the brightnesses of your color. Click OK.

5.) Click the menu flyout on the Gradients and then choose Express in Image. Drag the bias slider to the right until the preview looks interesting. Bias—see callout 3-- is cycling the gradient as it’s mapped to the fractal—and you get nice sharp edges that look quite marble-like.

Save your image to a file format other than Painter’s default, native RIF, which no other program can import. Below is a scene where I needed classy-like marble to rest a classy-like perfume bottle on. However, materials can be used in a myriad of design situations, 2D as well as 3D.

My Best,

Gare

[Gare]

Peacock paper can be found in arts and crafts shops; it’s the stuff they cover expensive limited edition books with and it’s accomplished in the real world by dragging a feather and a rake through paint that is puddling.

If you have Painter 5 or later, you can do peacock paper through the Marbling command—it’s sort of hidden and that’s why I didn’t find a single blessed tutorial on the Web on this feature! It’s an elegant effect and here’s how to do it:

1.) Although you can pepper a new document with Effects->Esoterica->Blobs to prep the image, it’s much easier to create a fractal as the base through the Patterns->Create Fractal Pattern menu flyout. Do a large 2048 by 2028 one and keep the Power very soft, not noisy.

2.) Choose Effects->Esoterica->Apply Marbling.

3.) Click Load and then choose Vertical Get Gel. Click the Reset button; you’ll make a two-set script for future use. You’re at callout 1 in the figure below, but figure 2 shows what you’ll get in your recipe. Don’t click OK yet. You can play with the sliders, but all I've discovered is that the Quality slider significantly impacts on clarity.

4.) Click Load and then choose Bouquet. Drag the Quality slider to the right; this slows processing but provides much better results.  Click Save and name your mini-script “peacock paper”. Now you can click OK and you’ll get a wonderful grayscale pattern as shown in callout 3.

5.) Apply color; on the Gradients area, choose a nice one or create one using the steps in my previous marble texture tutorial. Then click the Gradient menu flyout and choose Express in Image. Drag the bias to the right if necessary to cycle the gradient a little. Click OK and you now have something similar to callout 4 below. This image will not tile seamlessly—that’s why I suggested a 2048 by 2048 document.

Save it. You might want to crop the image because there might be uninteresting areas and it’s unavoidable the there’s smearing at the top of the image. Consider using Effects->Surface Control->Apply Surface Texture using Image Luminance to get an intricate, rich emboss effect. In Photoshop, you can Offset and Clone the image so it tiles; if you’re not familiar with this Photoshop trick, I’ll cover it in the next few days here on this thread.

My Best,

Gare

[Gare]

Here's a finished example of the preceding tutorial. Unfortunately, the d'boxes above in the step numbers are fuzzy because they're so darned large, thanks Corel! But hopefully you get the idea.

My Best,

Gare

[Gare]

Here's how you can create seamless patterns using a vector drawing app:

1.) Set up your units to inches to make the calculations easier. Computers are supposed to do calculations; humans are supposed to be creative.

2.) Set up your nudge distance to 2 inches.

3.) Create a 2" square. This is the background to the pattern.

4.) Create a few ornaments and put them in the square or slightly falling outside the square; doing this helps disguise the repeating nature of your pattern--see callout 1 in the figure below.

5.) Here's the challenging part; if an ornament falls outside to the top, it must also fall outside on the bottom of the square. So you duplicate the ornament in-place; in Illustrator, you do a copy and then Paste in Front. In Xara, it's Ctrl+K. If you're running the Expression Graphic Designer CTP from Microsoft, it's Copy and then Ctrl+F to Paste in Front.

6.) Nudge the duplicate in the appropriate direction. Now, if an ornament falls both outisde and left, or outside and right, you need to duplicate it twice and then nudge in the opposite direction--see callout 2 below.

7.) Select the background, not the ornaments, and then export at any resolution you like to a bitmap format you can use in a dtp program, for the Web or for surfacing a model. In Xara, you select the square, press Ctrl+Shift+E and then choose a file format without alpha capability or the export won't include the ornaments.

You can tile the pattern as frequently or sparsely as you like--see my candle scene. Also, if you want something like a polka dot pattern, your dots should look like a "5" on a gaming die, with the four outside dots only 25% inside the background square. You can intuitively do a lot of variations on this trick and all your patterns will tile seamlessly.

My Best,

Gare

[Gare]

Many of you already know this trick, but for those who don't and own any version of Photoshop back to v. 3, here goes; In Filter>Other is the Offset command which can wrap an image window. This is great for editing a non-repeatimng texture into a seamless tiling one:

1.) Choose Filter>Offset, and then choose Wrap Around. Then drag the Horizontal and vertical slider so you can see the seam as shown in callout 1 below.

2.) With the Clone Stamp tool, Alt (Mac: Opt)+ click to sample an area. Release the key and stroke over the edges. This works best with textures like this tree trunk because its texture is largely undefined, diffuse, and the soft edge of the tip of the Clone Stamp (um, choose a soft brush tip from the Options bar, or just right-click in the image (Mac: Ctrl+click) to bring up the Brushes palette) disguises the discontinuity of the texture as shown in callout 2 below.

3.) Save and have fun. In callout 3, I imported the image to Xara, created a freeform shape and then dragged the image from the Bitmap palette onto the freeform shape.

Similarly in Painter, create a new image window and then on the Patterns palette, click the menu flyout and choose Define Pattern. The image window wraps around all by itself--all you do is paint and when you move off the right edge, for example, the brush stroke returns og the left edge. Use a nozzle to create truly fresh, unique, one-of-a-kind pattwerns that tile seamlessly.

My Best,

Gare

[Gare]

The preceding tutorials show you many ways to create materials from scratch but occasionally you’ll have a need for a jump-start. The following programs are free or inexpensive, and they’re off the beaten path—the results you get with them do not look like every third Web page background! They’re Windows-only; if our Macintosh members have found similar goodies for OS X, please jump in!

Paurex offers Texture Processor for free; its big brother Image Styles 4 is about $40. I found it to be worth it—the procedural texture generators produce distinctive but very extraordinary abstract seamless designs.

Spiral Graphics has got Wood Workshop for free. It’s the kid brother to Genetica which is pricey at $100 for the standard edition and about $400 for the Pro edition. The difference in price is not a compelling one—you have some particle physics and a clouds generator that other Photoshop plug-ins have done better for years. But Wood WorkShop and the standard edition Genetica produce passably realistic nature, metal, stone and fabric textures and the learning curve is very shallow. Wood WorkShop can produce uncut wood or planks and even generates bump maps. Genetica is basically the only game in town these days for fairly realistic real world textures; I’ve looked around. Wood Workshop will not write out an alpha map of textures so you can't create bump maps or displacement maps like you can in Genetica.

TextureMaker  is perhaps the most robust seamless texture maker with the most daunting interface. It’s $40, I bought it and after hours I’ve only scratched its surface. It’s good for realistic, abstract and Martian textures. Like Genetica, it can write really nice alpha mask images.

Texture Editor  is freeware and the textures it generates are distinctly different from others. Very organic stuff.

All of these programs require a little knowledge of procedural texture-making; only Genetica offers a brain-dead UI. Procedural textures are "recipes"; a procedure is declared by dragging 'n' dropping generators and modifiers. An example of a generator is a sine wave; a modifier displaces, adds noise, and so on. Procedural textures are set up much like tree shaders if you're familiar with 3D textures in modeling programs. If you're completely baffled and I don't blame you, think of procedural "nodes" (modules) as layers in Photoshop and the blending modes. As far as fractal generators go, some of these programs have it and some don't. Just remeber that a procedural texture can include a fractal, but fractals aren't procedural textures. Here are some examples, and I'll continue the mini-tutorials as soon as I can think up some more.

My Best,

Gare