Хто розбирається в розробці веб-сайтів, знає, що зазвичай це не починається з HTML-структури. Натомість беруть графічну програму та створюють там макет сторінки. (Той, хто працює в агентстві, отримує макет від графіка або замовника). Потім завданням є побудова сторінки з цього макету. Саме про це зараз і піде мова.
У контексті реконструкції макетів ви постійно зустрінете терміни Slicing та Dicing. Нічого складного вони не означають, крім того, що ви берете шаблон або дизайн, розрізаєте його у графічній програмі та знову складаєте за допомогою HTML.
Правильна графічна програма
Так от, у кожного свої уподобання стосовно програмного забезпечення, яке вони використовують. Так само і з графічними програмами. У контексті професійного веб-дизайну все ж таки виглядає трохи по-іншому. Там практично використовується лише Photoshop. Фактично, більшість дизайнерських проєктів існують у форматі PSD. І саме цей формат PSD не вдається відкрити або редагувати у всіх програмах.
Якщо у вас немає Photoshop, ви не зовсім безпомічні. Одним з можливих варіантів є GIMP. Цю програму ви можете завантажити безкоштовно на веб-сайті http://www.gimp.org/. Я покажу вам основні кроки створення макету за допомогою GIMP. Це працює дуже подібно і в Photoshop.
Створення власного макету
Спершу ви визначаєте основні аспекти дизайну:
• Яка ширина має бути у макеті?
• Скільки колонок має бути включено?
Потім створюєте робочу область через Файл>Новий та встановлюєте розмір. Хоча створений мною макет буде "на всю сторінку", сам вміст має ширину 1000 пікселів. Я встановлюю висоту макету на 887 пікселів. (При цьому висота веб-сторінки пізніше все ж зорієнтована на вміст).
Клікнувши OK, ви підтверджуєте вказані дані. Тепер у вас є робоча область, яку можна заповнювати вмістом. (Для зручності в дизайні я працюю з використанням сірого фону. На веб-сайті його буде невидимо).
Типовим елементом, який має бути на веб-сайті, є логотип, який зазвичай представлений у вигляді графіки. Щоб вставити його в макет, вибирайте Файл>Відкрити та оберіть свій логотип у форматах PNG, GIF або JPEG. Підтвердьте вибір за допомогою Відкрити. Тепер натисніть Ctrl+C, щоб скопіювати логотип у буфер обміну. Далі перейдіть до самого веб-дизайну та натисніть Ctrl+V. Вставлений логотип поки що не буде в потрібному місці. Проте, ви можете легко перетягнути його на правильну позицію за допомогою Інструменту переміщення.
Якщо зображення не перетягується, спочатку активуйте шар. Відповідні налаштування можна знайти у меню Вікно>Прикріплені діалоги>Шари.
Для кращого розміщення можна включити Лінії допомоги. Для цього клацніть на Лінійки за допомогою миші та перетягніть їх з натиснутою лівою кнопкою миші у потрібне положення.
Таким чином можна створювати будь-яку кількість ліній допомоги, за якими можна вирівнювати елементи веб-сайту.
Тепер створіть інший шар. Цей шар повинен містити вверхнє меню.
Як ім'я можна вказати Верхнє меню. Створіть шар з OK. Виберіть Прямокутне виділення та виберіть область, в яку потрібно вставити навігацію.
В моєму поточному прикладі я передбачаю, що фон верхнього меню має градієнт. Щоб це зробити, клікніть на Градієнт: Виділення градієнтом (заповнення).
Градієнт має переходити від сірого до чорного. Відповідні кольори можна налаштувати через Кольорові поля. Я вибрав тип градієнта ВГ за ГГ, тобто від переднього- до фонового кольору. Тримаючи натиснутою кнопку Ctrl, прокладіть лінію вибраної області зверху донизу. Коли кнопку лівої кнопки миші відпустять, область матиме бажаний градієнт.
Загалом у вас є два варіанти:
• Залишити область для навігації без змін.
• Додати окремі пункти меню, щоб вже на ескізі можна було точніше побачити, які шрифти ви використовуєте тощо.
Який із цих двох варіантів обрати, залишається на ваш розсуд. Проте, якщо ви хочете, наприклад, продемонструвати макет замовнику, я обов'язково рекомендую додати пункти меню. Досвід показує, що багатьом клієнтам не вистачає уяви тут.
Спочатку вам потрібно вибрати Шрифт. У GIMP ви знайдете відповідні налаштування в меню Вікно>Прикріплювані діалоги>Шрифти.
У цьому циклі вже говорилося про проблему шрифтів у контексті CSS і HTML. Теоретично веб-дизайнер може вказати будь-який шрифт. Проте ви не знаєте, чи цей шрифт є на комп'ютері відвідувача сторінки і може відображатися, тож результати, особливо якщо ви використовуєте дуже екзотичні шрифти, важко контролювати. Проте я буду знову звертатися до цього аспекту на протязі цього циклу, коли буде мова про шрифти на прикладному веб-сайті. Принамі щодо поточного макету я вибрав такі налаштування:
• Verdana bold
• 20 пікселів
• Білий колір шрифту
Ви можете вставити окремі пункти меню таким чином. Найкраще скопіюйте рівень, в якому міститься перший пункт меню, і вставте його як новий рівень. Потім ви можете налаштувати текст рівня. Створіть верхнє меню.
Верхнє меню повинно отримати ефект при наведенні. Якщо ви наведете вказівник миші на окремі пункти меню, зміниться їх фоновий колір. Цей аспект також має бути візуалізований у макеті. Для цього встановіть бажаний колір для наведення та скопіюйте один з наявних рівнів меню. Призначте цей колір цьому рівню. У поточному прикладі я передбачаю синю палітру кольорів. Потім вставте текст пункту меню. Так ви зможете відчути, як врешті-решт виглядатиме меню.
