What's the best way to make map previews for my web-site?

Okay, here i'll explain in depth what i consider to be the most effective way to make map previews using the best compression methods and making them as small as possible for use on the Internet with as little loss of detail as possible.

Firstly, you need to get a Screen Capture utility to take screenshots. Probably the best program to use for this is HypersnapDX, download it at www.hyperionics.com and read Configuring Hypersnap for taking quick-capture-screenshots in worms.

Once you have configured Hypersnap so you can take screenshots in the game, start-up W:A, & load your map in the Worms Map Editor (this assumes you are familiar with it). Now you need to decide if you want a white image or a detailed generated one. Usually if the map has special textures (ie. transparency) take a 'white' screenshot, otherwise take a generated landscape screenshot for a nice colourful result. (Take some screen shots of the maps you want to preview and exit worms).

Now we move into my process of editing our new Screen Shot and preparing it with 2 programs that i use to load, edit, cut, paste, compress and optimise images: Paint Shop Pro (Jasc Software) & PicaView 32 (Download v1.31, 942kb).

1. Preparing your preview using Paint Shop Pro (v6.00).
* Load Paint Shop Pro
* Load your Screen-Shot (640x480 pixel jpg file)
* Download the Selection File here
* Select your map outline via the menu: "Selections / Load from disk..." & use Selection File
* Copy the new preview via the menu: "Edit / Copy"
* Paste the copied image via the menu: "Edit / Paste / As New Image"
* Resize it via menu: "Image / Resize..."
* Use "Percentage of Original" option. height=40 x width=40 (change as you see fit)
* Make sure "Maintain Aspect Ratio" in not ticked, & press "OK"

* Save the resized preview as a 24bit colour bmp file. (perhaps using the same name as the map).
- Before you do the above command read the update below :)

[ Update (23 June 2001) ] - I've been messing around with the method i use and have found that it is sometimes better to decrease the colour of your preview to 16 colours & then save the image as a .gif file... This seems to keep a little bit more quality in the out-put of the image. This doesn't always mean that the file size will be smaller but it can help when there's not alot of extra terrain in the image.

To do this follow these instructions:
* Click the menu option: "Colors / Decrease Color Depth / 16 colors (4 bit)"
* Now choose "File / Save As"
* Select ".gif" from the "Save as type" drop down box & click "save"
* Close all images.

[ Note: The updated method above means you do not have to use PicaView32 and can ignore the follwing instructions ].


Once you have PicaView32 installed, you can use it with the Explorer File Manager. Any image you right click on will include a small thumbnail in your context menus giving you options to convert single images or groups of images such as bmp to jpg's, and allowing you to view almost any image format: png, bmp, gif, jpg, tiff, etc. as well as jpg advanced options which we will be using to generate our optimised preview..

2. Optimising and converting your preview using PicaView32.
* open the Explorer File Manager.
* goto where you saved your bmp file and right click it
* From the menu select: "195x73x16m BMP" and then "Convert..."
* In the format conversion dialogue box click "JPG"
* Now click the "Options..." button

From here we have to set our JPG output quality for which i usually choose around 50 - The lower the slider the lower the output quality. Make sure "Optimize Huffman Codes" is ticked and in the "Component Sampling" drop down box use "YUV 111 (none)". Change smoothing to "1".

You can change these settings as you wish and test to see which combinations result in a compressed quality image. [ The higher the compression the smaller the file, and the it will load for 56k or less modems accessing your web-site ].

* Click the "OK" button to affirm your settings. (you may want to click "save these settings as default")
* Click "OK" to convert the image to your optimised and compressed JPG file.


- - Conclusions - -

In addition to this question it may also be relevant that you read over the answer to the question:
I see floating chalk in my map previews, how can i remove the chalk? - here

This concludes the answer to the question. This is a fairly complicated way of making a preview, but the results are good and i am probably going to set-up a macro to do some of the actions anyway.

(If you found this mini-tutorial on preview making useful, send along an email).