There's a lot of resources to sort through in the References Section below. Till I get to put them in better order, here's a list of techniques and explanations that you need, in order to get a web pageup and running and to go through the references in more detail:
Background Tiles
- How do I copy a background tile?
- How do I add the tile to a web page?
- How do I Make MY OWN background tiles?
- How do I use the Built-In PSP Filters and Effects?
Plug-in FILTERS
- What are Plug-in FILTERS?
- What do I NEED in order to use Filters?
- HOW do I use Plug-in Filters?
Other Graphics
- How do I make the background transparent?
- How do I fix the white pixels that are still on the edges?
File Formats: gif versus jpg
- What Format do I save as gif or jpg?
-- How do I Reduce Filesize for the web?
-- How does File Format affect Transparent backgrounds and Palettes?
Minor Spells and Java | Midi Info Pages
How to copy and use background tiles
This image is only a hundred pixels wide by a hundred pixels high. But the browser can be made to repeat it over and over, right accross the page, and all your visitor has to download is one tiny file of one or two k.
To copy the tile
You can copy and use this background tile if you want. Many sites offer a whole range of free background tiles. To copy it, right-click with the mouse and select "Save picture As".
To use the tile as a PAGE background
The HTML to add the tile (BGImage1.gif), goes in the
Why not Make YOUR OWN Background tiles?
If you have downloaded PaintShop Pro (PSP) shareware, you can easily make your own tiles. I made the one above in two or three minutes, and so can you. Here's how:
- In PSP, choose menu items File | New.
In the New Image box that comes up, Width will already be highlighted, so type 100 straight over it. (That sets the width of the new image to 100 pixels).
Then hit the TAB key and Height is highlighted - type 100 over it too and hit thekey. - Now we don't want a colour that's the default PURE white, so move the mouse across to the right over the
of colours at the side. Watch colour numbers change underneath that box as you move the mouse pointer round inside the colour selection box. - The changing numbers underneath are the amounts of Red, Green and Blue in each colour the mouse moves over. The numbers for each can range between 0 (none of that colour) to 255 (FULL red, or green or blue).
You want to find a very light cream (say, around R=230, G=245, B=220), and left-click the mouse round there. (A box changes underneath, because left-clicking selects the foreground colour and right-clicking selects the background colour).
- Now you need to make sure that your palette contains all 16.7 million colours. This is important because most of the cool EFFECTS and FILTERS (and ADD-IN filters) will only work on 16 million colours. So select menu item: Increase Color Depth, and if 16 million colors is not greyed out, select it.
Always use Increase Color Depth to add effects. (This makes ALL the filters available to you). Then later you can Reduce Color Depth to cut the file size back down if you want to save as a smaller gif file for the web. (See the gif and jpg discussion below for more details).
- Move the mouse up to the dripping paint can and select Flood Fill.
- Left Click on the new image that you just opened.
- Now you need to make sure that your palette contains all 16.7 million colours. This is important because most of the cool EFFECTS and FILTERS (and ADD-IN filters) will only work on 16 million colours. So select menu item: Increase Color Depth, and if 16 million colors is not greyed out, select it.
- select: Image | Special Filters | Add Noise.
And in the Add Noise dialogue box, try % Noise at about 25% to start with. (And EXPERIMENT with different percentages).
- Select: Image | Deformation Browser | Motion blur and
select Direction=90 degrees; Intensity 16 pixels. Hit OK!
You did it!!! Now save, QUICK!
F (Back to Page Menu) È
Built-in Filters and Effects
If you don't want to custom make a wood pannel effect from scratch, (as with the above method), there are "Filters" in Paint Shop Pro to do this for you.
As a quick experiment (that you can modify once you see what's there), try making a wood pannel tile with the built in PSP Filters:
- In PSP, choose menu items File | New.
In the New Image box that comes up, Width will already be highlighted, so type 100 straight over it. (That sets the width of the new image to 100 pixels).
Then hit the TAB key and Height is highlighted - type 100 over it too and select Image Type: 16.7 million colors, then hit thekey. - Click on the icon of the Magnifying Glass, and left-click on the new image twice, to blow the image size UP to 3:1.
- Select the icon for the dripping paint can (= Flood Fill), and, over the colour selection box (the "rainbow" on the right), left-click a light brown or yellow colour (like around R=200, G=190, B=1). Now left-click inside the new image.
This gives a light brown (or yellow) background colour, over which we can spray-paint a darker wood-pattern with the "Paper Textures" filter.
- Select a darker brown (like around R=140, G=90, B=5). Left click the icon for the spray can, and on the detatchable air-brush menu, select:
Size=30, Shape=Round, Opacity=100, Paper Texture = Woodgrain. - Now experiment with spray painting left to right strokes.
- Finally click the Magnifying Glass, and Right-click the image twice to bring it back to 1:1.
Excellent!!! You did it; now save and experiment with some of the other settings and different "Paper Textures".
F (Back to Page Menu) È
Plug-in FILTERS!
So, you're not an artist, huh? Wanna turn this scribble:
into this [scribble 20]
or this [scribble17]
or this [scribble 8]:
or this [scribble 14]
Easy!!! Just grab some Plug-In Filters ... Here's:
- where to download the MSVCRT10.dll driver to make the Plug-Ins run on PSP. (After unzipping the driver, you paste a copy of it into the C:\Windows\System Folder).
- Where to download plug-in filters (Get Volume I and II);
- how to install the filters (well actually you just make a directory in PSP and copy the filters to it - but this link also shows you how to set the Preferences in PSP to make it recognise and use them as well).
- Now for explanations of how to obtain the effects above, simply click on the graphic you're interested in and a window will open explaining it :)
F (Back to Page Menu) È
Transparent Backgrounds for graphics
First you need to gather graphics that you can use - most of what you want to start, you can get at sites like the Netscape or Microsoft free graphics libraries. And most of them already have transparent backgrounds.
But for the graphics that don't have transparent backgrounds, you have to master the technique of making them transparent.
For example,
are you getting this:
when you want this: 
Luckily, this is not hard at all, and it's well explained at the JASC site.
Non-Transparent Pixels at the Edges
Even when you set the background transparent, some pixels round the edges flash up white especially with animations (this sometimes looks even worse!) You need to open each pic (in each frame if it's an animation), magnify the pic, and individually smash every offending pixel's colour into the background colour.
-
You do this by
- clicking on the background with the eye-dropper tool; then
- selecting the magnifying glass and left-clicking to expand the picture;
- select the single paint brush;
- left-click on each white pixel to turn it into the background colour; and
- SAVE!!!
What are Interlaced gifs and Progressive jpgs
Graphics files saved as either "Interlaced" gifs or "Progressive" jpgs load some of your graphic (so people get a quick idea what it will look like), then they come back and "progressively" fill in more detail.
Getting a file into Interlaced or Progressive format is the easy part, because all you have to do is select that OPTION when you Save As ... .
But before you can Save the file, you need to:
- save in the right format (gif or jpg);
- reduce the file size as much as possible BEFORE you save; and
- reduce the color palette of the gifs (to get file size down even further).
There are only two formats which will compress your graphics sufficiently for the web, and which the majority of browsers will recognise. They are *.gif and *.jpg. You need to save your images as either a *.gif file or a *.jpg file. (If you've heard about *.png files, don't worry about them for the moment).
-
The format you choose to save a graphic file as depends on
- how much will the filesize be reduced, and
- how will the format affect other things like
palettes, backgrounds and animations?How to reduce Filesize
The first rule of graphics on the web is to get file sizes smaller, so that they load before your visitors hit the STOP Button.To do this, you use a combination of clipping the edges off; choosing the right file type to Save As (gif or jpg); and then either increasing the compression with jpgs, or, reducing the palettes with gifs.
Clipping the edges
You can clip the edges far more than you first imagine, and it makes big dints in the filesizes. You can probably get your images to load ten or twenty times faster just by clipping.To select a smaller area from within an existing picture:
- click the icon of the dotted rectangle;
- drag the mouse over the area you want to select;
- while holding down the CTRL key, press the C key (to Copy the selection);
- Hold down the CTRL key and press V (to Paste the selection into a new window).
- Save the image in the NEW window, and close the window you cut from (WITHOUT saving).
GIF or JPG formats
From the References Section below, you can find links which describe the difference between the gif and the jpg formats. If you're in a hurry, here are some shortcuts.The simplest rule of thumb, is that you use *.jpgs for photos and *.gifs for everything else; but this simple "Rule-of-Thumb" is not enough.
For example,
- because of the formula used to save the gifs, a set of horizontal bars will save to a different file size than a set of vertical bars covering the same area. (For example, look at David Siegal's Killer Web Sites explanation). And
- when you compress files as jpgs, there is not one scale of compression, but many, and YOU have to experiment, to see what degree of jpg compression is OK, and what finally causes your picture to loose too much quality for the reduced file size.
When you experiment with different jpg compression ratios
- (using File | SaveAs | Options | ...),
A DIFFERENT filename preserves your original file, and at the same time, it allows you to work with the best quality jpg. It's important to keep working from the original, rather than saving a jpg that's already been saved and resaved, because the jpg compression formula is "LOSSY"; so every time you re-save as a jpg, you loose information.
gif files are saved with a different formula so they do not have the problem of lossy compression that jpg files have.
- click the icon of the dotted rectangle;
- gifs can have a transparent background, jpgs cannot.
- If you're working with gif files, consider how you can reduce gif colour palettes to load less colours. jpg files load with their own pallettes, but with gif files, the number of colours that you use can dramatically affect their file sizes; and
-
with gif files, you may also find that you need to have ANOTHER look at the palette, because your whole page starts appearing in wierd colours just to load a new gif. This can happen because gifs can only load 256 colours, so when you have a lot of gifs on the page, with too many different colours, some colours get ignored. (This doesn't happen with jpg files, because they load with their own palettes, so they can have millions of colours).
two main considerations:
Tools
Most of what you need can be obtained very cheaply, though some of it's shareware, so if you use it beyond the trial period, you should pay the poor starving programmers who wrote it.
Paint Shop Pro
The most frequently used program for web graphics is Paint Shop Pro (Shareware). It's so popular because of the range of techniques it covers, as well as the number of formats it can read. Moreover, it's shareware, and even when you do pay the authors, it's staggeringly cheap.
-
You can download
- Version 3.11
(16 bit - for Windows 3.xx/NT 3.51) 1,933,607 bytesor
- Version 4.12
(32 bit - for Windows 95/NT 4.0) 3,044,380 bytesfrom the JASC Web Site.
Adobe Photoshop
If you have buckets of money to spend, you might consider buying Adobe Photoshop instead. If you do spend that much, make sure that you get the latest version (4).
-
If you recently bought a computer package that included a scanner, then an old version of Adobe Photoshop might have been tossed in for free as a sweetener.
But if the Photoshop version is older than 3.0.5, then you will also need to download a Photoshop Plugin such as PhotoGIF (for Macs) or GIF89a Export (for PCs) from the Adobe site. You really have to have this plugin, because it will let you make interlaced gifs and transparent backgrounds (which are probably the two most frequently used techniques for web graphics).
References
John K Hart has tutes for those using PSP 3.11, and an excellent list of references, leading to web pages discussing a wide range of techniques, and how to make the most of all versions of Paint Shop Pro (as well as PhotoShop references).
- Check out WebReference.com, and why not subscribe to get their free weekly newsletter emailed to you while you're there (or send an email to join-update@lists.webreference.com).
-
As you poke around their site, check out the 3D modelling workshop;
or
follow the links on the page introducing Dimitry's articles on the art of Logo, and the world of Colour.
- You could also try Developer.com for a range of ideas and tutes (including graphics).
-
To Subscribe to the "Latest From Developer.com", send mail to
listserv@earthweb.com" and type
SUBSCRIBE DEVELOPER-COM Your Name in the body of the message. Don't forget to replace "Your Name" with your name!
Thanks for visiting. As time permits, I'll add more to this page. In the meantime, this should be enough to help most people get started.
If you DO still have problems, mail me - I'm a Community Leader in GeoCities' Research Triangle, and I'd love to see you put a great page up in our neighbourhood ;)
If you have further questions while checking those links, be sure to stop in at the Fine Line Grafix PSP Tips page. Check their FAQs page, and if you still can't find what you need, you can leave a question on their Message Board. (But DO read their FAQs first).
F (Back to Page Menu) È
