For each of the websites listed in the OFP Websites page, I created the banners and graphics. This page will tell you how I did most of them,for Sanders Rentals.

All were done in Microsoft Image Composer, which came free with FrontPage.

Sanders Rentals

Near Summer of 2000, my father decided he wanted a website for his properties. He had quite a few at that time, and, as many have since found, thought that advertising vacancies on the internet would help his rentals business.

He sent me a PDF (which he also sent to the sign-maker, I believe) with the following version of his sign. I cut out the image as a GIF.

 

He asked me to make it red lettering on a yellow background, so he'd have an idea of what the signs should look like. (Red and yellow are very bright colors for signs, quite visible in daylight and at night.) To be honest, I don't remember exactly what I did, but I probably simply changed the colors using MSIC (Microsoft Image Composer)'s Select Color Cutout tool, and added the colors right back in place. Anyway, I sent the following back to him.

While he was mulling it over, I played around with a couple of ideas for the website. I was still exploring the options available in MSIC, remember... My father writes left-handed and has a deep slant to the left to his writing. The best font I could come up with was the following, I kept the blue on white, in this case:

It seemed a little "plain" to me... I thought I'd layer the above over something, so I used a tool I forget, made the background black, and came up with:

and layered the above over it to produce:

Then, to "finish it off", I thought I'd try to make it flash, and succeeded:

Now that's cool, if you've never done anything like it before. But I realized that if straight blinking text on a green or amber screen (the old CRTs) was too much for people to look at, what would this do? Either way, it was a "learning experience" and fun.

Soon, Dad decided that the red on yellow was the way he wanted to go for the website. I convinced him that he couldn't really expect people to read that much red text, and he agreed. However, I decided to make the banner and background colors his choice.

Banner

I started with the sign Dad had sent me, and I'd colored. I cut the Sanders Rentals "football" out of it, and put a border around it, creating a logo for the website:

I then used MSIC's shape tool, created a yellow rectangle, found some nice fonts, listed what Sanders Rentals rented, used the drop-shadow tool on it, put the office address and phone number in, edged the yellow rectangle the same as I'd edged the logo, above, tacked the logo on the side, and had a banner.

If it were today, I would have done some more cleaning around the letters and fixed what appears to be white in the list letters, but this was then, and Dad liked it.

Background

Next, I wanted a background image that used same colors as the banner, and used the gradient tool to create an image that went from the red to the yellow. (Now, I would have used a lighter/whiter yellow, but this was then.)

Step #1: Create the gradient:

Step #2: Saved that image. Create a box, colored to match the right edge of it, but at about 1900px.

Step #3: Lay the gradient box, above, just over the edge and save the image.

At first, I simply shrank the gradient to match the box in height. But in MSIC, this leaves a transparent "edge" on the bottom. You can see it in the above version, between the red of the image and the border, created for this page.

Step #4: To get rid of that "edge", I cut a box from the left edge to the right edge at about 20 pixels high, from right in the middle of the image. Then made the MSIC "composition space" fit the image, and ended up with the following:

Following is a sample block showing what using the above image as a background and repeating it vertically would look like in a div (or webpage). The dark border was added to help differentiate the designed background from the real background.

When doing this background, I learned my lesson. You do steps one through three, but before saving step three, you shrink the gradient to the width you want it to be in the webpage. While not doing this didn't hurt these pages much, it could cause problems if there's no real sidebar navigation, and the text is the wrong color/size.

Property Pictures and Maps

For each page, I needed images of the properties. I decided to use MapQuest (back then, one of the very few map services, and normally, the best images), and entered each address. I used a "cork-board" pin as the pointer, and copied the map image. (Now and then, the pin would be a couple of households away from the actual location, but it was close enough.

My father took pictures of each property, and sent them to me. I made 500px wide versions of each, and, for some reason (probably to make them look "more like they belonged on the page", put a red border around them. I believe I used a 1px black border, followed by a 5px red border, followed by another 1px black border. I them made a 250px wide version of each. I did the same (sizing to 500px, bordering, and making a 250px version) to the MapQuest map images. The idea being to center the address on the page under then banner as the heading, and use the 250px versions of the images on left side of the first page for each property. The description would go on the right. Each image on a given page would link to a page where the 500px versions were located. Below, are the 250px wide versions of the property and map for Elizabeth House. (See below)

I also had a PDF of floor plans of some of the properties, created while appraising them. I would have cut each building's floor plan as an image from the PDF, sized and bordered each the same way, colorize - using light pastel colors - each apartment in the building, and included them on both property pages, noting the apartment designation (#1, #2, or A, B, C, or whatever) on a colorized swatch. Sorry, I have no copies of these for this property.

The actual descriptions would have been written by my father, sister (who helped Dad with some of the rentals and real estate business), and/or me.

Elizabeth House is one of the few properties still owned by my father, and at one point, had it's own server, for which Dad wanted to have a Home Page. Since the page would be available to the masses on the internet, my sister wrote the copy, while I prepared a banner specifically for it. Since it was still an Sanders Rentals property, and the expectation at that time was that many of the properties would still be listed, we used the same colors. I used a "fancy font", drop-shadowed it, and ended up with the one shown below:

I made a small version of the Sanders Rentals banner as a mini-banner for this site. I couldn't make it as small as a button, because we wanted it large enough to read the address and phone numbers.

Finally, I thought about using even smaller images of the property for a montage. I may have tried to map sections of this image to link to the pages of the properties. This is as far as I got before Dad started selling off his properties:

To see how a Sanders Rentals Property Page (without description) and one with (Elizabeth House) would have looked, please see OFP Website Examples - Sanders Rentals (Property Page & Elizabeth House)

---

Send comments/questions about this page to Bill Sanders at:

Go to Graphics Capabilities/Build Graphics For Websites
Go to OFP Websites Home page
 

Send email to Bill Sanders ()
with questions or comments about this page or site.

This site, all text and graphics (unless otherwise noted) on it
were designed, developed and published by Bill Sanders of Orange Frog Productions.
It and it's CSS was validated and complies with both the: CSS and HTML 4.01 validators from W3C.
NOTE: All CSS validates except the "New Window Buttons" which include some invalid code (ie: hacks),
added PicoSearch Tables, and warnings for using transparent backgrounds when color foregrounds defined.
Copyright © 2003, 2004, 2005, 2006, 2007 by Bill Sanders / Full site last modified: October 21, 2006
Any reproduction, printing, or selling of this content is prohibited without express written consent from William D. Sanders.