I found an easy way to code a psd!

Discussion in 'HTML & Website Design' started by Hecky, Oct 11, 2007.

  1. #1
    Yes, you've probably done it too, but I figured it out for myself! All you do, is :

    Make the website in photoshop

    Export it to Fireworks, then slice it. Make sure you slice the areas where you want to insert text aswell.

    Export it as html.

    Open in dreamweaver.

    Centre it all and make the background blend in.

    Where you sliced to insert text, delete the image and set the background image of that area to the image you just deleted. You can now write and do whatnot in that area :).

    Simple, but effective :)


    -Hecky.
     
    Hecky, Oct 11, 2007 IP
  2. scriptman

    scriptman Peon

    Messages:
    175
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    But at the end of the day, nothing is better than writing your own valid HTML ;) It's not that time consuming, is it?
     
    scriptman, Oct 11, 2007 IP
  3. freelancewebaz

    freelancewebaz Well-Known Member

    Messages:
    976
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    145
    #3
    That's all well and good but that produces sloppy bloated code. You could do it that way if you were willing to spend some time editing the code and optimizing it but that sorta defeats the purpose.
     
    freelancewebaz, Oct 11, 2007 IP
  4. sogastic

    sogastic Peon

    Messages:
    202
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Why do you have to export it to fireworks ?

    Thats how I make websites:

    Make up the website. Plan how to slice the website and after slicing save for web and only images. After that I will start adding divs and styles. Photoshop "save for web as html and images" is so limited. You will have to mess with all those tables if you want to have some tables height 100% etc. Divs took me only about 5 days to learn.

    Example too:

    Start with adding <div> and </div>. Between them you will start adding another divs.
    <div id="header"[you will add #header to your css files after that and then add some styles if needed (e.g padding or image for header)]>
    <div> some other divs inside header </div>
    </div>(that will close div header)

    And finally you can end up with something like www.digg.com

    You can use tables also if needed. eg. if you cant get some place working with divs and definitely need 2 or more columns.
     
    sogastic, Oct 11, 2007 IP
  5. live-cms_com

    live-cms_com Notable Member

    Messages:
    3,128
    Likes Received:
    112
    Best Answers:
    0
    Trophy Points:
    205
    Digital Goods:
    1
    #5
    Photoshop and ImageReady can export to HTML.

    But Photoshop and Fireworks both produce terrible code, hand code is 5x better.
     
    live-cms_com, Oct 11, 2007 IP