Модульная сетка для дизайна сайта. Урок 2

Автор Lyudmila Yeriomenko
Модульная сетка для дизайна сайта. Урок 2

это второй урок основ Photoshop для веб-дизайнеров специально для ловли блага.

Сегодня мы говорим про сетки для веб дизайнеров и чтобы понять, что — это такое нужно показать вот эту картинку. Вите как здесь всё прыгает до буква у слева служба с одной стороны введите значение нужного товара не посередине элементы прыгают — это проблема и верстальщика из бесится то есть тот человек который будет превращать вашу макет из psd в HTML CSS он будет сильно матерится. Когда будет верстать макет поэтому придумали такую штуку которая называется модульная сетка она упрощает во-первых упрощает процесс конструирования сайта радуют верстальщиков, что немаловажно и помогает выравнивает элемента то есть по линии гораздо удобнее расположить элементы — это сильно проще выглядит это.

Примерно вот то есть допустим у вас есть три колонки и выравнивает типа этим колонкам текст блоки и прочее может быть и другое количество колонок 12 16 и 24 колонки.

Где взять, но первый способ — это открыть Photoshop нарисовать самому с помощью с помощью допустим линеек нажимаю контроллер появляются такие штуки можно путем вытаскивания как бы разделить на нужное количество колонок. Это хорошо долго и ну как бы меня правда надолго так скажи есть такой сайт 960gs. Здесь вам нужно нажать на кнопку большая кнопка скачивания у вас скачается архив, а он будет состоять из. Ну тут много папок то есть есть нас интересует и Photoshop для других графических редакторов тоже есть готовы уже вещи нам нужно 960 Grid 12 column вот этот файл который содержит. Я уже построенную сетку будем использовать его. Разумеется Это не единственный способ построения сетки, но наиболее простой. Поэтому в этом уроки для начинающих я использую его про другие сервисы есть в описании к этого ролика к этому ролику можете посмотреть и так вы запустили файл Photoshop. У вас теперь есть сетка. Давайте посмотрим из чего оно состоит. Ну во-первых фон который можно отключить или поставить другой цвет слои 12 колоночной сетке. То есть — это отдельный слой с полу прозрачностью нет 10% прозрачности наём замочек можете. Если хотите его. Как включить вообще или передвинуть если иногда бывает удобно выключить сетку для этого можно использовать сочетания двоеточие и она там где же русская буква и она отключает эту сетку не будет мешаться так же ещё и удобно использовать snapchat. Привет То есть если в настройки BIOS на почту можно указать. Почему привязка к направляющим в слоям и прочее. То есть как — это работает. Если вы рисуете какой — это элемент прямоугольник условно дата при перемещении этого элемента он будет привязан. Ну то есть вот именно прилипать к этим линиям и — это очень удобно у вас, тогда не будет всяких штук что-то выскакивает. И вам Photoshop как будет подсказывать. Как как — это правильно использовать. Вити будет нибудь пикселей. Теперь когда у вас есть уже какая-то нарисованная сетка. Вы можете начать свою первую страничку я предлагаю создать новый слой и сделать показать как будет большими блоками выглядеть ваш. Давайте одностраничный сайт допустим у нас будет иметь какое-то фон я ему сделаю прозрачность чтобы просто показать цветом и создам слой в котором допустим отмечу, что будет по левому краю какой-то заголовок вот как-то так дам ему такой более контрастный цвет нам в принципе цвета сейчас не очень важные просто можно использовать допустим черный и голубой то есть мы покажем что-нибудь какой-то заголовок дальше я покажусь, что здесь будет какая-то кнопка например с призывом к действию и, а здесь скажем логотип то есть ну во-первых можно вот такими простыми простыми блоками показать где, что находится я выделяю объекты зажатой клавишей Shift выделил объекты и поставил пятёрку на клавиатуре у неё добавил 50% прозрачности. Ну для того чтобы понять, что ну акцент будет больше всё-таки на кнопке дальше я могу зажатой клавишей Alt выделять этот блок перетаскивая его направо и здесь я например обозначают, что будет блок с телефоном и заказать звонок это. Можно его ещё зажатой клавишей Alt по вертикали он нас пропорционально уменьшиться. Вот и я хочу показать, что например. Здесь какой-то объект. Ну допустим баскетбольный мяч. Ну условно. Я не знаю про, что у нас ещё лендинг придумывая на ходу даже мы ставим какую-то прозрачность и таким способом у вас получается, что вы уже блоками сейчас я отключу сетку 12 колоночная сетка нашу. Таким образом у нас получается уже ну то есть становится понятно как будет выглядеть наш шапка. Да есть тут какой-то объект слева текст кнопка логотип и телефон и она заканчивается. Вот здесь вот таким способом вы можете. Ну и. Разумеется так как мы используем сетка должно быть всё более-менее выровнена да то есть вот как раз вот эти вещи нам и помогают выравнивать элементы то есть в нашем случае — это может быть. Вот так точнее даже вот так вот дальше мы будем — это ещё всё двигать и сейчас на базовом этапе нам нужно просто понять. Как — это всё будет выглядеть поэтому ваше домашнее задание сделайте вот такое композицию несложную для шапки она нужно было. Вот выравнивание по левому краю здесь будет текст как объект телефона и. Дайте ссылку в комментариях в описании к этому ролику чтобы мы могли посмотреть. Если будут возникать по мере выполнения какие-то вопросы тоже задавайте в комментариях если вам интересна тема. Зейна и вы хотите в дальнейшем получать уроки по веб-дизайну я его укладываю в каждую неделю то подписывайтесь на мой Youtube канал там уже более 200 кроликов и. Они каждый раз появляются все новые и новые поэтому держите руку на пульсе и увидимся в следующем выпуске.

0 комментариев
0

Читайте также