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

У мережі існує величезна кількість шаблонів для сайтів, але у них є один недолік - вони не є унікальними. Якщо власник сайту не хоче, щоб дизайн його сайту повторювався десь ще, він може замовити шаблон у професійного дизайнера або спробувати створити його самостійно.
Вам знадобиться
  • - програма Adobe Photoshop.
Інструкція
1
Створення власного шаблону не є такою вже важким завданням, як може здатися на перший погляд. Для роботи вам потрібна програма Adobe Photoshop - зрозуміло, необхідно мати хоча б основні уявлення про роботу з нею. Але до того, як запустити програму і почати творити, необхідно заздалегідь продумати майбутній дизайн. Найзручніше це робити так: спочатку познайомтеся хоча б з сотнею готових шаблонів, оцініть їх переваги і недоліки. Звертайте увагу на вдалі рішення тих чи інших елементів дизайну. Це не означає, що ви будете їх копіювати, але взяти якісь красиві і зручні рішення за основу цілком розумно.
2
На основі аналізу чужих шаблонів і власної творчості ви повинні скласти уявлення про те, як виглядатиме ваш сайт. Зразкові начерки майбутнього дизайну найкраще робити кольоровими олівцями на звичайних аркушах формату А4. Приступати до роботи з Фотошопом слід тільки після того, як ви будете чітко уявляти, що саме вам належить намалювати.
3
Запустіть Фотошоп, створіть новий проект розміром 1200х1600, встановіть прозорий фон. Включіть інструмент «Лінійка», якщо він ще не включений, для цього натисніть комбінацію клавіш Ctrl + R. Увімкніть прив'язку: «Перегляд» - «Прив'язка».
4
Тепер треба розділити шаблон напрямними, які будуть показувати межі його елементів - бічних сторін, колонок і т.д. Наприклад, ви хочете так розділити шаблон, щоб зліва була вузька колонка, праворуч - широка до правого краю шаблону, а вгорі було місце для шапки. Значить, вам знадобиться три вертикальні лінії (ліва межа шаблону, права і лінія між ними) і горизонтальна, що показує нижню межу шапки. Щоб встановити вертикальну лінію, підведіть курсор до лівої лінійці з лівої сторони, натисніть V і, утримуючи клавішу, перетягніть лінію в потрібне місце. Так само поступите з двома іншими вертикальними лініями. Горизонтальні будуються аналогічно, тільки використовується верхня лінійка.
5
Знайдіть фон для вашого шаблону, це повинна бути невелика картинка з повторюваним малюнком. Відкрийте її в Фотошопі, виділіть, скопіюйте. Після цього вставте в шаблон стільки разів, скільки знадобиться для його заповнення фоном. Вставка проводиться так: «Редагування» - «Вставити», після чого перетягує ділянку фону в потрібне місце. Ще швидше вставляти зображення командою Ctrl + V. Точно так само додайте фон для шапки сайту. Ви можете використовувати для створення фону і різні градієнтні заливки.
6
За допомогою інструменту «Олівець» проведіть кордону шаблону, орієнтуючись на вже проведені лінії (тобто поверх них). Ви отримали основу найпростішого шаблона, тепер треба доповнити її потрібними деталями - кнопками навігації, рядками меню, різними прикрашають елементами і т.д. Про те, як створювати кнопки та інші елементи, краще прочитати у відповідних статтях, присвячених роботі з Adobe Photoshop.
7
Шаблон створений, тепер необхідно розрізати його на шматочки для їх вставки в html-сторінку. Для розрізання скористайтеся інструментом «Раскройка» (Slice Tool). Щоб знайти його, клацніть правою кнопкою мишки інструмент «Рамка» і виберіть в меню «раскройка». Тепер ви можете розкроїти шаблон потрібним чином, потім зберегти: «Файл» - «Зберегти для Web». У вікні, виберіть тип файлів: HTML & images, вкажіть ім'я файлу: index.htm і збережіть його. У вас з'являться файл index.htm і папка images з нарізаними зображеннями.
По одягу зустрічають не тільки людей, але і сайти. Одягом сайту є його дизайн. Якісний і привабливий дизайн ресурсу справляє сприятливе враження на користувачів, забезпечуючи тим самим їх лояльність і готовність приділити свій час подальшого перегляду. Крім якості важлива оригінальність і унікальність дизайн а. За'їжджена теми відштовхують відвідувачів. Але розробка унікального дизайн а коштує дорого. Саме тому багато початківці web-майстри задаються питанням про те, як намалювати дизайн сайту власними руками.
Вам знадобиться
  • - олівець;
  • - аркуш паперу;
  • - редактор растрової графіки GIMP або Photoshop;
  • - опціонально: редактор векторної графіки (наприклад, CorelDraw) ;
  • - опціонально: середа 3D-моделювання (3DStudio, Blender);
  • - сучасний браузер;
  • - доступ в інтернет.
Інструкція
1
Розробіть концепцію дизайн а сайту . Визначтеся зі стилем, колірною схемою, компонуванням сторінок (розміром шапки сайту , розташуванням меню, блоків тексту, зображень). Добре, якщо в основі концепції дизайн а будуть лежати оригінальні ідеї. Але при їх нестачі можна черпати натхнення в ході аналізу вже існуючих рішень. Наприклад, переглядаючи каталоги тем оформлення популярних CMS. Результатом роботи може стати ескіз сторінки сайту , виконаний олівцем на аркуші паперу із зазначенням зон фіксованих і варіюються розмірів.
2
Створіть заготовку шаблону сторінки сайту в редакторі растрової графіки. У графічному редакторі відкрийте новий документ. Розміри документа повинні бути набагато більше мінімальних розмірів сторінки як по горизонталі (навіть якщо не передбачається створювати "гумовий" дизайн), так і по вертикалі. Додайте новий прозорий шар. У доданому шарі лініями товщиною в 1 піксель Вичертите зображення шаблону сторінки з дотриманням реальних розмірів елементів. Для дизайн а сторінок фіксованої ширини позначте крайові області, які будуть заповнені кольором фону.
3
Завантажте з інтернету або розробіть самостійно елементи дизайн а сторінок. Логотип та унікальні елементи дизайн а можуть бути створені в середовищі 3D-моделювання, векторному або растровому редакторі. Тематичні зображення високого дозволу у великій кількості містяться в безкоштовних інтернет-фотобанках. Існують в інтернеті і безкоштовні колекції ікон, які можна вільно використовувати у своїх проектах.
4
Намалюйте дизайн сайту . У документ, що містить заготовку шаблону сторінки сайту в графічному редакторі, додайте прозорі шари. Виділіть і залийте в них області, відповідні фону сторінки. Заповніть області з градієнтної заливкою і періодичними текстурами. Вставте логотип, статичні зображення, іконки. Окресліть межі блоків. Додайте текст. Кожен закінчений елемент дизайн а, статичне зображення і логотип розміщуйте в окремий шар. Переміщайте зображення в шарах для того, щоб домогтися необхідної компонування.
5
Збережіть робочий "исходник" дизайн а сайту в "рідному" форматі графічного редактора. Це дозволить повернутися згодом до його редагування.
Корисна порада
Розробіть і збережіть у вигляді окремих зображень типові елементи дизайну сайту (наприклад, меню, текстові блоки) для їх багаторазового використання в шаблоні.