Psd to html

Discussion in 'Graphic Design' started by eds, Nov 4, 2011.

to remove all ads.
  1. eds

    eds New Member

    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. Fireproofgfx

    Fireproofgfx New Member

    Here is a tutorial I made back when I was doing this same way and it worked for me.

    Let me tell you though, this is not the way you want to go about coding your site though, there are all kinds of things that can and will go wrong within different browsers and such. It will do and be suffice for now but I would try and learn another way.

    With that said, I would recommend this link - 10 part series on how to create a website for beginners
  3. designaboy

    designaboy New Member

    Two words - Adobe Muse.

    To me it sounds like you have just described the kind of job Adobe Muse was designed for. It will allow you to create your html site by simply importing your PSD file. Adobe Muse is free to download and use for now as it is still in its beta stage, though next year you may have to subscribe to the software in order to continue to manage it within Muse the way you have been. The code it produces is a bit of a div tag soup, and could be near impossible to work with in Adobe DreamWeaver.

    Adobe Muse is drop dead easy to use and learn, especially if you are familiar with other adobe packages. You can basically drag and drop all your photoshop layers to your preferred position.

    "I plane to insert a flash menu on some images"
    Im not sure what kind of animation you have planned, but if its a simple slide show with transition effect, I would recommend using an Adobe Muse slideshow as Muse produces HTML5 and CSS3, and would eliminate all of the issues involved with flash.
    Simply insert the slideshow with thubnails, add in the images you have prepared, and then delete the 'next & prev' buttons and the thumbnails to leave you with a slideshow header only.
    Heres an example of a website I built using Adobe Muse and the animated header technique I was just referring to -
    View the source code while your at it if you like.
    Hope this has helped. In my opinion this is the best solution for your problem, but I would be glad to hear any other suggestions others might have =)

    Download Adobe Muse from

  4. Phreaddee

    Phreaddee Super Moderator Staff Member

    Sorry but that just sounded like the worst workflow i've ever encountered.
    And its not even your design!
    Why dont u just find a html template?
    Or better yet hire a developer...
  5. n1c0_ds

    n1c0_ds New Member

    That's not the most satisfying answer you will ever get, but HIRE A PROFESSIONAL.

    The design part of a website is easy. Turning ideas into HTML... not so much. You need to take into account various browsers' inconsistencies, page size, different screen resolutions etc.

    There's a reason people are paid to design, and I'm not saying this to grab your money (I'm packed with work). There's a reason I don't build houses.

    You might want to go with PSD2HTML, although they will only produce a single page, not a working website.

Share This Page