itf — 2011-11-04T12:04:17-04:00 — #1
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!
kohoutek — 2011-11-04T12:17:21-04:00 — #2
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).
retronetro — 2011-11-04T13:47:04-04:00 — #3
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. :eek:
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:
- Hire someone to do it for you.
- 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.
itf — 2011-11-04T14:01:11-04:00 — #4
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!
retronetro — 2011-11-04T14:07:54-04:00 — #5
Post the .psd or a .jpeg of it.
sdt76 — 2011-11-04T16:23:59-04:00 — #6
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.
system — 2011-11-09T01:19:00-05:00 — #7
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...
fredrikrob — 2011-11-11T14:19:13-05:00 — #8
popartns — 2011-11-12T06:34:28-05:00 — #9
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.
allanlud — 2012-09-20T11:39:45-04:00 — #10
Original post was from almost a year ago, wonder if he is still stuck or if this issue has been resolved?
technobear — 2012-09-20T11:52:44-04:00 — #11
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. :)