Как се правят модулни решетки

Съдържание:

Как се правят модулни решетки
Как се правят модулни решетки

Видео: Как се правят модулни решетки

Видео: Как се правят модулни решетки
Видео: Модульный пол в гараже 2024, Може
Anonim

Удобно е да използвате модулни решетки, когато разработвате дизайн или създавате сложно изображение. Те служат като основа на композицията, разделяйки листа на определен брой вертикални и хоризонтални стъпки с еднакви или различни разстояния.

Как се правят модулни решетки
Как се правят модулни решетки

Необходимо

Abode Photoshop програма

Инструкции

Етап 1

Всички съвременни графични редактори и програми за уеб дизайн имат вградени модулни мрежи. Ако работите в Adobe Photoshop, включете дисплея на мрежата за лесно подреждане на обектите на изображението и точното им разположение върху листа. За да направите това, отидете на елемента от менюто Редактиране и преместете мишката над надписа Предпочитание. В менюто, което се показва, изберете елемента Guides, Grid & Slices (в зависимост от версията на програмата, този елемент може да има различни имена, изберете думата Grid).

Стъпка 2

В прозореца за настройки, който се отваря, задайте параметрите на модулната мрежа. В областта на мрежата изберете цвета на линиите, които образуват елементите на мрежата, и разстоянието между редовете. Щракнете върху "OK" и проверете как направените промени ще повлияят на външния вид на изображението. В средата за уеб разработка на Adobe DreamWeaver мрежата е включена по подразбиране в оформлението на страницата, която разработвате.

Стъпка 3

Можете да добавяте различни таблици (елементи на мрежата) с произволен набор от редове и колони, като използвате елемента Вмъкване на таблица, както и да вмъквате нови таблици в клетки, като по този начин създавате сложна мрежа за изграждане на елементи на страница.

Стъпка 4

Можете да създадете модулна мрежа ръчно, като използвате CSS стилове. За целта използвайте инструментите #grid, Gridmaker, CSS Grid Builder, 1 KB CSS Grid, Gridr Buildrrr и други модули. Например, следният кодов фрагмент създава мрежа от четири модула с дадена ширина:.page-layout {margin-right: -5px; }.layout-box {float: left; марж: 0 5px 5px 0; }.lb-1 {ширина: 779px; } / * 100% * /. Lb-2 {ширина: 583px; } / * 75% * /. Lb-3 {ширина: 387px; } / * 50% * /. Lb-4 {ширина: 191px; } / * 25% * /

Стъпка 5

Наличието на модулна мрежа улеснява както начинаещите дизайнери, така и уеб разработчиците, както и опитни майстори в тази област. Проектите, създадени на базата на модулна мрежа, са лесни за редактиране и прехвърляне, което е много удобно за големи обеми работа. Можете също така да спрете работата по всяко време и да продължите да използвате записания файл.

Препоръчано: