Sims 3 Pattern Making Tutorial - The Sims Resourcewiki.thesimsresource.com/images/1/1c/Sims_3... ·...
Transcript of Sims 3 Pattern Making Tutorial - The Sims Resourcewiki.thesimsresource.com/images/1/1c/Sims_3... ·...
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.