|Image Tips and Backgrounds|
|Forcing a Browser-Safe Palette (non Browser-Dithered bitmaps)|
If a "Surfer" is only using a 256 colour depth on his/her monitor then your images may be re-dithered by the browser. Most Bitmap file types include a copy of the colour pallet used when the image is saved, along with the image data.
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.
also use the 216 'Web Safe' Colour chart
(via HTML Colour Lab) to manually select RGB values when
top of page
|Transparent Bitmaps explained|
Transparency in .GIF images can help create some really great effects. Picture a tiled Brick Wall image as a background with a few drawings of stick figures and graffiti placed on the page appearing as if they were part of the tiled background image but not repeated by the tiling effect. You have an instant impression of a school yard.
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.
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.
top of page
|Large Backgrounds (described below)|
When using large background files (ref: bytes or file size) - probably photographs - try to design a page that includes few other bitmap pictures or any complex applets. Otherwise, by the time the page downloads the viewer has probably fed the dog and gone to bed.
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.
top of page
|Full Width Backgrounds|
Using a background that includes detail and colour across the whole page can be quite affective and add to a sites uniqueness. However, increasingly 1024 x 768 and higher screen resolutions are used on computer monitors and many pages using supposed full screen width backgrounds show a repeated image, as shown on the left.
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.
|Full Width & Height Backgrounds|
What must also be taken into account is the vertical depth of the viewers screen. You design a full background that will cover most resolutions in width but what of the height?
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
top of page
|Scanning / Creating Your Own Backgrounds and DTP Patterns|
Many a time a computer owner has bought a flatbed scanner and, after the novelty wears off, spent hours staring at it wondering what it could be used for. Patterns and Backgrounds of course.
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!)
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.)
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
top of page
|Clipping Tiled Images|
Click on Thumbnails to view tiled samples. 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.
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!
top of page
|Over 120 pages: All major topics divided into Classrooms|
|Free Backgrounds & Buttons!||DTP and HTML||"My First Page" HTML lessons|
|Tutorial Text Search||Perl CGI Scripts||Typography & Layout|
|4 pages of Links||Visitors Book||Perl Scripts Forum n/a|
|Free Links page||Feedback Form||Q/A contact Forum|
|pages Designed & Published - Ron F Woolley|
|©1997 '98. Last Revised: Friday, 31 October 2003 22:04|