• Bitmaps: A Browser-Safe Colour Pallet
• Using Transparent Images
• Using Large Background File Sizes
• Creating Full Width and Height Backgrounds
• Scanning / Creating Your Own Backgrounds
• Creating Clipped Tiled Backgrounds

Use the 'Feedback Form' to submit questions / problems for an E-Mail response.
 

When creating web page Buttons etc. that include small text and fine detail, it is a good idea to use only colours from the 216 Browser Safe colour Palette. Painting and image conversion programs such as Paint Shop Pro allow the saving and loading of colour pallet data. To do this, follow these steps:

Use your browser to save the image above. Open the saved image in your favourite painting programs and select the 'Save Pallet' option. Save the pallet data in an appropriate sub-folder for each program.

Open a prepared web image, or when creating a 'New' one, 'Load' the previously saved pallet and all colours will be changed to their nearest "Safe" values - plus the Colour Picker should change to show only these colours.

Save the file in .GIF format, selecting either 'Dither' or 'No Dither' (flat colours). By dithering this way at least the results will be predictable on almost all computers.

Note: If your painting program does not support 'Saved Pallets', then open the pallet image, 'Select All' and delete to a plain canvas. Re-size the image to the size you desire and create your button or whatever. The pallet will remain the same. If you want to change an existing image without the 'Save' and 'Load' pallet option, re-size the plain canvas to the size of the existing image, open the existing image, then copy and paste into the waiting canvas. The pallet should again remain the same and change the newly pasted pixel data.

You can also use the 216 'Web Safe' Colour chart (via HTML Colour Lab) to manually select RGB values when painting bitmaps.
 

Ooops! However, consider that a few browsers still in use around the world cannot handle image transparency. The results are images with perhaps gray or even pink backgrounds appearing on your page. The .GIF filter tells the browser which colour in the image should not be seen on the page; and there must be one for it to work. Although most painting programs default to gray, that colour may be in use within the picture so the user is given the opportunity to select a different transparency reference colour.

I use transparent images myself, but think about it carefully when designing a commercial (business) web site, for such a problem just might detract from the viewers general concept of the company and otherwise good design. Saving transparent .gifs with Photoshop and Paint Shop Pro is covered in the 'Free Graphics & Lessons' pages.
 

Once published, don't forget that viewing your pages via your ISP will probably be quicker for you than for someone surfing via many servers halfway around the world.
 

To overcome (mostly) this problem, I suggest that your image should be at least 1300 pixels wide allowing for screen resolutions up to 1280 X 1024. Of course this takes a bit of imagination so that either the .JPG or .GIF image file sizes are not too large and annoy the viewer by taking forever to download. Remember that even if the viewer switches off picture viewing (very common), background viewing will probably still be enabled. Experiment with your own pages if your video card allows various resolutions.

Click on Thumbnails to view 1300 pixel W samples. Back Arrow to Return

Browsers allow fonts to be increased and decreased in size relative to the default design and is often used for easier and quicker reading of the page. Your design now correctly allows for text wrapping of paragraphs, stopping the need for horizontal scrolling, but the page depth increases when the fonts are enlarged (most viewers find horizontal scrolling annoying and distracting). I suggest that full backgrounds (Width and Depth, not tiled) should be 1300 pixels wide X 2000 deep. You will be surprised how small these images files can become after some practice.

Click on Thumbnail to view 2000 pixel H sample. Back Arrow to Return
There are sites around that have very cleverly manipulated and used scanned pictures as backgrounds but few cope with screen resolutions larger than 800 X 600. Use some imagination and lighten or even darken the image enabling a reduced number of colours when saved. The more picture detail as apposed to flat colour, the better for .JPG files as the deterioration in quality may be acceptable or not noticed by the viewer. Experiment from your master .PSD or .TIF file and try both .JPG and .GIF saving of every image, then use the smallest acceptable file size. Never Open and save a .JPG file.
 

First grab the vacuum cleaner, glass cleaner and preferably a perfectly flat piece of thin scratch free clear plastic or graphic arts film the size of the scanner. (might be an idea to send your spouse out shopping for a few hours too!)

Ideas:

• Dye stain (and dry) a cup of small grained rice, salt, course to fine sands, the little peas used in pea soup etc..
• Peas, small aquarium stones, cat litter (fresh only!), scrunched-up-and-then flattened hair cuttings (if the cat is asleep), hand smoothed crumpled silver foil or coloured cellophane etc..
• Tea towels (plain or fine patterned), bath towels, floor mats, canvas (steam ironed through a cloth), the wife's (or your own) dress materials, curtains, crochet table tops etc..
• The flat surface of a brick, concrete and the backs of tiles can often produce interesting patterns not obvious until scanned and cropped.
• If the scanner top cannot be (nearly) closed because of the objects, turn off lights that directly shine onto the scanner and close the blinds. The results may appear flat or uneven because of flare, although you only need a small area of the whole.

Save each scan before trying any of the following. Then use the 'Revert' option to try something else.

Try some of these and you will be surprised at the results. Try various scales of reproduction and always assess the images at 1:1 resolution only - sharpen, blur, alter the tonal curves or 'Colorise' the images and vary layer transparency to investigate the possibilities. And remember, you can only use 72 pixels / inch resolution.

Convert to grayscale and back to RGB, alter one channel to get flat colour, and then manipulate further. One handy effect is to view one channel only and then 'Nudge' that channel by one or two pixels vertically and horizontally putting it out of register with the other channels. Also try embossing the images.

For tiled images like web page backgrounds, evenness of tone and colour is of utmost importance. The edges must appear seamless (MicroGrafx Picture Publisher has a handy filter option that attempts to overcome this problem). (Simply, you can make a selection of a portion of one side, feather the inner edge of the selection and 'Copy-Drag' it to the other side and then flip it. Finally hand retouch or 'Clone' any obvious miss-matches.)

There! No more wasting time at the bingo parlour or down the pub, you can now setup (sell?) a stock library of your own unique backgrounds and graphic pattern fills. Just use your imagination.
 

Back Arrow to Return

A variation to the simple tiled image that appears aligned vertically and horizontally is the clipped image. Placing an image (or images) in a rectangular area and tiling produces an uninteresting affect, but offset images will not distract the eye (or mind) as much. This simple description is based on Photoshop 4 where the Layers and Guides options simplify the accurate dragging of multiple images around the canvas. One should be able to relate the description to other major Painting packages quite easily.

Firstly, create your individual image and save as a generic Photoshop file (.PSD for Windows version). Do Not include a textured background at this stage and place the image on a transparent layer above a background (of white if a texture is to be used later).

Re-seize the Canvas (or image) to the size you want to use relative to the original a:. Depending on the effect required (number of repeated images), I suggest that the image be a maximum of 1/2 the Canvas Width and Height. Place Guides top, bottom and at both sides. Save as a different file, protecting the original, and increase the Canvas Size to at least 200%, H and W. Save this second file again. (This large image will be cropped later and the guides should now appear well inside the new canvas b:.)

'Copy-Drag' the original to where ever and as many times as you want to c:, placing some of the copies to the left and bottom so that part of the image will appear outside the guides. IMPORTANT: If a clipped image appears at the bottom or left, make sure there is space for the clipped (outer) portion inside the guides at the top and right.

With 'Snap to Guides' set, 'Cut-Drag' vertically or horizontally (bottom to top or left to right) the clipped or outer image portions until they lock to the inside of the opposing guides d:. As you progress, Save the successful steps.

Once completed and you are happy with the layout, consider saving as a third Generic file and 'Flatten' all layers ready for cropping. HINT: At any time the results can be checked. Draw a rectangular Marquee (selection) to the guides and 'Copy Merged'! plus 'Define Pattern'. Create a 'New' image, also RGB @ 72 pixels / inch resolution, but make the image size 3 or 4 times greater than the default that appears in the option box (Photoshop defaults to the size of the last image copied to the clipboard). Now 'Fill-Pattern' into this temporary canvas and you will see your image tiled in all it's splendour. Close the temporary file when satisfied.

With the selection of the Guides area still active, 'Crop' the flattened image and save as both .JPG and .GIF for the smallest acceptable file size and quality. All Done. Once you have performed this task a couple of times, you will discover that it is a simple process after all!