www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: Convert PSD to HTML

  1. #1
    Join Date
    Jun 2006
    Posts
    26

    Convert PSD to HTML

    Hi,
    I've got a PSD template, and i want to convert it to HTML. Is there a way to do that automatically? I don't really know how to use PhotoShop or ImageReady. Any suggestions?

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Don't do it in PSD.
    An image-based webpage makes for terrible usability, and will get you NO search engine hits (search engines have to scan text -- if all your text is in images, there's no text to scan).

    Instead, slice up your current PSD template, retaining only the graphic portions, and try integrating them into a real HTML layout.

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Mar 2006
    Posts
    7
    As KDLA said, you will want to only keep the image portion. Any text you have on there (except buttons or a header) will need to be convereted into text if you want search engines to be able to read your site. Also, if you use the full image, you will basically exclude anyone who does not wait for more than 2 seconds for your page to load or anyone who is on dial up .
    Want an easier way to develop e-commerce ready websites? Check out pageBuzz!

  4. #4
    Join Date
    Dec 2005
    Posts
    123
    Quote Originally Posted by KDLA
    Don't do it in PSD.
    An image-based webpage makes for terrible usability, and will get you NO search engine hits (search engines have to scan text -- if all your text is in images, there's no text to scan).
    not 100% true. If the OP uses CSS to import the images then there will no <img> tags on his site, only in a CSS file. To convert your psd into a HTML page , open up your PSD in Imageready and use the slice tool to cut out your layout. The click save optimised as html and that's that.

  5. #5
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Quote Originally Posted by Megatron
    not 100% true. If the OP uses CSS to import the images then there will no <img> tags on his site, only in a CSS file. To convert your psd into a HTML page , open up your PSD in Imageready and use the slice tool to cut out your layout. The click save optimised as html and that's that.

    That comment was exactly 100% true. It doesn't matter whether the images are in the page or in the background - as far as the search engines are concerned images in neither place exist. Unless you convert the actual content of the page to TEXT then your page contains nothing that the search engines will see.
    Stephen

  6. #6
    Join Date
    Jan 2003
    Location
    Egypt
    Posts
    185
    There is photoshop plugin called SiteGrinder. It is able to convert your psd Template into valid html file. It do everything automatically, even turning text layers into html text.

    You just have to rename your layers with specific suffix to inform the plugin about the type and nature of the element that supposed to be in the HTML file.

    However, it is expensive plugin Basic edition worth $129 while pro edition $349 and the easiest way to use it with no trial limitations is purchasing it. In other word, there is no keygen or cracks
    However,
    Regards();
    return Said Bakr
    My Blog - Quran

  7. #7
    Join Date
    Nov 2008
    Posts
    1
    Summary: You can use some of familiar tools:

    1. Image Ready can cut stuff automatically and generate nasty HTML with the tables and cells.

    2. Macromedia Fireworks works well with Dreamweaver. You can open a PSD in Fireworks, slice it and then export to Dreamweaver.

    3. You can use Photoshop. Just slice all the different parts and create layers in Dreamweaver or some other WYSIWYG web design tool.

    The problem is that you will end up with so much stuff that you need to clean up and such a hard table layout to work with. At the end of day you will spend more time fixing things, than you would spend slicing the PSD manually. There is also need to respect the W3C Web Standards. I have not yet seen a tool that does this job the right way.

  8. #8
    Join Date
    Mar 2009
    Location
    UK
    Posts
    40
    PhotoShop will do it CS3 has "Save/Export for web" allowing you to cut it up... or not. CS2 may have the ability too... look in the help menu.

    Cons of PhotoShop web page converted to html
    • There are still a surprising number of people out there on dial-up... an image heavy website (where the images are just the web page decoration rather than illustrating anything) is dire for bandwidth consumption. Who is the audiance for the website - big corporations with buckets of bandwidth or mum at home?
    • While search engines will use 'alt' attributes to understand that an image header has the words "Company Such-n-such Ltd" in it, I'm not sure how good any computer based conversion is at creating sensible alt attributes. Search bots are text based creatures, they don't look they only read words. Most conversions create code heavy pages which are more likely not to be W3 compliant in the end.
    • Creating an interface that is so image based doesn't allow for a truly beautiful fluid layout.. it ends up being yet another fixed width website... sad.

    Pros.... er.... hummm.. it can look pretty. Yeah...

    Sorry if that reads a bit harsh, not meant to criticise anyone - I'm perhaps over emphasing the statement "not the ideal way". I suppose it can feel like a friendly easy way to produce a web page that's a bit glam, if you feel comfy with PhotoShop., so hey, if it gets you started - go for it. Just be prepared to completely re-work it and do look at the code produced. Don't be scared to.
    Last edited by Kelon; 03-13-2009 at 04:54 PM.

  9. #9
    Join Date
    Mar 2009
    Location
    Tacoma, WA USA
    Posts
    1
    If you want to do this for free, 1st you need to slice the images. With a lot of practice, this can be done with Irfan View (free). Then you need to add HTML coding. There's plenty of free WYSIWYG editors, such as Online-HTML-Editor.

    Again, this will take patience & practice.

  10. #10
    Join Date
    May 2009
    Posts
    100
    Converting a PSD to template does not have to cause your site to incur bad search engine optimization or slow loading if done correctly, it's just learning how to do it correctly can be a pain due to the lack of tutorials to be found on the net.

    As when converting it properly you are likely to only use a portion of all of the images you use to make it in photshop.

    Here is how to do it properly without causing any dmage to user expereince or Search Engine effectiveness.

    http://designm.ag/resources/converting-psd-to-html/
    Last edited by Nerdygeek; 06-22-2009 at 06:30 PM.

  11. #11
    Join Date
    Mar 2010
    Posts
    1

    Convert PSD to HTML

    Currently, you won't find software that will replace the job of experienced PSD to HTML developers. We offer affordable PSD to WordPress conversion services and have a very efficient team that can help you out. We're U.S. based and offer money-back guarantee.

    PSD Cut-Ups
    http://www.psdcutups.com

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by psdcutups View Post
    We offer affordable PSD to WordPress conversion services and have a very efficient team that can help you out
    ah, c'mon... It's like "we guarantee lead to gold transmutation". Of course it is possible within nuclear methods. Except that it will cost you 10000 times than the same amount of genuine gold.

    There is no way to automatize the HTML/CSS/JavaScript from PSD cutting/developing/coding job. Forget about that.

  13. #13
    Join Date
    Apr 2010
    Posts
    1
    to [QUOTE=said_fox;929840]:
    Hey MAN! THANK YOU!!!!! you just changed my whole life!!!!!!! you cant imagine!!!!!! THANK YOU!!!! I LOVE YOU!!!!!!!!!!!!!!!!!!!

  14. #14
    Join Date
    Apr 2010
    Posts
    5
    Hi,
    There is an option to use Image Ready to make a HTML file for you using the slice tool , cut the Photoshop file in pieces with it and then save for web devices.save file in html and images format you get html file for your template.

  15. #15
    Join Date
    Dec 2010
    Posts
    10
    if you want to try out, I am working on this as a side project, jadii.com. It takes your pdf and create html from it. Will never be as good as a real developer, but for a quick and easy solution, might work.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles