Однако, при этом группировка может получиться несколько хуже, чем если делать ее вручную.

Чтобы подсказать сервису, какие элементы вы хотите получить из каких слоев, вы можете помечать слои или группы слоев специальными тегами. Как пример, покажем как в данном макете создать меню навигации в виде списка.

Чтобы создать список, достаточно пометить группу слоев тегом #ul.

Чтобы внутри списка был не просто текст, а ссылки, пометим слои тегом #link.

Сохраняем макет, идем на сайт сервиса Psd2HtmlConverter и загружаем PSD файл. Загрузка PSD файла и его конвертация может занять от нескольких секунд до нескольких минут в зависимости от размера файла и количества слоев в нем.

После конвертации, обязательно следут ознакомиться с предупреждениями, которые показывает сервис. К примеру, для данного макета есть предупреждение, что он использует нестандартные для WEB шрифты. Далее, смотрим скриншот получившейся верстки. На вид все как в исходном дизайне. Также проверяем созданный HTML код. Проблем с версткой нет, переходим к оплате.

Оплату можно совершить либо прямо в процессе конвертации, либо заранее из личного кабинета. Также из личного кабинета можно купить безлимитную подписку на один или несколько дней. Предоставляется несколько способов оплаты.

Мы воспользуемся уже купленной подпиской. Для этого авторизуемся в сервисе.

Скачиваем архив с версткой.Откроем верстку в браузере и посмотрим, что получилось. На вид все сконвертировалось правильно. Теперь посмотрим поближе на HTML код.

Видим разбиение на хедер, основной контент, футер.

Как видим, группа помеченная тегом #ul сверстана как список. Элементы списка - ссылки.

Теперь посмотрим, что будет, если мы добавим к параграфу больше текста. Блок с текстом расширился и отодвинул блоки под собой вниз.

Любой фотограф на свадьбу в Минске может сделать нечто подобное

Видео сделано с помощью технологии скринкаст. Если вам стало интересно, то переходим на сайт сервиса.