Модульна сітка - хорошу додаткову «пристосування» для вирівнювання і позиціонування елементів, розміщених на майбутній веб сторінці. Перед початком роботи над макетом сторінки я завжди роблю модульну сітку «персонально» для кожного проекту виходячи з ширини майбутньої сторінки.
В інтернеті існує безліч різних сервісів по створенню модульних сіток. Так само досить плагінів для фотошоп завдяки яким можна зробити такі сітки. Однак я не бачу сенсу в їх використанні так як завдання це вирішується буквально в два дії.
Зробити її зовсім не складно, проте її наявність багато в чому полегшує роботу над макетом в подальшому. Можна звичайно використовувати для вирівнювання і стандартну сітку фотошопа так само як це робилося при створенні іконок для блогу. Але це не завжди зручно, так як така сітка не має проміжків між модулями як власне і самих модулів, вона являє собою набір розділених на рівні частини квадратних осередків.
Орієнтуватися по ній буде не дуже зручно, тому що доведеться постійно відраховувати відстань між елементами дизайну, так і потрапити чітко на межі комірок сітки навряд чи вийде.
Модульна сітка позбавлена цих недоліків, і складається з розділених з певним кроком один то одного модулів, що дозволяє при роботі нормально позиціонувати елементи, не замислюючись про відстані між ними.
Побудова модульної сітки в фотошопі
І так давайте приступимо до побудови модульної сітки. Для початку я створюю файл в фотошопі рівний по ширині майбутньої частині сторінки з контентом. У моєму випадку це ширина дорівнює 1180 пикселям, значення висоти на цьому етапі не важлива, так як її я буду збільшувати в міру роботи над сторінкою.
Після створення файлу потрібно зробити деякі математичні розрахунки. Я планую зробити модулі для сітки рівними 80 пікселям і проміжки між ними рівними 20 пикселям підсумовуючи ці значення, отримаємо 100 пікселів. Далі розділивши, загальну шину 1180 пікселів на 100 отримаю кількість вертикальних модулів сітки 12 штук.
Що б намалювати модулі можна скористатися інструментом прямокутник (1) параметри налаштування для цього інструменту, такі: як заливки виберу червоний колір (можна вибрати колір з панелі «Зразки» доданий туди при виборі квітів для блогу (2). Обводка фігури відсутня (3 ) в якості розміру фігури виберу значення 80х80 пікселів (4).
Тепер намалюю фігуру на новому шарі (1), потрібно вирівняти цей шар з фігурою щодо фонового шару по лівому краю. Зробити це можна скориставшись інструментами вирівнювання програми. У палітрі шари виділимо обидва шару фоновий і шар з прямокутником (2) при активному інструменті «Переміщення» (3) використовую кнопку (4) тепер шар з прямокутником вирівняний по краю документа.
Далі потрібно зробити 11 дублікатів шару з фігурою, для цього можна скористатися комбінацією клавіш (Ctrl + J). У палітрі "Шари" вибираю шар з прямокутником (1) і одинадцять раз використовую комбінацію (Ctrl + J) (2).
Далі треба розподілити рівномірно всі фігури по ширині документа. Зробивши активним верхній шар з фігурою (1) і фоновий шар потрібно перемістити його на правий край зробити це найпростіше за допомогою клавіші (2) на панелі параметрів інструмента переміщення. Тепер розподіляю рівномірно всі верстви з прямокутниками. У палітрі "Шари", утримуючи клавішу (Shift) потрібно клікнути по останньому і першому шару з прямокутниками (3), і скористатися клавішею (4) тепер всі верстви рівномірно розподілені по документу (5).
У мене практично вийшла вертикальна сітка з модулями рівним по ширині 80 пікселям і проміжками між модулями в 20 пікселів.
Погодьтеся, працювати з п'ятнадцятьма шарами сітки не зовсім зручно потрібно склеїти всі верстви в один, але при цьому повинна бути збережена можливість редагувати фігури, з яких вона складається. Для цього не знімаючи виділення з шарів утворюють сітку потрібно клікнути по ним правою кнопкою миші і вибрати пункт (1). В результаті отримую один шар з п'ятнадцятьма фігурами (2).
Тепер потрібно дати цій верстві нормальну назву «сітка» і використовуючи параметр «непрозорість шару» освітлити фігури так щоб можна було побачити шари які будуть лежати під шаром з сіткою.
Робота над сіткою практично завершена отриману сітку можна трансформувати по висоті документа за допомогою комбінації клавіш (Ctrl + T).
У подальших постах я розповім як використовувати ці напрацювання в роботі над блогом, а темою наступної статті стане питання оптимізації зображень у форматі gif. далі попрацюємо з форматом jpg і png оптимізацією. Так як правильна оптимізація зображень є невід'ємною частиною роботи над сайтом або блогом, а правильна SEO оптимізація зображень заставу їх появи у видачі пошукових систем отже залучення нових відвідувачів на ваш ресурс.