~~~~~Enlarge Linked Pictures to Full Size to Read~~~~~

Play around with a paint program for awhile to get used to some of the things it does.

What the heck has Paint got to do with Html?

A web page is made up of two main things; those being Pictures and Print. The background, the banners, the photos, the buttons and even the visual part of the pop up’s are all produced in a Paint program. On the most basic level Paint is used to reduce the file size of the photos that come from your camera or scanner. In a Gallery the thumbnails are produced using Paint. As you produce the Html in your editor you will need a paint program open to supply all the jpgs, bmps, gifs and pngs that are needed for the visual effect.

Other Paint Programs

Well known programs like Mac and Windows Adobe Photoshop as well as many others are available and fine to use for these purposes. The instructions given here are specifically for Paint Shop Pro and apply generally to the other programs but not exactly. It really isn’t practical for us to try to cover the hundreds of paint programs so we will just concentrate on the common aspects and you can work it out. Windows Paint and the smaller programs like that cannot do enough to work as a Web tool although coupled with your camera editor might do the job.

Sizing Pix

It is best to begin with the raw pictures that come from your camera to learn Paint. Open them in the program and learn to find out what size they are. There are two different sizes that describe digital pictures. One refers to the quality and is the ’file size’ and the other refers to the dimensions (width by height) that is the physical size of the picture as it shows up (unreduced) on your screen. Click on ’Image’ at the top of the program and then ’Information’ in the drop down to see the dimensions . For web purposes you want the pictures to be reduced to the size of the monitor screen that you intend they show up on. The old standard was 600 by 800px but now most people have 768 by 1024px screens or larger. Most Cameras produce pictures two or three times that size and must be reduced. Also the pictures need to be reduced for the sake of available bandwidth. A picture twice the width takes up four times the space so judge yourself accordingly. We use 1024px width or height as a standard. So resize this way .

Reducing File Size

Open the picture in Paint and do all necessary adjustments such as cropping, adjusting exposure, retouching spots and effects if necessary then click ’save as’ in ’file’ and follow the dialogue as shown here .

Making Thumbnails

All three processes namely; resizing, reducing and thumbnailing can be done with a batch processor like Macromedia Fireworks or Adobe Photo but you must first learn to do each by hand. Thumbs are used in your galleries to display all the pix in that gallery and the viewer clicks on them to see the fullsize one. Resize the pix by clicking on ’Image’ then ’Resize’ and fill out the size like this and you should wind up with this .

Making Backgrounds

The background of a webpage can be a certain color that you chose or it could be a picture like the ones in this gallery . They should not be saved as a .bmp or .png (File Formats) but rather as a .jpg or .gif to be as light as possible (File Size). You have two basic choices; One is that you can make a single background pix to cover the entire size of your page or you can ’Tile’ tiny pix about 100 by 100px or larger. Remember that the font you print with must be visible so that will limit your background color somewhat.

Creating Banners

By now you should have the basic idea of how to create a banner any size you desire. We usually save it in .png because it preserves the lettering better. Practice lettering like this until you find the font and color that you like. Don’t try to put all the lettering on at once. Different effects are gained by adding each line separately like this . Chose and size a picture to add like this then add a buttonize effect to the whole banner to finish it off.

 ~These Feature Galleries lead to other Sub-galleries~
The Gang  The Institute  Written Articles  Froggy & Cats  Eye Puzzlez  Web Design and Development
Ruby’s Creative Arts  Ruby’s Garden  Ceramics  Decorator~Designs~Vessels  Studio  Kayaks & Trimaran
Norm’s Custom Shop  Digital Photo Gallery  Garage-Studio  Bicycles  Lotus  Motorcycles  Zdravko Z28  
Email is to webmaster nsoar@tbaytel.net

View My Stats

See Full History Hits and Stats