A n00b in need of some simple advise (regarding tables and gfx)

Jamboguy · Aug 2, 2003, 03:32 PM

Hi there,

I'm not a web designer but I've tried doing my owns sites and stuff and can do a bit of php and html coding and such like (self taught). My question is this. I've seen many websites with really cool graphics which make websites look less boxy. How does one go about the structure of the tables and so forth with regards to the graphics. Hmm not sure if I've described what I mean properly but here's an example.

For example if you goto this website posted earlier on these forums : http://elvis.rowan.edu/~dgrochow/design8.jpg

How does one create perfect curves and graphics like that to fit onto a webpage? Do you do it in Fireworks/Photoshop and then do slicing or is there another method? Websites I've done in the past are very boxy and boring like this one:

http://www.angelguitars.com

That was my 1st attempt on a website with full php and sql integration.

Advise would be thoroughlly appreciated so I can create much more attractive sites. Cheers.

tek · Aug 2, 2003, 04:37 PM

Those smooth curves are made mostly in Photoshop7.0, then CUT into pieces, IN PHOTOSHOP, then saved into a bunch of files, and then taken into a HTML editor and put together via "position absolute" or a similar code.

could I explain it any easier ?

Jamboguy · Aug 2, 2003, 05:03 PM

Ok so I was correct with slices, but what is this 'position absolute' you are talking about. Thanks for your reply btw.

Malus · Aug 2, 2003, 07:19 PM

Quote:

Originally posted by Jamboguy
Hi there,

I'm not a web designer but I've tried doing my owns sites and stuff and can do a bit of php and html coding and such like (self taught). My question is this. I've seen many websites with really cool graphics which make websites look less boxy. How does one go about the structure of the tables and so forth with regards to the graphics. Hmm not sure if I've described what I mean properly but here's an example.

For example if you goto this website posted earlier on these forums : http://elvis.rowan.edu/~dgrochow/design8.jpg

I guess I'm qualified to answer this one.

For you information, this is just a graphic I have never finished. Needs a lot more work before I slice and implement. I don't even remember posting it on the forums. . .

Quote:

How does one create perfect curves and graphics like that to fit onto a webpage?

The best way to learn how to do this is to practice a lot with Photoshop and read lots of tutorials. I make curves by either playing around with the eclipse selection tool or by making a curved path using the freeform pen tool.

Quote:

Do you do it in Fireworks/Photoshop and then do slicing or is there another method?

No, you're right. I did it in Photoshop and sliced it, which is probably the best way to do it.

Quote:

Websites I've done in the past are very boxy and boring like this one:

http://www.angelguitars.com

That was my 1st attempt on a website with full php and sql integration.

Advise would be thoroughlly appreciated so I can create much more attractive sites. Cheers.

It's actually not too bad, but it does need some more details. In essence, every design is a box, its just a matter of making it not look like a box. The best way to get rid of the boxy feel is to either use lots of curves, or enhance the box to make it look like it is a good thing. For example, I used lots of boxes in this design I did for my friend:

http://elvis.rowan.edu/~dgrochow/winful/template.htm

However, with a lot of lines and a strategically placed curve, it makes it look a little less boxy. Also, your choice of colors is very important. A page with matching colors makes the page look a lot better, even without the fancy graphics. My code really stinks though, due to the fact that I substituted a table in for three divs halfway through. However, you can still get a basic idea of how I ended up slicing and coding the layout.

As a beginner, I would first observe other good designs in action and see how they're made. Look at the code, look at how the graphics are sliced, etc. I would also take the time to read lots of tutorials and learn all of the tools in Photoshop. You really want to get a good grasp of how to make the various effects used in layouts. Once you have a grasp on how the sites were made, practice it yourself. No one is going to make a beautiful site on the first try; my first attempts were horrid. Really, you just have to practice it a lot to get the hang of it.

Position absolute is making the position of an element on the page relative to top left corner of the rendered page. Basically, you would use CSS like this:

Code:

position: absolute;
top: 10px;
left: 40px;

This would just tell the browser that whatever element you applied this to would be absolutely positioned ten pixels down and forty pixels to the right of the very top left of the rendering area.

Personally, I try to stay away from absolute positioning. I just let the layout stretch whichever way it wants, no reason to force it to do something.

Jamboguy · Aug 3, 2003, 02:28 AM

Thank you very much for your extensive reply. I'm a bit pissed atm since I'm Scottish and it's a Saturday night so I'll read it more taemorrow. Thanks again yuo lovely people!

tek · Aug 3, 2003, 03:04 AM

Quote:

Originally posted by Jamboguy
Thank you very much for your extensive reply. I'm a bit pissed atm since I'm Scottish and it's a Saturday night so I'll read it more taemorrow. Thanks again yuo lovely people!

Saturday night? Reason to drink.. ehh ? Hell yeah bro, hehe.

Aug 2, 2003, 03:32 PM	#1
Jamboguy DriverHeaven Junior Member Join Date: Nov 2002 Location: Edinburgh, Scotland Posts: 67 Rep Power: 0	A n00b in need of some simple advise (regarding tables and gfx) Hi there, I'm not a web designer but I've tried doing my owns sites and stuff and can do a bit of php and html coding and such like (self taught). My question is this. I've seen many websites with really cool graphics which make websites look less boxy. How does one go about the structure of the tables and so forth with regards to the graphics. Hmm not sure if I've described what I mean properly but here's an example. For example if you goto this website posted earlier on these forums : http://elvis.rowan.edu/~dgrochow/design8.jpg How does one create perfect curves and graphics like that to fit onto a webpage? Do you do it in Fireworks/Photoshop and then do slicing or is there another method? Websites I've done in the past are very boxy and boring like this one: http://www.angelguitars.com That was my 1st attempt on a website with full php and sql integration. Advise would be thoroughlly appreciated so I can create much more attractive sites. Cheers. __________________ ---------------------------- ATI x1900 Pentium D 3.0Ghz Supermicro PDSLE Mobo. 4GB RAM ----------------------------

Aug 2, 2003, 04:37 PM	#2
tek DriverHeaven Senior Member Join Date: May 2003 Location: Boston, US Posts: 2,103 Rep Power: 0	Those smooth curves are made mostly in Photoshop7.0, then CUT into pieces, IN PHOTOSHOP, then saved into a bunch of files, and then taken into a HTML editor and put together via "position absolute" or a similar code. could I explain it any easier ? __________________ [COLOR=White][/COLOR]

Aug 2, 2003, 05:03 PM	Thread Starter #3
Jamboguy DriverHeaven Junior Member Join Date: Nov 2002 Location: Edinburgh, Scotland Posts: 67 Rep Power: 0	Ok so I was correct with slices, but what is this 'position absolute' you are talking about. Thanks for your reply btw. __________________ ---------------------------- ATI x1900 Pentium D 3.0Ghz Supermicro PDSLE Mobo. 4GB RAM ----------------------------

Aug 3, 2003, 02:28 AM	Thread Starter #5
Jamboguy DriverHeaven Junior Member Join Date: Nov 2002 Location: Edinburgh, Scotland Posts: 67 Rep Power: 0	Thank you very much for your extensive reply. I'm a bit pissed atm since I'm Scottish and it's a Saturday night so I'll read it more taemorrow. Thanks again yuo lovely people! __________________ ---------------------------- ATI x1900 Pentium D 3.0Ghz Supermicro PDSLE Mobo. 4GB RAM ----------------------------