Design  | SFC  |  NOS  |  Code |  Diary  | WWW |  Essay |  Cisco | [Home]



WWW pages

Tip of the week
(Adding opacity to a background image)
A great technique in adding interest to a graphic is to add opacity to a background image.
If the graphic has been built-up in layers, it is then possible in Photoshop or Fireworks to change the opaqacy of the background image. The example give next shows an example from Fireworks:
The following gives a 50% opacity:
Next 25% opacity:
And finally 10% opacity :
In this case, possibly 25% gives the best contrast between the text, and the background image.
If you're saving images with transparency always remember to store them as PNG files, as this preserves all the layes and meta information. If possible export the file to a GIF file, as GIF files tend to give a much smaller file size, and they are supported by more browsers.




Dear Jargon Buster






WWW pages of the past (Dec 2000)

December 2000
I've discovered a little technique which really enhances the look of a page. It's a smooth corner, which gets rid of the sharp edges that are produced when a column uses a background colour. Here are two of the corners I've produced for left and right columns, respectively (see December 2000 for there usage):

You can see that they are half transparent, and half coloured the same colour as the column (##FFFF99, which is a WWW-safe yellow colour).

The other little trick that I've learnt is to smooth the edges of the end of a row. A good example of this is at the top of my home page. It did this with a curved corner which is white on the top right-hand side, and transparent on the bottom left-hand side:

Thus, as the background is white, it looks as if there is a smooth corner at the end.

Oh I also found out why some pages are so difficult to re-format, it's typically because the were produced from Microsoft Word, which adds lots of <span> and </span> statements. If possible, delete them as the embed formating information, which is difficult to modify. I use the menu option Clean Up HTML (which the span defined as the tag I wish to delete) to get rid of these tags.

In the left-hand column I've included a few examples of opacity, which also helps to add interest to a graphic. I've included an example on one of my essay pages:

Compressing a sport's result

It is always a good idea to try to vary the background opacity, as this will allow you to judge the optimal value. In the case of the example of the left-hand column, it is likely that 25% opacity gives the best results, as the background image can just be seen. In the 10% version the background image almost disappears.

An even clearer trick is to export to a transparent GIF file. As the opaque graphic will blend into the background color.

Unfortunately, as you can see, the image has not properly applied the transparency, as there as still non-transparent colors around the edges of the graphic. Thus an improved method is to use a background canvas with the required color. This gives a much smoother image:


December 2000 main page[Expand]

December 2000 Macmillan page [Expand]

December 2000 CV page (Part 1) [Expand]

December 2000 CV page (Part 2) [Expand]