Free Resources

Design Resources
HTML Basics
HTML Tag Reference
HTML Guides
Javascript Resources
Java Resources
Real Audio / Video

 SITE SEARCH:

OWH,

By the way, I have to make a comment. We moved to OneWorldHosting back in May from another vendor. I have never been sorry for that decision. OWH has simply been the most reliable and responsive host I've ever seen. Response to my technical questions has always been exceptionally good. Thanks for the follow up.

Keith
 



 
 

Free Resources Design Resources

 


Photo and image resources, color wheels, design principles and "cool sites" (scroll past the following links for some good ideas/definitions on web graphics):

useit.com: Jakob Nielsen's Website
Maybe the single most important site on the most important web site design issue - usability. You may disagree with Jakob Nielsen, but his studies and findings are not to be overlooked. Be sure to check his associated site -

Usable Web
"a collection of links about human factors, user interface issues, and usable design specific to the World Wide Web."

Web Pages That Suck
"Web pages that suck" is a series of critiques of poor Web design. The examples are wonderful(ly bad) and our find ourselves in agreement with the author's analysis about 95 percent of the time.

CoolHomePages.com
THE best site for new, cool designs, in a range of helpful categories. Very cool indeed.

Communication Arts
Communication Arts is the leading industry publication on the design arts, and offers coverage now on web site design issues as well.

lynda.com
Lynda Weinman has been standing her ground against the design tyranny of html since there were browsers. And she's been packing book shelves with more quality books on the subject of web graphics than most humans can read. Visit her site for her tutorials and inspiration.

The Remedi Project
Break your heart. Nobody else does stuff this cool...

paletteman.com
This is a great site for playing with and creating different color palettes, very intuitive and easy to use.

ArtToday
All the clip art you could possibly want and lots of images. We're not totally thrilled with the images (pick and choose carefully). On the plus side it's an easy site to register for and use and, well, free is free.

Free Graphics
Boasting 494 graphics links including links to wallpapers, free software, accessories, free clip-art, and many tutorials. If you could have access to only one graphics web page....

Visibone Color Lab
Very cool online tool for testing color combinations. Not only great for color issues, but a terrific example of DHTML at its most effective.

Gifbot
If you don't have PhotoShop 5.5, or Fireworks, chances are your images are bigger than they need to be. Big image files are the leading cause of slow web sites - don't let your site discourage visitors with long waits. NetMechanic's GifBot is a great program for downsizing your images - compare your original with compressed versions, and save the one you like. Free!

On the Internet, two different image file formats are used for the majority of images: GIF and JPEG. Graphics programs can convert pictures from GIF to JPEG. The primary difference is compression type. Note: The GIF-Format is more suitable for graphics such as surface textures, logos, etc. The JPEG-Format is more suitable for photographs.

GIF
GIF stands for Graphics Interchange Format - It is widely used online due to the high compression performance it employs. Due to copyright problems with the GIF format, the professional world is in search of an alternative to the GIF format. Specifically, there is the new format, PNG, which is not supported by browsers at this point in time. For this reason, the GIF format is still used on the Internet without considerable competition.

The compression performance of the GIF format is based on the LZW algorithm (named after the developers Lempel, Ziv, Welch), which is also used for the compression of other files. Through the LZW-method, all repetitions of byte samples are coded and stored to save space. Therefore, the GIF format achieves the best compression rates if the picture has larger single-colored surfaces or repeated patterns. GIF format achieves bad rates, however, for pictures with color processes.

You can determine a "transparent " color and then place pictures in the " Interlaced" mode. Additionally, you can store a series of single pictures in a GIF file (this is how the GIF animations are implemented). The GIF format stores pictures with the maximum of 256 different colors. An image-processing program, which creates the GIF format, must first reduce the picture to a pallet of 256 colors. The number of different colors, however, still does not state which colors of the complete color space are intended.

This can differ with each GIF picture. In most pictures certain colors prevail strongly, consequently, the reduction to 256 colors does not noticeably degrade the quality during the screen display. The color palette of a green meadow with white flowers, for example, will contain many green tones, some white or gray tones and practically no blue, red or yellow tones.

Interlaced GIF
Interlaced GIF information in the interlaced mode is not sequentially stored, rather first the first line , then the eighth and so on. Afterwards, the second line, the ninth etc.. In this way a rough version of the picture becomes visible with the display of an interlaced GIF picture after a short time.

Transparency
Impressive background effects can be designed using pictures that are not simply rectangular, but outlined with irregular or rounded, smooth shapes. This is achieved by defining certain colors as "transparent". Transparency can be specified in most graphics programs.

Mini-Animations
Small animations are commonly found on web sites. Using the GIF format several pictures can be stored in one file. A special program displays the pictures one after another on the monitor, thus creating animation. Such a display function is included in the current versions of Netscape and Explorer

JPEG (or JPG)
The JPEG format was developed by the Joint Photographers Expert Group. The JPEG compression does not operate completely loss-free. However, it tries to remove, using a mathematical analysis procedure, the information from the picture that is not relevant for the image quality. In this way the JPEG procedure, without visible degradation in quality, often achieves very high compression rates.

The JPEG algorithm only operates on the basis of real color pictures (True Color = 16 million colors). The user can indicate the desired compression rate before the conversion. The higher the value, the more the quality is degraded. A general specification for the ideal compression rate cannot be made because the level is dependent on user motive and image content. Trial and error is the only way to find the ideal setting for each image.

Which tool to use?
Every HTML designer needs some tools for picture manipulation. Traditionally Adobe Photoshop has been the king of image tools, and Photoshop 6 is no exception - a powerful tool with hundreds of functions. Corel is another popular tool at this same level. Paint Shop Pro is another good choice, and is considerably less expensive than these programs. Take a look at the company sites, and try them out - each offers a trial download version for your review:

Every good image editing program has a feature which represents the output picture and the compressed picture next to each other. With a sliding control you can change the compression rate; the result is represented immediately in real time in the JPG window. Additionally, the size of the compressed file is displayed.

HTML Tricks
The most important property of an internet graphic is its loading time. The most beautiful homepage is useless if everyone aborts the loading procedure because it takes too long.

Note: Graphics should never be bigger than needed.
Using the HEIGHT and WIDTH attributes of the IMG -tags, the dimensions of a picture can be controlled. If only one of the two attributes is specified, the browser adapts in such a way that the aspect ratio of the figure is maintained. An enlargement entails a degradation in quality. If a reduction becomes necessary, then the original picture is obviously too large. In this case, the picture should be reduced using a graphical editor. This will reduce the amount of memory the picture requires.

Cache
Once a picture has been loaded, the browser keeps the picture in cache and it is not necessary for the server to read the file again if the same page is visited. This means that a picture already transferred can be used several times, without increasing the data transfer time. This applies to the use of the same picture on multiple HTML pages. If you equip all documents of your site for example with a logo or with a recurring graphic, the image files concerned will only be retrieved once while actually being displayed several times.

Shorten the Download Time
In order to represent the layout of an HTML page, the browser needs information about the size of the used pictures. If the actual sizes of the pictures are indicated using HEIGHT and WIDTH, then the dimension of the picture area is already known after the transfer of the HTML code. This allows the browser to calculate the layout of the page before all the pictures are read. Without the specification of the dimension of a picture, the browser has to read all the pictures before the final page appears.

This technique allows the visitor to read the text on the site while the browser is loading the pictures.

 

 

ORDER ONLINE | Hosting Plans | Resellers | E-Commerce
Technical Support | Why One World | Contact One World