Question regarding this layout?

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Hey, im working on a site for someone i know and i was wondering if you guys/gals could give me a thumbs up or thumbs down on the graphics and layout. If you question the color, its that way because the company is a wood products/forestry company.

gamecubecheats.net/seemac/seemac.htm

any feedback would be wonderful.

thanks

bryan

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Can you do anything about those colours at all? They're not working very well together - the green is too bright. Try something like #006600 instead. The tree graphics in the logo also need to be replaced - the white artifacts you see there look really bad. Maybe try looking for stock photos (see the list I posted in another thread) or clip-art in vector format. The text in the logo should also be changed to something more interesting and the body text should be done in a sans-serif font like verdana.

Overall the graphics look very rough around the edges (learn how to anti-alias)!

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Well, i chose those 2 trees because those are the actual images the Company uses. On their paper, documents, envelopes,ect.. Its their symbol. I agree the borders could be a darker color. That text in the logo is also very similar to that of its logo. You can see what im talking about at seemac.com I will eventually include photos of their products, if that is what you meant by stock.

what rough edges? Are you viewing it in 800 X 600 resolution?

bryan

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Well, i have made some changes. I made the 2 trees blend in with the wood/brown background, and i changed the green, so its a little darker. I agree, it looks better this way.

Brian Farkas's picture

They have: 1,015 posts

Joined: Apr 1999

Try using a percentage based width instead of pixel based- there's a big white space on the right side of the screen at higher resolutions.

The jagged edges Megan is referring to are on the right edge of the buttons. You might also want to try changing the text of the buttons to a sans-serif font.

It might be better if you found another way to display news rather than in that text box; it just seems kind of... tacky.

I would also advise changing the background so that either the shadow "blends" in more to the page, or just lose the shadow completely... it looks awkward as is.

Finally, you might want to look into doing something to "spice the site up" a little bit.

Overall, the site layout is _okay_. It's not great, and I'm not all that crazy about it, but I suppose it gets the job done.

Good luck,

Brian

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Thanks for the info. Well, you can't expect much from someone who has only been doing this for 2 months. Finding a up and down news script was my best bet, because when i had a scrolling marquee, from right to left, it would push my "cell background images" (i.e, the logo) to the side and mess up the image. I don't have the info that will be needed to turn the site into a nice layout, content i mean. That will be emailed to me from the company. I will work on blending that shadow better. I manually did it, i use Photoshop, but i didn't know how to make it so a shadow appeared off the left and top background, so i manually created a black line, and then a silverish line next to it. I will try to blend it in. It didn't look good without the shadow.

Keep in mind, this is just a basic layout, im just working with it. I appreciate the input you all are giving me

thanks

bryan

p.s. How do i go about changing that white space in the corner, on higher resolution. I was building the site with respect to those who use 800 x 600 resolution, but i didn't want them to have to scroll way right to see things. See, that white space is just the end of the table i have all my information in. Its not part of my layout. I have my table at a width of 800, so obviously if it is viewed in a resolution higher then 800, then you will see the white space.

I tried centering everything, but having the whole layout centered doesn't look right with the left background with buttons.

Brian Farkas's picture

They have: 1,015 posts

Joined: Apr 1999

Hi,
You can create a drop shadow by right clicking on the layer, then clicking blending options...

Instead of 800 pixels, try setting the table to a width of "100%"

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Well, that 100% thing didn't work. I couldn't get it to work plus it was pushing alot of my images around, so it was a problem to fix it. Thanks for the input though. I did change a few things, it looks alot better. I also fixed up the scrolling window

bryan

Busy's picture

He has: 6,151 posts

Joined: May 2001

Just so you know, the news scroll bit doesnt work in Netscape 4.7 (thank you Netscape Laughing out loud ), I doubt anyone would sit there and try read it anyway, I never would nor have.

Just curious, have you tryed swapping the green and brown around?

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Do you mean the brown logo with the green background. Well, i could, but i would have to allow for a brown circle around the two small trees

See, the left and right tree are part of the companys logo. Seemac Inc. is a wood products company that develops all types of furniture, particle board, ply wood, ect.. Obviously, the only people who would go to the site would be people interested in that topic. You and I both are not. There is a partner company called Willamette Industries. They make alot of computer paper for printing purposes, as one of their thousands of products. Well, they have been in the news lately and they are good partners with Seemac. What i am trying to do with the layout is give it that wood, forestry look. The news scroller, though people probably won't look at it, i am putting there so individuals can see the latest of what is called the Willamette/Weyhauser hostile takeover. Just news headlines on the forestry side of things. I know my logo isn't the greatest, and I am just now starting to learn how to use Photoshop properly, but its hard to work with a logo when the two images i have are those small trees, which you can see at seemac.com. If you look at the site, you can see why i am trying to revamp it.Smiling It suppose to be a logo that is WOOD looking in nature with the two trees. But i don't think its too bad of a layout for someone who has only been trying web design for 2 months now. WHy does netscape suck so bad. They have wonderful programmers on that thing, and still they can't get it to be compatible with millions of sites on the web.

bryan

jag5311's picture

They have: 202 posts

Joined: Jan 2002

It works with Netscape 6.2 I wonder how long it was between the 2 versions. I ask because i wonder how many ppl have upgraded since 4.7

Brian Farkas's picture

They have: 1,015 posts

Joined: Apr 1999

Quote: Originally posted by jag5311
Well, that 100% thing didn't work. I couldn't get it to work plus it was pushing alot of my images around, so it was a problem to fix it. Thanks for the input though. I did change a few things, it looks alot better. I also fixed up the scrolling window

bryan

I took a look at your code, and I think the following should work:

In your tag, add the attribute background="bkgrd_top1.gif" and you should be all set.

Your completed tag would look like:

Good luck,
Brian

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Just to add to what's been said so far, I think that the bottom looks odd where the green part just stops then a gap then the horizontal line. I'd try to get rid of the gap so the line finished off the bottom of the green part. Again with the top green part, finish the right edge somehow, as at larger resolutions it just stops. Also your cirles are jeggedy as well as the links/buttons where they are on the white.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

If you learn how to use photoshop to it's fullest extent you'll be able to make those trees look half decent... maybe... try select> colour range to get rid of the white and then or layer > matting > remove white matte or defringe.

Also look around for a wood texture tutorial. YOu can get something much more realistic than that. There might even be a built-in action to do that. Yes - go to the actions pallet and load the actions set called "textures" (you'll find it on your hard drive under photoshop > Goodies > Photoshop Only > Actions. There are several different wood textures in there. Any of these will look much better than what you've got.

Busy's picture

He has: 6,151 posts

Joined: May 2001

why do the trees have to be green? Why does the layout have to be tree looking? maybe break away from the tree look (brown and green) and go more industral, does your (their) office building have wooden walls, floors and ceiling?

Just a thought

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Actually yes, everything in the office is wood/bark looking. They have pictures on their walls made from trees/oak. They have wooden clocks in the hallway. its a wood products company. and they deal strictly with different types of boards/wood that make todays furniture. They do not deal with plastic,metal, iron, steel, ect. so that is part of the reason i am staying away from an industrial looking layout. I want the individual to feel like they are at a forestry layout and not an industrial one, because like i said before, only individuals looking for wood products or a company looking for wood material for their offices/buildings would be interested in their site. Take a look at Willamette Industries. wii.com . This site and Seemac are in strong ties together, basically do the same thing. The only difference is that Seemac is about a $60 million in sales a year company whereas Willamette is more like in the billions per year. I thought about doing a tree thing similar to WII.com site but decided against it. And this layout isn't final by any means. I do, like mentioned by you guys, want to make a more realistic wood logo, fix the bottom thing, make the buttons more smooth, and fix that top thing.

Quick question though

if i do what you say about the top right corner, won't that make it so the user would have to scroll way right to ever see the end of it, or does it just adjust to the users display?

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Also, does the scrolling box look any more appealing. I personally think it looks better then the embedded window like earlier

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Well i went ahead and tried changing the code like you has said, but that just made my entire background turn into a bunch of green lines. See, the site is separated into 3 sections. The left background, the logo, and the top background. All consuming 3 cells. But i did fix the problem. Dreamweaver uses a feature called AUTO STRETCH, so it customizes itself to the users window. Slight drawback, sometimes it doesn't FULLY go over, its less of a white space then before, but if you hit your refresh button, it fully makes itself over. Then i fixed the bottom, so that looks nicer. have a look

Brian Farkas's picture

They have: 1,015 posts

Joined: Apr 1999

Okay, you need to make an image 2 pixels wide by 1600 pixels tall, then paste the existing background in there, and move it to the top. This will fix your problem.

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Im sorry, i don't understand. I take it you mean

Open photoshop, create new image, set the attributes to 2 x 1600

When you say paste existing background, which part of my background. Keep in mind i have it split up into 3 parts. The left, the logo and the top (just to the right of the logo)

Busy's picture

He has: 6,151 posts

Joined: May 2001

The reason i suggested an industral look is kinda like a showroom type look, that way it would inhance and not clash with the product.
There are some real nice woodgrain textures on the web, but nothing "wood" so if placed next to the real thing could look not so good.
But I see where your coming from.

A company I worked for years ago had a simple logo, like your tree one, but had it a different color per divison of the company, each product had its own color (faded pastels) so worked out well as it was like several companies in one.

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Yeah bottom does look better and top looks ok at higher resolutions now too. However, I get a horizontal scrollbar when at 800*600. I would also say that the button-links need to move up so that the first one (Home) is in line with the start of the text (which I think is too big).

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Ok, made some changes, but just realized that the images are a little big for download as background images, like 30k, because i added some photoshop effects. Let me know, i like the logo now and the background left and top, but another problem, is that when the image tries to repeat itself, you can see a difference, even though its small

gamecubecheats.net/seemac/seemac.htm

Let me know

thanks for the help

bryan

p.s. disregard the buttons, i still need to make their backgrounds like the logos, more wood like

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

I like that mottled green but only problem is that yu can see a definite line where the join is.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Looks much better! NOw you just need to do something about the text in the logo area - too boring. Maybe try an embossesd effect so it looks like it's etched into the wood? Not sure how that would look. And what's with that thing that looks like a pool of water in there?

jag5311's picture

They have: 202 posts

Joined: Jan 2002

its a KNOT. You know how wood has knots. Hopefully to most viewers looking at a wood products page, it will come off that way:)

jag5311's picture

They have: 202 posts

Joined: Jan 2002

yea, what do you think i could do about that motted green. It is actually just a green background, but then FILTER, RENDER, CLOUDS was added. I don't like that line, i assume the only way is if i cut a larger piece off to use instead of a small one, i am just afraid of download size:(

jag5311's picture

They have: 202 posts

Joined: Jan 2002

also, i just looked at that knot, and it seems a little big, so that will be fixed shortly

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

It doesn't look like a knot to me.... I'd say just leave the plain wood texture.

Look for a tutorial on making patterned backgrounds. It basically involves using filter > other > offset and then using the pattern stamp tool to get rid of the lines.

Busy's picture

He has: 6,151 posts

Joined: May 2001

Hey, thats looking pretty classy Smiling good on ya.

Thought about using a different font for the banner and buttons?

Slight scroll bar at 800x600
the green side section has a repeat line just after the last button, a good way to make background like that is to make it then copy half of it, paste as new section (and flipped, sometimes mirrored also to one end) so that the top and bottom are actually the same image but at different ends -no repeat lines when joined Smiling

jag5311's picture

They have: 202 posts

Joined: Jan 2002

do you think you could explain that a little better. Im confused. i tried doing it, but all photoshop lets me do is rotate the Canvas, not the image.

bryan

jag5311's picture

They have: 202 posts

Joined: Jan 2002

nevermind, i figured it out. FLIP VERTICALLY Smiling thanks, it looks alot better now

bryan

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Ok, things i have done

Fixed the logo, made the letters look better, at least to me. I think it looks much better now. MUCH. Fixed the background side and top, so no more lines. Fixed the beginning sentence, even though that will eventually change. I was just putting text in there to see what it would look like

Things i have to still do

fix the buttons, change their text. Then, i think the basic layout is done. That logo has fried my brain, i really don't think i can do much more with it. I have taken it from a piece of crap where i hand drew wood texture, to the real thing.

thanks

bryan

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Question regarding making buttons. I am trying to make a full elipse button, not square sides,ect.. But when i try to save it, it wants to make the sections that are transparent white, so it looks like crap on the green cloud background i have. How can i fix that so it works.

bryan

Brian Farkas's picture

They have: 1,015 posts

Joined: Apr 1999

Make the background of the image a greenish color- this will allow it to blend in to the green of the background when you save with transparency.

jag5311's picture

They have: 202 posts

Joined: Jan 2002

its just the only problem with that is that my background has cloud effects, so it would probably be obvious what was behind the image. Maybe i will just keep it a square left side and a round right side,so it blends with the white part of the page

jag5311's picture

They have: 202 posts

Joined: Jan 2002

well, i believe i am finished. had to go with block styled buttons, but it still looks good. About 100% better then the original idea i came to you guys with. Thanks for all the help.

bryan

for one last viewing
gamecubecheats.net/seemac/seemac.htm

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Well that looks about 100x better!

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Definitely agree! Although I still get a hsb at 800*600 and I think the text looks too big.

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Im sorry, but what does a HSB mean? I still don't know how to correct the top right corner, i mean it sometimes goes all the way over, sometimes it doesn't.

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Horizontal scrollbar. I'll have a look at it when I get back to my main pc.

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Thanks. Oh, and if anyone can view my page in netscape which i just did, and tell me why the damnt thing shows up the way it does, that would be real helpful. I mean, it doesn't even look like a website in netscape, that is rediculous. I know a small percentage of the population uses netscape, but still. The text is small, the logo doesn't even show up. Its like, netscape interpretes my html code and craps on it.

Busy's picture

He has: 6,151 posts

Joined: May 2001

Displays the same in NS 4.7 as it does in IE5 (excpet the news bit doesnt work) and in IE (800x600) there is a scroll bar, but not in NS

just looked at it in NS 6, hmm, looking at your code (you should maybe validate it as well) your using a lot of empty cells, add   to them ( )

your also using a lot of your full path names: which wouldnt work on any machine (except yours)

works the same as IE in Opera, as opera6

validate your code and add the   and it should be sweet, I see the font all the same size in all browsers, including NS6
dont blame Netscape for your own mistakes

jag5311's picture

They have: 202 posts

Joined: Jan 2002

Well, im thinking that i need to upload spacer.gif because that is what is standard in dreamweaver, but for some reason i don't have to with IE. So i am giong to upload that gif file and see if it makes a difference in netscape. Well, i tried erasing all those empty tables, but it actually tore down my site to what it looks like in netscape. So that leads me more to believe i need to upload the gif file

if that doesn't work, i will add the  

thanks

bryan

Busy's picture

He has: 6,151 posts

Joined: May 2001

remember what you see is sometimes whats in your cache, thats why you could be seeing where the spacer should be.

dont forget to remove the C drive path to your image (spacer)

A empty td tag in NS is just that, a empty tag, a   which is a none breaking space adds something to the cell so is no longer empty, if its a small cell you can add font tags around the non breaking space, (i use font size-2 which seems to work best)
did you know netscape invented/started tables ?

jag5311's picture

They have: 202 posts

Joined: Jan 2002

See, i can preview my site in netscape and it looks fine, but when its uploaded it screws up. To top my problems off, i cannot even connect through my ftp server. i think my school did something with blocking it, for some odd reason

I tried something though. I deleted the spacer areas in my html section, and it made the page look like it does when uploaded to Netscape, so i think its the spacer problem, and not the empty table section.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.