I have made
the occasional remark about page design and use of html here and there,
and received the occasional question about these things, but only very
recently it dawned upon me (in fact it was just a few hours before dawn)
that it would be handy to have all these remarks in one place, all for the
sake of better web pages and better pictures.
For now things will be a bit messy and minimalist here, but I hope to get
things completely right as soon as possible. If you have any urgent
questions about page design and handling graphics, let me know:
.
Scanning tips
Is scanning difficult?
Does it take years of experience and boundless knowledge? No.
It's more about using the right material (at least a flatbed scanner) and
finding out some easy tricks:
- I scan at 240 (A4 and
A5 pictures, or for the Americans: about the size of a Vogue
page, respectively half the size of that) or 300 (smaller) dpi.
Scanning at plus 600 dpi s often pointless, because
- at 300 dpi most
files are big enough to fill up nine or sixteen monitor screens
put together.
- many scanners scan
at max. 300 dpi anyway; any higher dpi is achieved by resizing
after the scan - which is about the same thing you can do in your
graphics program.
- While scanning I try
to keep out stray light from outside and behind the paper with thick
black paper. When scanning light pictures on thin paper, you often get
the picture on the back side as an unwanted bonus. Black paper helps.
- Also it's best to lay
the picture is in line with the axis of the scanner, or 90/270 degrees
tilted.
- Important:
on the (rather large) result you can use the blur or slight blur
filter, so you can resize it without creating a 'moiré' effect. This
is not needed when scanning from your own photo prints, or possibly
when scanning a picture using a DPI higher than the real max. of your
scanner (scanning at the software induced level of 400 DPI on my older
max. 300 DPI created a natural blur which also prevented the moiré).
My new scanner (a ca. 150 dollar Acer Prisa 620 that can handle slides
and negatives too) has a 'de-screening option in the TWAIN driver
software. If you have this, experiment with it, because for higher
DPIs this might be more effective.
- Usually I keep that
copy, but for the web or for friends I create a resized copy of 800 or
600 pixels high, depending on composition and subject-matter.
- I use more or less the
default settings of my scanner, but in 'Quality' mode.
- That's all there is to
it really ...
Mikhail's Toolkit
Now and then people ask
me what programs I'm using. O.k., here they come:
- Frontpage 2002. Very
pricey for a first time user, but I got value for money. Unlike
Frontpage Express and the Netscape Thingy very stable, and saves lots
of time if you have a lot of web editing to do. Wysiwyg editing and
editing in raw html, great interface and no sneaky tampering in
existing code. One definite minus: installing it might floor any
Office '97 app in the neighbourhood, terminally.
It keeps track of which files should be sent to your website because
they're new or changed, and then ftp's them for you. The separate
Upload Wizard of Microsoft might do the same, I don't know. For
emergency cases I still have a free version of CuteFTP (thanks,
Tripod).
- Irfan View.
For quick and dirty viewing and converting of picture. Freeware,
highly recommended. For viewing anything else:
- Quick View. Not free, unless you
happen to be a Corel WordPerfect user. (It's more or less hidden on
the cdrom, and won't show up in the installer. Don't ask me
why.) Time-limited trial version available.
- Thumbs Plus. A
program to manage my vast picture collection, but it also makes
thumbnails pages and is also very good in filtering, resizing,
cropping, adding marks and in general actions that concern the
complete picture. Also a starting point for making scans. Leaves Jasc
Mediacentre and anything I've seen like it dead in its tracks.
Shareware.
- Paintshop Pro (v7). Started off as
a basic viewer and image converter, but now great fun as a drawing
program. If Photoshop is too much for you, this might be your Swiss
Army knife for graphics editing. I tried several versions of Corel
Photopaint (up to v8), but that's too unwieldy and unstable for me.
- Cathy. A no-frills, text-only database to keep an eye on the
files on my Zip-disks, main picture directories and CDroms. The latest
version also looks if there is some space left on them (not on the
CDroms of course). Freeware.
- Oh, and I use a virus
scanner. Definitely.
Some basic dos and don'ts
Follow these few obvious
tips, and you're pretty on the way to a very accessible website.
- Keep your opening page
small and simple. No large graphics, no JAVA or Basic wizardry. Tell
the people what your page is about, and link them to the rest of your
site.
Personally I don't see much point in those 'Hi, this is a fur page.
Click here to enter' pages - if that's all you have to say, you may as
well include the linked contents. Of course, it's different if you
want to warn people for explicit content.
- To me pictures can
never be large enough, but put anything up from 20 Kb behind a
thumbnail.
- Avoid
advanced technologies if
you don't really, really know what you're doing:
apart from the risk of serious mistakes or blockades
to users with older or smaller machines, many are plagued by
incompatibilities that require heavy reading in those bricksized manuals
and computer books to cure, if they can be cured.
- A dislike: 'Galleries'
where you have to crawl from picture one to picture two to picture
three. Of course, commercial sites love this, as this forces you to
see everything if you want to be sure you don't miss anything good.
Instead, put your thumbnails together on one page, so people don't
have to download what they don't care for.
Frames
If you use frames,
include the links to your framed pages on the frameset pages between <noframes></noframes>
tags. This is much more easier than it sounds (see the source of my own
index.htm file how to do it:
<HTML>
<HEAD>
<TITLE>Mikhail's Soft Spot</TITLE>
</HEAD>
<FRAMESET frameborder="0" border="NO" framespacing="0" rows="105,103%">
<FRAME marginwidth="0" marginheight="0" src="header.htm" name="header"
noresize scrolling="no">
<FRAMESET cols="150,100%">
<FRAME marginwidth="0" marginheight="0" src="ind.htm" name="ind"
scrolling="auto">
<FRAME marginwidth="0" marginheight="0" src="welcome.htm" name="content">
</FRAMESET>
<NOFRAMES>
<BODY>
<P>If you are looking at this
text in your normal browser window, your browser is not enabled for
frames. ... Blablabla .... For questions, remarks and criticism regarding
Mikhail's Soft Spot, contact <A
href="mailto:mikhailk@geocities.com">mikhailk@geocities.com</A>.</P>
<P>
<A href="welcome.htm">Welcome</A>!
(General information, recent changes, counter, webring)<BR>
<A href="mssidea.htm">Looking
for ideas</A><BR>
... etc., etc.
</BODY>
</NOFRAMES>
</HTML>
I hope this helps!
Graphic Formats
- JPEG or .jpg.
The picture format most used on the web. It has the best compression,
but at a price: every time you save it, the new copy has lost some of
its information. Usually this loss is neglectable, but have a close
look at some of the pictures that are around, and you'll see that a
copy of a copy of a copy is something to avoid.
Proper graphics programs allow you to adjust the compression rate: 75
to 80 % quality (or 25 to 20 % compression) should get it right. Don't
be surprised if the subtler shades of fur turn into a one-colour blot,
or if the glitter on a ring disappears though. But that can even
happen at 90 % quality. Which is what I use, but I am a data junkie.
- Gif or .gif.
In some cases - e.g. ultra small pictures like the 'buttons',
'banners' or `arrows' you see on many pages - Gif pictures are smaller
than jpegs. Gifs are limited to 256 colours in one picture. That seems
a lot, but in a real multicolour picture, some parts are bound to
suffer. A larger gif-picture is more often than not larger that a Jpeg
of the same size. Only use these for the mention buttons and banners.
- Animated gif.
The same as above, but several pictures combined in one file to form
an animation. Most of them are a waste of bandwidth and processor
cycles. Probably invented in the days when web people were afraid
their readers would leave their page to go watch telly if their page
didn't flicker like a pinball machine.
- Ping or .png.
The answer to the problems hampering the jpg and gif files. It's full-colour,
the compression is as good as it gets without being lossy and it
doesn't use the rights-protected type of compression that Gifs use.
Unfortunately, the files are to big to use on the web and your browser
can't read them. Great to save scans that still need working on. Like
.tga or .tif files, but these often run into compatibility issues, as
they have different flavours.
Storytime
Did you ever look into a
novel and see something like this?
`Oh John!'
`Yes?'
`Yes! Yes! ... Yes!'
Even his cigarette
afterwards tasted better than with Angela.
The Brooklyn rush
hour is too bad for comprehension, if you've never experienced it. Yet,
John could make it in time to the shop. If only that old lady in front
of him ...
I don't think so. In a
decent book, it would look like this:
`Oh John!'
`Yes?'
`Yes! Yes! ... Yes!'
Even his cigarette afterwards tasted better than with Angela.
The Brooklyn morning
rush hour is too bad for comprehension, if you've never experienced it.
Yet, John could make it in time to the shop. If only that old lady in
front of him ...
Apart from my terrible
English, it makes so much more sense now, does it? You actually see where
one paragraph ends and the next one starts. The secret is this:
<p>`Oh John!'<br>
`Yes?'<br>
`Yes! Yes! ... Yes!'<br>
Even his cigarette afterwards tasted better than with Angela.</p>
<p>The
Brooklyn morning rush hour is too bad for comprehension, if you've never
experienced it. Yet, John could make it in time to the shop. If only
that old lady in front of him ...
In Frontpage (any flavour),
in Netscape Composer, or even in Word, hit the shift-enter-key combination
for a simple line break (<br>), and the enter-key only for a
new paragraph <p>. Yes, I know, it should have been the other way
around, but there it is ... Remember about literature being 10%
inspiration, and 90 % perspiration?
An alternative is to use search-and-replace cleverly - replace the
<enter><enter>-codes most people use for new paragraphs into
something unprobably like xqxq, if necessary convert or save
your document to html, search-and-replace every paragraph break into <br>-codes,
and then switch the xqxq back into <p>s. Enjoy.
To be continued ...!
Back to main page
|