Tutorials / View Tutorial
By Cyclonesue on Oct 23, 2009 • Sims 3 Pattern Making Tutorial
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).
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)
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!
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.
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!
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).
35 Comment(s)
Note: We do our best to make sure the comments posted are of non-offensive material and on-topic. If you see something that is irrelevant or abusive, please report it and we will remove it as soon as possible.
Add a Comment
Warning: Use of bad language, unsuitable links or flaming will result in deletion of your account - regardless of your membership status. Please note that comments must be suitable for our PG13 audience. Your IP address is logged and abuse of this service will result in a ban and evidence sent to your ISP.