Bootstrap сетка, PSD

1121 ratings | 40382 views


Bootstrap сетка, PSD

Полезно? Жми - Страница урока (+сетка): При создании дизайна сайтов в Adobe Photoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением - готовой сеткой Bootstrap в формате PSD. Не смотя на то, что дефолтные размеры Bootstrap сетки несколько стандартизируют дизайн, данный вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максимально быстро выполнять HTML верстку созданного макета, что неминуемо приводит к ускорению работы над проектом в условиях разработки сайтов на потоке или создания шаблонов. Создание интернет-магазина от А до Я - Я - фрилансер! - Создание сайта-портфолио на WordPress - Группа Вконтакте: Реклама на канале:

Comments to the video: Bootstrap сетка, PSD

Алёна Елей 3 months ago
Все видео у вас крутяцкие )) Но у меня проблема - на что опираться, если макет изготовлен не ровно по колонкам, будто обычно, а все блоки неординарные и нацелены по центру, к примеру (landing page) ? В итоге способности bootstrap использовать не стала и адаптивила чрез медиа-требования, будто следовало устроиться?
WebDesign Master 3 months ago
Как вариант.
Evgeny K 3 months ago
1:50 что за шрифт подскажите(кириллица)?
Wi J 4 months ago
Не могу скачать. Просто не прогружает Мб поэтому что на мак ?
Irina M 5 months ago
Простите если проблема глуповатый, однако будто сделать сетку под 1170 на 24 колонки?
Анатолий Внук-Карпов 5 months ago
Неа)) Вам тогда слева под категории необходимо отрисовывать 4 колонки, а продукты мастерить 4шт. в 2 колонках любая, итого 12. Их вечно 12 будет)
Irina M 5 months ago
Ага ужу сообразила что нечего, вот бывает этак задашь проблема, а позже приходит ответ)) Мне нужно было сделать страничку веб магазина под 1170 px, чтоб слева была колонка с категориями, а справа 4 колонки с продуктами. Так вот у меня 12 колонок, потому выходит лишь 3 колонки с продуктами. Но я сообразила что этак и надлежит быть? на то он и адатиптивный, при увелечении монитора будет добавляться еще колонка этак?
WebDesign Master 5 months ago
Зачем? )))
Антон Литвиненко 6 months ago
Подскажите, будто прикрутить к готовому макету сетку из архива?
Paco Official 6 months ago
у меня пукан пылает когда видишь будто дизайнеры криво делают макеты не по сетке которую сами же избрали. таковой абсурд ппц, хотя я и верстальщиков криворуких дофига лицезрел, типа button изготовлен в форме тегом <img> )) и таких оч немало
Paco Official 6 months ago
хз отчего однако чет при выделении текста лагает фотошоп, хотя пк норм, текста не немало (пару предложений), шрифтов тоже
Paco Official 6 months ago
а чем ты монтируешь любопытно, стрелочки все эти рисуешь, в камтазии шоль? плюс до этого слайды вроде были, любопытно)
Olga F 6 months ago
Очень грамотная выговор, все понятно, благодарю огромное!
OrangeClub 6 months ago
Можно ли использовать bootstrap сетку в Corel Draw ?
Антон Литвиненко 8 months ago
повсевременно в макетах встречаю, что ширина контента 1170пх, без отступов по краям. что мастерить в таковой ситуации?
Audar G 8 months ago
бл красава сколько я находил такового вот урока чтоб все чик чирик понятно было
Dampear Alucardovich 9 months ago
Я пересмотрел немало каналов подобного направления, однако вот, что я скажу, вы наилучший. Честно! все ясно, верно , по делу, все ссылки, файлы все кушать! Спасибо огромное за то, что делитесь опытом и находите пора для сотворения видео.
Andriy Samosval 10 months ago
Скоро 70к подписчиков. ГЦ
Archie Man 10 months ago
Вопрос от новенького Куда и будто ее необходимо устанавливать(в версии 2016 года) и будто позже ее отыскать в самой программке?
Алексей Харитонов 11 months ago
приветствую, я не особо сообразил 1-ое правило, где Вы гласили о том, что последние колонки служат для отступов на мониторах с низким разрешением, сможете, изволь, подробнее комментарием разъяснить?
Игорь Назаров 11 months ago
Всем привет. Подскажите, какой ширины документ необходимо основывать в Фотошопе для адаптивных веб-сайтов(либо макет рисуется лишь в одном формате а адаптивным делается при вёрстке?), какие сетки(сколько колонок) лучше использовать и какие расстояния меж колонок? Или макет рисуется лишь в одном формате а адаптивным делается при вёрстке? Интересуюсь с целью комфортной вёрстки в предстоящем
Tim Miro 11 months ago
проблема из практики. Попадаются макеты разной ширины, без сетки. будто фактически найти число колонок, гаттеры?
Даниял Аманкелдин 11 months ago
Ураа новое видео, весьма желаю узреть творение веб магазина с версткой конкретно от вас, изволь снимите такое видео. Ребята ставьте лайки, в топ, пускай увидит)
Сергей 11 months ago
подскажите, это все применимо к фиксированному container, а будто размечать сетку и мастерить дизайн для container fluid? то кушать веб-сайт на всю ширину? там колонки выходит резиновые, т.е. ширина для различных экранов различная. может кушать у вас видео, я не увидел
WebDesign Master 11 months ago
Работаете уже с медиазапросами в таком случае.
Сергей 11 months ago
т.е. положим 1400 холст, 1400-15*24=1040/12=87 пикселей одна колонка, и мастерить сетку из этих колонок по 87 пикселей? ну-ка придет мне таковой макет, а у меня экран 1366, у меня будут уже другие размеры колонок при верстке, а я буду хватать размеры то с макета 1400. будто быть?
WebDesign Master 11 months ago
Конечно, попросту делаете пропорциональные блоки по ширине.
Олеся Беликова 11 months ago
Здравствуйте! Создайте изволь серию уроков по работе в photoshop с нуля!!! Очень животрепещущая тема! И весьма подходящая! Вы ведь доступно объясняете!
WebDesign Master 11 months ago
Монтаж видео вне темы канала.
Олеся Беликова 11 months ago
+WebDesign Master, еще одна весьма животрепещущая тема, это установка видео! Думаю вы со своими познаниями сможете раскрутить эту тему, до осознания ее- даже школьниками!!!
Олеся Беликова 11 months ago
+WebDesign Master Да, весьма необходимы. Часто встает проблема, что то сделать в этой программке! однако аж жутко ее обнаруживать)))
WebDesign Master 11 months ago
Реально необходимы уроки для самых новичков?
Faraday 11 months ago
Хотелось бы услышать Ваше мировоззрение о программке Adobe Muse.
Сергей Михеев 11 months ago
а Вы не собираетесь мастерить уроки по Photoshop ? к примеру будто порезать рисунки конечно и другие примочки верстальщика. было бы замечательно владеть целый комплект в одном месте.
Maxim Sadchikov 11 months ago
Алексей, проблема. Вы нередко упоминаете в собственных видео о западных англо-язычных источниках инфы по фронт-энду. Можете сделать видео-обозрение и выборку таких, более нужных и увлекательных с вашей точки зрения? Спасибо, было бы здорово.
Tadjik Zel 11 months ago
Не издавна нашёл ваш канал , весьма доволен и надеюсь посмотрев все видео выучиться данному ремеслу , благодарю огромное что даёте шанс бедным студентам хоть будто то получать средства)
Football HD 11 months ago
Пожалуйста, лишь не кидайте то, что вы делаете для нас!!! Аналогов вас нету в РУНЕТЕ!!!
Сергей Сергеевич 11 months ago
ПиЭсДи. втф ?!?
Сергей Сергеевич 11 months ago
Ну обыкновенно молвят ПэЭсДэ, на сколько я знаю и слышал от многих конкретно этак. Может у вас и правильное выговор, однако мы то люд обычный )))
WebDesign Master 11 months ago
К огорчению, конечно. Данной аббревиатуре предначертано владеть настолько потешное выговор.
qwertyPechenkO 11 months ago
Как Вы произнесли колонки бывают разной ширины. Если я к примеру желаю сделать 4 карточки продукта, то и они будут разной ширины. Что мастерить в таком случае? Как на это отреагирует верстальщик?
Сергей Сергеевич 11 months ago
у тебя кушать 12 колонок! Нужно 4 карточки продукта - 1 карточка, в данной сетке будет занимать 3 колонки, при условии, если дудки сайдбара. (при правильной сетке выходит что одна колонка, больше на 1px, чем последующая - это нормально! Ибо 0,5px вылазиют при делении 1140 контента на 12 колонок с 30px межколоночным отступом )Если у тебя кушать сайдбар, то сайдбар тяни на 3 колонки (меньше - не достаточно, больше очень немало, однако здесь от контента необходимо исходить, можно и на 4 потянуть сайдбар - однако снова-же, в большинстве случаев, 3 с головой хватает! Но, тогда у тебя возникают лимитирующие грабли, (деления четное, на нечетное кол-во) и оставшиеся 9 разбивай на свои 4 карточки, однако в таком варианте обыкновенно употребляют не раздельные карточки (меж которыми будет 30px отступ), а разделение ограничивается полосой в 1px - меж карточками, если это нужно и вероятен вариант, прибавления стрелок по бокам - однако, это уже колхоз, однако бывают клиенты, которым пофиг будто это смотрится, им нада впихнуть! Если ты хочешь, чтобы 1 карточка была больше других, то, логика ординарна, у тебя кушать 12 колонок, разделяй на четное кол-во данные колонки, или оставшееся не четное кол-во, разделяй на необходимое кол-во и дели полосой в 1px, или вообщем не применяй разделители.
Соколов Стас 11 months ago
суперский видос. буду скидывать дизайнерам, а то запарили. делают дичь. или сетки дудки и всюду отступы различные, или с сетью, однако на неё кладут болт, суют контент в гаттеры и остальные места, куда не нужно сувать. благодарю за ваши уроки, благодаря ним я научился верстать и меня взяли верстальщиком в местную маленькую фирму. а мне итого 18, и я учусь на 4 курсе техникума. ещё один большущее благодарю, за ваш труд.
TrueGelius 11 months ago
Любой ли макет можно сверстать по стандартным сеткам? Или необходимо кастомизировать их любой один, если попадаются макеты не по сеткам изготовленные? Много таких встречал, то оступы маленькие, то еще что-то, тяжело расшибить на колонки.
WebDesign Master 11 months ago
В таком случае лучше пользоваться кастомизатором:
Eltac Emiraslanov 11 months ago
neat grid forever :) bourbon, neat, refills <3
FunnyCat 11 months ago
ура, новоиспеченный видос!
Shok23 11 months ago
Это переделка старенького видео? В самом начале канала же было схожее видео.
Shok23 11 months ago
+WebDesign Master ну-ка конечно, здесь более детально
WebDesign Master 11 months ago
Нет, такового еще не было.
ЛЕО БОЛТ 11 months ago
В формате пиэзди :)
WebDesign Master 11 months ago
К огорчению, конкретно этак: en/ru/psd
Sergey Ovsyanik 11 months ago
Было бы здорово подробнее поведать об различиях меж col-md, col-sm, col-lg. Не до конца понимаю в каких случаях какой класс избирать
Дмитрий _ 11 months ago
col-lg, col-md, col-sm,col-xs - это одинешенек и тот же блог, разность только в том, что col-lg позволяет адаптировать блок под огромные мониторы; col-md адаптирует тот же самый блог лишь под средние мониторы; col-sm адаптирует этот же блог для планшетов, а col-xs уже для телефонов. Вот образец: <div class= container > <div class= row > <div class= col-lg-4 col-md-4 col-sm-4 col-xs-4 style= background: rgba(0,0,0.5); > Это 1-ый блок <div class= col-lg-8 col-md-8 col-sm-8 col-xs-8 style= background: rgba(255,255,255.5); > Это 2-ой блок </div> </div>
r0m4n 53n470r0w 11 months ago
в документации бутстрапа все написано
Sergii Way 11 months ago
В каком из уроков данного создателя было весьма тщательно поведано про это, мне сходу посодействовало, заглавие не помню, поглядите уроки bootstrap на канале.
Михаил Лапшин 11 months ago
благодарю, хороший обозрение и объяснение!
Андрей Копылов 11 months ago
Отличный подгон! Давно находил конкретно таковой облик сетки, дак ещё и во вложении различные размеры сеток. Спасибо!
Николай Мещеряков 11 months ago
Хороший Гайд для новичков. Ещё нужно поведать о подборе шрифтов, сервисах и вариантах решения.
Андрей 11 months ago
+Кот я надумал может в таблице сделать и воспретить перенос. таить избыточное. будто думаешь проканает? 1-ая колонка наименования + точки 2-ая - стоимость
Андрей 11 months ago
если на веб-сайте меню вида ИТЕМ......100руб, то будто нормально выровнить?? эти точки вечно косячные( при каком-то разрешении их немало, где то не достаточно. кое-где ровно, а где-то криво. на различных телефонах по различному(
WebDesign Master 11 months ago
+
Gregory Bass 11 months ago
Еще можно выложить не заготовки с сетью в PSD а экшены. Добавил их в программку, запустил (дажен на готовом макете) и полосы быстренько нарисовались, а еще и слой с прозрачными колонками если нужно. По мне этак удобнее, чем заготовку PSD любой один хватать. Открыл экшены, избрал по наименованию подходящий, запустил и получил сетку для работы.
Евгений Фролов 10 months ago
Ага, лишь будто таковой экшн сделать? Я запарился находить в инете, каким образом можно схожую штуку самому в экшн записать, покамест сам способом тыка не разобрался.