[Expand]
The previous design tip was a little boring, so let's try
and focus on some graphics design, again. I've got to produce
a new WWW site for my Mastering Computing book, so I've
drafted a banner graphic. For this I wanted to keep it simple,
and I've sketch a few ideas. One thing I've noticed is that
there are two g's at the end of each of the words, so I'm
going to try and use it to enhance the graphics:
This graphic is larger than the main banner of the page,
as I want the 'g' to go below the main banner, and to encroach
onto the main text area. Thus we can put a background graphic
to delimited the end of the banner:
Now. Let's enhance the look of the graphic by applying
the different font to any letter which has a tail:
which adds an extra little bit of interest for the viewer.
The design I would like to create will be scalable for
any browser size abover 640x480. Thus I have created a
three column row at the top of the page, with the overall
table size set to 100%. The left and right column are
set to size sizes, which are 150 pixels and 450 pixels,
respectively. The middle column in not set to any size,
thus it will taken on the size for the remaining browser
width.
This gives the following in a full sized 800x600 display:
and with a scaled down display:
We can now add a corner to top left-hand cell. This graphic
needs to be 150 pixels by 107 pixels. For this we can
use the pen tool do draw the graphic:
Next we can add a shadow:
This can then be added to the WWW page design with:
Next we can add a curve into the inside between the banner
and the menu bar. This is achieved by drawing a yellow
rectangle, and a circle. Next both are selected, and the
Modify->Combine->Punch is selected. This leaves
the curve.
This gives the following:
It is important to test other designs, so here's an equivalent
using blues:
