The Wonderful World of Web Design:
Lesson #2 - Imagining Great Images
This is the second of a series of WWWD Tips on how to design a better website. You can also read it at http://www.forministry.com/webbuilder/tips.dsp.
Introduction
What you see is what you get...
Visual presentations are not only powerful, but memorable. The brain is capable of remembering things better when seen (visually) than read or heard. But it's important to remember that it's always true that too much of a good thing is too much.
Images and photos can make your Web site fantastic or they can make it flop. They are usually the first things the eyes focus on as a Web site comes up. So naturally, each visual component is key to answer the question, "What am I looking at?" and "What is Web site all about?"
One common thread in all great Web sites is this: If images are used, they are used well.
Your ForMinistry Web site templates are set up with great, high-quality images. The pictures and images you decide to put up in addition to the template designs will give your Web site personality, direction, and life.
Check out some of the ways these Web sites use their images:
Photo and Image Programs
Most computers are set up with a simple art/image program such as Paint, Imaging, etc. (usually located in the Accessories folder). You can purchace or download more advanced image programs such as Adobe Photoshop or Paint Shop. These programs are designed so that you can change, add, resize, edit pictures and images.
Depending on your needs, it would be a good idea to familiarize yourself with the image program(s) on your computer. Doing a little bit of work before you place an image on your site will definitely help the look and feel of your Web site.
Remember: Most pictures and images are copyright protected. Even though you can copy and paste many images right off a certain Web site, you should make sure it is not protected before using it. There are many Web sites developed so that you can download pictures to use for a fee (or some for free) such as Photos.com or istockphoto.com.
Here's an article from webmonkey on some basics of Adobe Photoshop.
Image Types
Images and photos are digitally formatted in several different types. Some examples are:
- bmp, pdf, tif, jpeg, gif
So when you see an image file on your computer, it will look something like:' photo1.jpg'. The two types that can be viewed on Web sites are jpegs and gifs. Both of these take a large image file (such as a digital photo) and compact/condense the size of the actual image to be viewed more quickly and not take up as much memory space.
You should take your image and change it into one of these two file types. A simple way to think of which one to use is:
- jpegs are good for images with lots of colors (or complex colors) such as photos.
- gifs are good for images with simple colors, such as banners, flyers, etc, simple animations.
To change a larger image file (such as a bmp file) to a Web friendly one, just take that image and Save As, changing the Format in the Save window. You can do this after you make changes to the image (such as cropping and resizing as described below).
Here's another article from webmonkey that gives an overview of the two image types.
Cropping and Resizing
When you first aquire an image, it's probably not going to be in the size that you want. There are two simple things you can do to edit your image for your needs.
Cropping
Cropping (or cutting) means you just cut out the part of the picture you want to use, leaving out anything unnecessary.
. . . . . 
Cropping can be accomplished by selecting the portion of the image you want to keep, copying it, and pasting to a new window. You can also cut around the portion using the cutting or clipping too.
Resizing
Resizing an image means to take the entire image and shrink (or expand) it to the size you want.
. . . . . 
To resize an image, just go to the Image Size command and resize according to your needs. If you want the new image to have the same height and width proportions, remember to lock the aspect ratio (or constrain proportions).
There are many other things you can do with your image such as changing colors, adding texture, text - depending on your image program and your desires (These are tips for another day... :) ). After your image is the way you want it, save it as a jpeg or gif file.
Images and Your ForMinistry Web site
By doing these simple things before uploading an image to your ForMinistry Web site, you will find your pages to look better and run faster. Remember, you can also place images within text items by following these steps:
- Upload your picture to your ForMinistry Web site
- In the text item you wish to include the image, go to the Text Editor (by clicking on Text next to Edit this Item)
- Click on the Image Icon
in the Tools bar - Select image and make any additional changes (such as border, alignment, etc.)
- Click on OK, then in the Text Editor, click on Save and Update when finished.
Remember, don't be afraid to experiment! You can always delete images (and other items) that you don't want any more from the Content Manager.
Design away!
