SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Psd to html

  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Psd to html

    Hello
    I am trying to convert a psd file to html. I downloaded a free psd template and after I modified I am ready to convert it in html. I have looked over the web for tutorials another stuff but I got lost. Most of them required to write a code and I got not clue on codes. In the meanwhile when I open the psd with fireworks cs5 I can view the sliced parts layers from the original psd so I guess i do not need to do that job. But I do not know how to convert it in html so I can continue with dreamweaver the creation of my site.I tried to export is as html but I still get all pictures and i cannot thereforE insert a text in DW cs5. Also I tried under the slice web toll to export all part as as images and only the main body where I plan to put the text as html but I still have failed.I also
    opened the psd in Photoshop using the slices, then Save for Web & Devices..., Save..., Format > HTML & Images, but what I get is an image html which is not good in terms of SEO
    Secondly when I opened the html file with DW cs I got the design let me call or a layout. Should I start filling it with the images obtained from the psd?But how will I be able edit the text in DW since it will be a set of images?Could you please suggest me how to do that?Also I plane to insert a flash menu on some images. Do i have to do that before exporting it in html or it is still possible to do that later. Thank you!

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    If you don't know how to code, then there's no way, I'm afraid. All that automated code is useless, so I'd strongly urge you to not go that route and learn HTML and CSS properly. That way you'll be able to crop the areas of your PSD that need to be images and add them to your CSS (for image backgrounds) and HTML (for content images).
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello and welcome to Sitepoint.

    Unfortunately, there's no easy answer. I agree with the above. If you don't know HTML/CSS or how to design a website in general, then it's going to be hard to do so.

    From the sound of your question(s), you don't know how to do so. Take no offense, we've all been there. I'm still not sure I know how to properly design a website myself. Though due to my tenacity I keep trudging along.

    So, you have 2 choices:

    1. Hire someone to do it for you.
    2. Learn HTML/CSS and the basics of web design in general (as mentioned by kohoutek above).
    Either way you go, Sitepoint is a good place to be when in a situation such as you find yourself.

  4. #4
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RetroNetro View Post
    Hello and welcome to Sitepoint.

    Unfortunately, there's no easy answer. I agree with the above. If you don't know HTML/CSS or how to design a website in general, then it's going to be hard to do so.

    From the sound of your question(s), you don't know how to do so. Take no offense, we've all been there. I'm still not sure I know how to properly design a website myself. Though due to my tenacity I keep trudging along.

    So, you have 2 choices:

    1. Hire someone to do it for you.
    2. Learn HTML/CSS and the basics of web design in general (as mentioned by kohoutek above).
    Either way you go, Sitepoint is a good place to be when in a situation such as you find yourself.

    I can design a simple site with DW but I do not know how to write a code....One the other hand I have no money to hire someone to do the job for me....Any suggestion will be helpful..thanks!

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Post the .psd or a .jpeg of it.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itf View Post
    I also opened the psd in Photoshop using the slices, then Save for Web & Devices..., Save..., Format > HTML & Images, but what I get is an image html which is not good in terms of SEO
    Not just an image in html, but an image in html tables! No bueno. The new way to design websites is flipped from how it used to be. Many people are now starting with the CSS and HTML and Photoshop is used for enhancing. Some never even touch Photoshop at all. Alternatively, what I do is start with wireframes, a sketch or Illustrator, in which I can see and plan what the markup and CSS positioning will be. Then I design in Illustrator code in mind, and end up with few images in the end. That's just my own way because it seems faster for me to comp 3 versions to show a client in Illustrator rather than comp in the browser.

    Designing a site based on a Photoshop template, like you have done, would then require a bit of reverse engineering, breaking down the design into a wireframe and planning the markup and presentation code from that. The point though is that if you don't have any coding knowledge, of either CSS or HTML, you shouldn't even start the process at all. There is no trick, at least not yet, because Photoshop has no way of converting images to CSS layout, not that I know of. And if so, why let computers think for you? You usually end up with a mess. You simply have to learn first, then do.

  7. #7
    Non-Member jack_rose's Avatar
    Join Date
    Nov 2011
    Location
    Chennai
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please do not start filling it with the images.. Your webpage weight will be increased and take much loading time...Firstly, you have to learn how to do HTML code first.. After that trying to convert it into .html file...It is the only safe method for you...

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Location
    NY
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As i have learned form your post that you don't have much knowledge in HTML , CSS and JavaScript which are very important if your trying to change a Psd file HTML format. It's not an easy task with the knowledge of these website programming language. You can try learning these tool online or best way is to find some online video for the same task. And you can download such tutorial for that and can easily learn changing your Psd to Html.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Novi Sad
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting thread i also had same problem and then i stated to learn HTML, CSS3, jQuery and a lot of things. Without that knowledge especially CSS3 you wont be able to create HTML from PSD.

  10. #10
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Original post was from almost a year ago, wonder if he is still stuck or if this issue has been resolved?

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,325
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Well, he didn't return, despite the support he was offered, so I don't think there's any point in resurrecting the thread now.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •