Build a Website: Working with Graphics
 |
The best designed websites use graphics sparingly. Because high-resolution images are complex and have a large file size, when you convert them into an appropriate format for the Web , they may appear less compelling. This is one of the current limitations of the Web. Whether you are using existing artwork or creating new graphics, keep in mind that the demands and requirements of online design differ from those of other media. Even the most accomplished graphic designers may not be aware of the specific design issues involved with Web graphics.
Smaller Is Better
The key to creating suitable graphics is to keep the file sizes small so they download quickly. Large graphic files take a long time to download, especially at slower modem speeds. You don't want impatient people leaving your site before they've had a chance to see your brilliant creation.
Keeping the file size small does not necessarily mean that the graphic itself must be small. The file size is determined by the amount of information in the image. |
A large image with only a few colors can actually have a smaller file size than a tiny graphic with many colors. Ideally, file sizes should be between 20K and 30K each. At this size, they load almost instantly. Larger images, such as a banner at the top of a page, can be as large as 75K. But at this size, the image alone can take 15 seconds to download with a 56 Kbps modem. A good rule of thumb is to keep the total sum of all the images on a page at 100K or less.
Web graphics are usually in one of two file formats: JPEG (a compression method developed by the Joint Photographic Experts Group, used for photographic images) and GIF (Graphics Interchange Format--a compression scheme developed by CompuServe).
 JPEG  GIF
To create or convert your graphics to a Web format, you need image editing software. If you are working on a large site, you will benefit greatly from programs designed to catalog and manage graphics and graphic elements. Sometimes this can be done with a single program, but usually it's better to use separate ones. Software ranges in price from a few dollars for shareware to more than $500 for professional programs like Adobe Photoshop.
Guidelines for Designing and Converting Graphics
Whether you use GIF or JPEG format, here are some guidelines for working with graphic files:
- Always design in RGB (red, green, blue) mode at 72 dpi (dots per inch) with an 8-bit maximum size. Many older computer monitors display a maximum of 256 colors, and this is the Web standard. The fewer colors you use, the smaller the file size will be. For example, 8 bits gives you 256 colors to play with, while 3 bits gives you only eight colors. You'll be surprised at what you can do with only eight to 16 colors; your readers will be pleased with the snappy downloading time of your pages.
- Converting existing high-resolution graphics usually means reducing the image from 300 pixels or more per inch to 72 pixels per inch. This can make a big difference in the appearance of an image, creating jagged edges, or gaps where colors have been removed. Use techniques like indexing and dithering to fix these problems. Dithering or diffusion fills in missing colors in a uniform way to make the transitions between colors smoother. You should only dither an image once, because the more you dither, the blurrier the separations get between colors. In some cases, to get a clean result you may have to open the lower resolution GIF and touch it up, pixel by pixel. Also, when working with palettes, stick to either the Adaptive Palette or the System Palette .
- If your image contains large text, it may have jagged edges. Try anti-aliasing , a technique for smoothing over the jagged edges you sometimes get when fiddling with fonts in digital graphics.
 Unanti-aliased text
- For snappier looking graphics, make your images transparent. This entails changing the background color to match that of the page (which more often than not is white) so your image appears to float on the page.
Site Design Tips
In the interest of better Web design , we offer some tricks to improve graphic load time and presentation:
1. Be careful you don't have images (such as a banner or a masthead) that run across the top of your screen and off the right-hand side of the monitor . This can happen if you are designing your web graphics using a high-resolution monitor. Many people set their monitors to a resolution of 800 x 600 pixels. If you're working on a higher resolution monitor, the best way to avoid this problem is to keep graphics at a width of 750 pixels or less.
2. Save images as "interlaced." This allows a GIF to load into the browser as a fuzzy, pixelated picture that slowly comes into focus. Whether this is a pleasing effect is a matter of taste. Test your graphics both with and without interlacing to see for yourself how it looks.
3. If you are displaying large graphics, such as photos, give your readers the opportunity to decide if they want to see them or not. The best way to do this is to make a " thumbnail " or miniature version of the graphic, which links to a larger version of that image. The thumbnail gives readers a preview; if they are interested in seeing the larger version they can click on the thumbnail. It's always a good idea to warn people if they are about to download a large (more than 50K) graphic by including the file size in parentheses next to the thumbnail.
4. A border is displayed around each linked graphic. This border is the same color as all other links on the page. This may or may not be visually pleasing. If you don't like the way it looks, you can suppress the border by adding "border=0" to the <img> tag. You can also add additional tags to align the graphic to the right or left of text or to the top, middle, or bottom of a graphic. These extensions are not universally supported and can result in your page layout looking different--even sloppy--in different browsers. Test your pages in several browsers to see how they look, then make adjustments as necessary.
5. Finally, as a courtesy to people who are reading your pages in text-only mode, include an "alt" tag inside the image tag with a brief description of the graphic.
Deciding on Graphics Tools
When you want to build a Web site there are many things you need to think about and plan. This series of articles will take you through the steps to creating a Web site. I will show you the decisions I needed to make and what steps I took to build a new Web site. Last week I chose an HTML editor to use to create my site. I use WebStudio. After HTML, the most important thing on your Web page is the images, and there are a lot of tools out there to create, modify, and improve your Web graphics.
Graphics Creation Tools
There are two types of tools that most professional developers use to create Web graphics, a vector drawing tool and a bitmap drawing tool. Since we are putting together a simple first Web page, we don't need all the fancy drawing tools that a professional designer would have. You should look into getting a graphics tool of some sort, however. Here are some good ones:
Photoshop
Probably the best known graphics program available, Photoshop has all the features you would need to get started creating and editing images for the Web and other sources. It is an investment, but if you are interested in doing Web development as a career (not out of your home, but in a company) in the future, you would be doing yourself a favor to learn Photoshop now. There are hundreds of plugins available and people are developing more all the time.
Paint Shop Pro
Paint Shop Pro is like the "poor person's Photoshop". It is easily as feature rich, and there are lots of plugins and add-ons for it. An advantage it has over current versions of Photoshop is that it has a lot of features specifically designed to optimize images for the Web. If you are planning on doing contract Web design or don't think you will be doing Web design for a corporation, then PSP is definitely the tool to get.
Software Tools for Editing and Managing Graphics
Many of these programs are available for both Windows and Macintosh platforms:
Free Web Graphics!
Animation Factory
This is a great site with over 30,000 original animations for use on Websites.
You will find a large catalog of eye catching animations that you can use as a headline graphic or as an article graphic on your control panel. Many of these are free for non-commercial sites. They also offer a subscription for commercial sites that will allow you to access their entire library. Follow the instructions on the site for saving their graphics. Then use the BROWSE button near the headline graphic or article graphic area of your WORK ON CONTENT page to upload them to your pages.
New! SiteRightNow has now licensed a number of our favorite Animation Factory graphics. You will find these as selections available on your SiteRightNow.com control panel! Note that these images are copyrighted by Animation Factory. Additional graphics are available from Animation Factory directly through the link above.
Brown Bag Graphics
This is a nice set of graphics we found while surfing, including backgrounds and animated gifs.
We thought that there were some nice backgrounds in their library. Here's a link right to the background page:
BACKGROUNDS
The background on this page is from their site. To use a background, simply save it as instructed on the site. On your control panel, you would click the BACKGROUNDS button. You will see a BROWSE button that you can click to search for the file you saved, and it will upload to your site.
School Icons Club
This website has some very attractive backgrounds and other graphics. Many are related to kids and school, but some can also be used to give your website a "country" look or for other purposes. All they ask for using their graphics is a link back.
How do you save these backgrounds to use on your control panel? If you click the smaller picture of the background you like, it will show up full screen. Then, on most computers you can click your right mouse button and choose "Save Background As" to save the file on your computer. You can then upload it on the control panel's background screen using the Browse button to locate the file you saved.
Here is a link directly to their backgrounds page: Backgrounds
The notebook style backgrounds have a nice effect, and many other styles are available. Here's a link directly to one of the notebook style background pages that works well with SiteRightNow: Notebook Style Backgrounds
Cool Text Logos and More at Cooltext.com
Cooltext.com offers a great free tool for creating your own logo without needing a graphics program or a designer. Just make your choices, and the tool creates a fantastic looking logo. You can pick from a wide array of fonts and sizes.
Tip: Click the LOGO link when visiting their site. After making your choices, click the RENDER link to create your logo. Then click your right mouse button on the finished logo and choose Save Picture As to save the logo to your computer. If your computer puts .jpeg on the end, change this to .jpg for compatibility with our system.
Click Here to Visit Cooltext.com
Bonus! Look for the TEXTURE link on Cooltext.com. There are some great texture pictures that can be used as BACKGROUNDS on your website. Upload these pictures on your BACKGROUNDS screen for great results. Again, you can click your right mouse button on the picture you want to use, and then choose "save picture as" to save it on your computer to use on your control panel.
Free Image Editing Program XnView
Are your graphics too large when you upload them to your website? Do you need to convert from file formats, such as TIF to formats that will work on the Web, such as JPG and GIF?
You can do this sort of editing in most graphics programs, such as Adobe PhotoDeluxe and Adobe Photoshop. For those of you who don't have access to one of these programs or just want something simpler, we found this great little program that is free to download and use. It will do the job without taking much room on your computer or requiring you to learn a complicated graphics program.
(For Windows Computers. Just 1.5MB)
Click Here to Download
To Install after Downloading:
Some browsers will give you the choice to open the file immediately when you are finished downloading it (choose this option). If you do not get this option, find the file "XnView-win.exe" that you saved, and double click it to begin the installation.
After installation is completed, there will be a new program group listed under your START MENU for XnView. Select the XnView 1.25 icon to start the program.
To resize a picture:
1) Select OPEN under FILE or click the second button on the button bar.
2) Select RESIZE under the Image menu, and put in your new settings.
3) Select SAVE AS under file or click the SAVE AS icon (the third picture).
4) Choose JPG for photos and GIF for art next to File Type.
5) When saving in JPG format, you should also click the OPTIONS button and drag the quality bar to somewhere in the middle. This will reduce the file size down without losing much quality. This will help your pages load quicker.
6) Click OK and Click Save.
You also may want to drag a rectangle around the good part of your picture and then select CROP under the Edit menu to cut out the extra before resizing. To get the rectangle, just start dragging your mouse over the picture.
Note: If you are reuploading the picture to your website, make sure you save your resized picture with a different name than the original one you uploaded, such as mypicture2.jpg.
GIFWORKS Free On-line Tool
This is a fantastic free Website. As described by Gifworks, "It's an online GIF image editor. This unique tool is completely on-line -- nothing to download or install. Better yet, it's ABSOLUTELY FREE -- no prepaid tokens or subscriptions."
We tried out their on-line program. It works great for editing GIF images. Use this tool to make your images "transparent" for a more professional look.
free-graphics.com
This is a great site with a ton of free graphics, including 3D GIF animations, backgrounds, clip art, and much more! The animated cow shown above on our page can be found on this site.
clip-art.com
This site doesn't have graphics of its own. It's a "portal" to other great free graphics sites. They have links to free animations, clip-art, and more.
Microsoft Free Clipart Gallary
Microsoft has thousands of clipart pictures available for many categories. Type in a search word and come up with pages of free graphics.
The way we read Microsoft's acceptable use policy, is that you can use these pictures for free as long as you have a Microsoft program, such as Microsoft Office, Word, Excel, etc. This covers most people. As with most free graphics, you can use these graphics for your own projects and are not allowed to resell them to others.
PicSearch
Search the web for images. The most accurate and fresh image search on the web.
Search over 1,700,000,000 pictures! It is an excellent compilation of links and downloads, including backgrounds, clip-art, graphics tools, and more.
|
