Як намалювати шаблон для сайту

Створення власного шаблону не є такою вже важким завданням, як може здатися на перший погляд. Для роботи вам буде потрібно програма Adobe Photoshop - зрозуміло, необхідно мати хоча б основні уявлення про роботу з нею. Але до того, як запустити програму і почати творити, необхідно заздалегідь продумати майбутній дизайн. Найзручніше це робити так: спочатку познайомтеся хоча б з сотнею готових шаблонів, оцініть їх переваги і недоліки. Звертайте увагу на вдалі рішення тих чи інших елементів дизайну. Це не означає, що ви будете їх копіювати, але взяти якісь красиві і зручні рішення за основу цілком розумно.

На основі аналізу чужих шаблонів і власної творчості ви повинні скласти уявлення про те, як буде виглядати ваш сайт. Зразкові начерки майбутнього дизайну найкраще робити кольоровими олівцями на звичайних аркушах формату А4. Приступати до роботи з Фотошопом слід тільки після того, як ви будете чітко уявляти, що саме вам належить намалювати.

Запустіть Фотошоп, створіть новий проект розміром 1200х1600, встановіть прозорий фон. Включіть інструмент «Лінійка», якщо він ще не включений, для цього натисніть комбінацію клавіш Ctrl + R. Увімкніть прив`язку: «Перегляд» - «Прив`язка».

Тепер треба розділити шаблон напрямними, які будуть показувати кордону його елементів - бічних сторін, колонок і т.д. Наприклад, ви хочете так розділити шаблон, щоб зліва була вузька колонка, праворуч - широка до правого краю шаблона, а вгорі було місце для шапки. Значить, вам знадобиться три вертикальні лінії (ліва межа шаблону, права і лінія між ними) і горизонтальна, що показує нижню межу шапки. Щоб встановити вертикальну лінію, підведіть курсор до лівої лінійці з лівого боку, натисніть V і, утримуючи клавішу, перетягніть лінію в потрібне місце. Так само поступите з двома іншими вертикальними лініями. Горизонтальні будуються аналогічно, тільки використовується верхня лінійка.

Знайдіть фон для вашого шаблону, це повинна бути невелика картинка з малюнком, що повторюється. Відкрийте її в Фотошопі, виділіть, скопіюйте. Після цього вставте в шаблон стільки разів, скільки знадобиться для його заповнення фоном. Вставка проводиться так: «Редагування» - «Вставити», після чого перетягує ділянку фону в потрібне місце. Ще швидше вставляти зображення командою Ctrl + V. Точно так же додайте фон для шапки сайту. Ви можете використовувати для створення фону і різні градієнтні заливки.

За допомогою інструменту «Олівець» проведіть кордону шаблону, орієнтуючись на вже проведені лінії (тобто поверх них). Ви отримали основу найпростішого шаблона, тепер треба доповнити її потрібними деталями - кнопками навігації, рядками меню, різними декоративними елементами і т.д. Про те, як створювати кнопки та інші елементи, краще прочитати у відповідних статтях, присвячених роботі з Adobe Photoshop.

Шаблон створений, тепер необхідно розрізати його на шматочки для їх вставки в html-сторінку. Для розрізання скористайтеся інструментом «Раскройка» (Slice Tool). Щоб знайти його, клацніть правою кнопкою мишки інструмент «Рамка» і виберіть у меню «розкрою». Тепер ви можете розкроїти шаблон потрібним чином, потім зберегти: «Файл» - «Зберегти для Web». У вікні, виберіть тип файлів: HTMLimages, вкажіть ім`я файлу: index.htm і збережіть його. У вас з`являться файл index.htm і папка images з нарізаними зображеннями.