Un-squashing / Un-stretching Pictures
In this reference I will use the following terms:
Image - the original artwork to be used, eg a photo of a pet, a holiday-snap, something you've drawn with a paint program, or just a royalty-free graphic from the web.
Picture - the in-game representation of the image, usually framed and hung on a wall.
So you've found the perfect image to turn into a picture to hang in pride of place in your Sim's home. Starting up SimPE and opening Paint Studio, you've located a suitable picture to recolour, noted the usable dimensions and carefully scaled and cropped the image to that size. Having created the custom recolour package, you excitedly start up the game, pick the 'hood, select the Sim's lot, enter build mode and place the picture ... what the??? The image is distorted! It's been stretched or squashed and no longer looks good :(
So what's gone wrong? Almost none of the original pictures use the same sized space as the usable dimensions to place the image into. An image with dimensions of 100x300 (width x height) may be placed into a space of 100x350 (or 80x300), in which case the image will appear stretched when placed in game. Alternatively the same image may be placed into a space 100x250 (or 130x300), which will make it appear squashed when placed in game. For some pictures, eg "Route 66" and "Two Dog's And An Olive" the distortion is minimal, for others, eg "The Lady In Red" and "Nature's Perfection" the distortion is very noticable - the former stretches the image while the latter squashes it.
Left to right: The Lady In Red (120%), part of Two Dogs And An Olive (106%), Route 66 (105%), original (100%), part of Nature's Perfection (85%)
So what's the solution? Basically, if the the picture stretches the image, we need to squash the image before using it (or if the picture squashes the image, we need to stretch it first). By squashing/stretching the image, when the picture stretches/squashes it, the combined effects will cancel out and the image will appear in game correctly.
So how do we do this? Well, we could make an initial guess and then use trial and error, keep squashing/stretching the image and checking in game until it looked ok ... or we could use mathematics!
We need to take four measurements: the height and width of a known part of the original image and the corresponding height and width of the same part as it appears in game. So zoom in as close as possible on the distorted picture and take a screen grab. Now, using your paint program of choice, measure (in pixels) the height and width of the part in the original image and the corresponding part in the screen grab. For the light bulb, I measured from just under the screw cap to the bottom of the glass bulb and from side to side at the widest part of the glass bulb. Pick the biggest part of the picture you can. If you pick a part that's only 20 pixels and mis-measure by 1 pixel, that's a 5% error, however, if the original part is 200 pixels, that same mis-measurement of 1 is only a half a percent error. For most pictures the distortion is around 5%, so if you're making measurement errors around 5% you may as well not bother.
Now for the maths. We need to ensure that the ratio of height to width of both the original image and the in-game picture are the same, that is (ImageHeight / ImageWidth) = (PictureHeight / PictureWidth)
We know it is not, so we need to solve
Ih / Iw = Ph / Pw * C / 100
(where C is the correction we need to apply as a percentage to the image height)
Rearranging, we get
C = Ih / Iw * Pw / Ph * 100
For example, if part of our original image is 100x300 and it appears in game as 80x320 (which will look stretched), we would need to reduce the height of the image by (300 / 100 * 80 / 320 * 100) = 75%, before using it to create the recolour.
Now to fix it. So start up your favourite paint program and open the image. Now find the option to allow you to resize the image. Now, and this is very important, find the option that disables changing both the height and the width equally.
(It's usually called something like "maintain aspect ratio", however I've also seen it as a little button between/near the values with either a lock/unlock or solid link/broken link icons.) It is very important that you keep the width of the image at 100% while changing only the height. If, when you change the height, the width changes as well, you've not disabled the magic "aspect ratio" option. However, if your new image looks like a squashed/stretched version of the original, you've done it correctly.
Start up SimPE, open Paint Studio (or directly replace the image into the texture), load the newly squashed/stretched re-scaled and re-cropped image and create the recolour package. Go back into the game, place the picture and presto, a picture that looks like the original image :)
The final, distortion free, pictures for the lightbulb can be seen here