Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / Another website question, could use an opinion or two

Author
Message
Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 5th Apr 2007 22:03 Edited at: 5th Apr 2007 22:06
I'm sorry for yet another question about my website. I'm still learning this stuff, not just programming-wise, but in terms of aesthetic design as well, and after spending an hour trying to choose one of these formats, I figured I'd ask people who know more about this than I do

I can't decide how I'm going to format the Eternal Equinox subsite, and my lack of artistic ability, mixed with my poor web design skills, is forcing me to beg you guys for help with my website yet again

It's a pretty simple question really: which button format should I use, or should I use some other system that I'm unfamiliar with. I haven't published the site yet, but the image below was taken in Nvu. "A" marks a simple button system. They're static png's, you click them, and they take you where you need to go. "B" is the system in use throughout my website, used mainly because I lack the talent to make anything better . I'm going for an ocean beach theme, because the game this subsite is for takes place entirely on an island.

Of those two button styles (the real buttons or the hyperlinked words), which is more "professional?" Also, if you like A, should they be horizontal underneath the title image, or should they be vertical along the left edge of the page? Or do you know of some sort of program that's freeware for commercial websites that makes better-looking buttons than these? Because I'm not happy with the buttons, but for a commercial game I'd prefer using something nicer than hyperlink text. What do you guys think I should use or do?



Note: I used a picture instead of a link because this isn't nearly close to being publish-able yet; it's still in the absolute earliest stage of creation. I don't want to get more into this until I have the basics sorted .


"In an interstellar burst, I'm back to save the universe"
Tom J
19
Years of Service
User Offline
Joined: 4th Aug 2005
Location: Essex, England
Posted: 5th Apr 2007 22:26 Edited at: 5th Apr 2007 22:27
Personally, I like A but not in that particular colour. I badly just made the set of buttons blue as an example of what I think would suit best. Of course other people may have a different opinion

Visit GamingColosseum Web - http://www.gamingc.co.nr/

Attachments

Login to view attachments
Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 5th Apr 2007 22:29
I was trying to simulate the color of sand, but I agree, it looks bad. I'll more than likely go back to texture maker and try the sand effect over again but I'll wait and see what others say about it first. Thanks colosseum!


"In an interstellar burst, I'm back to save the universe"
DrewG
19
Years of Service
User Offline
Joined: 25th Aug 2005
Location:
Posted: 5th Apr 2007 23:03
If it was me, and I do a lot of webpage designing, I would make those squares into rounded blue rectangles, with a hint of noise, and a tad of bevel and bossing. Use a nice font of impact with a color variation and you could change the general lighting of it all.

Good luck, I don't think A or B looks as good as it possibly could, keep working at it though.
Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 5th Apr 2007 23:24
So I should ditch the sand idea and go for a blue that matches the logo? I like that idea. I'm still learning my way around Gimp as well. I know how to bevel and do shadows, basically any of the stencil operations and some of the other stuff, and I can round the edges, but when I round the image off and try to bevel it, it ends up blacking out the edge of the area in a weird way. I'll give it a try though and post the result.


"In an interstellar burst, I'm back to save the universe"
Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 5th Apr 2007 23:48


Is this one any better? I took a bit out of the logo just to match the colors up, then I gave it a gaussian blur. Then I embossed it a bit, beveled it, and rounded it off. I didn't drop a font in yet, first I want to see if this looks decent.

How do you make a surface look like glass? I see that reflective look on a number of buttons but when I use the glass functions in Gimp, I end up with refractions. I'd love to learn how to make shiny surfaces but I can't find anything about them in Gimp's manual


"In an interstellar burst, I'm back to save the universe"
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 5th Apr 2007 23:51
B, all the way. The bevel is so overused and the easiest thing to make in photoshop, and most designers would frown on it.

BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 6th Apr 2007 07:33
Its a good start. But no offense it looks a bit basic and unprofessional. You need something slick thats not too beveled and 3D looking.

I've made you some examples below. also at the very bottom a step by step on how to make smart buttons. hopefully you can follow through what is happening on the image.


hope this helps.

BiggAdd

Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 6th Apr 2007 21:56
Thank you, it definitely helps a lot. The only problem though is that I'm trying to make the EE subsite feel "organic," know what I mean? The game takes place on an island full of low-tech villagers, and ideally I want the website to feel organic, natural, and tech-free, if that makes sense. It's definitely presenting a problem design-wise.

For the buttons, what is the effect called that makes it look glossy? I can't find anything in Gimp that does it, but I'm sure there must be *something* to replicate that effect. I might keep the texturing of the water button but use a lot less bevel and maybe that glossy effect, with maybe a round edge-detect. That should match the logo, I think. Still, I wish I could encorporate sand or something without it looking hoaky. Any ideas on how I might go about that? Remember, my only tools are texture maker and gimp, lol I'm trying to paint the Mona Lisa by carving a boulder with a stick


"In an interstellar burst, I'm back to save the universe"
Steve J
18
Years of Service
User Offline
Joined: 22nd Apr 2006
Location: Vancouver, Washington
Posted: 6th Apr 2007 23:33
What do you mean organic? A site that I made for cash curtis, which sadly he never used, in my opinion looks organic and glossy:

Cashes Site

pleading and needing and bleeding and breeding and feeding exceeding..where is everybody? trying and lying defying denying crying and dying..where is everybody?
Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 7th Apr 2007 00:22
It's probably well outside my ability's budget, but I want the visitor to "feel" like they're on the island, if that makes sense. I'd like the buttons to have the appearance of water, or maybe sand. Like when you go to some games' sites, the buttons look metallic, and maybe they're riddled with bullet holes. I was going to use the BF42 site as an example, but EA apparently changed it . But anyway, back on subject, ideally I'd like the website to get a tropical feeling. I'd love to have the buttons look like water or sand, with maybe that glossy shine laid over it somehow. I don't want it to look high-tech, modern, or futuristic in any way, all the while keeping it simple, but it's proving hard to do without the site looking outdated or me having to spend several months learning the Gimp. With an April release looming, this is proving nearly impossible, because I don't have time to learn Gimp, and do it while making the website, handling the alpha testing, making final edits to the game, etc. Ack, pressure lol.


"In an interstellar burst, I'm back to save the universe"
Steve J
18
Years of Service
User Offline
Joined: 22nd Apr 2006
Location: Vancouver, Washington
Posted: 7th Apr 2007 00:24
Well you might be out of luck then=/ The high tech feel is your best bet unless you have a month or two to work on it.

pleading and needing and bleeding and breeding and feeding exceeding..where is everybody? trying and lying defying denying crying and dying..where is everybody?
Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 7th Apr 2007 00:53
Dang... I should have started working on this a lot earlier. I guess I'll just work on making them blue to at least remind people of water, hehe. Maybe I'll put some palm trees on the site or something as well, or would that be tacky? My goal for the end of the year is to have a working understanding of Gimp/ Photoshop and at least a beginner's level of knowledge in PHP. I just wish I did all that earlier, hehe.


"In an interstellar burst, I'm back to save the universe"
Steve J
18
Years of Service
User Offline
Joined: 22nd Apr 2006
Location: Vancouver, Washington
Posted: 7th Apr 2007 01:00
Depends on the palm tree. Here is a quick render if you want to try and use it at all.

pleading and needing and bleeding and breeding and feeding exceeding..where is everybody? trying and lying defying denying crying and dying..where is everybody?

Attachments

Login to view attachments
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 7th Apr 2007 03:30
The Glossy buttons is not an effect. Tell you what I'll try make a video or a step by step. It should be achievable in Gimp.

BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 7th Apr 2007 04:56 Edited at: 7th Apr 2007 17:11
Here we go : Link

Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 7th Apr 2007 08:05
Is this what you'd consider organic?



Steve J
18
Years of Service
User Offline
Joined: 22nd Apr 2006
Location: Vancouver, Washington
Posted: 7th Apr 2007 08:18
That looks nice! My only question is how you would slice the thing?

pleading and needing and bleeding and breeding and feeding exceeding..where is everybody? trying and lying defying denying crying and dying..where is everybody?
indi
22
Years of Service
User Offline
Joined: 26th Aug 2002
Location: Earth, Brisbane, Australia
Posted: 7th Apr 2007 09:26
It would be possible to slice the last one with tables but i would use layers.

Steve J
18
Years of Service
User Offline
Joined: 22nd Apr 2006
Location: Vancouver, Washington
Posted: 7th Apr 2007 09:27
I guess you could image map the links, I can see it now. Justed seemed abstract when I first saw it.

pleading and needing and bleeding and breeding and feeding exceeding..where is everybody? trying and lying defying denying crying and dying..where is everybody?
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 7th Apr 2007 19:17 Edited at: 7th Apr 2007 19:26
I use ImageReady, I've already converted that image into a website. Even got little butterflies that popup over the links.

Does anyone remember what that free program was called that made 3D trees?

Chris Franklin_
17
Years of Service
User Offline
Joined: 21st Dec 2006
Location: Home
Posted: 7th Apr 2007 19:29 Edited at: 7th Apr 2007 20:18
Bit off topic:

Matt, drop me an e-mail sometime I'll help you get the site setup/made if you want. also here's a fee logo if you want to use it png with transparency just drop it into Photoshop or macromedia fireworks on top of a background



Attachments

Login to view attachments
Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 8th Apr 2007 03:49
Awesome BiggAdd, thank you! I took notes all throughout that video. The Gimp doesn't have a lot of the stuff that Photoshop has, but I guess I can't complain, Gimp is free and I guess you get what you pay for lol. But I tried to take everything you showed me in the video and make a similar button, and I was able to sort of pull it off, and I've learned how to make it shiny/ glossy, so I can do that from now on (and give a super-huge makeover to the MISoft website in the process )

Thank you so much for all the help guys, I really appreciate it. I took what I've learned from BiggAdd's video and a bit from some searches I did last night (the video was great and tought me a lot, but the sites I found last night via google were absolutely useless), and with some playing around with layers (which are new to me, I'm shamed to say), I've created this...



That's what I meant by organic instead of high-tech. Like, the button looks like water and doesn't look plastic, know what I mean? I was having a heck of a time trying to explain that, lol. I still need to make the word itself look nifty, and without a decent emboss feature in Gimp it's going to be kind of hard to make it look indented into the button, but I should be able to play around with it tonight and (hopefully) figure it out. Is this a decent start, or does it look tacky with water instead of a solid background?

@ Chris: Thanks for the offer, but you know me, I'm bullheaded lol. I need to learn this stuff at some point . When it's done, I'm going to show it to you and the other MINet mods and see if it's worthy of going up. Also, I went digging on the server and found the "Tigra" logo... I think we can just replace the gif with something else, I'll send you the gif tonight or tomorrow when I send you the alpha version of EE. It'll be called "forchris.gif" or something of that nature. Sorry for the long-winded private message everyone else


"In an interstellar burst, I'm back to save the universe"
indi
22
Years of Service
User Offline
Joined: 26th Aug 2002
Location: Earth, Brisbane, Australia
Posted: 8th Apr 2007 04:24
png transparency does not work in one of the IE browsers, 6 if i recall.
the hack to make it work is just not worth it, even with a DOM. That would make the isolated alpha png as a working solution for all browsers useless, unless it was collapsed into graphics and used in jpg or gif graphical areas. I can see your just transferring it so thats ok.

matt rock, when a button or graphical element is too large, it screams newbie graphics.

Try to reduce your elements to about 50% of what i can see above, while still retaining the crisp sharpness. Try not to overload your critical navigation areas with fluffy backgrounds, making the navigation text harder to read.

Check out some navigation articles on the internet, its a full blown subject they pay a lot of money for in marketing design etc..

Rely on CSS to manage a style of link, creating new graphics for each button state is very old school and not really performed any more in the real world of web design.
create a background for one and you have a background for all.
Build a style that makes the textual data in the link appear to have mouse states.

The photo in the template that Phaelax posted, by higgins appears to be stretched and blurred. Not very clear or crisp as your main focal graphical point. The screenshot window is rounded and the rest is not, stick to one method so there is continuity across your whole site, the fonts vary as well, stick to 1-2 fonts for the whole site.

The design is also developed or presented at 840 pixels. This width is not standard to start slicing it.
A lot has not been factored in with the elements posted above. but it appears your doing ok with progress, there is still a way to go before I would give it any praise however, and as much as you will get from web design forums.

BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 8th Apr 2007 06:48 Edited at: 8th Apr 2007 06:54
Ok I downloaded GIMP for the first time ever. Yes you are right its very basic. But that only means it takes a bit longer to achieve the effects. I've attached what I hope is a gimp file to this post. Showing you what you can achieve.

I made a video of the making of that file. I make a fair few mistakes as this is actually my first time using GIMP. I'll upload the video now. (Its massive btw so be prepared to download a lot)

O and a preview of what i made:


Attachments

Login to view attachments
indi
22
Years of Service
User Offline
Joined: 26th Aug 2002
Location: Earth, Brisbane, Australia
Posted: 8th Apr 2007 07:00 Edited at: 8th Apr 2007 07:04
If your going to bastardize the famous aqua look, check out some tutorials to make it even more close to the real thing.

http://graf-users.edu.ats.dk/maryus1/Aqua%20Button%20Pro%20(Photoshop%206%20or%20higher).htm



Attachments

Login to view attachments
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 8th Apr 2007 07:01
OH MY GOD!!!! The file size of the video is 600MB... but somehow WinRAR has managed to compress it into 4MB!!!!! How is that possible?

Matt im sorry for making you download 90MB before, i diddn't realise WinRAR was that good.

Here is the link to the New Video: LINK
and the old video compressed: LINK

Hope you can follow what is going on. The mouse didn't show up.

Hope this helps you.

Cheers,
BiggAdd

BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 8th Apr 2007 07:06
Indi. Nice links. I never knew there was an "Original". I just composed this style of buttons from many sessions of messing about and looking at other internet buttons and gloss styles.

indi
22
Years of Service
User Offline
Joined: 26th Aug 2002
Location: Earth, Brisbane, Australia
Posted: 8th Apr 2007 07:09 Edited at: 8th Apr 2007 07:10
you have uploaded your new video as a filename.rar.txt file convention naming.

remove the .txt for clarity.

the codec is what is making it very large. microsoft video 1 is your current codec.
you could transpose it down into another web streaming format like h264.

I must say thats impressive from 640 megs to 4.1 megs viva la winrar

the original is from apples Mac OSX Operating system.

BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 8th Apr 2007 07:18
Quote: "you have uploaded your new video as a filename.rar.txt file convention naming.

remove the .txt for clarity"
.

Sorry but i didn't understand any of that.

Quote: "the codec is what is making it very large. microsoft video 1 is your current codec.
you could transpose it down into another web streaming format like h264."


Yes your right. And here is me thinking i was encoding with DivX. I didn't realise CamStudio resets after you close it.

Cheers

indi
22
Years of Service
User Offline
Joined: 26th Aug 2002
Location: Earth, Brisbane, Australia
Posted: 8th Apr 2007 07:26
the filename that you have uploaded is blah.rar.txt, you have two extensions on the filename.
people will have to remove the .txt extension before unpacking it.

Jess T
Retired Moderator
21
Years of Service
User Offline
Joined: 20th Sep 2003
Location: Over There... Kablam!
Posted: 8th Apr 2007 11:29
indi, you mentioned that IE(6) doesn't like transparent PNGs.
That's true (and damn, it causes a headache sometimes), but not unavoidable.

If you use Indexed transparency instead of the normal, then IE will render transparency perfectly along with FF without any workarounds

Matt,

If you're going for the 'primitive' type of feel, you'll more than likely have to break away from the typical website layout and go for something abstract that conveys the feel and the information how you want it.

Have you considered something like Heart Of Darkness, or how about the Dawn Of Fantasy website?

Obviously, you don't want to be using Flash (I assume you don't know it), but you can easily take those layouts and put them into your own HTML design

Nintendo DS & Dominos :: DS Dominos
http://jt0.org
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 8th Apr 2007 14:31 Edited at: 8th Apr 2007 14:34
Quote: "the filename that you have uploaded is blah.rar.txt, you have two extensions on the filename.
people will have to remove the .txt extension before unpacking it."


Yeh thats what i thought you meant, but its just that on my PC they are just .rar files. I've also downloaded off my server and they work fine with WinRAR. I don't know how to change file formats also!

It says file not found:
http://www.myexpo.co.uk/gimptut.rar.txt
Sorry if I'm being terribly noobish.

Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 8th Apr 2007 20:05 Edited at: 8th Apr 2007 20:09
Take off the .txt

http://www.myexpo.co.uk/gimptut.rar

Quote: "If your going to bastardize the famous aqua look..."

hehehe

BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 8th Apr 2007 20:50
I know but i was just saying that its not a filenam.rar.txt, as that link doesn't lead anywhere.... O im getting confused now.

indi
22
Years of Service
User Offline
Joined: 26th Aug 2002
Location: Earth, Brisbane, Australia
Posted: 10th Apr 2007 15:24
hey Jess, thanks mate, I never bothered to try that, silly me.

Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 10th Apr 2007 22:17
Thank you guys! I've been utterly wrapped up in finalizing the alpha version of Eternal Equinox for the past few days but it's done now and being sent to the alpha testers, so now I FINALLY have time to get back into this stuff. I'll spend most of the afternoon and well into the night going through each individual post and applying everyone's thoughts, and I should be able to post the final result tomorrow. Thank you so much for all of this help guys!


"In an interstellar burst, I'm back to save the universe"
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 11th Apr 2007 01:47
Thanks for telling us that Jess, could save a few of us from headaches.

Jess T
Retired Moderator
21
Years of Service
User Offline
Joined: 20th Sep 2003
Location: Over There... Kablam!
Posted: 11th Apr 2007 10:32
No worries, guys.

I stumbled upon it once when I opened an Indexed GIF in GIMP, then saved it out as a PNG - It automatically saved it as indexed and the transparency worked perfectly. Didn't actually notice it until I went to do another but from scratch as PNG and suddenly, no transparency.

To be honest, I personally use the IE work-around since alot of the images I use alpha on are blended rather than simply 'on' or 'off', but it's still a nice trick to know

Nintendo DS & Dominos :: DS Dominos
http://jt0.org
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 12th Apr 2007 11:14
I read up on it, and it looks like you're limited to 8bit with an indexed png.

Jess T
Retired Moderator
21
Years of Service
User Offline
Joined: 20th Sep 2003
Location: Over There... Kablam!
Posted: 12th Apr 2007 13:12 Edited at: 12th Apr 2007 13:14
That's still 256 colours! And, each of those colours can have it's own transparency level.

So, imagine that you wanted to make a nice logo that fades nicely into the background that has, say, 20 major colours (for blending, etc), then you've still got room for 10 alpha level variations on each and every one of those colours.

You just have to use what you've got wisely

[EDIT]
To clarify, 8 bit implies a 256-entry palette table.
[/EDIT]

Nintendo DS & Dominos :: DS Dominos
http://jt0.org
Matt Rock
19
Years of Service
User Offline
Joined: 5th Mar 2005
Location: Binghamton NY USA
Posted: 14th Apr 2007 22:59
I'm trying to make the site incorporate the ideas of the two website's Jess showed me with everything I've learned from Biggadd's video and I think I'm developing something pretty original. But I can't show it to anyone until it's finished! When it's posted I'll send screenies to EE's alpha testers to see what they think, and then I'll post the final results here. In the course of this thread, I've learned more about 2D art than I ever thought I would, and I'm eternally greatful for everyone's help with this. It looks like I'll have to give out a few free copies of EE when it's done to those of you who've helped me along so far... that is, if you actually want a copy, hehe


"In an interstellar burst, I'm back to save the universe"

Login to post a reply

Server time is: 2024-11-18 12:01:25
Your offset time is: 2024-11-18 12:01:25