Headshot Image Preparation

As you will have hopefully seen from either using an existing Wacs system, or by reading the User Manual, we do make very heavy use of the model headshot icons throughout the Wacs system, so it is definitely worth spending some time and effort to get them right. We try to have two headshots per model; a large one at approximately 260 by 340 pixels, and a smaller one at exactly 120 by 156 pixels. In Wacs terminology the large on is known as the bigicon and the smaller one as the modicon. In addition to these we also allow for a bodyimage icon which is typically 200 by 400 pixels and typically shows the model standing nude to show her general body shape. An final altimage is also defined and no specific criteria or size are established for this - this could be a headshot with her name embedded, a close-up of a defining attribute like a tattoo, or anything else you choose to have.

[Note]Note

We've found it is really quite important that at least the smaller size headshot is of a uniform size and shape for all models so that the indexes format nicely and aren't visually ragged. It doesn't have to be this specific dimension, but it's worked well for us and I'd commend to you not to change it without good reason. Similarly you might wish to make the larger one similarly uniform if you think you might use it in your own custom PHP pages or perl applications. Generally we don't use the larger icon except where it's the only one presented, and so that is less of a problem if it varies a little.

The exact location at which the icons are stored within the web server filesystem is specified by the modbigicons and modicons configuration entries in the fsloc section of the Wacs configuration file (wacs.cfg ). It is assumed that these will be accessible via the web server without additional authentication, and will be in a location such that adding the value of siteurl, either bigicons or modicons and then the values specified in the appropriate boxes in the Model Manager application will result in the full pathname to the image files for the icons. It should be perfectly possible to use any reasonable type of encoding for these headshots - JPEG, PNG, TIFF and GIF should certainly all be useable.

The best practice is usually to select a good, well-exposed head and shoulders or half-torso shot of the model looking towards the camera, from which to crop and scale the appropriate icons. As model headshots are often featured in the welcome page to a site and are generally not explicit, they are not covered by the access control system within Wacs. You may choose to let this influence you to select primarily clothed shots of the models for use in the headshots. In the examples below, we'll be looking at doing the scaling and editing using the GIMP image manipulation program, but you can of course use any other appropriate tool that you prefer. We're illustrating just one approach to doing it.

[Tip]Tip

You can do the image editing and resizing anywhere - it doesn't have to be on the server itself - you can use your desktop PC, laptop - whatever you're most comfortable with. You just need to be able to upload the result to the correct directory on the WACS server system whether it's through a networked shared drive, a secure-ftp program or even a USB memory stick. On a Wacs system installed from either RPM or DEB package releases, the default locations are: /usr/share/wacs/html/bigicons for the big icons and /usr/share/wacs/html/icons for the smaller ones.

Making The Big Icon

The first step of course is to start up the GIMP, either from the command line or via the Applications->Graphics menu, and then open the image we wish to work on. The screenshot above illustrates how the GIMP should look once you've openned the image; in this case we're using a shot of Roxanne.

Since the image is currently 1125 x 1500 pixels (that information is given in the title bar BTW), we're first going to reduce the size of it so that we have a reasonable chance of getting more than just her eyes and nose in the picture. To do this we call up the scale image tool from the Image menu as shown above.

The first headshot icon we're going to produce is the larger of the two, the one at 260 x 340 pixels. We will then produce the second smaller one by scaling down and/or cropping further that image. Anyway, the key point to bear in mind is that we're aiming for a portrait shaped image of 260 pixels across and 340 pixels tall.

Once you've called up the image scaling tool, the following dialog box opens up and you get the chance to reduce the size somewhat. By exactly how much depends on both the image your working with and the size and style you want for your site. Some sites may prefer a full torso shot either clothed or nude, while others may prefer a simpler head and shoulders style.

You'll notice that the two image size figures (here 1125 and 1500) are linked together with a chain icon. This means that they will change in union in order to preserve the current shape (aspect ratio) of the image. This is perfect for what we want here, so if we just overtype the 1500 with half that, ie 750 we will shrink the image to half it's current size. At that point we should in a position where a 260 by 340 selection from it will make a reasonable headshot icon.

[Tip]Tip

If the photo we are working with is already more of a headshot than a full torso shot as this one is, we might choose to use a value of 500 to replace the 1500 instead of the 750. This will mean that our 260 x 340 selection from it will comprise a larger proportion of the original image. Bottom line, you may have to try several different values until you find a value that you are comfortable with.

Once you've clicked on the Scale button, you will probably find that the image is now smaller than the window - going to View -> Zoom and choosing 1:1 (100%) should make it fill the window again. Simply pressing the 1 key should also have the same effect. The next step is to put Gimp into rectangular selection mode and select the appropriate area of the image.

In the top left corner of the screenshot, we've highlighted where you need to click on the rectangular area selection tool. Once you've done this you left-click-and-hold on the top corner of where you want the icon to start and then stretch it to the bottom right hand corner. If you watch the boxes on the lower left side that are also highlighted, these will show you the size of the current selection. The pair of numbers above are the current position and are not relevant to this procedure. Once you have these numbers showing as x = 260 and y = 340 , you can let go of the left mouse button. A further left-click-and-hold within the selected area will allow you to move it around until the best cropping position has been found.

[Tip]Tip

You don't have to struggle with the mouse to get the precise sizing right - you can just click in each of the two dimension boxes in turn, type in the desired value and then press return. This will make the wireframe crop box into the desired size and you can then just use the left-click-and-hold to allow you to maneuver it over the image until it's giving you the right sort of headshot.

Once you're completely happy with the headshot cropping and the size of the area you're working on, you then need to actually perform the cropping itself. You do this with the Crop to Selection option on the Image Menu.

Once this is done, we should be left with our final version of our large size headshot. The file step is then to go to the File Menu, choose Save As... and give it a suitable name - in this case we've called it Roxanne-big.jpg. The Save As... will pop up a dialog box asking for the new name - you should make sure it includes the filename extension as this determines the type of file created. It defaults to the same file type as the image it was derived from.

Once you've given it a name and clicked on the Save button, you will normally get a second dialog box related to options for the particular type of file you're trying to save. The only one we usually change is the quality, which we would recommend setting to 85% percent for JPEG images. For PNG images, we usually recommend compression level 6. Of course it doesn't really matter what you use, but you want to strike a balance between quality and the size of the file - these headshots will be downloaded a lot as people browse your Wacs site.

Making The Small Icon

The next step in the process is to produce the small icon at 120 by 156 pixels. The first step in this process is to reduce the icon further in one of the dimensions by using the Scale Image option from the Image menu. The simplest way to do this is to type one of the desired sizes into the image scaling dialog box as shown above. As you can see, our 260 x 340 icon reduces to 120 x 157 when you specify an x dimension of 120. That's basically within a rounding error of the 120 x 156 value we were looking for - ie just one pixel off. While we want to be careful about distorting the image, changing 157 to 156 is a 0.75% error which is pretty negligable - it's not about to change the whole shape of her face or anything like that.

To make this change from 157 to 156 without affecting the 120 value (which is correct), you need to unlink the chain symbol between the two numbers. Then you simply overtype the 7 with a 6 and press the Scale button on the dialog box. The image is now scaled suitably and you can proceed to do a Save As... to save it, calling it something like Roxanne-small.jpg. You can now quit the gimp - we're basically done with it.

Icon Placement

The absolute final step is to copy the finished icons into the right place to make use of them. This is fairly dependant on how the relevant Wacs site has been configured, and as mentioned earlier, the definitive answer is the values of modicons and modbigicons in the fslos section of the Wacs configuration file, wacs.cfg for the site in question. The convention is to have the files named the same but in different directories, so in the default locations for the packaged versions of Wacs, this would be /usr/share/wacs/html/icons/Roxanne-1.jpg for the smaller icon and /usr/share/wacs/html/bigicons/Roxanne-1.jpg for the larger icon.

Table 5.1. Final Example Headshot Icons

Big (260x340) IconSmall (120x156) Icon