12 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать модульную сетку в фотошопе

Модульная сетка в Photoshop

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

Чтобы в окне программы появились линейки, нужно выполнить команды: Просмотр — Линейки (Ctrl + R). В скобках указаны сочетания клавиш, дублирующих эту команду. Линейки могут быть проградуированы в различных единицах: пикс., см, мм, дюйм… Чтобы настроить единицы, открываем окно настроек: Редактирование — Установки — Единицы измерения и линейки

Но гораздо удобнее это сделать другим способом. Нужно просто щелкнуть правой кнопкой мыши (ПКМ) на линейке и из контекстного меню выбрать нужные единицы.

При создании макета web-страницы лучше всего размеры измерять в пикселях.

Теперь о модульной сетке в Photoshop. Чтобы ее показать, выполним команды: Просмотр — Показать — Сетку (Ctrl + ‘).

Шаг сетки можно настраивать: Редактирование — Установки — Направляющие, Сетка и Фрагменты

Используя сетку, вы можете размещать отдельные блоки вашего макета точно по линиям.

Еще одна маленькая, но очень удобная особенность программы Photoshop. Если вы работаете с сеткой и рисуете прямоугольные фигуры, то курсор как бы «прилипает» к линиям сетки. Это дает возможность делать блоки с точными размерами. Впрочем, эту привязку можно отключить:

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

Чтобы вернуть начало координат в исходную точку, сделайте двойной щелчок в этом же квадратике.

Теперь вы можете использовать модульную сетку в Photoshop в своей работе над макетом сайта.

А как сделать, чтобы сайт приносил доход, вы сможете узнать, вступив в ПКП.

Bubble Sky

Пузырчатое небо ждет вас в новой Bubble Sky. Да, это красиво, но все же не так уж практично. Все эти пузырики мешают свету падать на землю, что затрудняет жизнь людей днем. Вам нужно будет постараться избавиться от всех пузырей. Как? Просто стреляйте шариком так, чтобы соприкоснулось три или более шариков. Лишь после этого они смогут лопнуть. Очистим небо, вперед!

#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.

Используйте модульную сетку, чтобы быстро и профессионально нарисовать сайт

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

Я расскажу как профессионалы создают красивые сайты, какое значение имеет модульная сетка в веб-дизайне и как простые действия позволяют забыть о технике и целиком отдаться творческому процессу.

Читать еще:  Поздравление брату на свадьбу от сестры трогательные. Поздравления с днем свадьбы брату

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

По традиции в конце этой публикации я размещу видео, из которого вы также можете узнать многое о модульной сетке. Помимо него ближе к финалу вы найдете очень полезный ролик для веб-дизайнеров. В нем собраны все необходимые законы, которые позволят вывести вашу работу на качественно новый уровень.

Какой формат получения информации выбрать – решать вам.

Что такое модульная сетка и зачем она нужна

Итак, модульная сетка – это некий шаблон, каркас, благодаря которому можно легко, просто и главное ровно выстроить все объекты на сайте. Она позволяет понять какого размера использовать шрифты, как вставить блок в интерфейс и где его лучше расположить.

«Сперва думаем – потом делаем». Этим и отличается работа профессионала от новичка. Специалисты не размышляют категориям: «нравится-не нравится». У них все четко.

Вспомните тетрадь в клетку. Линии помогают писать ровнее, а модульная сетка организовать рисунок в фотошопе.

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

Сетка упрощает эту работу. Она может состоять только из вертикальных блоков или делиться на квадраты.

Как правило, в графическом дизайне используют и горизонтальное и вертикальное членение. Единых параметров как должна выглядеть модульная сетка в веб-дизайне не существует. Каждый создает свою таблицу и если что-то в нее не вписывается, то это свидетельствует о том, что она изначально была недостаточно продумана.

И тем не менее профессионал всегда будет действовать согласно намеченному плану и пользоваться этим каркасом от первой и до последней страницы. Ведь шаблон не только упрощает работу, но и создает впечатление целостности проекта, единой композиции для всего сайта.

Как создать сетку

Если вы читали мою статью «10 навыков профессионального дизайнера», то помните, что один из основополагающих факторов успеха заключался в умении понять смысл ресурса и исходя из этого грамотно расставить приоритеты и все элементы по странице.

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

Первым делом нужно будет отсортировать из этой кучи что и где должно располагаться. Какие элементы более важны для создания первого впечатления у читателя, а что останется «на сладкое».

Далее создается эскиз вашего проекта на листе бумаги. Он нужен, чтобы понять параметры модульной сетки. Вы должны понимать, что в дизайне нет и не может быть единого стандарта. Никто не скажет вам: «Вот так должен выглядеть модуль, вот его параметры, пользуйся исключительно этими цифрами».

Читать еще:  Цветы из воздушных шаров как делать. Цветы из шаров своими руками - основы аэродизайна

Однако, я прекрасно понимаю, что вы еще только начинаете свой путь в области проектирования и не понимаете что и откуда брать. Вам нужны конкретные цифры, поэтому я дам вам их. Но пожалуйста не забывайте, что все они могут и должны отличаться в каждом индивидуальном случае.

Для создания самой сетки я рекомендую использовать сервис modulargrid.org . Для дизайнеров это идеальный вариант. На этом же сайте вы можете скачать бесплатный плагин для фотошопа, чтобы создавать сетки прямо в этой программе и не заходить на онлайн сервис.

Самое простое – это базовая линия (Baseline), она определяется исходя из размера шрифта, увеличенного в полтора раза. Если кегль 14, то высота будет 21.

Далее идет ширина модуля (Module width) 60. Если у вас есть какой-то повторяющийся элемент, то его параметры могут лечь в основу при определении этого показателя. Количество столбцов (Num of modules) можете поставить 13. Это значение определяет ширину всего проекта (Layout width), который выставляется автоматически. В моем случае 1020

Горизонтальное членение (Module height), то есть сколько строк будет в одном квадрате. Зависит от какого-то самого мелкого элемента, к примеру, логотипа. Он будет основным показателем, а все остальные станут кратны ему. То есть больше или меньше в определенное число раз. Можете поставить значение 3.

Для определения расстояния между блоками (Gutter), как правило, используется то же значение, что и для базовой линии, либо стандартное значение 20.

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

Полезные видео

Рекомендую вам посмотреть обучающее видео, которое поможет разобраться в модульной сетке, установить плагин в фотошоп и работать через сервис modulargrid.org . В этом ролике вам также предложат портал для создания модульной сетки, помогающий работать с версткой.

После того как вы поймете основы, я рекомендую посмотреть ролик о принципах композиции при проектировании сайтов и создании модульной сетки. Здесь вы найдете все необходимые формулы, а также получите целый список профессиональных советов.

Мне очень понравился доклад, здесь вы узнаете про золотое сечение, золотую спираль, принцип масштаба и размера, законы близости, контрастов и многое другое.

В общем все, что необходимо начинающему дизайнеру для создания крутых проектов.

Ну вот, наверное, и все. Напоследок мне бы хотелось посоветовать вам еще одну полезную вещь, это курс « Основы коммерческого веб-дизайна », в котором собраны все полезные советы, которые помогут перейти к от понятий «нравится-не нравится» к созданию продуманных проектов, основанных на знаниях.

Онлайн-курс с поддержкой автора – надежная инвестиция в будущую профессию.

Подписывайтесь на рассылку, чтобы знать больше. До новых встреч и удачи в ваших начинаниях.

Источники:

http://kviter.ru/modulnaya-setka-v-photoshop
http://loftblog.ru/material/modulnye-setki-v-photoshop-2/
http://start-luck.ru/photoshop/modulnaya-setka.html

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector