Вам понадобится
  • - программа Abode Photoshop.
Инструкция
1
Все современные графические редакторы, а также программы разработки веб-дизайна имеют встроенные модульные сетки. Если вы работаете в программе Adobe Photoshop, для удобства компоновки объектов изображения и точного их размещения на листе включите отображение сетки. Для этого зайдите в пункт меню Edit и наведите мышь на надпись Preference. В отобразившемся меню выберите пункт Guides, Grid & Slices (в зависимости от версии программы данный пункт может называться по-разному, выбирайте по слову Grid).
2
В открывшемся окне настройки задайте параметры модульной сетки. В области Grid выберите цвет линий, образующие элементы сетки и шаг линий. Нажмите «Ок», и проверьте, как принятые изменения повлияют на вид изображения. В среде разработки веб-проектов Adobe DreamWeaver модульная сетка включена по умолчанию в макет разрабатываемой страницы.
3
Вы можете добавлять различные таблицы (элементы сетки) с любым набором строк и столбцов с помощью пункта Insert Table, а также вставлять новые таблицы в ячейки, создавая тем самым сложную сеть для построения элементов страницы.
4
Вы можете создать модульную сетку вручную, используя стили CSS. Для этого воспользуйтесь инструментами #grid, Gridmaker, CSS Grid Builder, 1 KB CSS Grid, Gridr Buildrrr и другими модулями. Например, следующий фрагмент кода создает сетку из четырех модулей заданной ширины:.page-layout { margin-right: -5px; }.layout-box { float: left; margin: 0 5px 5px 0; }.lb-1 { width: 779px; } /* 100% */.lb-2 { width: 583px; } /* 75% */.lb-3 { width: 387px; } /* 50% */.lb-4 { width: 191px; } /* 25% */
5
Наличие модульной сетки облегчает работу как начинающим дизайнерам и веб-разработчикам, так и опытным мастерам в этой области. Созданные на основе модульной сетки проекты легко редактировать и переносить, что весьма удобно при больших объемах работы. Вы также сможете в любое время остановить работу и продолжить при помощи сохраненного файла.