PSD to HTML

Discussion in 'HTML & Website Design' started by Jordan260, Aug 5, 2009.

  1. #1
    I have almost finished my Photoshop design of my new template im going to use for my hosting.

    Its all .PSD at the moment but there is a couple things I wasent sure about.

    1 - I have put text in the design using Photoshop. Will dreamweaver pick up that its text and convert it or will I need to delete all the text and leave the space for me to type it back in again using Dreamweaver instead?

    2 - Is there any recommended places to get my .PSD coded. Unless someone here has the knowledge to do so and wants to PM me a price?

    3 - I cant actually think of anything else right now however im looking for any helpful tips about creating the design from Photoshop and eventually putting it into dreamweaver for coding?

    Here is the site design so far (Before its mentioned, yes this started as a 1 page template I downloaded and then I modified it and added to it aswell, Its good enough for now untill the hosting is up and running and I can create a Unique design)

    http://www.veraciousmedia.com/testsite/

    Some of the pages I am just going to embed the various things like Client Login page, Support Console ect like most do using such programs such as WHMCS. (Although im actually going to try use OSTICKET instead)
     
    Jordan260, Aug 5, 2009 IP
  2. myst_dg

    myst_dg Active Member

    Messages:
    224
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #2
    This design is pretty good, but...

    1 - No, DW can't recognize texts in a picture. You have to wipe them off in PS, and type again in DW.

    2 - You could find many web designer from the web. You may also post in the trading forum in DP, you'll get tons of PMs. There's something wrong with my paypal account recently, otherwise I could do this for you. :)

    3 - Visit w3schools, learn HTML/CSS.

    Btw: spend some time on PS too, it seems that you don't know how to use the slice tool. That's a very handy tool if you want your PSD file coded the right way.
     
    myst_dg, Aug 5, 2009 IP
  3. nwdeal2

    nwdeal2 Peon

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hello, I used to do this when I first started designing websites. After redesigning and exporting and relinking over and over for the same static page, I decided to start with a html template and work in reverse. But anyways thats a different story. Here are your answers.

    1. I wish DW would recognize the text from PS, but its not going to happen. You have to slice the psd with this in mind. Once you export and edit the html, just make the slice image a <td> background and type your text over top.

    2. It's not hard to do, and the fact is, you will do this more than once. So you should try it and learn it, it will be more beneficial in the long run.

    3. One tip is: Be careful with slicing your psd, you have to make sure all of your slices touch, or you'll end up with a bunch of spacer.gif's. This makes it harder to edit in DW. Unless your a pro at this, you will end up changing your psd, then you will have to move or edit your slices, which results in a brand new DW conversion.

    Good luck!
     
    nwdeal2, Aug 5, 2009 IP
  4. Alfons Kennedy

    Alfons Kennedy Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    First off you can't render a PSD file using HTML so that's one reason. The other is that if you load your background or images as slices they're supposed to load faster.If you're interested in doing it, check out any number of tutorials on turning your PSD files in to WordPress layouts and that should give you a fairly good idea on how it's done.
     
    Alfons Kennedy, Aug 6, 2009 IP
  5. indianwebdesigner

    indianwebdesigner Peon

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The Design is Great....

    First hide the text/content area on the design and then slice the background area ... and place the bg images in the html and over it put the text content....
     
    indianwebdesigner, Aug 6, 2009 IP
  6. cssdeveloper

    cssdeveloper Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I would center it. Also, use css. It will make your life easier.
     
    cssdeveloper, Aug 14, 2009 IP
  7. mavendev

    mavendev Active Member

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #7
    well jordan,
    wt i can say is ur design is not bad actually.... the next thing is slicing .... DW can't detect da text...
    Now from i side suggestion,
    when ur working so much with the design i hope u want more n more peoples visit ur site.... ur site be listed in google search may b in 1st page... may b u want ur xhtml be valid and meet web 2.0 standard... if u hab want to ... want to hire designer then m on same profession ... u can pm me if u like...
    thx
     
    mavendev, Aug 15, 2009 IP
  8. KotoK

    KotoK Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    In photoshop have slice tool. Pick slice tool and slice your design. Than Save for web design.
     
    KotoK, Aug 15, 2009 IP