Convert PSD to HTML
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?
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.
* 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)
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 .
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.
Originally Posted by KDLA
Originally Posted by Megatron
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.
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
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.
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.
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.
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.
Last edited by Nerdygeek; 06-22-2009 at 06:30 PM.
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.
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.
Originally Posted by psdcutups
Hey MAN! THANK YOU!!!!! you just changed my whole life!!!!!!! you cant imagine!!!!!! THANK YOU!!!! I LOVE YOU!!!!!!!!!!!!!!!!!!!
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.
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.
Users Browsing this Thread
There are currently 2 users browsing this thread. (0 members and 2 guests)