Новичок
4 урока
(47 минут)
Курс
Дизайн сайта портфолио в Photoshop
Курс научит вас рисовать дизайн сайта в Photoshop.
#4 — Модульная сетка в Photoshop

Здравствуйте, дорогие дизайнеры! Тема сегодняшнего видеоурока — Модульная сетка. Давайте зададим себе следующий вопрос: а зачем нам нужна модульная сетка в работе?

Модульная сетка и ее преимущества

К преимуществам модульных сеток относятся следующие факторы.

1) Ускорение работы: это более удобный способ выравнивать объекты относительно друг друга. Мы не тратим лишнего времени на поиск геометрического места элемента в макете.

2) Сбалансированность и пропорциональность: объекты в макете соизмеримы и пропорциональны между собой.

3) Ускорение и подгон под шаблон, единообразность элементов: разработав модульную сетку, мы делаем основу для решений на будущее.

Давайте рассмотрим несколько ресурсов с модульными сетками и научимся создавать свою.

Модульная сетка с сайта 960 Grid System

Откроем сайт 960 Grid System — это сайт, где содержится множество модульных сеток. Вы можете выбрать и скачать ту сетку, которая вам понравится. На сайте применяется система из 16 либо 12 колонок, но существует и 24-х колоночная система, которая в практике редко встречается.

Мы рассмотрим 12-ти колоночную систему, в которой контент располагается в 3 столбца. В ней нет необходимости высчитывать ширину картинки, легко настраивается расположение элементов друг с другом и отступы между ними.

Модульная сетка фреймворка Twitter Bootstrap

Рассмотрим один из СSS-фреймворков Twitter Bootstrap, который также использует модульную сетку — http://getbootstrap.com/. На этом сайте есть раздел “CSS” с подразделом “GRID SYSTEM”, где содержится гибкая мобильная модульная сетка, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или экрана.

На нашем канале есть курс по этому фреймворку, в котором вы сможете создать необходимую модульную сетку для вашего проекта, а также посмотрите цикл уроков по адаптивной верстке CSS3 BUTTON GENERATOR

Собственная модульная сетка

Ну и наконец, мы разберем пример, где вы сможете сами понять, как создать собственную модульную сетку с помощью CSS. Скачаем один из плагинов для Photoshop — http://guideguide.me/. Создаем документ шириной 960рх и высотой 1050рх и открываем в меню Окно->Расширения->Grid System. Создаем сетку из 12 колонок, ширина колонки 20рх, отступы между колонками по 10рх. Нажимаем кнопку Make grid и строим нашу модульную сетку.

Создадим новый слой и с помощью кнопки Rectangular marquee/Прямоугольное выделение выделяем первый столбец и выполним заливку красным цветом или любым другим. Размножим нашу заливку с помощью копирования слоя горячими клавишами Ctrl+J. Выделим все слои и выполним выравнивание по горизонтали, выставим непрозрачность на 10%. Объединим наши слои – Сtrl+E и назовем слой GRID. Модульная сетка готова! На этом все.

Если вам понравилось видео, ставьте лайк! А также нам будут очень приятны ваши отзывы и пожелания в комментариях под этим видео.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog.

Ссылки на сайты из данного урока:
1. 960 Grid System — http://960.gs/
2. Twitter Bootstrap — http://getbootstrap.com/
3. Плагин для Photoshop — http://guideguide.me/
4. Цикл уроков по bootstrap — https://www.youtube.com/playlist?list=PLY4rE9dstrJwP_JUTts9AtMVtJlJVGxWK
5. Цикл уроков по адаптивной верстке — https://www.youtube.com/playlist?list=PLY4rE9dstrJyJEghRkl7qfqdAdlyvaOVQ

Материалы к уроку:
Делись:

Оставь комментарий!

Добавить комментарий

Рекомендуемые курсы