 The latest trend in web site creation is very clear. Sites are coming out simpler, cleaner and easier to navigate then ever. Fast load times are the order of the day. See the article, "Lowfat Web Sites" in last month's issue for examples. One of our favorite examples of this style can be found at www.kinkos.com. Relatively fast-loading, the site's home page takes up a scant 594 x 470 pixels. This assures that every user on the Internet will be able to see the site regardless of monitor resolution and guarantees fast load times through the less-is-more approach to web design. They take their most important message, the ability to send documents to Kinkos online, and make it very prominent. It is the first thing a visitor sees, and all other features of the site take a back seat to the primary message.
Now, let's take the lessons we have learned from looking at Kinkos.com and other popular sites and apply them to an EZ-PageBuilder site. In this series we will teach you step-by-step how to quickly create a two page web site with properties similar to these web sites. Click here to see how our example turns out.
In our example, we are a wedding planning company, Generic Wedding Planners, and we want to create an online presence for ourselves. We have a logo and color scheme, some pictures that we have used in brochures, and some copy. There will be a lot of interior pages referring to all of the services we offer. However, we want the home page to transmit a very strong message, "Generic Wedding Planners makes planning your wedding worry free." With that in mind, let's get started.
Generally, I work with a notepad to get started. I sketch out some ideas and come up with a concept that I like before going any further. With that completed, I go to my graphics program, Ulead's PhotoImpact, to create the graphics I will need.
Create the Header
1. Open Photo Impact (or your graphic editing software)
2. Choose File New and open a new image at 600x48
3. Choose the Bucket Fill Tool
4. Click on Fill Color and change the color to R:00 G:51 B:102 or Hex #003366
5. Click on the window with the Bucket Fill Tool to fill the entire image with the dark blue that we have chosen
6. Click to select the Text Tool
7. I made the header text "Monotype Corsiva" in white at size 43 with bold and italic selected
8. Click and hold on the Path Drawing Tool to select the Line and Arrow Tool
9. Use that tool to draw a white line underneath the header text similar to the example.
10. With the header looking the way we want it to, choose Web and Image Optimizer
11. Select "Base Image with Objects Merged" and click OK
12. Choose a GIF with 10 colors. This should put your header under 3k.
13. Save it as header.gif
14. Save the image in UFO format just in case you need to edit it later and close the image
Create the Buttons
1. In Photo Impact (or your graphics software) choose File New and open a new image at 600x16
2. Use the Bucket Fill Tool as described above to fill the new image with the color R:204 G:204 B:204 or Hex #CCCCCC
3. Set the Text Tool for "Arial" in white, size 12 with bold selected
4. Place the type for the three buttons they way you would like them to appear in the final
5. The three buttons are "HOME", "SERVICES", and "ABOUT"
6. You can use the | symbol on your keyboard to separate the buttons or you can create small, white circles with the Path Drawing Tool as I have done
7. When you are sure that the text has been placed the way you want it, choose Merge All in the Object menu
8. Use the Standard Selection Tool to draw a lasso around the first button
9. Choose Edit and Copy to put the button in the clipboard
10. Choose Edit, Paste, Paste as a New Image to make a new image window for the button
11. As in steps 10-13 from "Create the Header," optimize the button as a GIF with 10 colors and save it
12. Repeat steps 8-11 for the other two buttons as well
13. Write down the widths of each of the buttons as that will be important in the future
14. Close Photo Impact
Next Issue: Create the Home Page
|
