Communication is important in all forms of advertisement, and the Web is no different. Every website is trying to sell something. The product or service that is being sold is referred to as the website's "offering." As Web designers it is our job to communicate their offering as clearly as possible and as impacting as possible. For this reason and its absolute importance, this article about preparing a photograph for the Web will instruct not only in the physical process of editing and optimizing a photograph, but also in the behind the scenes thinking that needs to go into the use of a graphical image on the Web. This article will be divided into two sections:

- First, Concept and Synergy
- Second, Hands-on Photo Editing

Step I - Concept and Synergy
Though the hands-on editing of an image is what most of us think of first when we think about preparing an image for the Web, that is actually the second step in our preparation process. Before we even open our photograph and begin to touch it up, we need to think about what it's being used for, or better, what does it need to communicate. Let me first give you some definitions. When an image serves to strengthen the message and clarify the communication, we say it has a strong concept. That means it does more than just fill space. An image or photograph that is only there to fill space can actually be distracting and destructive. If it is not strengthening the message and clarifying the communication, it is not conceptually strong. So here is your question, how do I create a strong concept with my photographs? The following is a formula that will help you. This is the formula, content in context = concept. It is as simple as making sure that the content of the image (the message it communicates) fits in the context of the site. For example, if the site you are creating is selling computer parts, make sure that your photos communicate computer parts. If you are designing a website that sells Twinkies, and they target families with children, naturally a photograph that clearly communicates a happy, Twinkie-eating family would impress the visitor and reinforce the message that the store is trying to transmit - that Twinkies really do make families and kids happy. Thus, a good concept is a support to the website's offering.

Now, we will talk a little about synergy. Synergy is the idea that 1+1=3. Looking past the mathematical impossibility of that equation, what could be meant by 1+1=3? Have you ever heard the saying that the whole is greater than the sum of the parts? This means that when you combine individual elements into one larger element the results are much more powerful than the parts were by themselves. Let's look now at an example of how we can apply the principle of synergy to our work. Imagine a Web page. It will contain a title, some descriptive information, graphics, layout and all of the elements that compose it. To begin looking at it from a synergetic approach, we ask questions like, "How can these parts work together to communicate the offering more clearly?" "How can we plan to tie the concept of the graphics into the concept of the descriptive material, titles, and advertisements?" "What is the offering, who is the target market, and how can we use the elements we have to draw the two together?" By asking these kinds of questions you begin to think of the whole and not only of the individual parts. This empowers and unifies the advertising and communication of your website, or that of your client. That means successful, happy, returning clients, content customers, and very busy Web designers.

Step II - Hands-on Photo Editing
Photo editing serves to clarify the communication to the viewer and transmit the professionalism of the company. So we do not do all of our thinking and preparing for the concept and synergy of our Web design only to forget about it when we actually create the images. Keep in mind the goals you set in step one as you prepare your photographs for the website. The first thing you will need is a photo editing software program. We suggest PhotoImpact by Ulead, or Adobe's PhotoShop, though we could safely say that almost all graphic editing programs have the features you will need to do the following steps, the difference between them would be the quality with which they perform them.

A four-letter acronym is the name of the game in photo editing. CREO. That's right, C.R.E.O. It stands for Crop, Resize, Enhance, and Optimize. Following this four-step process will result in clean, clear graphics with small file size for quick upload times. As we learned in last month's article, the greatest killer of a website is slow upload time, and this is almost completely caused by graphics that have not been properly prepared for use on the Web. Because last month's article focused on the process of optimizing an image for the Web and gave a very good overview, we will discuss only the first three steps in the CREO acronym.

Crop
Cropping is the process of selecting the portion of the photograph or graphic you want to use, and cutting away the unnecessary leftovers. Cropping reduces file size, and because most photographs contain a lot of information (normally more than you need to effectively communicate your desired message), you can use the crop feature to focus in on the portion you really want to show and get rid of the rest. For a detailed description of the crop feature in your photo editing software, go to the help feature, locate the index option, and type in Crop. This will take you to an outline of how it works. After using it a few times it will become second nature for you.

Resize
Warning! The following is information most people overlook when working with a photograph and it causes great frustration! I want to save you from frustration as much as possible. There are many sources where you can locate a photograph to use on your site. Many people buy clip art catalogs. Others purchase photos online from image banks like photodisc.com, or tonystone.com. Still others take their own photographs either with a digital camera that can import those graphics directly into the editing software, or with a conventional camera by scanning the developed photos into the editing software for use. In whatever way the images get into the software to be edited, they all share a similar characteristic, of which if we are not aware, can be a stumbling block for us. Most photographs come in at a higher resolution than we need them to be. This is good because the higher the resolution the more versatile the image, or the more ways it can be used. The catch is that our monitors and photo editing software automatically cause them to fit within the window displaying only a percent of their actual size. So we look at the screen and we think we are seeing actual size but actually we are seeing only a certain percent being displayed so that it can fit into our window. How do we know then what the actual size is, and why is it so important to work with an image in actual size verses the size seen on the screen? I will answer the second question first.

If we do not work with actual size, we run the risk of being deceived. What we think we see is not necessarily reality. Let me explain that using an example. Many times a designer will overlook this point and prepare the graphic for use on the Web. He or she may think the graphic is 250 pixels wide, because that's how it looks on the screen, however, when the picture is uploaded to the Web page, it comes up enormous and is displayed at 1000 pixels wide. Not only does this offset their design plans, but the file size skyrockets as well. If the designer were to return to the editing software and look closely in the top menu bar, he or she would be able to see a zoom box displaying, in percent, the size at which the photo is being displayed on the screen. It would read 25%. This tells them that in order to see the image in its actual size they need to adjust that zoom box to read 100%. As the designer learns to check this first, he or she will have a better idea of how much it needs to be resized to be most optimal.

So remember that the first thing to do when you get your photo opened into your editing program is to check the zoom box and set it to 100% if it is not already. Once you can see the actual size you will need to apply this second step of the CREO acronym and resize it. Use the help feature to learn the specifics of the Resize feature in your own software package. NOTE: The zoom box deals with how much of the image is displayed on the monitor. It does not change the actual size - it only reveals it. There is a separate feature in your editing software that allows you to customize adjustments to actual size. This is called resize, or dimensions.

Enhance
Your photo editing software offers a variety of tools that allow you to do things like making a dark picture light, adjusting the color, adding borders, sharpening details and blurring out others, combining two or more pictures into one, and almost an endless variety of other options. These tools let you the designer make your graphics work for you. You are the captain - you are in charge. It is your job to make each graphic work in synergy with the other elements in the site to promote the site's goals. You will use these enhancement tools to make this happen. The best way to learn these tools is to take the time to play with them. Go into your software and familiarize yourself with the tool panels and locations of editing options. Experiment. Try new things and be fearless. With time and experience you will get faster at making changes and fixes to your photographs. Always keep in mind the purpose for each graphic, and remember that the Help System and User's Manual for your software are valuable resources for your use.

Optimize
The last step of course would be to optimize the graphic for the Web. If you would like to learn about that and have not read last month's article, I would recommend you first read that article. It is also a wise idea to save a changeable version of each graphic before you optimize. By changeable I am referring to saving it into a format that is not compressed or flattened. As you edit and work on your graphics, layers are added one on top of the other. When you optimize your graphic these layers are compressed together and are no longer adjustable. If you ever want to return to that graphic and make changes without having to completely recreate it you will need to save this changeable file. In PhotoImpact the file ending is called ".ufo." In PhotoShop it is a ".psd" file ending. Every graphic editing program will have a file ending that is changeable.

To sum up just a bit, remember that our job is to produce visual communication. We transmit a message through our work. Our success lies in our ability to transmit the right message in the most beneficial way. We work to create strong concept by making sure the content of our photographs and graphics is in context with what is being sold or advertised on the website. We need to plan for the synergy of all parts for the greater effect of the whole. Learning how to use the tools we need for the graphic editing is best done when we understand what the graphics are for and experimenting with the software through the CREO process. Consider these two steps, work them into your production pattern, and you're on your way.