PC Plus HelpDesk - issue 243
|This month, Paul Grosse gives you more insight into
some of the topics dealt with in HelpDesk
From the pages of HelpDesk, we look at:
- Multiple Drop-Shadows;
- Nice processes; and,
- Global warming in a Flash.
If you have two images that represent two flat objects
and you want to give them a real look by over-lapping
them and using drop shadows, you need to give a little
thought to just how you do it.
|There are plenty of examples on the Internet
where people have just applied a drop shadow to every
overlapping image and you end up with nonsensical
shadows. By that, I mean that if your shadow offset is,
say, 8,8 for your bottom image and relative to that it is
8,8 for your top image (the red and blue rectangles
respectively), the top image is now 16,16 from the
background and therefore should have a 16,16 displacement
for the part of the shadow that belongs to the
|In effect, this is what it should look like.
The blue rectangle is twice as far away from the
background as the red one so its shadow on the background
needs to reflect that (if you'll excuse the pun).
how do we go about doing that?
|I've started off with two Kakuro puzzle
images and given them a border of 20 pixels each. To do
that, in the GIMP, right-click and select 'Image'/
'Canvas Size' and the 'Set Canvas Size' dialogue box
opens up. In there, add 40 to the new width and height
and under offset, make it 20 and 20. Click on 'OK' and
the image will grow with your original image centred (the
border is transparent).
Next, make sure that your
background is the colour you want to extend your image
with (white in this case) and then, in the 'Layers,
Channels & Paths' dialogue box, right-click on the
image in the list (as opposed to the drop-down combo at
the top) and from the menu, select 'Flatten Image'.
Following that, you have the option of
resizing/scaling the images if you want to (say, if they
were too big - I resized these images as I knew that the
final images that I wanted wasn't going to be anywhere
near to how big the originals were)
Then, create a new, blank image that is going to be
bigger than the one you are likely to need at the end.
Remember that you can always crop down the image but you
will find it very difficult to add to it later on if your
drop-shadows have spilled over the edge..
After that, create a new, transparent layer in the new
image by right-clicking on the image list in the 'Layers,
Channels & Paths' dialogue and selecting 'New Layer'
from the menu. Going to one of the images that you have
resized (you can press [Alt][Tab] to do this), press
[Ctrl][A] to select all and then [Ctrl][C] to copy it
into the clipboard. To deselect the image, press
In the new image, make sure that this new layer is
selected, click on the image and press [Ctrl][V] to paste
the image into the new layer. At this stage, you can
rotate the images using the rotate transform tool. Next,
either click on the rest of the image or on the anchor
button in the 'Layers, Channels & Paths' dialogue
|Repeat the create new transparent layer,
copy, paste, rotate and position process until you have
your image looking the way you want it.
if you want to use a perspective transformation after the
drop shadow, you should move downwards any image layers
that are lower - here, I moved the Kakuro on the right
down by 8 pixels.
Your image should now look something like the one on
|Next, you need to add the drop-shadows. You
can see that when you add a drop shadow, it creates an
extra layer underneath the object that you have used to
create the shadow with. Essentially, it takes the outline
of the object (here, a transparent layer with dynamic
text on it), creates a new layer, uses the outline from
the upper layer to create a mask, applies any blurring
you have specified, fills it in with the colour you have
specified and then offsets it by the amount you have
specified, setting the transparency of that new layer to
the amount you have specified.
You can do all of this
by hand but it is easier if you let the dialogue box
handle it for you.
|Here, I have taken the layer with the right
hand Kakuro and used x=8, y=16, blur=15,
transparency=50%. The reason for having the y
displacement twice the x is that we are going to apply a
perspective transformation later on (otherwise you might
want to have them both as 8).
Next, I have applied the
same parameters to the left Kakuro. Normally, people
would leave it like that and you would end up with an
image like the first red/blue example at the top of the
page. We can do better than that.
So, next we make sure that our left Kakuro is still
selected and apply another drop shadow. This time, we
double the x,y and blur to 16, 32 and 30 respectively.
Note that the reason they are doubled is because the
displacement and blur for the left and right images are
the same as each other. If we wanted to create the
impression that the distance between the left and right
was twice that of the the distance between the right and
the background, we might use: 4, 8, 10; 8, 16 15; and,
12, 24, 25 respectively, instead.
|This is what the image looks like in the
Layers dialogue. You can see that the left (orange)
Kakuro has two shadows. One of these is for the
background (the one with the greater offset and the
larger blur) and the other is for its shadow on the other
Kakuro. When I made these drop shadows, I double-clicked
on the layer's label in the Layers ... Paths list and
typed in the new name. Doing this makes it all easier to
track later on.
Next, we want to drag the
'orange-shadow-long' shadow layer down the list so that
it is with the 'green shadow' - both of these shadows
fall on the 'Background' layer - ie, they are under the
'green' layer. So, just drag that layer down the list and
drop it where you want it (see the next image below).
Next, we want to turn off the left image (orange) so
that we can edit the shadow that it casts on the image
(green) below it. So, click on the eye for the top layer
(orange) so that it turns off.
|Now, we can see the shadow case on the right
hand Kakuro by the left one. In addition to this, it
casts a shadow on the left image's (orange) shadow so we
need to remove this as the object only has one shadow.
select the 'Select Regions using Bezier Curves' tool and
start marking out the outline of the area we are going to
remove. As the objects have straight edges and sharp
corners, this is fairly easy.
With the area of the left-hand Kakuro marked out,
click the last point on where you set the first (to close
the outline) and then click inside the outline to turn it
into a mask. In the image on the fright, we can see what
that mask looks like when you press the ruby mask button
(bottom left of the image window) The area that is left
white is what we can edit. If you have turned your ruby
mask on, turn it off either by clicking on the button
next to it (if you are using an older version of the
GIMP) or click on the same button again to remove it.
Next, press [Ctrl][X] to cut that part of the shadow
away. This will leave the transparent background.
|Here, you can see what the image layers look
The 'orange-shadow-short' layer has the now
irregular shadow that has been cropped to fit onto the
top of the 'green' layer.
One of the problems that you will see with
irresponsible use of drop-shadows is that where two
drop-shadows overlay, their intensity is doubled. This is
caused by the fact that image editors edit flat images
and drop shadows try to imitate this transition into
reality - in effect, normal work, synthesising images
with an image editor is about presenting images whereas
drop-shadows are about representing things: the
transition from presentation to representation.
In real life however, when one thing casts a shadow,
anything that falls inside its shadow (in the umbra)
cannot 'add to the darkness' of the shadow. (Of course,
you could say that with more of its view of light sources
obscured, it will to some extent be darker but here, we
are talking about image processors and not ray tracers.)
|So, turn off everything except our two
shadows and you should end up with something that looks
like what we have on the right.
Next, we need to click
on the layer for each of them and turn up the opacity to
100 per cent.
(Note that if you wanted to imply that the images that
form these shadows (in this case the two Kakuro puzzles)
were not 100 per cent opaque themselves, you could use
less than 100 per cent - if they were 10 percent
transparent, you could argue that around 90 per cent
opacity was a good value to use for their shadow's
opacity. This is so that you get some extra darkening
where the shadows overlap.)
|So, having changed the opacity, right-click
on the upper layer and select 'Merge Down'.
will now merge with the other shadow layer below it and
the most opacity it can have is 100 per cent.
Next, we change the opacity of the shadow layer back
to 50 percent (or whatever you had it set on before) and
your shadow will look uniform with a nice blur at the
edge which changes for the distance of the Kakuro that
|When you turn on all of the other layers,
this is what it looks like.
Now, we want to use a
perspective transform so select that from the toolbox and
click on the image.
|Pull the top-left and -right corners down to
where you want them to go and then click on the Transform
|The image should now look like this.
you haven't got the perspective you are happy with, you
can press [Ctrl][Z] to undo the last step (or repeatedly
for the last steps until you are where you want to be -
pressing [Ctrl][R] steps forwards through each step
Next, we want to crop the image - this is one of the
reasons why we used a new image that was so much larger
than we might otherwise have needed.
|Select the crop tool and get the bit you
want. If you want a tightly cropped image, do the
following two steps but first, crop it fairly loosely.
|Next, use the 'Select contiguous regions'
tool (like the magic wand) and select the background
(make sure that Threshold is set to zero - you can edit
this by double-clicking on the tool button in the main
window which will make a tool options dialogue box pop
Next, press [Ctrl][I] to invert the mask (now, you
have only the important parts of the image highlighted).
If your images are the same colour as the background, as
they are here, you can find that the contiguous region
includes part of your images. So, use the 'Select
Rectangular Regions' tool, hold down [Shift] and drag
another area to add to the top of the image so that it
isn't cropped out.
|After that, click on the crop tool again and
then just click on the image.
Now, click on the 'From
Selection' button and you will have a very tight crop.
Click on 'Crop and you have your image.
|And this is it.
Note that if you want to
produce a transparent background image, make sure that
the background is transparent (you can create a new,
transparent layer and then delete any non-transparent
background layer if you need to - you will probably need
to have a white background for when you are editing your
drop shadows so that you can see what you are doing or,
use a different transparent background representation -
see Properties dialogue for that) and then, instead of
flattening the image, merge each layer down until you
have only one layer.
This can be saved as a PNG file so that your drop
shadow is saved. Also, save the background colour (make
sure that it is the same as the colour of the web page
you will be using) so that Internet Explorer can cope
with the image otherwise you might end up with a black
box surrounding your image.
|The image on the right is the
portion of the image where the two shadows merge. It has
been blown up, posterised and then put through an edge
detection process so that you can see what are
effectively arbitrary contours showing how the two
As you can see, it works quite nicely.
In reality, the two shadows would not add to each other
when inside the umbra which is where most combined
drop-shadows fall down - this would be as dark as only
one of the shadows, unless (there's always something
isn't there) the objects that cast the shadows are not
totally opaque. If there is light coming through the
objects then their shadows will add up to some extent -
paradoxically adding together mostly when they are
In the image on the
right, the left bar is the CPU/paging load. The red
segment is the Kernel, the yellow is the user load and
the green is the nice load. The total load is 100 per
cent but because the nice load has a lower priority to
the things that I want to do with the computer as a user,
I have priority. As a result, I can do word processing,
image processing and anything that I normally do and the
nice processes just make way for it all.
You can make an existing process nicer by using the
renice command or you can use a command like
'setpriority' in your own programs.
Global warming in a Flash
Although Flash breaks
the basic Internet principle of graceful degradation and
without alternative methods of interacting with a site, a
company can fall foul of the Disability Discrimination
Act, if you are running a media site, it can look good
and is a fairly efficient way of conveying images when
compared to other methods.
However, Flash has also caught the eye of advertisers
and they seem to like it. It provides smallish files that
download quickly so what is wrong? The answer is that the
difference between a static image or even an animated GIF
is that a flash advert uses a fair amount of processing
power. If this was used to produce an effect that was
central to the website's reason for existing then fair
enough but just for an advert? That is no justification.
So, how much of a resource impact does one of these
waste of efforts steal? It can be difficult to see on a
Windows machine but on a Linux box, the power meter is
clearly visible at all times and as this little monster
cycled around, I could see it producing an overall level
with some quite large spikes. Using top to monitor the
specific plug-in, it took around 9.5 seconds per minute
of processor time on a 600MHz processor so that is
equivalent to a 95MHz processor.
When you multiply this by the number of adverts viewed
on the planet each day, you start to wonder just how much
of a contribution to global warming it is responsible
Back to PC Plus Archive Index Page