Автоматическая адаптивная верстка на Bootstrap

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

Поддерживается так называемый desktop-first подход, когда за основу берется макет, разработанный для большого экрана. При уменьшении экрана происходит постепенная  адаптация под меньший размер экрана.

Данный вид верстки более чувствителен к подготовке макета. А именно, стоит обратить внимание на следующее:

  • Ширина контента должна быть равна одному из: 720, 750, 940, 970, 1140, 1170 пикселей (соответственно, ширина контейнера будет 750, 780, 970, 1000, 1170, 1200 пикселей). Под контентом в данном случае подразумеваются все слои кроме тех, что имеют ширину всего макета (т.е. кроме фоновых изображений). Ширина самого макета может быть любой.
  • Слои должны быть расположены в соответствии с сеткой. Чем точнее расположение, тем лучше.
  • Желательно, чтобы слои были логически сгруппированы в ряды и колонки.

Мы продолжаем работу над улучшением Bootstrap верстки. Если у вас есть идеи, пожелания или замечания относительно того, как сейчас генерируется Bootstrap верстка — присылайте их нам. Это поможет нам скорее внедрить наиболее востребованный вами функционал.

Примеры

Ниже вы найдете несколько примеров psd макетов и автоматически сгенерированной адаптивной Bootstrap верстки.

  1. miami_home.psd
    miami_home code.zip
    miami_home online demo
  2. notify_psd_theme.psd
    notify_psd_theme code.zip
    notify_psd_theme online demo

Ресурсы

При разработке дизайн макета удобно подключить в Photoshop сетку для соответствующего размера экрана. Если вы еще не пользуетесь такой сеткой, то можете скачать Guide Layout для Bootstrap для различных размеров экранов все сразу или по отдельности по следующим ссылкам:

Для их использования, выберите пункт меню View -> ‘New Guide Layout…’. В поле Preset выберите ‘Load Preset…’:

После подключения сетки Photoshop поможет с точным позиционированием элементов вашего макета.

Share

Сохранение слоя Photoshop в формате GIF

В сервисе автоматической верстки сайтов добавлена возможность извлечения изображений в формате GIF из слоев макета Photoshop. Читать далее Сохранение слоя Photoshop в формате GIF

Share

Встраивание ‘linked smart objects’ больше не требуется

Новые версии Photoshop добавили возможность использования так называемых «linked smart objects»: http://blogs.adobe.com/richardcurtis/2014/01/16/photoshop-cc-14-2-update-linked-smart-objects/. В двух словах, теперь в макет Photoshop можно добавлять слой smart object, который будет ссылаться на внешний файл. При изменении этого файла слой макета будет автоматически обновлен. Использование таких объектов очень удобно с нескольких точек зрения. Читать далее Встраивание ‘linked smart objects’ больше не требуется

Share

Как сделать нарезку изображений из PSD макета

Сервис автоматической верстки сайтов дополнен новым (бесплатным!) сервисом по нарезке графики из макета Photoshop. В связи с этим, расскажем, что стоит учитывать при нарезке картинок из дизайн макета Photoshop и почему эта задача не такая тривиальная, как может показаться на первый взгляд. Читать далее Как сделать нарезку изображений из PSD макета

Share

Использование нескольких эффектов одного типа на слоях и группах Photoshop

Новые версии Photoshop позволяют установить на один слой сразу несколько эффектов одного типа. Это доступно для следующих эффектов: Читать далее Использование нескольких эффектов одного типа на слоях и группах Photoshop

Share

Установка эффектов на группах слоев в Photoshop

Все чаще дизайнеры при создании макета в Photoshop используют такую технику, как установка эффектов на группу слоев. Это бывает очень удобно для таких эффектов, как Color Overlay или DropShadow, так как Читать далее Установка эффектов на группах слоев в Photoshop

Share

Высокопроизводительный HTML код: идеи и примеры реализации

Сегодня оптимизация страниц сайтов снова стала очень актуальна. И если на заре Интернета причиной для экономии трафика было медленное соединение обычного Интернета, то теперь «виновниками» стали многочисленные мобильные устройства, через которые все большее число пользователей ходят в Интернет. Читать далее Высокопроизводительный HTML код: идеи и примеры реализации

Share

Указание уровня качества при извлечении PNG и JPEG изображений из Photoshop

Мы реализовали возможность изменения уровня сжатия изображений при их автоматическом извлечении из дизайн макета Photoshop. Для регулирования качества изображений мы добавили две настройки. Читать далее Указание уровня качества при извлечении PNG и JPEG изображений из Photoshop

Share

Быстрый адаптивный дизайн: повышаем производительность

Shoot me now…responsive design has seemingly become confused with an opportunity to reduce performance rather than improve it. (Пристрелите меня… похоже, что адаптивный дизайн воспринимается в качестве возможности снижения производительности, а не увеличения)

Stephanie Rieger

Адаптивный дизайн в современном мире IT – решение очень популярное. После того, как его начали применять такие гиганты, как Disney или Microsoft, интерес к адаптивной верстке стали проявлять самые разные компании. А решение Google повысить позиции в мобильной выдаче для адаптивных сайтов сделало этот вариант дизайна еще более востребованным. Читать далее Быстрый адаптивный дизайн: повышаем производительность

Share

Что такое кроссбраузерная верстка сайтов и для чего она необходима?

Интернет стал неотъемлемой частью жизни современного человека, превратившись в удобный и полезный инструмент не только для отдыха и развлечения, но и работы, учебы и самообразования. При этом отображаемая на web-страничках информация должна выглядеть красиво и четко, поскольку в противном случае сайт потеряет свою привлекательность для посетителей. Однако каждый из браузеров имеет свои особенности, а поэтому далеко не все web-страницы могут отображаться одинаково. Именно поэтому важно обеспечить кроссбраузерность — корректное отображение web-странички во всех браузерах. Читать далее Что такое кроссбраузерная верстка сайтов и для чего она необходима?

Share