Тема 5. Основи Web-дизайну

План лекції

1. Web-графіка. Графічні формати файлів, їх призначення властивості та відмінності.

2. Оформлення Web-сторінки. Типи фонів. Текстури. Правила підбору фонів.

3. Логотип.

4. Шрифт і текст у Web-дизайні.

5. Кольорове коло. Системи представлення кольорів. Підбір контрастних, сумісних, нюансових кольорів.Психологічні аспекти сприйняття кольору. Текст і фон.

Ключові слова: векторна графіка, растрова графіка, графічні формати файлів, Graphics Interchange Format, Joint Potographic Experts Group, Portable Network Graphics, Web-графіка, Portable Document Format; формат документів, що переноситься; фон, логотип, рублений шрифт, шрифт із засічками, кольорове коло, кольорова модель HSB, кольорова модель RGB, контрасні кольори, гармонійні кольори, нюансові кольори.

Список рекомендованої літератури

1. Вен Д. Искусство web-дизайна: Самоучитель.- СПб.: Питер, 2002.-224с: ил.

2. Гультяев А.К. WEB-дизайн от MACROMEDIA: Практическое пособие.- СПб.: КОРОНА принт, 2001.- 480с: ил.

3. Каллахан I. Ваша Web-страница. Проблемы и решения: Практ, пособие.- Пер. с англ.- М: ЭКОМ, 2002.- 432с: ил.

4. Кирсанов Д. WEB-дизайн: кника Дмитрия Кирсанова.-СПб: Символ-Плюс, 1999 - 376 с: цв. ил.

5. Федорчук А. Как создаются Web-сайты: краткий курс- СПб: Питер, 2000.- 224с: ил.

6. http://www.webmasterpro.com.ua/.

1. Веб-графїка. Графічні, фермати файлів, їх призначення, властивості

та відмінності

Усі комп'ютерні зображення, формати для їх збереження та програми для їх обробки поділяються на векторні та растрові.

Векторна графіка імітує сприйняття зображень людиною; растровий формат зберігає графіку у вигляді більш зручному для обробки комп'ютером. Векторна графіка у більшості створюється людиною від початку до кінця у векторному редакторі. Векторне зображення складається з об'єктів - геометричних форм, що складаються з прямих, дуг кола, кривих Безьє. Приклади векторних зображень із схожими складовими елементами представлені у Додатку І. У всіх векторних форматах об'єкти можуть змінювати товщину та колір контуру, а замкнені об'єкти - ще й колір заливки. Об'єкти можуть накладатись, частково або повністю закриваючи один одного. В якості окремих об'єктів можуть включатись растрові зображення та рядки або абзаци тексту (додаток 2).

У векторному зображенні завжди зберігається незалежність окремих об'єктів, тому таке зображення можна змінювати нескінченно та бет втрати початкової інформації. Практичною перевагою вектору є невеликий об'єм файлів (у порівнянні з растровими зображеннями) та незалежність від дозволяючої здатності пристрою виведення. *fl*W

Прикладами векторних форматів, які використовуються у Internet, є Shockware Flash фірми Macromedia (великі інтерактивні та анімаційні можливості, підтримка гіпертекстових посилань), для статичних текстових документів популярним є формат PDF (Portable Document Format, „Формат документів, що переноситься") фірми Adobe. Мова VRML (Virtual Reality Modelling Language, "Мова моделювання віртуальної реальності") є трьохвимірним форматом.

У растровому (bitmap) представленні графіки допускається один об'єкт - піксел. У растрі окремі піксели утворюють цільний малюнок. Прикладом растрового зображення може бути звичайна фотокартка (додаток 3).

Технологічний ланцюжок виробництва графіки зазвичай включає три етапи: створення графічних елементів у векторному редакторі; експорт у повнокольоровий растровий формат; оптимізацію отриманої графіки з одночасним переводом її у формат з обмеженою кольоровістю (GIF - Graphics Interchange Format - формат графічного обміну) або у формат, що реалізує стиснення з витратами (JPEG - Joint Potographic Experts Group — Об'єднана група експертів фотографії). Під оптимізацією графіки розуміють пошук компромісу між її якістю й об'ємом файлу. Іноді між другим і третім етапами на зображення накладаються специфічні растрові ефекти (наприклад, тіні або розмивки); у інших випадках, навпаки другий етап може бути відсутнім взагалі, якщо векторна програма здатна експортувати графіку зразу у GIF або JPEG. Іноді за вхідне вибирається одразу растрове зображення.

JPEG. Формат JPEG оптимально підходить для збереження фотокарток та інших растрових зображень, що характеризуються неперервністю напівтонів (повнокольорових зображень), це дозволяє використовувати до 16 млн відтінків. Формат JPEG підтримує інформацію про колір, але при цьому використовує схему стискування з втратою якості, тобто можна задавати й зменшувати розмір файлу ціною втрати якості. Якщо зображення у форматі JPEG призначається для публікації у WEB, необхідно працювати з ним, наприклад, у Photoshop у режимі RGB, після чого кінцевий варіант зображення зберегти у формати JPEG. Стиснення графіки у форматі JPEG визначається рівнем якості (quality), який вимірюється у відносних одиницях - від 0 (максимальне стиснення) до 100 (максимальна якість). Більшість JPEG-файлів зберігаються з рівнем якості у діапазоні від 50 до 100.

GIF. В форматі GIF максимальна кількість відтінків, що передаються, дорівнює 256 (у Web-оглядачах - 216), він не застосовується для збереження повнокольорових зображень, але є оптимальним для збереження рисунків, емблем та інших зображень з обмеженою кількістю відтінків. Формат GIF дозволяє зберігати зображення з прозорим фоном, що є корисним для створення кнопок та інших подібних елементів Web-сторінок. Із зображень у форматі GIF можна створювати анімацію. Ступінь стиснення у GIF регулюється рядом параметрів, найважливішим із яких є кількість кольорів або розмір палітри.

Розроблений нещодавно формат PNG (Portable Network Graphics) реалізує більш ефективне, ніж GIF стиснення без втрат, при цьому може зберігати не тільки графіку з фіксованою палітрою, але й повнокольорові зображення з трьома байтами на піксел. Цей формат має багато інших переваг, завдяки яким він, ймовірно, замінить GIF одразу ж, як тільки його підтримка з'явиться у розповсюджених графічних оглядачах.

Для збереження рисунків та інших зображень з обмеженою

кількістю кольорів (менше 216 відтінків) використовуйте формат GIF або

PNG-8. Для збереження фотокарток й повнокольорових зображень

використовуйте формат JPEG або PNG-24. Бажано, щоб об'єм зображень

на Web-сторінці не перевищував ЗО КБайт. ' .г->