Some Tips About Web Graphics
Adding Web Graphics
Web Graphics Tips: Issues, Guidelines, Problems and Solutions
Using graphic images on web pages
Using GIFs and JPEGs in web site design
Psychology of color: projecting a professional image with color
White space and web page layout/design
Guidelines for selecting a logo design
Illustration and Web site design
Making your web site and web graphic images easy to read
50 Totally Free Lessons in Graphic Design Theory
About Colors
Choosing the right colors is an important factor. You site should have pleasing color combinations. Different colors define different moods. There are tools for this.Unless you are an experienced artist you probably don't know what colors go together. I use the website Color Scheme Designer. There you can choose the primary color you want to use and then the site can show you what colors to blend with it. Once you choose you can view a sample web page in a dark page style or light page style to get an idea of what your page could look like. For more alternatives for color schemers go to: 10 Super Useful Tools for Choosing the Right Color Palette.One note here. Web colors are numbered in a 6 digit code consisting of 0 to 9 and 'a' to 'f'. This is a math system base 16 called hexadecimal. You don't need to learn it but you need to know that each color consists of any combination of numbers 0-9 and letters a-f.
For a short discussion of design colors go to: Choosing Web Design Colors and Color Psychology in Online Marketing
Free Web Graphics: Where to Get Them (Legally!)
- Public domain photos, fairly good quality and a large collection. No rights reserved, no linkback needed.
- OpenPhoto.net -- Creative Commons Photos
- Large archive of Creative Commons photos organized by category. Check the licensing for each photo (they use the CC icons I explained above).
- FreeStockPhotography
- Small but good collection of royalty-free stock photos (no terms given, so I assume these really are free for all uses). Includes some especially useful categories like "Toys and games" "Seasonal" and "Technology" as well as the usual nature, landscapes, flowers, architecture. Also includes good background-textures.
- African Wildlife Stock Photography
- Three pages of safari photos of African wildlife: zebras, lions, cheetahs, etc. Terms: Credit and a link back to the site.
- Public Domain Images
- Vintage postcards, old Victorian illustrations, architectural drawings, fairies, flowers, butterflies, medieval costume and design, and much more from this rich collection of Public Domain images drawn from old books.
- CKSinfo.com's Free clip art and clipart images
- Good selection of clip art including borders, buttons and lines. Terms of Use: credit/link is appreciated but not required. May not make money directly from images by selling them on products (i.e. not CafePress/Zazzle) or distribute them in image collections, but use of graphics on money-earning pages like Squidoo is fine.
- Microsoft Clip Art Collection
- Excellent collection, except the larger-size graphics have a watermark on the bottom. Terms-- must credit as: "Image(s) copyright NVTOfficeClips.com."
- PDClipart.org -- Public Domain Clip Art
- Another good clipart collection. Not many annoying ads, and a lot of great web graphics -- free, no strings attached, no need to link back.
- WilsonInfo Free Gifs & Animations.
- IconBazaar Animated Icons and Web Graphics
- Animated graphics, buttons, banners. Free for any use with a link back to their website.
- Included mostly for nostalgia, iconBazaar has been serving up animated gifs, buttons, arrows and tacky dividers since the dawn of the web, back when we thought Hamsterdance was cool. If you wondered where all those 1990s web graphics came from or went -- here they are.
- Free-Clip-Art.com
- Good-quality clip art, but it's only for noncommercial and/or educational use. Terms: Credit and a link back.
- Discovery Education: Clip Art Gallery
- Free educational clipart, but only for noncommercial, educational purposes. These are GOOD graphics. It's almost worth creating some nonprofit educational lenses just to use them!
- Pop Art: Free Posters, Gallery & Pictures
- Pop Art historical archives and free pop art print downloads from over one million pop art source images and countless finished pop art prints. Apparently it's all free to use!
- Public Domain Pictures
- An excellent collection of free photographs. They ask for credit and a link back.
- Creative Kitten Fee Clip Art, Graphics, Photos and Icons
- High quality although smaller collection of free clip art by a good computer artist. Terms: asks for credit and a link back.
What Graphics File Types To Use
The accepted types for the web, because the file sizes are small, are GIF (graphics interchange format) and JPEG or JPG (joint photographic experts group) and sometimes PNG (portable network graphics).GIFs can display anything up to 256 colors. You can use image editing software to manipulate each individual color to provide you with a nice crisp image. You can also reduce the number of colors so that the image is smaller and loads faster on your web page. GIF is better for images with less colors, particularly flat colors. If an image loses quality after reducing the number of colors to less than 256 colors (via your image editing software), don't save it in GIF format, better to use JPEG. GIFs are ideal for logos, drawings, and cartoons.
JPEGs, as opposed to GIFs, can display millions of colors and therefore are better for images such as photographs. You can also manipulate JPEGs with image editing software, however rather than manipulating each color, you adjust the level of compression that will determine the end file size. If you incorrectly save an image in JPEG format, you might notice that it's not as clean as it could be. If you go back and save the original image in GIF format, you will notice that it becomes much cleaner. This is particularly obvious when your image contains text. JPEG is better for images with many colors, such as photos. They are not good for the type of images that GIFs are good for (less color and flat color). With these images, JPEGs actually reduce the quality of the image.
Use PNG when you need smaller file sizes with no loss in quality. PNG files are usually smaller than TIFFs, in my experience. PNG also supports alpha transparency (soft edges) and was developed to be a Web graphics replacement for GIF. Images can be saved as png when you need transparent areas and irregular shaped graphics.
MWSnap is a small yet powerful program for taking screen captures of a desktop, an active window,menu, or a specified part of the screen. The program supports BMP, JPG, TIFF,PNG and GIF formats, with user selected color depth and quality settings. It also includes a zooming tool, a screen ruler and a color picker as well as system wide hotkeys and preset selection sizes. Download
Choosing Graphics Software
For a top of the line graphics and photo editor like Adobe Photoshop you could pay around $700. Less expensive is Corel Paintshop Photo Pro for about $100, a real bargain for good software; I use it. There are better bargains listed below. They are all free applications and quality software. Try the software below and see what you think. If it doesn't fill your needs then you can buy a commercial package; but I think you will find what you need below.
GIMP is an advanced image editor and image manipulation software that is often compared to Photoshop. It offers a ton of features, including advanced layer support, masks, filters, effects and many other features found in professional graphics programs. Beware however that the interface needs getting used to, and the program has a rather steep learning curve. Download