If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3

Thread: Layout

  1. #1
    YLA is offline
    Junior Member
    Join Date
    Mar 2006
    Member #
    Okay, to make a long story Short I want to make a layout for a site, its kinda like xanga, so I am able to make my own layout for it. I know what I want the layout to look like and I have already made it in PSP 10, But thats all I know how to do. I was wondering what the steps were after that... if I had to slice It all up, or what my next steps where. I also need help on how to put it in html, or If thats even what I need to use. I'm really sorry I don't know much, but can someone please help me. I've tryed to learn all I can, but I guess I never look in the right places.

    Thanks alot!


  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Member #
    The basics are at You should at least know HTML, and some CSS, though the more CSS you know the happier your life will be.

    Translating a psd into HTML...

    First thing you want to do is separate what is HTML-generated, versus graphics.
    examples of HTML elements: content text, text-based navigation/buttons, color fields, borders
    examples of graphic elements: logo, photography, complex graphics (basically anything bigger than a line or colorfield)

    Then you want to categorize the different parts: content, navigation 1, navigation 2, header, footer, etc.

    HTML elements are styled in the CSS & HTML, therefore, you have to learn how to do this.

    Graphic elements have to be optimized, I would suggest using ImageReady instead of Photoshop.

    Once you've done all this...
    Make a div class for each of your major sections, making sure to specify the position and exact dimensions (refer to your PSD). Do not specify a height for the content.

    Where applicable, you can set background images in CSS. Also, define your text styles, borders, margins, padding, and links.

    Generate some filler text for the content and see how everything looks. Test on other computers. For larger sites, I would recommend making different files for each of your elements and then bring them together.

    Cop Out
    This actually is a lot less work up front, but will cause a major headache if you have any kind of change. In ImageReady, you can slice the document and create rollovers and save optimized with HTML and viola you're done. The code is gross, and it is impossible to change the size of your content area without knowing HTML. Plus, it's guaranteed to have nested tables!

    I have an eye for detail like you'd never believe.

  4. #3
    Junior Member CanadaWebDesign's Avatar
    Join Date
    Mar 2006
    Member #
    nicely done DC, make sure u distinguish which you are making an image and which you are makeing tabled, please do not make your whole page an image and do your content in photoshop, I hate that

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 02:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: