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

Снижены цены на конвертацию PSD в HTML5/CSS3! Купите безлимитную подписку за 199р.

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

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

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

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

Новости

Смотреть все
  • Безлимитные подписки на использование сервиса верстки

    Мы сделали систему оплаты за конвертации PSD в HTML намного гибче. Теперь, кроме покупок единичных конвертаций каждый может купить безлимитную подписку и пользоваться сервисом web верстки сайтов сколько угодно! Подробнее
  • Поддержка Adobe Photoshop CC

    Сервис автоматической верстки теперь полностью поддерживает верстку макетов, созданных в последней версии Adobe Photoshop Creative Cloud 14.2. Подробнее
  • Теперь сервис конвертирует слои в CSS 3 код!

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

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

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





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