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 Orange Frog Productions.

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

Orange Frog Productions

After I had created Dad's original site, I wanted a name, so I could use it as other website designers do ("This website created by xxx.com.") I had come up with [color] Frog Productions, and thought it sounded cool, so I searched around the 'net and found that many of the "color Frog" names I liked were taken. I finally came up with Orange Frog, and didn't find many sites using that name, especially for web design. So, Orange Frog was it.

Frog Logo

During that research, I had found that most "frog" websites used a small "real"-looking frog print or picture, or clip-art of frogs with extremely exaggerated features, including anthropomorphic features. I wanted something with a somewhat "real" look, with just a touch of anthropomorphism. I spent some time searching, found a few real-looking green frogs and colored them orange, but nothing seemed to fit. I even tried to change it so it could be used as a background for the left-side frame. (Remember, back then, I was using frames.) I had also asked family members who were artists to come up with something for me, but got nothing. (Ah, well!)

I had found a number of other more fanciful clip-art frogs, and tried them on for size, but again, they didn't seem right, until I found the one I use, now (see the banner, above). I had read on a number of sites, that if I made a change to clip art, it would not be considered a violation of copyright (kind of like parodying a song?). So, that's what I did.

First, I tried a few things in MSIC. The best (and only one I saved) was using the glowing edge tool, making them orange, attempting to replicate the one I used for the LYAO Logo. I made the background transparent, and found it looked like I'd cut him out from somewhere and scanned him. I know he would require some cleaning, but it was a start.

Banner

I knew I wanted a banner - back then banners identifying sites were huge - and I knew my basic colors - orange and green. I know... It doesn't sound to appetizing, but I at least wanted to try it. I wanted both LYAO and OFP to use basically the same colors - After all, they would both be mine, right? I wanted a bit brighter green for the OFP site, so I made a rectangle of what I considered to be a fairly standard size for banners (600x100). I put my new frog logo on the left side, and began playing with fonts to produce the name. A 1px edging around the letters, a drop-shadow to make the letters "pop" and we have the start of a banner. NOTE: The 1px border around the banner is from this page, to help differentiate the image from the background.

Work intruded on my play, and OFP was set aside for a few months.

When I got back to it, I had revamped my father's site, done more with LYAO, created the unused Sanders Rentals graphics, and in the process, learned more of the capabilities of MSIC. I still liked the orange on green, but realized that the banner needed more.

So, for the Frog Logo, I beefed up the original edges a little, made a few other changes, and added color, making him completely orange. I liked the yellow eyes, so kept them. And, I had him. My Orange Frog Productions frog.

I had thought of another possible logo for Orange Frog Productions, a simple "OFP". I thought it would look good in the background of the banner, so I looked for a font. I believe I used the Chrome Tool in MSIC on green initials, made the background transparent, and got the image on the left. Note that when the red is made transparent in MSIC, there is still a bit of red around the edges. These pixels did not match the color of the background, because the edges of the letter and the background colors intermix, changing the actual pixel color to something in between. This was much more visible on the second try, when I added a drop-shadow. The drop-shadow gray mixed with the red background, changing that color. Still, except for that, it looks pretty good.

Recreating the "Orange Frog Productions" from the prototype banner, I put IT on a green background.

All of this was so I could see what the banner would look like with all the elements on a green background. I created a rectangle large enough to hold it all, and using a solid drop-shadow and four (4) different green colors, the difference between the top and the right are more obvious at this size I edged all THAT with black, and had the background for my banner. (This is the actual size. it's shrunk a bit for actual use.)

I layered the frog, the initials and the name over it, layering the initials over the green background of the name, and here's my original banner.

I used this for a while, then cleaned up the frog's edges, and some "bleeding" of the dark colors into the light colors in the initials to get the banner I now use. I have also saved it as a JPG, so the green color wouldn't "mottle" the way they did here.

Would I do anything differently? Sure... I know more now about how to handle the drop-shadows, cleanup, and other things. I would also add my address to the banner. (Uh... I didn't have an actual domain name at that time! LOL) Still, I like it as it is ... well... the "cleaned up one.

Background

Now for the background. The original background was simply a banner-background-green down the left and a lighter green on the right. The buttons would be the width of the dark green, making it look like a completely separate sidebar.

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.

However, by the time I was ready to complete the site, I'd learned how to do the gradient, and liked the effect. So I created the gradient going to dark green to light green, and Now for the background.

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 I redesigned the site for v2, I wanted the background to be lighter, and the gradient to not show as strong of a "line" between it's end and the main background., so I redid it. The "line" is still there, just not near as pronounced, I believe.

I've not included a sample block here... The whole page is a sample block.

Buttons

It was soon AFTER I had designed these buttons that I found a way to do them using a table and CSS. There are only potential buttons, as I hadn't even decided for sure which font to use on them, nor if I was even going to have a page for that category. Even so, I think either set would have looked great. I've just listed these in the order they appear ... I didn't select an order, nor did I create buttons for each to make it look "pushed". Note that the left ones are so much larger than the right ones. I'd created the ones on the left (150px wide), then I heard that the left side (in my case, buttons) should only be certain percentage of the browser window. Back then, the majority of screens used were 600x800, so I made the buttons on the right 100px. While I also liked the drop-shadow on the larger buttons' text, I saw how difficult they were to read. NOTE: I didn't put the normal 1px page border on these images as I did on the majority of the other images on this page. I think the OFP button would NOT have been in navigation table. The 150px wide one is readable, but the 100px wide buttons

Chachkies

Every site needs chachkies, doesn't it? Ok... Not all of the following are for MY website, but if nothing else, they are FOR it.

Sidebar Chachkie

I wanted something in the sidebar. I tried it with just a flag (used on most of my sites since well before 9/11), but it looked... shall we say, "nekkid". So, I needed a placard. I wanted it to refer to OFP, so it could be used as a button on other OFP-developed sites, and I wanted to use my logo frog. I first made a couple of what I call "placards" of my menu width, and fused them together to create my OFP Placard.

T-Shirt Logo

After I'd built my sister's site ("Say Cheese" Novel-Ts"), she asked me to create possible t-shirt for Orange Frog Productions. I expanded my frog logo, put him on a green background that matches my banner background, and added my website address in the font used for the banner, so anyone who saw it would know from whence it came. (This image is a bit smaller than it's actual size.)

Orange Frog Productions V2 Graphics

I found that on my original OFP website, the section that was getting the most hits was my reviews of Infomercials. As I redesigned my site to use divs instead of tables, SSIs instead of JavaScripts, and to be more accessible to handicapped people (all fonts are in "ems", so just pressing CONTROL and rolling your mouse-wheel will expand the text; I'm working to add glossary entries to pages, external links should give user option about opening new window, etc.), I started splitting my site into four (4) sections: Main; Owner; Scams, Shams, and More Flim-Flams; and a link to a subdomain, for LYAO. I knew I wanted the index page to reference all of them, and be a real page, rather than the redirect/refresh page I had used before. I came up with the idea of placards for each home page, and thought they'd also look good on the home page. I started with a 400x200 for the section home pages (shrunk by HTML to 300x150), and, when done, shrunk them to 200x100 for the site home page. Here are the four smaller  placards I came up with:

 

 

 

Now I needed banners for each section, so the user would know where they were. (Actually, there are plenty of indications, but I was having fun creating the graphics.)

The Main Section, where I include information about the site, FAQs, Links and the OFP-Designed sites, didn't need a new banner - just the ... uh ... Main banner. However the Owner section and the SSFF section did. Using the main OFP banner, I overlaid some semi-transparent lettering to indicate the section.

However, I also had the section home pages in the sidebar buttons, and making the placards, above, that small made them completely unreadable. So the main sections of the site can be done using text, but I wanted something different for LYAO. I used the LYAO frog logo, called it a subweb (MS' name for subdomain), used a background to match the color of the other "buttons", and had my button.

Favicon

I also learned, after too many pages were created to add the info as below into them, how to create a favicon.ico. This is the little picture that appears by the URL of the page you are reading. It also becomes available in your favorites, if you should bookmark the page. Basically, it's an image of my logo frog, made 16x16 with a transparent background. Actually, I shrunk my original frog logo to 16x16 (as small as many original smileys), and saved it. I opened it in MSPaint and saved it as a BMP file. I have a program that will convert the BMP to an ICO file and used that. Since then, I've found a number of online converters, such as CoolUtils.com - Online Image Converter (Free). I have not tried my hand at using an icon editor, yet, though. Anyway, I converted the image from BMP to ICO, and saved it as favicon.ico in my root domain (www.orangefrogproductions.com).

This works (see the OFP icon in the URL entry space, above) unless you don't have your own domain (say you're using GeoCities, or another free web-based page-creator, or you are using multiple favicons for a given site. If so, you must add:

HTACCESS Image

In researching how to redirect links from OFPv1 to OFPv2 pages, I found a way to prevent what's called "hotlink"... For all sites that are NOT Orange Frog Productions, if they attempt to link directly to any of my images, they should get the following, instead:

Firstly, this is a picture of our beautiful Black Lab Mix, KC. She has eyes that are light-blue in sunlight, but out house is dark enough, that we always have a major case of "red eye" when we take a picture of her. Well, one day she was laying on her back, asleep, and one side of her upper lip had fallen back (gravity) making her look mean from that side. Well, just for grins, I pushed the other side up, and she didn't move. I got the camera and took a picture. Looks like you'd picture Cujo, huh?

Stationary

Of course, I also created email stationary for Outlook Express and Outlook and my site, changing the background image when I changed it. (See Background, above.).

Basically, I created:

• a mid-size banner (full-size looked too large for email)
• a jpg block (extra-wide for those with wide monitors)

I moved the mini-banner and a copy of the background into the stationary folder, added (small text) the contact information, and had the stationary.

Here's a sample version (NOTE: Everything is full-size, except the actual page-size, shrunk to fit here. The border around the stationary is only used for this page, to differentiate the stationary from the page background.):

Keeping Track

One thing I learned through programming which was reiterated in my mind when creating the original graphics for the site: If you are using something that's non-standard, be sure you can reproduce it, because it may be necessary to, or it may become standard, soon.

As I was creating the banner and some of the other graphics for this site, I kept track in a spreadsheet.

Though I don't ALWAYS do so, when I do, I've graduated to using an HTML table, hex codes for colors (though I keep the RGB colors in the table), and a cell showing the actual color. Also, this table includes all colors used for all general anchors, ids and classes, and what they're used for. This helps keep track of them, and when deciding on colors to use.

---

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

Go to Graphics Capabilities/Build Graphics For Websites
Go to OFP Websites Home page
Visit Bud Sanders Appraisals
 

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.