Bootstrap сетка, PSD



https://i.ytimg.com/vi/TZcjJSJcalU/hqdefault.jpg



Создание сайта от А до Я (комплексный курс): https://goo.gl/ankxq9
Создание интернет-магазина: https://goo.gl/7mDqYD
Фриланс для начинающих: https://goo.gl/xOPRQ0

При создании дизайна сайтов в Adobe Photoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением – готовой сеткой Bootstrap в формате PSD. Не смотря на то, что дефолтные размеры Bootstrap сетки несколько стандартизируют дизайн, данный вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максимально быстро выполнять HTML верстку созданного макета, что неминуемо приводит к ускорению работы над проектом в условиях разработки сайтов на потоке или создания шаблонов.

Страница урока (+сетка): https://webdesign-master.ru/blog/tools/2016-11-26-bootstrap-psd.html

Группа Вконтакте: https://vk.com/agragregra
Twitter: https://twitter.com/agragregra

Original source


31 responses to “Bootstrap сетка, PSD”

  1. А как наложить эту сетку на уже готовый psd макет, который создан без сетки, чтобы проверить его на правильность?

  2. Спасибо за видео! Есть вопрос: вот я скачал файл, открыл его в фотошопе, и вижу не сетку а просто белый прямоугольник 🙂 что делаю не так?

  3. Все видео у вас крутяцкие )) Но у меня вопрос – на что опираться, если макет сделан не ровно по колонкам, как привычно, а все блоки нестандартные и ориентированы по центру, например (landing page) ?
    В итоге возможности bootstrap использовать не стала и адаптивила через медиа-запросы, как следовало поступить?

  4. Я пересмотрел много каналов подобного направления, но вот, что я скажу, вы лучший. Честно! все ясно, четко , по делу, все ссылки, файлы все есть! Спасибо большое за то, что делитесь опытом и находите время для создания видео.

  5. Вопрос от новичка
    Куда и как ее нужно устанавливать(в версии 2016 года) и как потом ее найти в самой программе?

  6. приветствую, я не особо понял первое правило, где Вы говорили о том, что крайние колонки служат для отступов на мониторах с низким разрешением, можете, пожалуйста, подробнее комментарием объяснить?

  7. Всем привет. Подскажите, какой ширины документ нужно создавать в Фотошопе для адаптивных сайтов(или макет рисуется только в одном формате а адаптивным делается при вёрстке?), какие сетки(сколько колонок) лучше использовать и какие расстояния между колонок? Или макет рисуется только в одном формате а адаптивным делается при вёрстке? Интересуюсь с целью удобной вёрстки в дальнейшем

  8. вопрос из практики. Попадаются макеты разной ширины, без сетки. как практически определить количество колонок, гаттеры?

  9. Ураа новое видео, очень хочу увидеть создание интернет магазина с версткой именно от вас, пожалуйста снимите такое видео. Ребята ставьте лайки, в топ, пусть увидит)

  10. подскажите, это все применимо к фиксированному container, а как размечать сетку и делать дизайн для container fluid? то есть сайт на всю ширину? там колонки получается резиновые, т.е. ширина для разных экранов разная. может есть у вас видео, я не заметил

  11. Здравствуйте! Создайте пожалуйста серию уроков по работе в "photoshop" с нуля!!! Очень актуальная тема! И очень нужная! Вы ведь доступно объясняете!

  12. а Вы не собираетесь делать уроки по Photoshop ? к примеру как нарезать картинки да и другие примочки верстальщика. было бы замечательно иметь полный набор в одном месте.

  13. Алексей, вопрос. Вы часто упоминаете в своих видео о западных англо-язычных источниках информации по фронт-энду. Можете сделать видео-обзор и подборку таковых, наиболее полезных и интересных с вашей точки зрения? Спасибо, было бы полезно.

  14. Не давно нашёл ваш канал , очень доволен и надеюсь посмотрев все видео научиться данному ремеслу , спасибо большое что даёте шанс бедным студентам хоть как то зарабатывать деньги)

Leave a Reply