pag. 1

Sims 3 Pattern Making Tutorial

Now the dust has settled, everyone is making patterns - except you. That's because you've

tried all the proper tutorials and STILL failed, but didn't like to say out loud in case everyone

else pointed and laughed. Well, meet me then! I failed too, so I've written another tutorial who

those of us who need every last degree explained carefully - and soon you'll be making patters

too, probably using someone else's texture because you can't draw either!

About this tutorial…

There are several tutorials discussing how to make patterns for the Create-A-Style tool in

Sims 3 that are helping many people make great patterns. However, I started out as a total

beginner, and was still fumbling with issues such as ‘why channels?’ and ‘how do I add an

alpha?’

when other people were seemingly outputting a pattern a minute!!!

If you too are floundering and feel like you know nothing, hopefully this tutorial will help

you. After you’ve succeeded with this one, you’ll be able to move on to more advanced stuff.

This tutorial is meant for people who still have no idea what they’re doing and need to know

WHY they're doing this or that. So it DOES go on a bit. But that's me!

Your pattern

pag. 2

I’m not going to make a pattern from scratch (because that would assume you can paint stuff)!

Instead, and because I can't paint stuff either, I’m going to convert an existing texture using a

basic select tool to split a brick pattern across three channels (and an alpha) to make the

English Victorian brick pattern shown on the right. You can use any pattern (including my

brick pattern).

Whatever you use, ensure you start with a pattern that has easy sections to cut out and divide,

and is sized 256 pixels wide by 256 pixels high.

What you will need…

(1) A graphics program that can divide graphics into separate RGB (red, green, blue) images

(channels)

(2) Optional - a DDS plug-in (not all graphics programs support them). If you’re using

Photoshop, nVidia has produced a Photoshop plug-in specifically for Photoshop

(http://developer.nvidia.com/object/photoshop_dds_plugins.html). Note that this only works

in 32-bit versions of Photoshop (there's no 64-bit version). For any other art program, search

the net. If your art program has no supported DDS plug-in, you will need to use the PNG

format instead (see PNG or DDS below).

(3) The TSR Workshop tool (http://www.thesimsresource.com/workshop)

PNG or DDS?

To be able to make patterns with the full 4 colours of Create-A-Style, you will need to save

your pattern as a DDS file. Some graphics programs (including Photoshop, GIMP and Paint

Shop Pro) have DDS plug-ins available on the net that you can install. Other programs

(including Corel photo X and Photo X2) don’t seem to have DDS plugins at all but can still

support the PNG format instead (your only restriction with PNG will be that you’re limited to

just 3 of the 4 available pattern colours – though most patterns actually don’t require 4

separate colours).

pag. 3

Prepare a new custom pattern image…

To make a custom pattern in your graphics program, you need to create a new, empty image.

The only settings that are important are:

· Size (your image must be 256 pixels wide by 256 pixels high)

· Image format (it must be an RGB image – 8 bits per channel)

· It needs a black background (explained later)

None of the other settings shown on the right are important and can be ignored.

Your image’s background colour…

Some people recommend a 100% white background, others recommend a transparent

background, and still more suggest 100% black. For me, black has always worked the best

when converting a texture into a pattern and allows you to make use of a secret-fifth colour

(well, not THAT secret really)...

If you’re not sure, choose black like me so that your image will work like mine through this

tutorial.

Greyscale

You're finished pattern will be a greyscale image ready to be converted by the TSR Workshop

tool into a pattern. Here is how a greyscale image works:

· Black is invisible

· White is solid

· Grey is see-through (the darker the grey, the more see-through it becomes)

pag. 4

Channels instead of layers…

We’re going to divide our pattern into CHANNELS (because that is what patterns use in

Create-A-Style). Graphics programs differ in how they allow you to work in channels;

Photoshop has its own Channels window as shown on the right. However, when making

patterns, channels allow you to copy and paste into them in exactly the same way you would

with layers.

For our pattern, the channels will layer on top of each other, with red at the bottom, followed

by green, then blue. The alpha at the top is mentioned a little later.

The finished image layers the channels in the order shown on the right. Images in a higher

channel will obscure anything it overlaps in a lower channel, so you need to be careful about

that. Fine for a tartan rug, but not good for brick!

Adding a fourth colour (an alpha)…

RGB images only have three channels - a problem if you want to make a 4-colour pattern! But

all we do is cheat by adding an 'alpha' as the missing fourth channel. For patterns, the alpha is

nothing special; it's just another channel.

Your new alpha will probably be named Alpha 1. Only add one alpha. If you have additional

alphas in your image, delete them because the game can only use four colours in Create-A-

Style. Adding 20 alphas is just plain silly so don't do it!

pag. 5

How channels work in the Create-A-Style tool…

And now the fog should clear a bit! Channels merely represent the four colour pickers in the

game! The picture on the right shows that every channel in your pattern relates to a colour

picker in the Create-A-Style screen. How cool is that?!

Any graphic you place in your red channel will be controlled by the first colour picker in

the Create-A-Style tool. The graphic you place in your green channel will be controlled by the

second colour picker, and so on. Hopefully now you can understand 'why channels'!

If your pattern doesn’t use some of the channels, its corresponding colour picker in the

Create-A-Style tool won’t be clickable. Remember: there is no snobbery or fame to be had im

making 4-colour patterns! Many EA patterns use only one - and EA pretty much know what

they're doing!

Hint: The names of the channels (red, green, blue) bear NO relation to the colours of the

pattern (ie the blue channel does not need to hold blue colours…).

For my brick pattern, I placed the mortar image in the red channel, then used the remaining three

channels for different selections of brick. This allows the player to make three different shades of

brick. My shades differ only very slightly in this example.

pag. 6

Seamless tiling

Before you do ANYTHING with your pattern, you must ensure that, when the pattern is

repeated vertically or horizontally, no join lines are visible (and that's known as ‘seamless

tiling’):

· Any lines or pattern must join unnoticeably

· There should be no gaps between each repeated image

· The pattern itself should have no noticeable 'repeat' to it

The green squares on the right are each made up of a pattern tiled 4 times (that is: each green

square is 2 patterns wide, by 2 patterns high). In fact, it’s rather obvious how many times the

pattern is repeated in the left-most square because you can see the joins clearly because the

pattern does not line up. The rightmost green square does tile correctly with no visible join

and so is more seamless (though the middle column of tiles is a bit dark and might result in

some repeated dark bands when used over large areas).

You might be making a single pattern as a motif for a tee-shirt, but someone who downloads

your pattern might want to use your pattern as wallpaper or the covering of a sofa (in fact, you

can count on it)! It is for this reason that some Sims websites (TSR too) will reject your

pattern unless you provide screenshots proving that your pattern does tile seamlessly. Extreme

closeup of your pattern on a Sim's sock does not count as evidence of good tiling!

pag. 7

How to make seamless tiles

There are various plug-ins available on the net for seamless tiling in Photoshop, and plenty of

downloadable widgets aimed at achieving seamless tiles. There are also tutorials on making

your tiles seamless manually (and it's actually very easy to do it manually with Photoshop's

offset filter). These are beyond the scope of this tutorial but you should find plenty of

information if you search the net for seamless tiling help.

For this pattern I actually used the in-built seamless tiling option found in most recent

versions of Paint Shop Pro (including Corel Photo X and X2 – under Effects/Image

effects…). It works really well for most graphics, including my uneven bricks pattern (an

extract of the pattern tiling shown here in Corel’s Seamless Tile preview window).

Dividing your pattern into channels…

pag. 8

It’s now time to divide your pattern into the recolourable parts. Take a look at the picture on

the right. This is how your image will begin to look as you start adding parts of your pattern

to each channel. Don't worry: it won't look like that in the game - unless you do something so

unthinkably wrong it hasn't even been invented yet!

If not using all four colour sliders for your pattern, use the channels in order of red,

green, blue then alpha. That is: if you only have one colour, place the entire pattern in the

red channel only; if you have two colours, use the red and green channel, and so on. Don’t

delete a red, blue or green channel (these are required as a minimum, even if you’re not

using all of them). You only need to add a fourth channel (an alpha) if you need to use all four

colour buttons in the game.

What you put in each channel is up to you, but the usual approach is to put the bulk of your

pattern in the first (red) channel, and then work upwards with the smallest parts of your

pattern being added last.

Transferring each part of your texture…

Before doing anything, you might find it helpful to open the texture you’re working upon in a

new window. That way, you can safely copy and paste parts of it without harming your

original. But you were doing that anyway. It was only me who found she'd hacked through

her only copy of the pattern at the precise moment that it was too late to redeem it!

To cut out the bricks, I used Photoshop’s Quick Selection tool (Photoshop CS4). This tool

makes good guesses at outlines when selecting each brick shape, leaving me with only to trim

a few bits of mortar that had been included with some bricks. Other select tools including the

Magic Wand (which most programs have) are good for this too.

pag. 9

Some selection tools have tolerance settings: the lower the tolerance number, the less

‘similar colours’ are selected with each click. The image on the right shows the selection

results obtained with the Magic Wand tool when tolerance levels are set at 0, 10 and 30

respectively. Experiment for the best results. It's at moments like this that you might wish all

those bricks were very different colours of the rainbow!

Other options… Different art programs offer many ways to separate image parts. For example: if you have an

image made of obvious different colours, you can use adjustors such as Photoshop’s Black

and White sliders (Image/Adjust/Black and White) which will allow you to set some colours

to be very dark , leaving you with a selection of lighter parts of your graphic (e.g. all the red

shades) to move in isolation to one of your channels. For other graphics (like these bricks),

selection tools are a better way to select parts of a graphic. There is no rule; use whatever is

most familiar to you.

pag. 10

Pasting your selection into a channel…

For my pattern it is easier to start with the bricks, so even though I intend adding the mortar to

the red channel, I'll do that last. The mortar will be easy to select once all the bricks have been

transferred.

As I'm saving the red channel for mortar, I've pasted my first selection of bricks into the

GREEN channel of my prepared pattern image. This was simply a matter of selecting some

random bricks in my original pattern, copying the selection, then selecting the green channel

in my new image and pasting the bricks there. Done!

When pasting into one of your channels, DO check you have selected the correct destination

channel (and that you don’t have two or more channels selected) - guess who made this

mistake too! Unless you want to create any interesting effects, the separate parts of your

pattern should not overlap parts in other channels. And bricks don't really need 'interesting

effects'.

pag. 11

Happy that my bricks transferred correctly, I've removed them from the original image (they

were still 'selected' so I simply hit the Delete key).

Once I’ve repeated this for the remaining bricks, I should be left with the mortar only – which

I’ll be able to place in the bottom (red) channel without any further work!

Controlling overlap and transparency

When you have transferred your texture to all channels, the next stage is to balance the

brightness.

With patterns, only pure white is solid. Anything of a grey shade will allow anything beneath

to show through. If you make your image 100% white, you'll have no texture or contour (just

'cartoon' - beginner style!), but if it's too dark, there will be too much background showing

through and the pattern will be wrongly coloured or shaded. For now, aim for a brightness

that looks something like the image here, but be ready to have to experiment (again and

again)!

pag. 12

Any pattern that does not result in a sea of solid white will let the background colour show

through. This is an additional colour known as the the Background fill and we set this colour

in the Sims 3 Workshop later on. For now, all you need to know is that you don't need to

worry about a non-solid white image!

With all channels combined, the final RGB image in Photoshop looks a bit of a mess here.

However, it should look fine once it’s loaded into the TSR Workshop.

When looking at the combined RGB image, the red, green and blue channels show exactly

pag. 13

where your patterns have been placed. The alpha displays differently (this is because alphas

are technically black and white images rather than greyscale), but you can see by the red

shading

that the bricks on the alpha channel have also been created. We will see this more clearly once

we open up the finished graphic in the TSR Workshop tool.

Saving your RGB pattern…

You can save your pattern as a PNG or DDS file if your art program supports DDS. If you

choose DDS, ensure the Alpha Channels box is ticked!

If your graphics program does not support the DDS format, any image on the alpha channel

will be lost. You can only make 1, 2 or 3-colour patterns with a PNG file.

When saving in DDS format, you will see another window of settings. Ensure that “8. 8. 8.

8. ARGB” is selected, then click the SAVE button.

The TSR Workshop Pattern Tool!

pag. 14

Click the ‘browse’ button under “RGB Mask Image” to find your new pattern. Once loaded,

tick every channel your graphic uses (for my bricks I have used all: red, green, blue and

alpha*). This should give you a greyscale representation of your pattern.

* if your image turns solid white when you tick Alpha, then you forgot to tick the ‘Alpha

channels’ tick-box when saving your graphic. You'll be in good company! I spent days

wailing about white patterns in Workshop before I (finally) realised!

Background Fill

You might not have realised this, but there is a fifth colour you can also change!

Although there are only four colour buttons in Create-A-Style, we can also set an overall

background colour for the pattern itself too. This colour cannot be changed in the game so

it’s a permanent colour. This is why we create patterns on a black background, because black

is transparent and will actually allow the extra background colour to show through any parts

of our pattern that are not 100% solid.

The most common colour to use is black. Black will then poke through any parts of your

pattern that are not 100% white and it can act like a natural contour and shading. To show

what I mean, I have changed the background colour of my brick pattern to red, and now what

LOOKED like shading has in fact become red! My dark areas aren’t really shading at all; just

areas of my pattern that are not 100% solid and are therefore letting the black background

colour show through.

You can use ANY colour. Many EA patterns are one-channel patterns only - but they have

transparent areas to allow the background to create cracks in the paint etc. Additionally, some

EA tiles have a non-changeable white background (some EA tile patterns have a fixed, non-

changeable white grouting - resulting from white being used for the background rather than in

pag. 15

the pattern itself, freeing up the four changeable channel colours for the tiles themselves. This

is a nifty way to make a 5-colour pattern. Just remember that the player cannot change your

chosen background colour if you choose to use it as a significant part of your finished pattern.

Blending

See how each colour channel has a blend tick-box? This box determines whether each

channel allows the channel underneath to show through or not. If you leave this box unticked,

each channel is treated as a solid, non-translucent image.

If you want to make proper use of the background colour, all your pattern colours must be

set to blend.

* if your image turns solid white when you tick Alpha, then you forgot to tick the ‘Alpha

channels’ tick-box when saving your graphic.

Apply an initial colour swatch…

pag. 16

All patterns actually use a greyscale base but they all start out with pre-selected colours.

Click on the colour square for each channel of your pattern to select a colour for it (or you can

enter the HEX colour number in the ‘#’ boxes if you already know what colours you want).

There is a lot of trial and error in finding correct colours, and you might even find yourself

returning to your graphics program to lighten (or darken) your image! When working from a

pre-made image, it helps to position it alongside the Workshop window so you can compare

colours.

Although the player will be able to alter the colours you’ve used to fit in with their designs in

the game, it’s important that your initial selection still makes your pattern look good without

the player enhancing it in any way. People will expect your pattern to work immediately

without first having to change its colours.

Finally, add a title and description, and select a suitable pattern category for your pattern.

The surface type selects the best sound to be played whenever Sims walk over or interact

with items coloured in your pattern.

Is your graphic in PNG format? If so, tick the Use DXT compression box to make your

pattern’s file-size much smaller. The alpha channel colour for PNG patterns will be ghosted

out and cannot be used.

You’ve finished - now to test!

pag. 17

And that’s it - you’ve done everything! The question now is to see whether it works…

I’ve had to revisit most of my patterns more than once to adjust their brightness and contrast,

or tone down areas of the pattern that noticeably ‘repeat’ on each tile in the game. Don’t be

surprised if this happens. You might want to keep the Workshop open in the background

until you have fully tested your pattern (it is not possible to save your work in progress).

To install your new pattern…

Click the export button in the Workshop to save a copy of your pattern to your computer.

This will create a self-installing Sims3Pack file that you can double-click to add your pattern

to Sims 3 custom content and install it for you so it’s ready to play.

Uploading to TSR

If you already have an account at www.thesimsresource.com and wish to upload your pattern

to The Sims Resource (TSR) for sharing, then you can click the Upload to TSR button

instead (you’ll need to input your account email address and password if prompted). Your file

will be uploaded into your File Storage area ready for when you wish to submit the pattern

with some screenshots of the pattern in the game. Your file storage area is here:

http://submissions.thesimsresource.com/submissions/filestorage.

pag. 18

You can, of course, upload your pattern anywhere. The Upload to TSR button is just an added

convenience for those who wish to upload their patterns to TSR.

Sims3Packs and Packages Sims custom content (lots, neighbourhoods, patterns and objects) are all packages (files that

end in the extension “.package” on your computer). However, some tools (including EA’s

Sims 3 Game Launcher pictured above and the TSR Workshop that we just used to make our

pattern) add a self-installing ‘wrapper’ called a Sims3Pack file. This wrapper contains your

pattern in its raw package format, but the Sims3Pack wrapper adds a self-installer to it,

ensuring that the content is placed in the correct folders and the game is properly updated to

recognise it.