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]](images/note.png) | 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]](images/tip.png) | 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: |
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 |
|---|---|
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 |
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 |
|---|---|
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.
 |
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.
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.
