PSD to HTML

[Meffy]

You can always give it a try -- see what the results look like for a comparatively simple project. That could give you a feel for what does and doesn't work well. In my experience very little comes over in good enough shape to be worth keeping, so I just avoid such tools. You might find some value in them though. Nothing works like experimentation.

[<b>]

Originally Posted by aaronjunited

Can you confirm if it's possible to design a site in photoshop or fireworks, slice it all and write...

I agree with what Meffy said.

There's obviously a place for Photoshop (or Fireworks) in web design, just like there's a place for a chainsaw in cutting lumber to build a house. But as Meffy alluded, it's a matter of using the right tool for the job.

When I design websites, I'll often prototype the main pages in Photoshop since it's fast and enables me to rapidly make and see the results of tweaks and changes. An added benefit is that when I'm satisified, I already have most of the bitmapped images (backgrounds, icons, etc.) ready to go. I'll position all the Photoshop elements on different layers — especially those I intend to use as actual graphics in the website. I don't, however, simply slice chunks out of the flattened image for use on the site. Instead, I'll carefully take only those graphics from the mock-up that can't be duplicated with HTML/CSS, then trim, reduce and compress them to their most minimal and efficient form. Then I'll write the HTML/CSS by hand and incorporate those minimal bitmapped graphics as needed.

I always try to build sites that are as minimal and efficient as possible. If there's a way to remove a few bytes, I'll do it. When I'm done, one of my goals is to have as little flab as possible. When you use a term like "slice" up a Photoshop or Fireworks file, I instantly imagine big rectangular chunks of the layout built from chopped up bitmap images, then glued back together with HTML to produce the final piece. There's just no way to build a svelte and efficient site when doing it that way. The code might validate, but if the pages unnecessarily weigh in at 500 hundred kilobytes instead of 50, it's not a well-built site.

[Meffy]

Yes! A hundred times this.

I recently did a conversion on the documentation for a graphics library for programmers. The original HTML had been... um, non-compliant with standards. I broke the half-megabyte page (that's just the code alone) into over a hundred pages, cleaned up the code, reformatted it as best I could, with decent indentation and so forth, and made it validate 100% both XHTML and CSS. That took care of the first order of cruft.

However, it's still not as efficient as it could be. There are redundancies, places where two consecutive spans with the same class could be combined into one, that kind of thing. Had I time I'd go back over it and take care of those second-order uglinesses.

I want to stress that the original author, the same programmer who ported this library from C++ to Pascal, did a great job of writing the original document -- from a programmer's point of view. It tells how to use the various functions and such. The HTML code his authoring tool generated didn't do the work justice IMO. I think I've done better, though not well enough to call it perfect.

That said, it's got to be "perfect enough" for now. I have to USE the library I've been re-documenting to write new programs. :-} ("Gotta program! Will write docs later" is why a lot of programming stuff never does get properly documented. I can't escape it either.)

[aaronjunited]

Marvelous, you two have really helped me a lot in understand psd to html.

I can't thank you enough for the advice given and the insight into what way it can be done, should be done and what is professional.

Thanks.

[<b>]

Originally Posted by Meffy

I recently did a conversion on the documentation for a graphics library for programmers. The original HTML had been... um, non-compliant with standards. I broke the half-megabyte page (that's just the code alone) into...

That reminds me of a job I was hired to do about ten years ago. The client's website totaled about 20,000 static pages (of mostly useless information). There was no rhyme or reason to any of it. Every page looked different and the whole site was a conglomeration of WordPerfect and MS Excel documents that had been auto-saved to HTML, then altered and re-altered innumerable times with MS Frontpage and Adobe PageMill.

I was hired to design a new site in a content management system, then take all the information from these 20,000 pages, sort through it, clean it up, make logical sense of it all then move it into the CMS database.

Aggghhhhh!

It was 20,000 static pages of this kind of auto-generated total nonsense:

<v:stroke color2="#f60 [7]">
     <o:left v:ext="view" color="black [0]" color2="#f60 [7]" weight="1pt"
joinstyle="miter"/>
     <o:top v:ext="view" color="black [0]" color2="#f60 [7]" weight="1pt"
joinstyle="miter"/>
     <o:right v:ext="view" color="black [0]" color2="#f60 [7]" weight="1pt"
joinstyle="miter"/>
     <o:bottom v:ext="view" color="black [0]" color2="#f60 [7]" weight="1pt"
joinstyle="miter"/>
     <o:column v:ext="view" color="black [0]" color2="#f60 [7]"/>
     <br><BR><BR>
     <i><i><i><i><i><i><strong><strong><i><b><i><i><i><i><i><i>
<i><i><i><i><i><I><I><I><I><I><I>

     <FONT=arial><SIZE=2>
           Thanks<BIG><strong><BIG>!!!!!!</BIG></strong></BIG>
     </SIZE></FONT>

     </I></I></I></I></I></i></i></i></i></i></i></i></i></i></i></i></i>
     </b></i></strong></strong></i></i></i></i></i></i><br>
     <BR><br>

</v:stroke>

[Meffy]

*goes crosseyed just at the thought of dealing with such... schtuff*

<i><i><i><i>
<canta y no llores>
<porque cantando se alegran>
<cielito lindo los corazones>

[darkwolf29a]

<b>...that would drive me nuts!!!! Cross-eyed?? I'd have gone postal, I'm sure. LOL

[Danish01]

Hey guys you have too much knowledge thanks for sharing you experience and knowledge with us....

[annahussy]

That's great information that ever I get as above. I used the photo shop as well. I didn't faced any problems to make the designs according to my choice as well. It will have very creative tools that you can use through different ways.