Buttons Request

[antman]

Hi everyone,

I am currently working on a fansite dedicated to a 'Wizard of Oz' cartoon I watched growing up but I need to replace the buttons which you can see here (http://www.searchingforadream.net/basic) with ones that say -

Main
About the Show (or just 'The Show', 'Show Info', whatever works best)
Features
Media
Community
About the Site (or just 'The Site', 'Site Info', etc)

I was thus wondering if anyone would be able to help? I am pretty easy about the look, they don't need to be indentical to the old ones, they just need to fit with the site.

Thanks for any help offered/given, it will be greatly appreciated :)

[Aether]

Give us a general theme and colour and I'll have a stab.

[antman]

Hmm, well, here (http://www.searchingforadream.net/basic) is the banner. Colour wise, perhaps a blend of blue and yellow, a shift from the Kansas sky to the yellow brick road, so that it kind of merges with both the banner and the background. Style wise, same basic size and shape is fine. Again, I'm just after something that works with the rest of the site, something warm, welcoming, etc.

Thanks :)

Edit: Oh, I just thought; when I said the same size and shape is fine, I didn't mean you have to limit yourself at all. Obviously the word 'Community' is longer than the word 'Forum' so if they need to be bigger, that's fine, too.

[Aether]

Well here I go at another whack at the designer thing...

I googled for a whole 30 minutes and couldn't find that exact version of an animated Wizard Of Oz, so I went this way:

http://img.photobucket.com/albums/v162/KennyWoo/Bannerandbuttons.png

FYI that's an actual picture of Kansas that was used. I was going to stick an Emerald City in the background too, but I couldn't find a good enough one.

Also, the text style and colour are really just place holders. Give me a font and a colour you'd like and that's changeable.

It's built for image mapping instead of direct linking, which is an easy thing to do and keeps everything a bit more uniform.

Built for 1024 x 768.

Also I'd recommend a gradient down the length of the page as a background. Those golden bricks give headaches.

:P

/ramble

[antman]

Looks good man, but it is perhaps a little too somber; my fault, I wasn't expecting you to do a banner as well, so I didn't send any pictures, lol. I do like the size and shape of everything, it is just the slightly desolate feel - I like the bright, cheerful and welcoming feel of the current set-up.

For the colour, we could see what blue/yellow look like on those buttons. I will also post some pictures from the show with colours that I think might work, plus a few character ones should you wish to do another banner.

Talking of which, any replacement would have to be quite similar to the one on the site - the optimistic, relaxing and dream-like quality; the simplicity, by which I mean, it is not overcrowded with characters and effects; the four main characters, etc - to win me over.

I think you might be right about the background being a little too bright, but it is the only one I have, so as long as it is balanced by the banner (as I think it is by the one on the site), then it is OK.

One last thing, I use Frontpage and cannot get image mapping to work. Tutorials refer to things that simply aren't there, whilst forums say "don't try!" lol. Any help?

Sorry if it seems like I am complaining; I'm not, I appreciate your time and effort, I just need to be honest about what I think would be best for the site (and my lack of web skills, lol) :)

Colours -

http://searchingforadream.net/PDVD_125.BMP.jpg
http://searchingforadream.net/PDVD_152.BMP.jpg
http://searchingforadream.net/PDVD_153.BMP.jpg
http://searchingforadream.net/PDVD_154.BMP
http://searchingforadream.net/ozpic2.JPG
http://searchingforadream.net/ozpic9.JPG

Characters -

http://searchingforadream.net/PDVD_1555.BMP.jpg
http://searchingforadream.net/PDVD_1566.BMP.jpg
http://searchingforadream.net/PDVD_1588.BMP.jpg
http://searchingforadream.net/PDVD_1600.BMP.jpg
http://searchingforadream.net/PDVD_1644.BMP.jpg
http://searchingforadream.net/PDVD_1666.BMP.jpg
http://searchingforadream.net/PDVD_1688.BMP.jpg
http://searchingforadream.net/ozpic76.BMP.jpg
http://searchingforadream.net/ozpic93.BMP.jpg
http://searchingforadream.net/ozpic95.BMP.jpg
http://searchingforadream.net/ozpic96.BMP.jpg
http://searchingforadream.net/PDVD_041.BMP.jpg

Edit: It occured to me that 'Home' would be more fitting than 'Main' given the story we are dealing with, so could we try that? :)

Edit 2: Looking back, I guess I was trying to say that I would like the whole thing to be based on and feel more like the cartoon rather than real life, lol.

[Aether]

New Years Day means I get a whole day to fiddle anty, I'll see what I can cook up.

I'll also post the code to do image mapping so that all you'll have to do is change the links to the page names as a bonus, you'll see it's not that hard ;)

[Aether]

OK, let's try again with the designing. Gone a bit more fiddlier this time and came up with:

http://img.photobucket.com/albums/v162/KennyWoo/bannerandbuttons-1.png

There's still something a little off with the buttons text and it's colour, but again suggestions for change would be useful.

Also, as promised, here is the code for making this lovely little image into an image map, the bits in bold can be changed to whatever. Goes into the body of the page.

<img src="bannerandbuttons.png" usemap="#menu" alt="Searching For A Dream" />
<map name="menu" id="menu">
<area shape="rect" coords="155,148,221,178" href="home.html" alt="Home" />
<area shape="rect" coords="221,148,335,178" href="show.html" alt="The Show" />
<area shape="rect" coords="335,148,440,178" href="features.html" alt="Features" />
<area shape="rect" coords="440,148,523,178" href="media.html" alt="Media" />
<area shape="rect" coords="523,148,652,178" href="community.html" alt="Community" />
<area shape="rect" coords="652,148,751,178" href="siteinfo.html" alt="Site Info" />
<area shape="rect" coords="751,148,870,178" href="contactus.html" alt="Contact Us" />
</map>


Now a little info on how image maps work (not really needed, but for future reference)

Anything that's after an alt= is what you'll see if the picture doesn't load or if you hover over the button.

The coordinates for a rectangle button go "xx,yy,xx,yy" meaning the top left corner and the bottom right. You can also do circle and polygonal buttons, but they weren't needed for this.



Anyhoo, suggestions about the button text would be appreciated, as I can fix it in a jiffy.

[antman]

I love it :) The only slight issues are

1) As you say, the colour of the buttons is a little off. Would having them the same blue as the banner not work? Maybe a light yellow and blue combo, one fading into the other.

2) I notice that the H of Home is right on the edge - any chance to put a little space there, as at the end of Contact Us?

3) It is a little hard to make out the Tin Man (probably due to him having less colour than the other characters) so I'll see if I can find a picture that might work a bit better and post it later.

2 and 3 aren't really important, just niggles. Overall, it's brilliant - thank you :)

Edit: Another niggle is that

4) there is a bigger gap between the Tin Man and the Lion than there is between Dorothy and the Scarecrow, meaning she is farther to the right than the Lion is to the left. Think it'll be possible to just balance them out a bit?

[Aether]

Well lacking a new Tin Man (which you can always add in later. Here it is again with the tweaks.

http://img.photobucket.com/albums/v162/KennyWoo/bannerandbuttons-2.png

Changes include new button background and the character windows are symmetrical now. Changed the text on the buttons to match the banner and re-aligned them.

The image map in the above post also will still work as I didn't change any of the buttons actual placement.

[antman]

Wonderful - thank you so much :D I'm sorry I didn't get back with a Tin Man picture, but I had work and came back with a throat infection, so didn't feel like going through the files, lol. But it is great as is :)