Tutorial: Rescaling images for products - dos and donts

Help and Tips on Re-Texturing existing base products on IMVU
Post Reply
User avatar
Elaini
Prolific Pixel
Posts: 123
Joined: Sat Mar 25, 2017 4:05 pm
Location: Finland
IMVU Homepage: http://avatars.imvu.com/Elaini
Contact:

Tutorial: Rescaling images for products - dos and donts

Post by Elaini » Sat Jun 17, 2017 5:32 pm

These tips are partially Photoshop based.

The basics:

IMVU textures always rely on resolution that is based on the number series from the math formula 2^(x-1). The series starts with numbers 1, 2, 4, 8... and the upper limit is 512.

Any image that does not not have those numbers exactly will be rescaled by IMVU for your product, and IMVU client does not do it in a pretty way. Also notice that the highest resolution that a single image can have is 512 × 256 or 256 × 512, not 512 × 512. If you wish to bypass that limit, you'll need to use several images as puzzle pieces for a special HD mesh.

Sharpest or Smoothest Way to Rescale in Photoshop:

When you rescale an image in Photoshop in "Image → Image Size..." window, there are several choices in a drop down menu under "Resample Image" menu:

Image

As you can see, Photoshop already suggests Bicubic Automatic is the default option. However, I never really enlarge images for the products. I always prefer higher resolution images which I then scale down, because I don't want any unsought blur effects.

For reduction, I do make a Bicubic Automatic reduction, but it can show high contrast, sharp edges when zoomed up close. That's why I also make the smoother Bilinear reduction and paste it over the Bicubic one as a layer. Then I just modify the transparency number of the top layer until I'm satisfied with the result of blending.

Then I just use "Save for Web..." function and try to find the right balance of quality vs. file size.

If the image is continuous with seamless edges:

1) Do not resize your image as a single image.
2) First hit Ctrl+A (select all) and Ctrl+C (copy).
3) Use "Image → Canvas Size..." window and change the canvas size to 300% in width and height.
4) Paste (Ctrl+V) the repetitive image as a 3 × 3 grid with the snapping on, then use "Layer → Flatten image". This will merge everything visible as a single matte background layer.
5) Rescale the image as three times as large as your intended resolution.
6) Use "Canvas Size..." again to crop the image to your intended resolution.

If you do the steps above, you will avoid the chance of the edges getting unsought seams because of the lack of information on how the image should piece together outside it's borders. Same goes for using any filter effects that rely on the neighboring pixels, such as blur.

You can confirm that the image is seamless by choosing "Filter → Other → Offset..." and playing around with the values. Hint: You can also use "Offset..." as a way to create seamless images, such as continuous pattern of marble.
Image

Post Reply