Question

I use Firebug to see the HTML source of the Google Translate (http://translate.google.com.vn/) whether is simple (in content).

But it has a very complex layout (so many layout divs). I guess that these pages are designed layout based on a number of softwares support.

I know photoshop, but in general, it’s very difficult to create layout in photoshop, I want to find an easier tool.

Answer 1

I think you should use photoshop Sitegrinder 3.5

Site Grinder 3.5 is a good tool for generating Html and CSS of any .psd file. But in my observation it is good for small and static site, it is not good for dynamic site. No doubt it is helpful for develop a web site but it require skilled person who work in Adobe Photoshop with site grinder tool. I mean it is useful for designer not for developer. Site Grinder 3.5 is support these following features:

1.  Rounded corner
2.  Shadow
3.  Borders
4.  Cross-Paging  
5.  Menus and Sub-Menus
6.  Hide and show
7.  One design for many pages.
8.  More Powerful Hover And Click Behaviors
9.  Smooth Scrolling to Targeted Page Areas
10. Create Powerful Animated Accordions Using Only Hints
11. Attach Elements to The Browser Window(using –fixed hint)

Note: But some of these features like rounded-corner, shadow etc. are not run in IE7 and IE8 browser. It means site grinder has browser dependency.

There are some limitation of Site Grinder 3.5:

1. Gradient color is not allowed.
2. Generate more than one css for each page.
3. Layer name with hint must be correct.
4. It is still buggy. Some persons, who already used it says it is generate buggy code. But I was not found any bug while using it.

Keep in mind these following lines while designing web pages using site grinder 3.5:

1. There are two phase for designing:

   1. Create a draft PSD and save it. Then Build Site Grinder 3.5
   2. After build PSD file use Design Manager Tool for complete design and effects then save it form build window.

2. Background colors, shadow, rounded corner can be set in the design manager after the PSD is built using the style editing tools.

3. Hints are correct.