Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
WEB-дизайн.doc
Скачиваний:
5
Добавлен:
07.07.2019
Размер:
361.98 Кб
Скачать

Колірна модель hsb

Спосіб подання кольору в моделі HSB ґрунтується на базових характеристиках кольору. ♦ Колірний тон (Hue). Колір світла, відбитого від непрозорого об’єкта або такого, що пройшло крізь прозорий об'єкт. Значення колірного тону залежить від позиції кольору в колірному колесі (рис. 1.10) і може змінюватися від 0 до 360°. Кут 0° відповідає червоному кольору, який змінюється за годинниковою стрілкою до жовтого, потім — зеленого, блакитного, синього, пурпурового і знову червоного.

рис. 1.9. Подання колірної моделі HSB

♦   Насиченість (Saturation). Інтенсивність кольору, що визначається як відсоток кольору певного тону відносно вмісту сірого і може змінюватися від О до 100 %. Нульова насиченість відповідає абсолютно сірому кольору. ♦   Яскравість (Brightness). Характеристика (також називається світлістю), що визначає, наскільки світлим чи темним може бути певний колір; цей параметр може змінюватися в діапа­зоні від О до 100 %. Цю модель ще називають HSV, замінюючи останнє слово «Brightness» на «Value».

Напівтонова модель

у напівтоновому малюнку присутній єдиний канал, який може містити до 256 градацій сірого кольору. Кожний піксел характеризується одним параметром — яскравістю, значення якого змінюються від О (чорний колір) до 255 (білий колір). Іноді яскравість вимірюється у відсотках: О — білий, 100 % — чорний. Коли кольорові зображення перетворюються на напівтонові, інформація про колірний тон і насиченість відкидається та залишається лише значення яскравості.

Чорно-біла модель

Чорно-білі (монохромні) малюнки — найпростіші графічні зобра­ження. У такому разі кожний піксел (чорний або білий) задається за допомогою 1 біта, і тому розмір файлу зображення набагато менший, ніж кольорового чи навіть напівтонового зображення з тими самими фізичними розмірами. Адже піксел напівтонового зображення задається з використанням 8 біт, а для опису піксела кольорового потрібно 24 біти. На рис. 1.11 для порівняння показано, який вигляд мають чорно-біле і напівтонове зображення.

2

1 CorelDRAW — найпотужніша сучасна програма, призначена для роботи з векторною графікою.

Corel Draw - це програма, що працює в, так званому, векторному режимі, при якому зображення створюється з окремих простих об’єктів, кожний з яких є самостійною одиницею. Таке зображення можна «розкласти» у будь-який момент часу на безліч простих складових, з яких, власне, і складається кінцевий об’єкт. Цей спосіб зручний тим, що ми можемо працювати з кожною з складових окремо. Наприклад, якщо ми намалюємо три об’єкти - трикутник, круг і прямокутник і розмістимо їх один над іншим, то ми можемо сказати, що кінцевий наш малюнок складається з трьох …

Панель інструментів

Основні інструменти цієї панелі:

  • інструмент Вільна форма - використовується для малювання ліній;

  • інструмент Ламана лініяя - використовується для малювання ліній, замкнених контурів;

  • інструмент Прямокутник - призначений для створення прямокутників та квадратів;

  • інструмент Еліпс - використовується для створення еліпсів і кіл;

  • інструмент Багатокутник - використовується для зображення багатокутників та зірок;

  • інструмент Масштаб - дозволяє збільшувати і зменшувати розміри зображення;

  • інструмент Вказівник - використовується для виділення об'єктів перед їх перетворенням (зафарбуванням, обертанням, переміщенням та ін.) Виділений об'єкт завжди оточений маркувальної рамкою;

  • інструмент Форма - використовується для зміни форми об'єкта. У найпростішому випадку цей інструмент дозволяє округлити кути прямокутника, а також отримати дугу і сектор з еліпса.

2 Дизайн — це творчий метод, процес і результат художньо-технічного проектування промислових виробів, їхніх комплексів і систем, орієнтований на досягнення найповнішої відповідності створюваних об'єктів і середовища загалом і потреб людини, як утилітарних так і естетичних.

Дизайн (англ. design) — задум, план, ціль, намір, творчий задум, проект і креслення, розрахунок, конструкція, ескіз, малюнок, узор, композиція, мистецтво композиції, витвір мистецтва.

Дизайн — специфічний ряд проектної діяльності, що об'єднує художньо-предметне мистецтво і науково обґрунтовану інженерну практику у сфері індустріального виробництва.

Основи web-дизайну сайту закладаються на етапі розробки технічного завдання - документа, що описує вимоги щодо візуального представлення та структури сайту. У технічному завданні також найчастіше описуються побажання щодо програмної реалізації сайту.

Після розробки та затвердження техзавдання починається етап розробки дизайну сайту. І перше, що необхідно зробити - це створити модульну сітку сайту. Модульна сітка описує розташування елементів на сторінках сайту.

Модульна сітка будь-якої web-сторінки містить, як мінімум, два блоки: для основного тесту сайту і для меню. Якщо на сторінці потрібні додаткові елементи, наприклад, ще одне меню, «підвал» («footer») або «хедер» («header»), то модульна сітка розбивається ще на кілька блоків.

Розміри блоків модульної сітки підбираються індивідуально і можуть бути якими завгодно. Проте слід враховувати, що відповідно до вимог юзабіліті, поява горизонтальної смуги прокручування при перегляді сторінки неприпустимо - це негативно позначається на сприйнятті сайту відвідувачами. Тому в сукупності ширина блоків не повинна перевищувати максимальної ширини екранів представників цільової аудиторії сайту.

У блоці «хедер» прийнято вказувати назву сайту, яке може бути вибрано відповідно до назви компанії або ім'ям автора сайту, а також при необхідності логотип сайту. Основний блок меню в європейських сайтах традиційно розташований зліва, відповідно до напряму писемності (зліва-направо). Також основне меню може бути розташоване зверху, під «хедером».

Якщо сайт розрахований для перегляду на екранах з різним дозволом, то web-дизайн, як правило, виконується «гумовим» або ж центрується по горизонталі.

Коли інформаційна модель майбутнього сайту готова, можна братися за художню частину web-дизайну. Зазвичай дизайн сайту виконується у вигляді шаблонів - певних наборів елементів і їх взаємозв'язків. Саме шаблони дозволяють відокремити розробку візуального дизайну сайту від змісту.

Розрізняють шаблон головної і шаблони типових сторінок сайту. Шаблон головної сторінки оформляється, як правило, більш «витіювато», а шаблони решти сторінок сайту лише підтримують основну ідею.

Розроблений в графічному редакторі шаблон верстається у html-файл. За допомогою тегів мови html і таблиць стилів css задаються всі необхідні параметри сторінки: розміщення елементів, колір і розміри шрифтів, колір фону і т.д.

Робота над шаблоном сайту вимагає обов'язкового тесту на крос-браузерності, тобто на сумісність з різними браузерами і їх версіями. Різні браузери можуть по-різному інтерпретувати код html, тому таке тестування необхідне, щоб уникнути можливого «розвалу» дизайну.

Протестований і повністю готовий до роботи дизайн сайту «прикріплюється» до функціональної «канві», створеної веб-програмістами. У разі використання CMS, розроблені шаблони «закачуються» у відповідну папку на сервері - і все, сайт готовий для наповнення.

3

1

Якщо в растровій графіці ( растрова графіка ) базовим елементом зображення є крапка, то у векторній графіці - лінія. Лінія описується математично як єдиний об’єкт, і тому об’єм даних для відображення об’єкту засобами векторної графіки істотно менший, ніж в растровій графіці.

Растрова, векторна і фрактальна графіка Під терміном “графіка” звичайно розуміють результат візуального подання реального або уявного об’єкта, отриманий традиційними методами – малюванням або друкуванням. Комп’ютерна графіка включає методи і засоби створення і обробки зображень за допомогою програмно-апаратних комплексів і охоплює всі види і форми подання зображень, доступних для сприйняття людиною на екрані монітору або в вигляді копії на певному носії. В залежності від способу опису та формування зображення розрізняють растрову, векторну та фрактальну графіку. Історично термін “растр” вказував на те, що пристрій при відтворенні зображення використовує набори пікселів (точок), організовані в вигляді послідовностей рядків розгортки. Растрові дані являють собою набори числових значень, які визначають кольори окремих пікселів, впорядкованих таким чином, щоб їх легко було відобразити на растрових пристроях. Базовим елементом растрової графіки є піксель. Логічні пікселі подібні до математичних точок: вони мають місцеположення, але не займають фізичного простору. Фізичні пікселі – це реальні точки, що відображаються пристроєм виводу. Вони є найменшими фізичними елементами поверхні відображення і займають її певну площу. В зв’язку з цим на відстань між двома сусідніми пікселями вводяться обмеження. Якщо задати пристрою відображення надто високу роздільну здатність (кількість пікселів на одиницю довжини зображення), то якість зображення знизиться із-за накладення або злиття сусідніх пікселів. При надто низькій роздільній здатності пікселі можуть бути розкидані по всій площі пристрою відображення. Таким чином, при відображенні значень логічних пікселів із растрових даних в фізичні пікселі повинні враховуватись реальні розміри і розміщення фізичних пікселів. Розрізняють роздільну здатність оригіналу, екранного та друко¬ваного зображення. Роздільна здатність оригіналу вимірюється в точках на дюйм (dpi) і залежить від вимог до якості зображення, розміру файла, способу оцифровування або методу створення початкової ілюстрації, вибраного формату файла. Підвищення вимог до якості зображення вимагає вищої роздільної здатності оригіналу. Для екранної копії достатньо роздільної здатності 72 dpi, для роздруковування на кольоровому принтері – 150-200 dpi, для виведення на фотоекспонуючий пристрій – 200-300 dpi. Розмір точки растрового зображення залежить від методу і параметрів растрування оригіналу, коли на оригінал як би накладається сітка ліній, комірки якої утворюють елемент растра. Частота сітки растра вимірюється кількістю ліній на дюйм і називається лініатурою (lpi). Розмір точки растра розраховується для кожного елементу і залежить від інтенсивності тону в комірці. Для вищої інтенсивності щільніше заповнюється елемент растра. При раструванні з амплітудною модуляцією ілюзія більш темного тону створюється за рахунок збільшення розмірів точок при однаковій відстані між центрами елементів растра. При раструванні з частотною модуляцією інтенсивність тону регулюється зміною відстані між сусідніми точками однакового (найменшого) розміру. Інтенсивність тону прийнято розділяти на 256 рівнів. Для її відтворення достатньо мати розмір комірки растра 16´16 точок. Растрова графіка використовується в випадках, коли потрібна висока точність в передачі кольорів і напівтонів. Однак при цьому розміри файлів суттєво збільшуються з ростом роздільної здатності (одиниці, десятки і сотні Мбайт). До недоліків растрової графіки, окрім великих розмірів файлів, слід віднести пікселізацію зображень при їх збільшенні та деформацію при зменшенні. В векторній графіці базовим елементом зображення є лінія, яка описується математично як єдиний об’єкт, тому обсяг даних для відображення об’єкта засобами векторної графіки суттєво менший, ніж в растровій графіці. Лінія характеризується формою, товщиною, кольором, типом (суцільна, пунктирна і т.п.). Замкнуті лінії мають властивість заповнення простору, що ними охоплюються, іншими об’єктами або кольором. Найпростіша незамкнута лінія обмежена двома точками, які називаються вузлами, котрі мають властивості, що впливають на форму кінця лінії і характер сполучення з іншими об’єктами. Всі інші об’єкти векторної графіки складаються з ліній. Найпростішими лініями є пряма (нескінченна), відрізок прямої, криві другого порядку (не мають точок згину – параболи, гіперболи, еліпси, кола), криві третього порядку (можуть мати точки згину), криві Безьє (основані на використанні пари дотичних, проведених до відрізка лінії в її кінцях, кути нахилу і довжина яких впливають на форму лінії). Векторна графіка зручна для зберіганні і обробки зображень, що складаються з ліній, або можуть бути розкладені на прості геометричні об’єкти. Векторні дані легко масштабувати та виконувати над ними інші перетворення (наприклад, повертання зображення, додавання, видалення або зміну окремих елементів зображення). Поряд з цим векторні файли важко застосувати для зберігання складних фотореалістичних зображень. Векторні дані краще відображаються на векторних пристроях виводу (плотерах, дисплеях з довільним скануванням). Ефективно векторну графіку можна відобразити тільки на растрових дисплеях з високою роздільною здатністю. Фрактальна графіка, як і векторна, основана на математичних обчисленнях. ЇЇ базовим елементом є математична формула, виключно на основі якої будується зображення. Таким способом будують як найпростіші регулярні структури, так і складні ілюстрації, що імітують природні ландшафти і тривимірні об’єкти.

2Анімацією прийнято називати відтворення руху шляхом відобра¬ження послідовності малюнків кадрів з частотою, при якій забезпечується цілісне зорове сприйняття образів (як правило, для плавного відтворення анімації необхідна швидкість, що забезпечує зміну частоти кадрів не менше 10 кадрів у секунду). Для комп’ютерної анімації частота зміни кадрів за секунду екранного часу складає 10-16, для кінематографа – 24, для системи PAL чи SECAM телемовлення – 25, для системи NTSC телемовлення – 30. Більша кількість кадрів дозволяє домогтися плавних рухів персонажів і появи об'єктів у зображенні в різні моменти часу. При недостатній кількості кадрів стають помітні розходження в послідовних зображеннях об’єктів, що приводить до їх різких переміщень. У традиційній анімації число кадрів прямо залежало від тривалості анімації в секундах. У комп'ютерній анімації на перший план виходить розмір файлу, у якому зберігаються зображення. Тому при створенні комп'ютерної анімації намагаються знайти компроміс між якістю анімації і розміром файлу, що і визначає загальну кількість кадрів анімації. Різниця між анімацією і відео полягає в тому, що відео використовує безупинний рух і розбиває його на множину дискретних кадрів, а анімація використовує множину незалежних малюнків або графічних файлів, що виводяться в певній послідовності для створення ілюзії безупинного руху. Процес створення анімації дуже простий. Фактично він будується на повторенні таких етапів:

  • розміщення об’єктів в заданих точках екрану;

  • відображення об’єктів протягом визначеного проміжку часу;

  • знищення об’єктів.

Комп’ютерна анімація відтворюється за допомогою комп’ютера на екрані комп’ютерного монітора або за допомогою відеомагнітофона на відеомоніторі при попередньому перетворенні за допомогою спеціальних апаратних засобів у відеоформат. Вона є одним з головних елементів мультимедійних проектів і презентацій. Для створення комп’ютерної анімації існує багато різноманітних програмних продуктів. Протягом усього свого існування люди намагалися відобразити відчуття руху у своєму мистецтві, що підтверджується наскельними зображеннями та розписами різних часів і народів (найбільш поширена спроба позначити рух - малюнки тварин, де кількість ніг перевищує справжню, наприклад, малюнок кабана з вісьмома ногами, виявлений у печерах Альтаміра у Північній Іспанії, зображення давньогрецьких колісниць і т. п.). Дійсна анімація не може бути зроблена без розуміння фундаментального принципу роботи людського зору - інертності зорового сприйняття. Вперше цей принцип був продемонстрований у 1828 році французом Паулем Рогетом. З одного боку диску був зображений птах, а з іншого - порожня клітка. Коли диск обертався, птах з’являвся в клітці. Розробка фотокамери і проектора Томасом Едісоном та іншими забезпечило перший реальний практичний спосіб створення анімації. Стюарт Блактон у 1906 році створив короткий фільм “Забавні вирази веселих облич”. Він малював обличчя на дошці, фотографував його і стирав, щоб намалювати наступний вираз обличчя. Уолт Дісней (1901-1966), американський режисер, художник, продюсер (дійсне ім’я - Уолтер Элайос) у 1923 році випускає серію “Аліса в країні мультиплікації”. У 1928 році випускає звуковий мультфільм “Пароплавик Віллі”, де вперше з’являється Міккі Маус. Продовжуючи серію стрічок про мишеня Міккі, Дісней починає роботу над новим циклом “Забавні симфонії”. Один з персонажів - каченя Дональд завойовує ще більшу любов публіки, ніж Міккі Маус. Будучи чудовим художником, Дісней сам знаходить теми і сюжети, пропонує зовнішній вигляд персонажів, придумує оригінальні і смішні трюки, навколо яких і будується дія. Для створення своїх фільмів Дісней використовує 12 основних принципів анімації. Перші експерименти з анімацією в Японії почалися ще в 1913 році, а перші анімаційні фільми з’явилися в 1917 році. Це були маленькі фільми довжиною від однієї до п’яти хвилин, і робилися вони художниками, які пробували відтворювати ранні досвіди американських і європейських мультиплікаторів. Найпершим японським анімаційним фільмом вважається “Новий альбом нарисів” Симокави Декотена. Історія комп’ютерної анімації тісно пов’язана з появою і розвитком спеціалізованих графічних програмних пакетів. Першим кроком в технології візуальних ефектів була, вірогідно, придумана в 1961 році Іваном Сазерлендом система Sketchpad, яка започаткувала еру комп’ютерної графіки. В цій системі за допомогою світлового пера користувачі могли створювати малюнки безпосередньо на екрані монітору. В 1967 році Сазерленд разом з Девідом Евансом розпочали роботу по створенню навчального курсу комп’ютерної графіки. Зріс інтерес до цієї галузі. В університеті штату Юта (США), де були започатковані такі дослідження, в цей час працювали: Джим Кларк – засновник компанії Silicon Graphics Inc., Ед Кетмул – один з піонерів в галузі створення фільмів за допомогою комп’ютера, Джон Вернок – засновник компанії Adobe Systems і розробник таких відомих продуктів, як Photoshop і Postscript. Спочатку об’ємне зображення об’єктів формували на основі набору геометричних фігур (найчастіше трикутників). При цьому геометричні фігури мали однотонну заливку, а об’єкти переднього плану закривали ті, що розміщені на задньому плані. В 1971 році Генрі Гуро запропонував зафарбовувати трикутники з лінійною зміною інтенсивностей між їх вершинами. Це дозволило отримати більш плавну зміну інтенсивностей вздовж поверхні об’єктів. В 1974 році Ед Кетмул запропонував концепцію Z-буфера, що прискорило процес видалення схованих граней. Іншим винаходом Кетмула є накладання текстури на поверхню тривимірних об’єктів, що забезпечує реалістичність цих об’єктів. Ву Тонг Фонг запропонував інтерполювати відтінки всієї поверхні полігону, що забезпечує кращу згладжуваність, хоча і вимагає значно більших обчислень. Джеймс Блінн в 1976 році скомбінував розфарбовування за Фонгом і накладання текстури на поверхню об’єктів. В 1980 році Тернер Уіттед запропонував нову техніку візуалізації (трасування), яка полягає в відслідковуванні шляхів проходження світлових променів від джерела світла до об’єктива камери з врахуванням їх відбиття від об’єктів сцени. В 1986 році фірма AT&T впустила перший пакет для роботи з анімацією на персональних комп’ютерах (TOPAS), який коштував 10000 доларів і працював на комп’ютерах з процесором Intel286 і операційною системою DOS. В 1990 році фірма AutoDesk розпочала продажу продукту 3D Studio. В 1997 році компанія Macromedia придбала у компанії FutureWare невелику графічну програму для Web, з якої була започаткована нині широко відома програма комп’ютерної анімації Macromedia Flash. В 1998 році розпочався випуск додатку Maya, що коштував від 15000 до 30000 доларів.

4

1Adobe Photoshop ([əˈdəubɪ ˈfəutəʃɔp] , Едоубі Фотошоп) — графічний редактор, розроблений і поширюваний фірмою Adobe Systems. Цей продукт є лідером ринку в області комерційних засобів редагування растрових зображень, і найбільш відомим продуктом фірми Adobe. Часто цю програму називають просто Photoshop (Фотошоп). В даний час Photoshop доступний на платформах Mac OS X/Mac OS і Microsoft Windows. Ранні версії редактора були портовані під SGI IRIX, але офіційна підтримка була припинена, починаючи з третьої версії продукту. Для версії CS 2 можливий запуск під Linux за допомогою альтернативи Windows API — Wine 0.9.54 і вище.

5

1Blender — пакет зі створення 3D-графіки, що містить засоби моделювання, анімації, рендеринґу…

G oogle SketchUp — програма для 3D моделювання, створена для архітекторів, інженерів, дизайнерів ігор і т.д.

S weet Home 3D - зручна безкоштовна програма для створення дизайну інтер'єру, з можливістю його перегляду в 3D.

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

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

7

1RGB (скорочено від англ. Red, Green, Blue — червоний, зелений, синій) — адитивна колірна модель, що описує спосіб синтезу кольору, за якого червоне, зелене та синє світло накладаються разом, змішуючись у різноманітні кольори. Широко застосовується в техніці для відображення зображення за допомогою випромінення світла.

У даній моделі колір кодуєтся градаціями складових каналів (Red, Green, Blue). Тому за збільшення величини градації котрогось каналу — зростає його інтенсивність під час синтезу.

Кількість градацій кожного каналу залежить від бітового значення RGB. Зазвичай використовують 24-х бітну модель, у котрій визначаєтся по 8 біт на кожен канал, і тому кількість градацій дорівнює 255, що дозволяє закодувати 2553=16.5 млн. кольорів.

Колірна модель RGB призначена сприймати, представляти та відображати зображення в електронних системах, таких як телебачення та комп'ютери, хоча її також застосовували у традиційній фотографії. Вже до електронного віку, модель RGB мала за собою серйозну теорію, засновану на сприйнятті кольорів людиною.

RGB — апаратно-залежний простір кольорів

CMYK (Cyan, Magenta, Yellow, Key color) — субтрактивна колірна модель, використовується у поліграфії, перш за все при багатофарбовому (повноколірному) друці. Вона застосовується у друкарських машинах і кольорових принтерах.

Українською перші три кольори називають так: блакитний, пурпуровий, жовтий; але професіонали мають на увазі ціан, маджента і жовтий (про значення K див. далі). Ці кольори візуально не ідентичні із загальноприйнятими назвами кольорів. Так, маджента — це лише один з пурпурових відтінків; жовтий і блакитний — абсолютно певні відтінки, а не цілі діапазони, як у веселці.

Lab - система задання кольорів, що використовує як параметри світлосилу, відношення зеленого до червоного та відношення синього до жовтого. Ці три параметри утворюють тривимірний простір, точки якого відповідають певним кольорам.

Колірна модель L*a*b розроблялась як апаратно-незалежна, тобто вона задає кольори без врахування особливостей відтворення кольорів. Має три параметри для опису кольору: світлосилою L (англ. Lightness) і двома хроматичними параметрами. Перший (умовно позначений латинською буквою a) вказує на співвідношення зеленої і червоної складової кольору, другий (позначений буквою b) — співвідношення синьої і жовтої складової.

HSB — колірна модель, що використовується тільки для оформлення векторних і текстових об'єктів документа. Описує кольоровий простір, заснований на трьох характеристиках кольору: кольоровому тоні (Hue), насиченості (Saturation) і яскравості (Brightness).

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]