bmp2spec tutorial

From picture to Spectrum loading screen

This is how I generated the loading screen for Top Shelf Challenge 3 for the CSSCGC 2002.

For this you will need:

One image to convert (I used a lovely picture of Briana Banks that I found on the Internet).

A graphics program that will allow you to convert the image to 256x192 pixels and reduce the colour depth to monochrome (i.e. black and white). I use the GIMP on Windows because it's free and powerful, but Paint Shop Pro is equally as good. This tutorial uses the GIMP though.

bmp2spec (a utility available from Blood's Crap Speccy Page, bmp2spec.zip)

A Spectrum emulator to load the converted screen into.

Art Studio (Spectrum graphics program) for colouring in the picture.

Step 1: Getting an image we can use.

Take your image. Now, we need the image to be converted to be of a size of 256x192 pixels (as that's the size of the Spectrum's screen.) The best way of achieving this is to select a region that has the same ratio as that (i.e. a ratio of 4:3 or 1.33333:1, e.g. 512x384) and scale that down. My image has a width of 541 pixels and a height of 800 pixels, so a range of 512x384 will be perfect. Starting from the top right of my picture (so we get Briana's hair in), using the GIMP's rectangular region selection tool, that gives: Image 2

Step 2: Scaling the image down to Spectrum screen size.

Scale this image down to 256x192. Using the GIMP right-click on the image and, from the menu that appears, select Image->Scale Image and you will see the box shown in Figure 1. Change the values as shown to 256x192 and select OK. Note that when you type in the 256 for the width and then select the height box it automatically changes to 192. This is because the GIMP is keeping the same aspect ratio as the original picture. In this case it just saves you the hassle of typing in the 192. This operation gives you this image.

Step 3: Converting to monochrome.

This is where the fun begins. We now need to convert this picture to black and white so that bmp2spec can deal with it. In the GIMP this is achieved by changing the mode of the picture to indexed with a 1-bit palette. Right click on the image and select Image->Mode->Indexed (or hit the shortcut keys ALT + I). In the box that appears select the options "Use Black/White (1-Bit) Palette" and "Floyd-Steinberg Color Dithering (Normal)" as shown in Figure 2. You should get the picture shown here.

Step 4: But that's horrible! Can't we make it any better?

Yes is the answer. Go back to this image and let's see if we can make it produce a better monochrome image. For starters Briana's features were washed out of the image, so let's sharpen them up a bit. In the GIMP right-click on the image and select Filters->Enhance->Sharpen. In the box that appears enter a value of 55 as shown in Figure 3 (I find this is generally a good value when creating Spectrum screens, but feel free to experiment. Different images will probably convert better with different values). Follow this up with another filter. Select Filters->Enhance->Unsharp Mask as shown in Figure 4. Leave these values as they are and just click OK. Your image should then look like this.

Step 5: Try a monochrome conversion again.

Convert this image to monochrome now as specified in Step 3 and you should get the image shown here. It's better but it's still not good enough. There are far too many white pixels in the image. The reason for this is that the image is too bright. We need to darken it somehow.

Step 6: Darkening the image.

There are various ways of doing this in the GIMP (e.g. Image->Colors->Brightness-Contrast, Image->Colors->Hue-Saturation etc), some of which will be better than others for certain images. For this one we're going to use a gradient map as through experimentation I found that it was perfect for this image. Right-click on the image and select Filters->Colors->Map->Gradient Map. This will alter the palette of colours used in the image and produce this image. Much darker. Do a monochrome conversion of this image as before and you get this image. That's what we're after! Perfect!.

Step 7: Using bmp2spec.

bmp2spec is a simple number crunching program. It takes a black and white bitmap as input and produces a tap file as output that can be loaded with a Spectrum emulator, so we need to save our monochrome image in Windows bitmap format (.bmp). Right click on the image and select File->Save As and enter the name of the screen to save. Type it in with the .bmp extension and leave Determine File Type set to "By Extension" as shown in Figure 5.

Open up your command prompt and cd to the directory containing your monochrome bitmap. For this next step you will need bmp2spec.exe to be in your path somewhere so you can run it. The easiest way is just to copy it to the directory with your image in.

bmp2spec takes three parameters. The bitmap filename, the output tap filename and, optionally, the screen name. The screen name is what you will see when you type LOAD ""SCREEN$ to load in the image.

Enter the command as shown in Figure 6 and press enter. bmp2spec will convert the bitmap to a tap file as shown in Figure 7.

Step 8: Test the .tap file.

Always do this before you close down the GIMP to make sure that your image has converted correctly. Start up your emulator (I'm using Spectaculator) and open the tap file. Enter LOAD ""SCREEN$: PAUSE 0 so your screen will load and wait for you to press a key at the end. The result should look something like this.

Step 9: Colouring in.

Home stretch now. Load up Art Studio in your Spectrum emulator and open your tap file. Select File->Cassette->Load Next File from Art Studio's menus and it should load your picture in. Select Ink, Paper, Border, Bright as required from the Attrs. menu. To colour in a picture in Art Studio the way to do it is to paint over the required area with a transparent brush, as shown in Figure 8. The final Top Shelf Challenge 3 loading screen is shown here. I've painted over everything with Bright set to On to brighten the picture up. I've coloured Briana's hair yellow since she is a blonde and the background blue. I've removed a few of the pixels around part of her hair as they were clashing with the background and added the tsc3 logo in the top right. Voila!