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

Discussion in 'General Software Discussion' started by Jamboguy, Aug 2, 2003.

  1. Jamboguy

    Jamboguy New Member

    Joined:
    Nov 5, 2002
    Messages:
    67
    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  2. tek

    tek New Member

    Joined:
    May 3, 2003
    Messages:
    2,103
    Likes Received:
    0
    Trophy Points:
    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 ?
     
  3. Jamboguy

    Jamboguy New Member

    Joined:
    Nov 5, 2002
    Messages:
    67
    Likes Received:
    0
    Trophy Points:
    0
    Ok so I was correct with slices, but what is this 'position absolute' you are talking about. Thanks for your reply btw.
     
  4. Malus

    Malus BSD SMASH!

    Joined:
    May 13, 2002
    Messages:
    1,170
    Likes Received:
    3
    Trophy Points:
    0
    I guess I'm qualified to answer this one. :D 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. . . :confused:

    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.

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

    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.
     
  5. Jamboguy

    Jamboguy New Member

    Joined:
    Nov 5, 2002
    Messages:
    67
    Likes Received:
    0
    Trophy Points:
    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!
     
  6. tek

    tek New Member

    Joined:
    May 3, 2003
    Messages:
    2,103
    Likes Received:
    0
    Trophy Points:
    0
    Saturday night? Reason to drink.. ehh ? Hell yeah bro, hehe.
     

Share This Page

visited