Что нужно знать, чтоб создать PSD-макет сайта для Bootstrap 3?

Question

[artlinnk]

Доборого времени суток.
Начал изучать создание сайтов с responsive, адаптивным дизайном.
Создать html-шаблон на гольном bootstrap, с его стилями, не составляет труда.
Но хочется большей уникальности.
Как отрисовать psd-макет, чтобы он был совместим с bootstrap 3?
На что обращать внимание? Может есть где список рекомендаций?
Вот примеры сайтов:
byblos.su
themeforest.net/item/route-responsive-multipurpose...
Я уверен, что сперва рисовался PSD макет. Или я ошибаюсь?

Answer 1

[Alexander Tartmin]

Бустрап придумали для быстрого прототипирования странц, когда на дизайн веремени/сил нету. Для создания psd (много с нашими дизайнерами ругались когда переходили на использование бутстрепа, так что поверте всем моим дальнейшим словам) нужно понимать саму концепцию этого фреймворка и знать как его использовать. Скачайте этот psd и просто перерисуйте "поверх" стандартных эллементов свои. Вторым делом Вам нужна будет сетка. Сетка в TB по умолчанию нормальная, но могут понадобится кастомные отступы или другая ширина сайта. Для этого мы на роботе используем такой плагин для фотошопа guideguide.me . С помощью этого плагина генерируем сетку, а потом с нашего ранее созданого psd лепим как конструктором lego, сайт, используя наши уже перерисованые эллементы. Когда Вы уже сделаете свой макет, советую отдать его любому верстальщику который ваще-нинтзя-по-бутстрепу и пусть он перепишет код (Исходный код бутстрепа написан на LESS, можете сами почитать о нем и кастомизировать фреймвор как Вам нужно).

Comments

[artlinnk]

к этому уже сам начал склонятся, ваши слова только подтвердили мои предположения! Спасибо!
И да, похоже самому придется поверстать свои макеты под бутстрап, чтобы узнать все подводные камни.

[Alexander Tartmin]

@artlinnk Почитайте о LESS. Сперва покажется мутью полной, но потом вникнетесь и перестанете вообще писать на CSS. Поставьте любую нормальную IDE (я пользуюсь webstorm) и в этой среде уже будете компилировать LESS в CSS.

Answer 2

[Максим Гречушников]

бутстрап лишь сетка. творите как хотите

Comments

[Alexander Tartmin]

Ну это Вы зря так. Grid960 это "лишь" сетка, а бустрап другое дело

[Максим Гречушников]

вы вырвали из контекста.

Answer 3

[Иван]

www.designshock.com/bootstrap-3-psd

Comments

[artlinnk]

мне не нужен psd-макет из стандартных ui-элементов. Я хочу свой уникальный дизайн, который с легкостью можно было отверстать под bootstrap

[Иван]

@artlinnk на какой вопрос вы хотите ответ? Что нужно знать, чтобы верстать бутстрап-совместимые макеты? Сетки достаточно.

[Alexander Tartmin]

@artlinnk Не правильно Вы намёк человека поняли. Читайте мой ответ =)