Bootstrap сетка, PSD

1608 ratings | 65386 views


Bootstrap сетка, PSD

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

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

justadelirium channel 2 months ago
Вы 1-ый, кто произнес про боковые отступы в сетке, СПАСИБО, преклоняю колено!
роман Бессмертный 6 months ago
подскажите изволь скачал архив а будто сделать этак что бы сетка в фотошопе появилась не знаю
Ziyod Koziyev 3 months ago
разархивировать архив, отворить фотошоп, отворить файл в фотошопе какой разархивировал и вуаля - готовая сетка
KOSTYA 10 months ago
благодарю весьма посодействовал)
застрелить или застрелиться 10 months ago
Спасибо!
DANCE WITH THE DEVIL 11 months ago
Я вообщем не усвою, будто эту сетку активировать. Куда жать то, если я ее скачал? Проще самому ее сделать.
DANCE WITH THE DEVIL 11 months ago
Спасибо. Уже разобрался
WebDesign Master 11 months ago
Её необходимо отворить в Photoshop.
Alim Yamakov 11 months ago
Спасибо за видео! Есть проблема: вот я скачал файл, открыл его в фотошопе, и вижу не сетку а попросту белоснежный прямоугольник :) что делаю не этак?
WebDesign Master 11 months ago
Ctrl+H
Eugene Glukhoy 11 months ago
Спасибо! Толково, понятно, по сущности.
Алёна Елей 1 year ago
Все видео у вас крутяцкие )) Но у меня проблема - на что опираться, если макет изготовлен не ровно по колонкам, будто обычно, а все блоки неординарные и нацелены по центру, к примеру (landing page) ? В итоге способности bootstrap использовать не стала и адаптивила чрез медиа-требования, будто следовало устроиться?
WebDesign Master 1 year ago
Как вариант.
JENYA 1 year ago
1:50 что за шрифт подскажите(кириллица)?
Wi J 1 year ago
Не могу скачать. Просто не прогружает Мб поэтому что на мак ?
Irina M 1 year ago
Простите если проблема глуповатый, однако будто сделать сетку под 1170 на 24 колонки?
Анатолий Внук-Карпов 1 year ago
Неа)) Вам тогда слева под категории необходимо отрисовывать 4 колонки, а продукты мастерить 4шт. в 2 колонках любая, итого 12. Их вечно 12 будет)
Irina M 1 year ago
Ага ужу сообразила что нечего, вот бывает этак задашь проблема, а позже приходит ответ)) Мне нужно было сделать страничку веб магазина под 1170 px, чтоб слева была колонка с категориями, а справа 4 колонки с продуктами. Так вот у меня 12 колонок, потому выходит лишь 3 колонки с продуктами. Но я сообразила что этак и надлежит быть? на то он и адатиптивный, при увелечении монитора будет добавляться еще колонка этак?
WebDesign Master 1 year ago
Зачем? )))
Антон Литвиненко 1 year ago
Подскажите, будто прикрутить к готовому макету сетку из архива?
Paco Official 1 year ago
у меня пукан пылает когда видишь будто дизайнеры криво делают макеты не по сетке которую сами же избрали. таковой абсурд ппц, хотя я и верстальщиков криворуких дофига лицезрел, типа button изготовлен в форме тегом <img> )) и таких оч немало
Paco Official 1 year ago
хз отчего однако чет при выделении текста лагает фотошоп, хотя пк норм, текста не немало (пару предложений), шрифтов тоже
Paco Official 1 year ago
а чем ты монтируешь любопытно, стрелочки все эти рисуешь, в камтазии шоль? плюс до этого слайды вроде были, любопытно)
Olga F 1 year ago
Очень грамотная выговор, все понятно, благодарю огромное!
OrangeClub 1 year ago
Можно ли использовать bootstrap сетку в Corel Draw ?
Антон Литвиненко 1 year ago
повсевременно в макетах встречаю, что ширина контента 1170пх, без отступов по краям. что мастерить в таковой ситуации?
Audar G 1 year ago
бл красава сколько я находил такового вот урока чтоб все чик чирик понятно было
Dampear Alucardovich 1 year ago
Я пересмотрел немало каналов подобного направления, однако вот, что я скажу, вы наилучший. Честно! все ясно, верно , по делу, все ссылки, файлы все кушать! Спасибо огромное за то, что делитесь опытом и находите пора для сотворения видео.
Andriy Samosval 1 year ago
Скоро 70к подписчиков. ГЦ
Archie Man 1 year ago
Вопрос от новенького Куда и будто ее необходимо устанавливать(в версии 2016 года) и будто позже ее отыскать в самой программке?
Алексей Харитонов 1 year ago
приветствую, я не особо сообразил 1-ое правило, где Вы гласили о том, что последние колонки служат для отступов на мониторах с низким разрешением, сможете, изволь, подробнее комментарием разъяснить?
Игорь Назаров 1 year ago
Всем привет. Подскажите, какой ширины документ необходимо основывать в Фотошопе для адаптивных веб-сайтов(либо макет рисуется лишь в одном формате а адаптивным делается при вёрстке?), какие сетки(сколько колонок) лучше использовать и какие расстояния меж колонок? Или макет рисуется лишь в одном формате а адаптивным делается при вёрстке? Интересуюсь с целью комфортной вёрстки в предстоящем
Tim Miro 1 year ago
проблема из практики. Попадаются макеты разной ширины, без сетки. будто фактически найти число колонок, гаттеры?
Даниял Аманкелдин 2 years ago
Ураа новое видео, весьма желаю узреть творение веб магазина с версткой конкретно от вас, изволь снимите такое видео. Ребята ставьте лайки, в топ, пускай увидит)
Сергей 2 years ago
подскажите, это все применимо к фиксированному container, а будто размечать сетку и мастерить дизайн для container fluid? то кушать веб-сайт на всю ширину? там колонки выходит резиновые, т.е. ширина для различных экранов различная. может кушать у вас видео, я не увидел
WebDesign Master 2 years ago
Работаете уже с медиазапросами в таком случае.
Сергей 2 years ago
т.е. положим 1400 холст, 1400-15*24=1040/12=87 пикселей одна колонка, и мастерить сетку из этих колонок по 87 пикселей? ну-ка придет мне таковой макет, а у меня экран 1366, у меня будут уже другие размеры колонок при верстке, а я буду хватать размеры то с макета 1400. будто быть?
WebDesign Master 2 years ago
Конечно, попросту делаете пропорциональные блоки по ширине.
Олеся Беликова 2 years ago
Здравствуйте! Создайте изволь серию уроков по работе в photoshop с нуля!!! Очень животрепещущая тема! И весьма подходящая! Вы ведь доступно объясняете!
Аннa Ш 7 months ago
Да, необходимы!!!
WebDesign Master 2 years ago
Монтаж видео вне темы канала.
Олеся Беликова 2 years ago
+WebDesign Master, еще одна весьма животрепещущая тема, это установка видео! Думаю вы со своими познаниями сможете раскрутить эту тему, до осознания ее- даже школьниками!!!
Олеся Беликова 2 years ago
+WebDesign Master Да, весьма необходимы. Часто встает проблема, что то сделать в этой программке! однако аж жутко ее обнаруживать)))
WebDesign Master 2 years ago
Реально необходимы уроки для самых новичков?
Faraday 2 years ago
Хотелось бы услышать Ваше мировоззрение о программке Adobe Muse.
Сергей Михеев 2 years ago
а Вы не собираетесь мастерить уроки по Photoshop ? к примеру будто порезать рисунки конечно и другие примочки верстальщика. было бы замечательно владеть целый комплект в одном месте.
Maxim Sadchikov 2 years ago
Алексей, проблема. Вы нередко упоминаете в собственных видео о западных англо-язычных источниках инфы по фронт-энду. Можете сделать видео-обозрение и выборку таких, более нужных и увлекательных с вашей точки зрения? Спасибо, было бы здорово.
Tadjik Zel 2 years ago
Не издавна нашёл ваш канал , весьма доволен и надеюсь посмотрев все видео выучиться данному ремеслу , благодарю огромное что даёте шанс бедным студентам хоть будто то получать средства)
Alex PO 2 years ago
Пожалуйста, лишь не кидайте то, что вы делаете для нас!!! Аналогов вас нету в РУНЕТЕ!!!
Anti_Shot 2 years ago
ПиЭсДи. втф ?!?
Anti_Shot 2 years ago
Ну обыкновенно молвят ПэЭсДэ, на сколько я знаю и слышал от многих конкретно этак. Может у вас и правильное выговор, однако мы то люд обычный )))
WebDesign Master 2 years ago
К огорчению, конечно. Данной аббревиатуре предначертано владеть настолько потешное выговор.
qwertyPechenkO 2 years ago
Как Вы произнесли колонки бывают разной ширины. Если я к примеру желаю сделать 4 карточки продукта, то и они будут разной ширины. Что мастерить в таком случае? Как на это отреагирует верстальщик?
Anti_Shot 2 years ago
у тебя кушать 12 колонок! Нужно 4 карточки продукта - 1 карточка, в данной сетке будет занимать 3 колонки, при условии, если дудки сайдбара. (при правильной сетке выходит что одна колонка, больше на 1px, чем последующая - это нормально! Ибо 0,5px вылазиют при делении 1140 контента на 12 колонок с 30px межколоночным отступом )Если у тебя кушать сайдбар, то сайдбар тяни на 3 колонки (меньше - не достаточно, больше очень немало, однако здесь от контента необходимо исходить, можно и на 4 потянуть сайдбар - однако снова-же, в большинстве случаев, 3 с головой хватает! Но, тогда у тебя возникают лимитирующие грабли, (деления четное, на нечетное кол-во) и оставшиеся 9 разбивай на свои 4 карточки, однако в таком варианте обыкновенно употребляют не раздельные карточки (меж которыми будет 30px отступ), а разделение ограничивается полосой в 1px - меж карточками, если это нужно и вероятен вариант, прибавления стрелок по бокам - однако, это уже колхоз, однако бывают клиенты, которым пофиг будто это смотрится, им нада впихнуть! Если ты хочешь, чтобы 1 карточка была больше других, то, логика ординарна, у тебя кушать 12 колонок, разделяй на четное кол-во данные колонки, или оставшееся не четное кол-во, разделяй на необходимое кол-во и дели полосой в 1px, или вообщем не применяй разделители.
Соколов Стас 2 years ago
суперский видос. буду скидывать дизайнерам, а то запарили. делают дичь. или сетки дудки и всюду отступы различные, или с сетью, однако на неё кладут болт, суют контент в гаттеры и остальные места, куда не нужно сувать. благодарю за ваши уроки, благодаря ним я научился верстать и меня взяли верстальщиком в местную маленькую фирму. а мне итого 18, и я учусь на 4 курсе техникума. ещё один большущее благодарю, за ваш труд.
TrueGelius 2 years ago
Любой ли макет можно сверстать по стандартным сеткам? Или необходимо кастомизировать их любой один, если попадаются макеты не по сеткам изготовленные? Много таких встречал, то оступы маленькие, то еще что-то, тяжело расшибить на колонки.
WebDesign Master 2 years ago
В таком случае лучше пользоваться кастомизатором:
Eltac Emiraslanov 2 years ago
neat grid forever :) bourbon, neat, refills <3
FunnyCat 2 years ago
ура, новоиспеченный видос!
Shok23 2 years ago
Это переделка старенького видео? В самом начале канала же было схожее видео.
Shok23 2 years ago
+WebDesign Master ну-ка конечно, здесь более детально
WebDesign Master 2 years ago
Нет, такового еще не было.
ЛЕО БОЛТ 2 years ago
В формате пиэзди :)
WebDesign Master 2 years ago
К огорчению, конкретно этак: en/ru/psd
Sergey Ovsyanik 2 years ago
Было бы здорово подробнее поведать об различиях меж col-md, col-sm, col-lg. Не до конца понимаю в каких случаях какой класс избирать
Дмитрий _ 2 years 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 2 years ago
в документации бутстрапа все написано
Sergii Way 2 years ago
В каком из уроков данного создателя было весьма тщательно поведано про это, мне сходу посодействовало, заглавие не помню, поглядите уроки bootstrap на канале.
Михаил Лапшин 2 years ago
благодарю, хороший обозрение и объяснение!
Андрей Копылов 2 years ago
Отличный подгон! Давно находил конкретно таковой облик сетки, дак ещё и во вложении различные размеры сеток. Спасибо!
Николай Мещеряков 2 years ago
Хороший Гайд для новичков. Ещё нужно поведать о подборе шрифтов, сервисах и вариантах решения.
Андрей 2 years ago
+Кот я надумал может в таблице сделать и воспретить перенос. таить избыточное. будто думаешь проканает? 1-ая колонка наименования + точки 2-ая - стоимость
Андрей 2 years ago
если на веб-сайте меню вида ИТЕМ......100руб, то будто нормально выровнить?? эти точки вечно косячные( при каком-то разрешении их немало, где то не достаточно. кое-где ровно, а где-то криво. на различных телефонах по различному(
WebDesign Master 2 years ago
+
Gregory Bass 2 years ago
Еще можно выложить не заготовки с сетью в PSD а экшены. Добавил их в программку, запустил (дажен на готовом макете) и полосы быстренько нарисовались, а еще и слой с прозрачными колонками если нужно. По мне этак удобнее, чем заготовку PSD любой один хватать. Открыл экшены, избрал по наименованию подходящий, запустил и получил сетку для работы.
Евгений Фролов 1 year ago
Ага, лишь будто таковой экшн сделать? Я запарился находить в инете, каким образом можно схожую штуку самому в экшн записать, покамест сам способом тыка не разобрался.