Секреты веб-дизайна. Урок №3 — «Модульные сетки и направляющие Выравниваем всё по линеечке»

Приветствую Вас, уважаемый коллега!

В этом видеоуроке я вам покажу модульные сетки и направляющие.

Для начала хочу сказать выгоды, которые вы сможете получить от данного урока, от, скажем, о тех направляющих, от этих сеток. Для чего вообще необходимо их использовать в веб-дизайне? Выгоды есть различные. Я для себя, скажем, определил три основные момента, которые я смог выделить, которые лично я в своей работе заметил и в работах других дизайнеров. Но, первое — это, скажем, сокращение времени на разработку вообще дизайна. Потому что, если  у вас будет какая-то сетка, либо выставлены направляющие вам не придется по сто раз  передвигать какие-то элементы, блоки и с контентом какие-то картинки и так далее. То есть, вы сэкономите время.

Следующий момент — вы изначально будете рисовать правильные по ширине, по высоте различные блоки и так далее.

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

И, наверное, последняя четвертая выгода, о которой я хотел сказать — это соблюдение одинакового свободного пространства  между блоками.  То есть, допустим, если у нас есть какой-то сайт. Грубо говоря, вот у нас страничка и есть какие-то блоки. То есть, везде у нас будет одинаковое расстояние. Ну, здесь на примере очень плохо видно. То есть, здесь одинаковое расстояние, здесь между блоками. Грубо говоря, допустим, по двадцать пикселей везде между пространством.  Это легко сделать, когда у нас есть направляющие и когда, соответственно, такая вот сетка. Если нет этого, то  придется вручную все  высчитывать. И, соответственно, на это уйдет  гораздо больше времени. Но, грубо говоря, вот эти вот сетки и направляющие экономят просто напросто наше время и делают нашу работу  более простой  и удобной. И второй, скажем, побочный момент — это когда мы смотрим на  дизайн все у нас четко структурировано и, скажем, человеку (посетителю сайта) гораздо проще воспринимать информацию. Потому что, когда идут какие-то одни линии, допустим, есть у нас какая-то фигура, либо какой-то треугольник и так далее, мозг автоматически продолжает вот эти вот линии. Ну, скажем, это из психологии. И если эти линии нигде не пересекаются, они идут параллельно, то мозгу гораздо легче воспринимать информацию. Если, соответственно, куча фигур, где вот эти вот линии пересекаются постоянно — мозг начинает напрягаться. Соответственно вы, когда смотрите на какой-то дизайн, вы неосознанно понимаете, что  воспринимать информацию на нем гораздо сложнее. Но когда сайт сделан с помощью вот этих вот направляющих модульных сеток, то вы на сайт смотрите, на дизайн и он воспринимается легко просто, без напряга. Вы легко читаете информацию, смотрите картинки и так далее. При этом вы, собственно говоря, не поймете  в чем же разница между этими сайтами. На самом деле это за счет использования  и не использования сетки.

Ну что ж, я думаю, я убедил вас, что необходимо использовать данные сетки. Но, по крайней мере, если вы только начинаете делать дизайны, то  я вам крайне рекомендую первые год-два  придерживаться данного правила. Из личного опыта могу сказать, что я  постоянно пользуюсь  направляющими. Сетками в основном не пользуюсь. Просто потому что, когда я начинал заниматься веб-дизайном — я не знал, что вообще такое существует. Я знал только о направляющих. Сейчас я уже, скажем, настолько привык, что якобы практически на автомате ставлю одинаковые расстояния между блоками. Но у меня, грубо говоря, сетка не требуется. Но опять же это приходит только с опытом, с годами практики. То есть, в начале, конечно, у меня было море косяков. Но какой способ выбрать — смотрите сами, смотрите на  свою ситуацию. Я вам покажу сейчас подробно, как пользоваться сетками и направляющими. Вы уже сами выбираете, что для вас будет лучше. Как бы, бывают случаи, когда можно выбрать что-то одно. Бывают случаи, когда стоит воспользоваться и тем, и другим способом. Ну, естественно, бывают случаи, когда можно не использовать вообще ничего, если вы рисуете, допустим, какие-то промо-сайты, где большая часть графики и какой-то четкой структуры нет.

Хорошо. С этим, с теорией мы закончили небольшой. Теперь давайте я вам покажу, что же такое модульные сетки и потом мы перейдем  к направляющим. Итак, посмотрите, пожалуйста, на экран. Сейчас вы видите несколько таких вот розовых колонок  вертикальных. Вот они идут у нас. Их 12 штук. Ширина вот этой всей области у нас на данном макете получается 980 пикселей, а нет — 940. Расстояние между  этими блоками у нас  20 пикселей. И ширина каждой колонки 60 пикселей. То есть,  между у нас — 20, каждая колонка —  по 60 и, соответственно, все у нас этот макет, если мы берем еще внешнюю, эта часть пустует— 980 пикселей. А вот это вот розовое — 940 пикселей. Это стандартный макет. Называется стандартно-модульная сетка «Бутстраб-940». То есть, ее используют большинство дизайнеров  для создания, в основном, каких-то статичных сайтов, интернет-магазинов. Но очень редко она применяется при создании каких-то промо такого формата либо с использованием тех дизайнов, где много графики, иллюстраций различных и так далее.  То есть, в основном, какие-то сайты, где очень много какого-то контента, который будут просматривать люди и меньше графики. Сейчас давайте я в слоях отключу вот эту вот сетку. Пока что скроем также направляющие и посмотрим на наши колонки. Как я уже говорил, 1 колонка у нас идет 60 пикселей. Как вы видите, у нас здесь в макете на 940 пикселей получается 12 колонок. То есть, если мы их пронумеруем, то получится 12 штук.

Следующий у нас идет блок такой, в котором помещается 4 таких вот колонки. И, соответственно, это пустое место объединяется. В таких вот блоках можно сделать следующее: эти блоки также объединяются и можно сделать из него еще один большой блок, в котором будет помещаться 8 таких вот ячеек. И, соответственно, точно также можно разделить всю ширину на 2 части и получится по 6, как я уже говорил. Все вместе занимает 12 ячеек. И, соответственно, мы можем представить, что если визуально мы делим какой-то сайт на  блоки, то, соответственно, вот эти вот 4 штучки мы можем отнести под какое-то левое меню, а здесь у нас будет какой-то контент, график и так далее.  То есть, я думаю, если вы посмотрите на данную структурку, то вы четко видите совершенно обычно какой-то шаблон либо дизайн по которому, в принципе, легко что-то нарисовать и потом сверстать. Естественно, вот эти вот модульные сетки есть под разные размеры экранов. Также есть сетки под планшеты, под телефоны и так далее. То есть, все это отличается. Но мы в данном курсе будем рассматривать только вот эту вот, скажем, сетку, потому что, ну, в основном, мы рисуем дизайны под обычные мониторы. Мы не рисуем дизайна сейчас под планшеты и телефон. Соответственно, будем рассматривать данную сеточку и, соответственно, на другие не переходить, чтобы не забивать наш мозг какой-то ненужной в данный момент информацией.

Следующий момент — это, скажем, направляющие. То есть, включаются/выключаются они  сочетанием клавиш Ctrl+H. Это такие линии, которые мы можем обозначать какие-то границы блоков. То есть, они могут быть как вертикальные, так и горизонтальные. Ставится очень просто. То есть, вот у нас есть линейка. Она включается сочетанием клавиш Ctrl+R. Точно также выключается. И, соответственно, если мы хотим поставить какую-то горизонтальную линию, то мы просто беремся левой клавишей мышки, зажимаем и перетаскиваем направляющую. Вот у нас выстроилось. Таким образом, мы можем ограничить какие-то блоки и понять, когда будем рисовать какой-то дизайн, где у нас что будет находиться. Соответственно, когда мы, пользуясь какими-то инструментами, и, допустим, что-то рисуем, у нас это никак не затрагивается. То есть, данные линии находятся, грубо говоря, поверх всех слоев и служат они вспомогательными такими элементами, чтобы мы не выходили за границы какого-то нами представленного объекта. Точно также, если мы хотим поставить какую-то вертикальную линию, то берем уже с левой части линейки и просто выставляем.  Если хотим удалить, то переходим на инструмент «Перемещение». Является такой вот значочек, с помощью которого мы можем передвинуть направляющие, либо удалить, передвинув обратно на линейку. Вот, собственно, и все. И я лично использую данные направляющие для того чтобы  выделить шапку, меню, какие-то блоки с контентом, чтобы они ровно стояли и подвал. В принципе, все. А, как бы, другие элементы я не выделяю. Так скажем, у меня статичные линии. А еще я часто пользуюсь направляющими, если мне какой-то контент необходимо выделить. Допустим — текст.

Сейчас я на примере покажу. Вот сайт, на примере которого я вам буду показывать также дальнейшие уроки. У нас есть модульная сетка, так, соответственно, и направляющие. Модульную сетку я пока что отключу.  А вот, как вы видите, у меня выделена менюшка, у меня расставлены направляющие горизонтальные. Выделен с помощью вертикальных направляющих верхний блок. Две таких менюшки каталога. Но, в принципе, все. Я в процессе работы иногда выделяю, допустим, блок с помощью направляющих что бы, грубо говоря, выделить по одной линии все нижние блоки. Либо если мне необходимо выделить по вертикали какие-то блоки, то, соответственно,  я могу поставить снизу направляющие. Но, благо, у меня есть модульная сетка, с помощью которой гораздо проще расставлять объекты.  То есть, поэтому я  лично в своей работе использую направляющие только для выделения каких-то статичных элементов, которые никогда практически не меняются. В макете это шапка, меню, левый блок, допустим, и  ширина контента, и фото. Все. Все остальное может меняться на разных страницах. Соответственно, для этого я использую сетку. Для меня вот за годы практики это оптимальный вариант, с помощью которого  мне проще всего делать макет. Можете также попробовать работать в так вот формате смешанном. То есть, использовать и то, и другое.  Долгое время я работал исключительно с  направляющими, но в какой-то момент, когда я стал делать более сложные сайты — понял, что без сетки, в принципе, очень сложно. И когда расставляешь кучу направляющих уходит  там несколько часов только на расстановку.  Поэтому это не совсем продуктивно. Не рекомендую работать исключительно с одним из вариантов.

Давайте-ка, как раз посмотрим на этом примере на модульную сетку. Здесь она немножко отличается от  той, которую я вам показывал. Хотя нет, не отличается, но и здесь мы видим квадратики. Да? Здесь же у нас исключительно идут линии, по которым я, соответственно,  я могу четко посмотреть, выделить три вот этих  ячейки под какой-то левый блок. Три ячейки под блок с первым контентом, со вторым контентом, с третьим контентом. И все у нас будет одинаковой ширины. Все это выровняет кнопочки, различные какие-то поля для текста, соответственно, картинки и так далее.  Все смотрится гармонично, если  мы вытащим эту сетку и направляющие и посмотрим  на сам макет  — мы видим, что вполне много свободного пространства. Ничего нигде не залазит на сайт. Все очень просто воспринимается, легко читается и одинаковое расстояние между блоками. Одинаковое расстояние достигается за счет того, что как раз так блоки располагаются между собой и между ними везде 20 пикселей.  То есть, это очень удобно. И вам не нужно контролировать это с помощью направляющих, которые отнимают кучу времени. Вот такой вот пример. Я думаю, вам стало более понятно, что такое направляющие и что такое модульные сетки.  Но я уверен, что после того как вы попрактикуетесь вам станет, скажем, еще понятней и  вы поймете саму фишку и все выгоды этих технических моментов.

Сразу хочу сказать, что я для вас подготовил такой вот шаблончик небольшой.  Давайте размеры уменьшим. То есть, ширина у нас самого макета 1920 пикселей. Точно такая же сетка будет справа на 940 пикселей. Для того чтобы ваш дизайн сайта, а точнее  сайт, смотрелся корректно на всех мониторах даже маленьких на компьютерах. И, соответственно,  по высоте у нас тут 2000 пикселей. Ну, это стандартная величина. Большая часть каких-то главных страничек и так далее. В принципе, влезет по высоте. Давайте покажу, как изменять высоту, потому что если  у вас будет макет, допустим,  не 2000 пикселей, ну, скажем так, 10-15 какой-нибудь лендинг там будете делать, то это вполне может быть. Давайте 3000 сделаем. Вы видите, что сетка обрубается, потому что это обычный слой. И, соответственно, чтобы продолжить данную модульную сетку  мы просто выделяем данный слой, нажимаем Ctrl+Т и растягиваем вверх, вниз до того момента когда у нас будет все наше пространство охвачено сеткой. Соответственно, так вот постепенно вы можете увеличивать свою сеточку по мере надобности. То есть, изначально я не рекомендую ставить большое значение. Иначе у вас будет нагружаться Фотошоп и, соответственно, комфортно работать не получится. Данную сетку на непрозрачность регулируете. То есть, в данном случае вам плохо видны вот эти вот колонки и вы хотите, чтобы они были поярче, то можете здесь увеличивать здесь «прозрачность» и «непрозрачность» данного условия. Либо вообще поменять цвет. Никто вам это не запрещает. То есть, создадите дополнительный  в режиме «Alt click» может изменить, допустим, на какой-нибудь синий оттенок и сетка уже будет другая. Либо, ну как бы, цвет поменять можно разными способами. На этом мы сейчас зацикливаться не будем.  То есть, суть в том, что вы можете настраивать сетку под себя. То есть, увеличивать ее размер. Делать больше/меньше, изменять непрозрачность, делать поярче/послабее. То есть, если вы хотите, чтобы сетка у вас всегда висела, а не временами включать/выключать, то делайте непрозрачность поменьше.  Если хотите чтобы она у вас временами была выключена, то есть, вы работаете над каким-то блоком, она вам мешает, грубо говоря, вы свойства выключили, поработали, хотите посмотреть и выровнять элементы — включаете ее. Соответственно, непрозрачность чуть больше увеличить. Подгоняйте все, скажем, под себя, чтобы вам работалось комфортно. Не нужно там слушать и смотреть, как говорят какие-то дизайнеры. Возможно, для них какие-то параметры будут удобные, а для вас нет. Поэтому подстраивайтесь под себя. Потому что все люди разные.  И как вам будет комфортнее и удобнее и, соответственно, такие настройки выставляйте. Хорошо. Вот эту вот сеточку вы можете взять в дополнительных материалах. Я ее, скажем, прикладываю. Она в формате у нас PSD фотошопом. То есть, вы ее открываете. Потом просто сохраняете, допустим, какой-то макет (ну, как сайт) и начинаете работать над сайтом. Такая, скажем, простая формула.

Сразу хочу сказать, что различных сервисов, файлов в интернете просто море. Вы можете сами поискать, посмотреть и составить. Я вам покажу, наверное, один сервис, тоже который довольно-таки интересный, удобный и можно, скажем, интегрировать с фотошопом.  Сейчас я браузер подгоню под размер экрана. Есть такой сайт, называется он: «960.gs». Вы в него заходите и нажимаете на кнопочку «Big ol’ DOWNLOAD button». У вас начинает скачиваться архив, вы его сохраняете на компьютер, весит он всего 4 мегабайта, потом открываете данный архив, естественно, мы его извлекаем. У нас на рабочем столе  появилась такая папка. Она у вас будет называться «960 Grid-System Master», мы в нее заходим. Здесь есть различные шаблончики для фотошопа. То есть, можете зайти, посмотреть. То есть, заходим в папку «templates». Здесь находим фотошоп и здесь различные сетки на 960 пикселей по ширине  на 12, 16 и 24 колонки. То есть, в нашем случае в прошлом варианте было 940  пикселей по ширине и 12 колонок. Здесь они немножко отличаются, соответственно, по всей ширине макета и по количеству колонок. То есть, я точно так же хочу сказать, что  я вам  показываю эту сетку — это, скажем, не панацея и не стоит использовать только ее. Не нужно придерживаться такого варианта, что только она и больше ничего — нет. А если вы где-то в интернете найдете эту сетку, которая будет подходить больше под ваши работы, под ваш стиль дизайна, под ваши типы сайтов и так далее, то, пожалуйста, можете использовать. Главное, чтобы вы достигали цель и сайт смотрелся гармонично, просто и удобно. Так, соответственно, в этой папочке мы находим папку «app plugins» — далее фотошоп и есть такой вот файл «960 GRIDS.atn». Мы его копируем. Далее вам необходимо найти папку с фотошопом на вашем компьютере. Лично у меня она лежит в программах. То есть, вам необходимо зайти в папку с фотошопом и найти папочку «Presets», далее папку «Actions» и сюда вставить данный файл. У меня он уже есть и поэтому я просто могу нажать кнопку «Копировать заменой». У вас данного файла не будет, скорее всего. Поэтому  просто скопируйте в данную папочку. После этого переходим обратно в фотошоп. Вы можете его перезагрузить либо просто открыть окно операции. Здесь  у вас может появиться сразу данная команда либо вы можете нажать эту иконку  и выбрать команду «Загрузить операции». Здесь, соответственно мы выбираем папку фотошопом. Точно так же переходим  в папку «Presets», выбираем «Actions» и выбираем этот файл «960 GRIDS» (19-23). У нас здесь появляется  три различных  варианта actions — операции. Мы можем создать файл, где у нас будет 12 колонок, 16 и 24  колонки. То есть, на свое усмотрение.  Как это делать. Просто выбираем какую-то тут команду и нажимаем «Play». У нас сначала на автомате выставляются направляющие и потом вырисовываются колонки. Все. То есть, у нас есть слой и, соответственно, сочетанием клавиш Ctrl+H мы можем включать/выключать направляющие.

Соответственно, точно также в дальнейшем будем работать с данным макетом. Точно также мы можем выбрать 16 колонок либо 24. Давайте 24 сделаем. Как вы видите, количество направляющих рисуется гораздо больше. И, соответственно, колонок получилось у нас в два раза больше. То есть, здесь у нас  12 колонок, а здесь — 24. Каким способом пользоваться смотрите сами. Но лично для меня, как я уже говорил,  подходит оптимально просто PSD-файл с сеткой. Какие-то там операции, плагины, экшен и так далее мне не нравится и не подходит. То есть, такой обычный файлик я использую. Мне больше всего подходит. Смотрите по себе, что для вас  лучше.

Ну, и в конце, перед тем как, дать вам домашнее задание я бы хотел также немножко сказать из своего опыта плюсы/минусы этой сетки. То есть, в чем ее плюсы? Плюсы в том, что у вас будет, скажем, все выравнено четко по линиям. У вас не будет хаоса в дизайне, то, что очень часто встречается у новичков. Все блоки с контентом будут четко структурированы и смотрятся профессионально. Но не стоит перебарщивать с сетками, потому что у новичков он может убить креатив. Может убить просто напросто идеи. Если вы будете прямо-таки жестко соблюдать эту приверженность к сетке, к направляющим, то у вас может получиться так, что перебор будет с контентом, с информацией и так далее. Сайт может получиться каким-то унылым, скучным и так далее. То есть, нужно соблюдать такую гармонию, чтобы  все было  четко выравнено, но при этом сайт смотрелся четко, уникально, удобно и гармонично. Ну, скажем, так, если по началу получаться не будет —  не расстраивайтесь. Через пару месяцев практики у вас все начнет постепенно получаться, и вы увидите результат по сравнению со своими коллегами, которые не используют. Вы будете делать более крутые работы, за которые вам будут платить более большие деньги. Вот такой вот момент из личного опыта.

Окей. На этом мы данный урок заканчиваем. Ваша домашка заключается в том, чтобы соответственно изучить эти вот модульные сетки, направляющие и  наложить на три своих варианта дизайна сетки и расставить направляющие. То есть, в каждом из трех ваших вариантов дизайна вы должны какой-то вариант модульной сетки сюда закинуть. Либо PSD-файл, либо скачать с сайта эту вот операцию «Actions» и сделать сеточку. Плюс по необходимости расставить какие-то направляющие, которые вам будут показывать, где у вас будет меню, где у вас будет шапка, где какие-то блоки с контентом, подвал и так далее.  После этого, когда вы все сделаете, можете переходить, соответственно, к следующему видеоуроку.

На этом все. Спасибо всем за внимание и до встречи в следующем видео!

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments