Automatic grouping of HTML elements into div blocks

We implemented a new feature of Photoshop design to CSS/HTML layout conversion service. Now, we automatically¬†group HTML/CSS elements into div blocks. For example, let you have a ‘buttonsBar’ group which contains 6 layers for 3 buttons (3 background images and 3 texts). If you have not created a separate group for each button (with a background and a text) then we will do it for you! In created HTML markup there will be a div block ‘buttonsBar’ which will contain div blocks with 3 buttons (background and text). Please, notice, that we group only those layers that are part of one layer group in the Photoshop.

That does not mean you should neglect¬† layers grouping in a Photoshop design template. The better you group layers the better HTML /CSS markup you will get. That’s because we could not always correctly guess how it is better to group you layers. You should at least group the layers of header, footer, content, columns into Photoshop layer groups.

Besides of this a lot of different improvements were made. Markup quality became better. To check out our new features simply upload your design template file.

We plan to develop a lot of new features at PSD to HTML service soon. We have a lot of our own ideas. But if you want to share your ideas with us – we will appreciate it and try to implement them. Simply write them to:


Leave a Reply

Your email address will not be published. Required fields are marked *