• Play video
    • Создайте дизайн сайта в Photoshop, Gimp или другом редакторе, поддерживающем PSD формат. Загрузите PSD файл.
    • За несколько минут сервис автоматически cгенерирует HTML5/CSS3 верстку сайта.
    • Просмотрите скриншот получившейся страницы, а также проверьте сгенерированный HTML и CSS код. Если вас все устраивает, оплатите конвертацию (если вы еще не купили подписку) и скачайте HTML5/CSS3 верстку.
    • В первую очередь сервис ориентирован на создание сайтов из несложных дизайн-макетов. Он помогает значительно сократить время и стоимость их создания.
    • При создании верстки сложных страниц сервис быстро сделает нарезку изображений из слоев PSD файла, извлечет тексты с CSS3 стилями, сгенерирует CSS3 стили для слоев с эффектами и сверстает каркас сайта, готовый к дальнейшей доработке.
    • Сервис помогает добиться высокой скорости создания сайтов для вас или ваших заказчиков.
    • 199 рублей за день безлимитной подписки.
      Оплата после просмотра скриншота верстки сайта и сгенерированного HTML/CSS кода.
    • 340.00 рублей за месяц безлимитной подписки.
      1990.00 рублей за год безлимитной подписки.
      Покупайте подписку из личного кабинета.
    • Получите HTML верстку сайта бесплатно.

Загрузите дизайн в PSD формате


upload psd
->

Через пару минут вы получите HTML/CSS код. Проверьте его и оплатите конвертацию.


paypal, webmoney
->

Скачайте HTML5 и CSS3 код


HTML5
CSS3

Пошаговая инструкция для создания HTML5/CSS3 верстки сайта из PSD файла

Для автоматической верстки сайта из дизайна Photoshop вам не потребуется практически никаких усилий. Сервис сделает за вас почти все. Мы стремимся к полной автоматизации процесса CSS верстки, но полностью автоматизировать такой творческий процесс, как HTML верстка сайта, невозможно. Вы можете значительно улучшить автоматически создаваемую верстку сайта, если будете следовать нескольким простым правилам.

  1.   Не препятствуйте генерации CSS3 стилей для слоев. При создании макета используйте 'Shape', 'Layer mask' и 'Clipping Mask', эффекты слоев. При этом используйте для слоев только те эффекты, которые возможно преобразовать в CSS3 (все, кроме: ‘Satin’, ‘Bevel & Emboss’). Ни в коем случае не растеризовывайте слои!
  2. Помечайте слои тегами в соответствии с документацией сервиса автоверстки. Если из слоя или группы слоев в Photoshop требуется получить в HTML верстке сайта такие элементы, как ссылка, форма ввода, таблица, список, и т.п., то следует пометить слой или группу соответствующим тегом. Все поддерживаемые теги смотрите на странице документации.
  3. Группируйте слои логически. Некоторые начинающие дизайнеры не следят за структурой слоев в Photoshop. Профессиональные дизайнеры всегда объединяют слои в логические группы и соблюдают строгую структуру в PSD макете. Настоятельно рекомендуем объединять все слои в логические группы (такие как заголовок, футер, основной контент, колонки и т.п.).  Для этого используйте группы слоев (Layer Group) в Photoshop. Это поможет сервису автоматически создать ожидаемую структуру документа.
  4. Одно логическое изображение - один слой / Smart Object / группа с тегом #merge. Из каждого видимого слоя в Photoshop в создаваемой HTML вёрстке сайта получается отдельный HTML/CSS элемент. Если в макете для создания одного изображения (такого как логотип/бэкграунд/т.п.) используется несколько слоев - объедините слои в группу и пометьте группу тегом #merge. Либо создайте из этих слоев один Smart Object. В противном случае, в верстке сайта для представления одного логического изображения будет использовано несколько изображений, что ухудшит качество верстки.
И конечно, помогайте разработчикам улучшить сервис автоматической конвертации PSD в CSS верстку. Если вы загрузили PSD файл, но получили на ваш взгляд не то, что должны были получить, пожалуйста, сообщайте нам об этом на почту support@psd2htmlconverter.com.
 

Новости


Теперь сервис конвертирует слои в CSS 3 код!

Теперь сервис конвертирует слои в CSS 3 код! С 12 по 18 февраля мы ввели БЕСПЛАТНЫЙ тестовый режим, чтобы все могли оценить новые возможности сервиса.

Подробнее

Цены на конвертацию PSD в HTML5/CSS3 снижены

Мы снизили цены на конвертацию PSD в HTML5/CSS3 код. Подробности читайте в нашем блоге. Подробнее

Безлимитные подписки на верстку сайтов на месяц и год

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

Праздничные скидки - 30% до 25.01.2019

С наступающими праздниками! Успейте купить подписку со скидкой 30% до 25.01.2019. Подробнее
www.megastock.ru Здесь находится аттестат нашего WM идентификатора 408053960204 Порядок оплаты с помощью системы WebMoney
Авторизация





Забыли пароль?