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

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


upload psd
->

Просмотрите HTML код и скриншот верстки. Оплатите конвертацию.


paypal, webmoney
->

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


HTML5 CSS3


Загрузить PSD файл

Пошаговая инструкция для создания 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.
 
Загрузить PSD

Новости

Смотреть все
  • Хотите создать HTML/CSS верстку сайта бесплатно?

    Для получения бесплатной верстки вам потребуется разместить ссылку на наш сайт на своем web ресурсе, в блоге, в социальной сети (вконтакте, фейсбуке, твиттере, ...), на любимом форуме и т.п. Подробнее
  • Теперь сервис конвертирует слои в CSS 3 код!

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

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

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

    Мы пересмотрели варианты безлимитных подписок, которые можно купить на сервисе автоматической верстки сайтов. Теперь вы можете
    купить подписку на день, месяц или год. Подробнее
Обратная Связь
www.megastock.ru Здесь находится аттестат нашего WM идентификатора 408053960204 Порядок оплаты с помощью системы WebMoney
Facebook Twitter Vkontakte
Авторизация





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