Автоматическая адаптивная верстка на 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

Как создать идеальный дизайн: от идеи до верстки

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

Share

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

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

Share

История плоского дизайна и тенденции развития

Плоский дизайн ворвался в нашу жизнь достаточно резко и для многих неожиданно благодаря крупным компаниям, которые начали использовать этот подход несколько лет назад. Но, на самом деле, это направление существовало и раньше, и развивалось параллельно с реализмом и скевоморфизмом. И пришел он в веб-технологии из полиграфической продукции 20 века, именно там активно применялись ярко выраженные плоские элементы, упрощенная графика, доходящая до символизма. Но стоит разобраться по порядку, с чего все начиналось. Читать далее История плоского дизайна и тенденции развития

Share