Issuu

УДК 72.012(075.3) ББК 30.18 я721 0-75 Рекомендовано М іністерством освіти і науки України (ли ст від 7 липня 2010 р. № 1.4/18-2767)

Видано державним коштом. Продаж заборонено Психолого-ледагогічну експертизу підручника проводив Інститут педагогіки Національної академії педагогічних наук України

Експертизу підручника здійснювали: Довдер В. О., Херсонський міжшкільний навчально-виробничий комбінат, вчитель, старш ий вчитель;

Кузьмич Т. В., Ж итомирська загальноосвітня школа №16, вчитель; Унтілова Е. А., Одеський ін с т и т у т удосконалення вчителів, в. о. доцента, канд. пед. наук; Лихолат О. В., Слов'янський державний педагогічний універси тет Донецької обл., зав. кафедри, канд. пед. наук, доцент

Основи дизайну : підручник для 10 кл. загальноосв. навч. закл. Профільн. рі0-75 вень / В. В. Вдовченко, Т. О. Божко, А. С. Сімонік та ін.; (за ред. В. В. Вдовченка]. - К .: Педагогічна думка, 2010. - 304 с., іл. ІБВИ 978-966-644-172-3 Під час засво єн н я навчально го м атер іалу підручника «О снови д изайну» ви опан уєте засо би ви разності, створ ю ю чи дизайн-проекти, набудете н ави чо к щодо тво р ен н я о бр азів. Під час пр акти чної д іял ьн о сті за ви зн ачени м и технічним и ум овам и навчи теся передавати проектні за думи художньо-граф ічними засобам и у ф ормі дизайнерських проектів, р о зр о бка яких сп р и яти ме оволод інню основним и ком петенціям и, ви зн ачени м и навчально ю програмою . Виконан ня

навчально-тренувальних

проектних

завдань,

між предметних

особистісно

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

УДК 72.012(075.3) ББК 30.18 Я721

ISBN 978-966-644-172-3

О Інститут педагогіки НАПН України, 2010 О Вдовченко В. В., Божко Т. О., Сімонік А. С., Шве дова Ю. Б., Вдовченко 3. В., Тименко В. П„ 2010 С Педагогічна думка, 2010

Зміст Юні д изай н ер и !............................................................................................................ 5 Розділ 1. ВС Т У П ............................................................................................................ 9 § 1. Д изайн я к вид пр оектн ої діяльності: становлення, розвиток, п ер сп екти ви .................................................................... 10 П рактична робота 1. О знайом лення з дизайнерською д іял ьн істю ....... 24 § 2. О собливості організац ії робочих м ісць дизайнерів-граф іків і веб-дизайнерів у виробничих та навчальних ум о вах ...................................... 27 П рактична робота 2. О рганізація робочих м ісць д и за й н е р ів ................33 Світ проф есій................................................................................................... 37 Реком ендована л іте р а ту р а ........................................................................... 44 Розділ 2. ЗАСОБИ ВИРАЗНО СТІ У Д И ЗА Й Н -П РО ЕКТА Х........................................45 § 3. Тестові завдання на візуалізац ію ..................................................................... 46 П рактична робота 3. Візуалізац ія власного спонтанного емоційного стану, почуття, настр о ю ........................................................... 46 § 4. Граф ічне від ображ ення укр аїн сько ї мови як візуальний засіб виразності д изайну.................................................................52 П рактична робота 4. Вправи з пош уку асоціативного образу звуків укр аїн сько ї м ови (за методикою А.С. С ім о н ік а )............................ 53 § 5. О снови ком позиц ії та к о л ь о р о зн а в с тв а ........................................................ 59 П рактична робота 5. Виконання тем атичної ком позиції з абстрактно-геометричних фігур на задану тему: «Плин часу» (м аж ор або м інор) .................................................................. 90 § 6. Аналіз тестових та художньо-графічних вправ (виконаних за методикою А. С. С ім о н ік а )............................................................. 92 П рактична робота 6 ....................................................................................... 92 Світ проф есій................................................................................................... 98 С ловник-довідник.........................................................................................105 Реком ендована л іте р а ту р а ......................................................................... 106 Розділ 3. ГРАФ ІЧН И Й Д И З А Й Н .............................................................................. 107 § 7. Знакові зображ ення та законом ірності їх утвор ен ня. Види з н а к ів ....... 108 П рактична робота 7. Розробка д екоративно-стилізованої ком позиц ії (із використанням образних якостей о б 'є к т ів )....................120 §8 . Ш рифт як складова образно-знакової систем и........................................... 121 П рактична робота 8. Аналіз ретроспективи р озвитку суспільства у різні історічні епохи (за карткам и-завданнями) ................................. 130 § 9. Образно-асоціативні характеристики ш р и ф тів.......................................... 132 П рактична робота 9. О бразно-асоціативні ш рифтові р о б о ти ............ 138 § 10. Д изайн пакувань у систем і візуальних комунікацій ................................140 П рактична робота 10. Розробка д изайну пакувань для систем и візуальних ком унікац ій..........................................................147 §11. Д изайн книги. Історія і с у ч а с н іс т ь ...............................................................148 Практична робота 11. Розробка дизайну поліграфічного ви д ан н я....... 159 § 12. Друкована реклама та види сучасних друкованих засобів інф ормації. . . 161

П рактична робота 12. Розробка сучасних друкованих засобів інф ормації (за ви б о р о м )................................................................ 167 С віт проф есій................................................................................................. 170 С ловник-довідник.........................................................................................173 Реком ендована л іте р а тур а ......................................................................... 175 Розділ 4. В ЕБ-Д И ЗА Й Н .......................................................................................... 181 § 13. Вступ до веб-дизайну................................................................................... 182 П рактична робота 13. Розробка індивідуального портфоліо для веб-дизайнерських р о б іт ....................................................................185 § 14. О снови проектування інф ормаційного середовищ а - веб-сай та....... 187 П рактична робота 14. Розробка структури с а й та ................................... 198 § 15. Комп'ю терна графіка у веб-сайтах.............................................................. 201 П рактична робота 15. О володіння прийомами роботи засобам и ком п'ю терної гр аф іки ................................................................ 211 § 16. Розм ітка гіпертексту H T M L ...........................................................................214 П рактична робота 16. Створення власн ої веб-сторінки........................ 228 § 17. Анімація. Flash-технології.............................................................................. 232 П рактична робота 1 7 .1 ................................................................................240 П рактична робота 17.2. О володіння прийомами створення кліпу ан ім ац ії................................................................................................. 245 П рактична робота 17.3. О володіння засобам и м алю вання у анім аційном у р е д а к то р і...........................................................................247 П рактична робота 17.4. О володіння прийомами створ енн я анім ації р у х у .............................................................................. 252 П рактична робота 17.5. О володіння прийомами створення кліпів з використанням анім ац ії ф о р м и .................................................. 255 § 18. Технологія створення веб-сайтів в інф ормаційному середовищ і Ін те р н е ту ............................................................................................257 С віт проф есій................................................................................................. 260 Словник-довідник........................................................................................ 269 Реком ендована л іте р а тур а .........................................................................276 Розділ 5. Р ЕЗЕР В ЧАСУ (за вибором учителя) .................................................... 277 § 19. П рийоми роботи з граф ічним редактором Adobe Photoshop. Інтерф ейс програми Adobe P h o to s h o p .............................................................. 278 П рактична робота 19.1. О володіння прийомами використання ш арів. Застосування ум інь роботи з інструментами виділення та тр ансф о рм ац ії....................................................................... 289 П рактична робота 19.2. О володіння прийомами використання ф іл ь тр ів ................................................................................290 П рактична робота 19.3. О володіння прийомами заливання кольором та роботи с гр ад ієн там и ........................................................... 291 П рактична робота 19.4. О володіння прийомами роботи з текстом, текстовим и ш арами, фільтрами та налаш туванням зображ ення за допомогою пунктів меню. Зображ ення (IM A G E )....... 294 § 20. Психологічні основи дизайн-діяльності. Проф есійна спр ям ован ість о с о б и сто сті.............................................................295

Юні дизайнери! Запрошуємо вас до набуття знань, умінь і навичок з основ дизайну. У процесі вивчення навчального матеріалу ви ознайомитеся з художньо-проектною діяль ністю в різних сферах життєдіяльності, видами дизайну (табл. 1). У 10-11-х класах навчальний предмет «Основи дизайну» розкриває основні види дизайну за прин ципом - від загальних закономірностей художнього проектування до поетапного виконання навчального творчого проекту (табл. 2). Оволодівати основами дизайну ви будете в процесі теоретичного вивчення розділів «Засоби виразності у дизай нерських проектах», «Графічний дизайн» і «УУЕВ-дизайн» (табл. 3) та практичної ді яльності з виконання вправ із композиції на площині, у просторі під час художньо го проектування за власним задумом у зазначених вище видах дизайну. Практичні завдання зорієнтовані на відомі вам п'ять сфер життєдіяльності людини, поступове ускладнення робіт, пов'язані з особистісним задоволенням на профільному рівні професійних уподобань. Таблиця 1 Взаєм о зал еж н ість сфер ж и т т є д ія л ь н о с т і т а видів дизайну С ф ер и ж и т т є д ія л ь н о с т і

В и д и д и за й н у

Людина - природа

Ландшафтний дизайн

Людина - художній образ

Дизайн середовища

Людина - сфера обслуговування

Дизайн костюма

Людина - техніка

Промисловий дизайн

Людина - знаки інформації

Графічний дизайн, веб-дизайн Таблиця 2

Загальна с т р у к т у р а для вивчення «Основ дизайну» у 10- 11-х класах 10-й к л а с

11-й к л а с

Смислові блоки

Основні розділи

Художня, графічна, проектна підготовка

Засоби виразності у Художньо-графічна культура в дизайн-проектах дизайн-проектах Проектно-художня культура

Види дизайну Практичні роботи

Графічний дизайн

Промисловий (індустріальний) дизайн

Веб-дизайн

Дизайн середовища

Творчий проект Захист творчого проекту. Презентація Таблиця З

Сфера ж и т т є д ія л ь н о с т і т а види дизайну, що в и в ч а ю ть с я у 10-му класі С ф ер а

В и д и д и за й н у (р о зд іл и )

ж и т т є д ія л ь н о с т і

та їх р о зг а л у ж е н н я (п ід р о зд іл и , п о д ан і в о к р е м и х п а р а гр а ф ах )

Людина - знаки ін формації

Графічний дизайн

Веб-дизайн

Дизайн книги Дизайн пакувань Дизайн реклами

Комп'ютерний дизайн Дизайн мультимедійних технологій Дизайн телекомунікаційних мереж Педагогічний дизайн

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

П р о ф е сії

«Графічний дизайн»

Дизайнер-графік. Ілюстратор книги. Художник-плакатист. Художник-декоратор. Дизайнер-викладач

«Веб-дизайн»

\Л/ЕВ-дизайнер. Контент-менеджер. Менеджер інтернетпроектів. Редактор сайту. Комп'ютерний дизайнер. Викладач

Під час літньої навчальної практики у 10-му класі ви побуваєте на екскурсіях у проектних організаціях та спеціалізованих дизайнерських фірмах, відвідаєте виставкові центри, пройдете виробничу практику в умовах реальної проектної організації, фірми. При цьому ви виконуватиме пошуково-дослідницьку роботу дизайнера-дослідника, індивідуально та в межах колективу реалізуєте творчі ди зайнерські проекти тощо. Ви також ознайомитеся з різними сферами життєдіяльності людини, особли вості яких відображені в таблицях та більш широко висвітлені в додатках, розмі щених наприкінці розділу. З додатків ви також отримаєте ґрунтовну професійну інформацію про специфіку роботи дизайнерів, можливості оволодіння дизайнер ськими професіями, перспективи кваліфікованих працівників з обраної дизайнер ської професії. На початку параграфів вміщені запитання на актуалізацію опорних знань, на бутих вами на уроках трудового навчання, основ дизайну, образотворчого мисте цтва, художньої культури, інших навчальних предметів в основній школі. Зазначені в підручнику та підготовлені вчителем усні запитання спонукатимуть вас до твор чого мислення. Наприкінці параграфів виписано перелік основних понять та тер мінів, які ви маєте запам'ятати після опанування навчального матеріалу параграфа, а також пропонуються контрольні запитання для перевірки навчальних досягнень та творчі завдання для закріплення навчального матеріалу. Окремими блоками наприкінці розділу розміщені такі додатки: ■ «Світ професій» (профінформація про кваліфікаційні вимоги до блоків про фесій, зазначених у параграфах; основні відомості про видатних фахівців означеного професійного напряму; профорієнтаційна інформація); ■ «Словник-довідник» (основні поняття, терміни та цікава довідкова інформа ція для більш глибшого розкриття змістового наповнення параграфів);

■ «Перелік рекомендованої літератури» для поглибленого вивчення навчаль ного матеріалу з «Основ дизайну» в 10-му класі. Змістова частина підручника містить також: ■ зразки оформлення проектно-пошукових робіт (творчих проектів) за тема тикою розділів 1-4 (у розділі 5); ■ практичні поради щодо підготовки до презентації і захисту творчих проектів та їх проведення (у розділі 6). Проектно-пошукові роботи виконуватимуться на основі проектного та техно логічного підходів за методом художніх проектів, з використанням наведеної у розділі 5 орієнтовної структури, взірців оформлення учнівських творчих проектів, рекомендацій щодо їх виконання. Об'єктом дизайнерської розробки має бути особистісно привабливий учнівський дизайнерський проект майбутнього суспільно значущого виробу. Під час виконання практичних робіт дотримуйтесь таких рекомендацій: 1.

Усі завдання виконуйте творчо. Прагніть знайти у кожному з них найважливіші особливості, основні навчальні завдання та ефективні методи їх розв'язання.

Будьте уважними та старанними.

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

ного закладу, в якому зараз навчаєтеся, знання, уміння, навички, компетентності, якими ви оволодієте під час вивчення навчального предмета «Основи дизайну», знадобляться вам у повсякденному житті. Бажаємо успіхів.

Автори

Умовні позначення

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

Контрольні запитання для перевірки навчальних досягнень

Творчі завдання для закріплення навчаль ного матеріалу

Перелік професій, про які наведена інфор мація

Перелік прізвищ видатних митців у сфері дизайну

Рекомендована література

Практична робота

ВСТУП

§ 1.

Дизайн як вид проектної діяльності: становлення, розвиток, перспективи

М ікеланджело

А. Дюрер

Леонардо да Вінчі

Буонаротті

(1471-1528)

(1452-1519)

О. Архипенко (1887-1964)

О. Антонов (1906-1984)

(1475-1564)

Творці дизайнерського типу

1. Наведіть приклади застосування проектної діяльності в історії матеріальної культури, яку можна назвати дизайнерською діяльністю. Обґрунтуйте свої твердження характеристикою обраних вами об'єктів проектування. 2. Назвіть характерні відмінності художніх, дизайнерських, функціональних об'єктів проектування. 3. Чому, незважаючи на явно дизайнерський характер багатьох відомих вам з іс то р ії об'єктів проектування, раніше їх не називали дизайнерськими, а розро& ників - дизайнерами? 4. Кого з відомих творців, розробників, проектувальників в історії вашого регіону можна з впевненістю нині назвати дизайнером? Обґрунтуйте свої твердження. 5. Чи є відмінність між функціональним і красивим виробом декоративноужиткового м истецтва і дизайнерським об'єктом проектування ? Обґрунтуй т е свої висновки. Дизайн як вид проектної діяльності у процесі його зародження, становлення, розвитку сприяє перспективній розбудові проектно-художньої культури в Україні. Зазначимо основні поняття та терміни, які часто будуть застосовуватися в процесі вивчення «Основ дизайну» в 10-11-му класі: дизайн (проектування, вигляд), дизай нерська діяльність, дизайнер (фахівець), дизайнерське мислення та ін. Розкриємо зміст деяких визначень.

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

ВСТУП ню високої художньо-проектної культури методом поєднання нових якостей матеріалів із сучасним и технологіями виготовлення, конструктивного та ер гономічного ріш ення для сприяння більш еф ективним праці та відпочинку, за безпечення економ ічної доцільності та збереж ення д овкілля. Створю є такі ви роби дизайнер. Він повинен м и сл и ти як філософ, історик, соціолог, психолог; т в о р и т и як художник, графік, скульптор, конструктор; глибоко усвід ом лю вати об'єкт проектування, його функції, вплив на людину і навколиш нє середовищ е; уміти с и н т е з у в а т и евристичне, художньо-образне, раціонально-логічне та аналітичне мислення. Характерні ознаки мислення творців із си во ї давнини і сучасних д изайнерів подані у табл. 1. Таблиця 1.1

Характерні ознаки мислення творців різних епох і сучасних дизайнерів Синтезуючі складові дизайнерського мислення

Характеристика синтезуючих складових дизайнерського мислення

Евристичне мислення

Нестандартне цікаве бачення, вміння відмовлятися від стереотипів

Художньо-образне мислення

Розвинені відчуття, чуттєві асоціації, чуттєва логіка (інтуїція)

Раціонально-логічне мис лення Аналітичне мислення

Уміння проектувати економічно, доцільно, методично, П О С Л ІД О В Н О

Уміння збирати Інформацію, аналізувати, робити об'єктивні висновки, узагальнення

Археологічні знахідки на місцях перебування первісних людей на території нашої Батьківщини свідчать, що наші пращури вміло добирали окремі частини де рева, каменю, кісток для виготовлення знарядь для праці, рибальства, зброї для полювання, самозахисту. Вироби первісної людини за формою, розмірами, вагою сприяли точності, силі та темпу її трудових дій. Оскільки такий добір відбувався згідно з особистими фізичними даними та уподобаннями, то ті речі на той час від повідали функціонально, ергономічно та естетично своєму призначенню. Згодом, надаючи кожному предмету своєрідне, символічне значення в життєдіяльності людини, прадавні майстри прикрашають їх відповідними візерунками, знаками і символами. Тобто на підсвідомому рівні первісні майстри створювали вироби як

дизайнери. Яскравими представниками художньо-проектної культури з дизайнерським мисленням були видатні митці епохи Відродження - Леонардо да Вінчі, Мікеланджело Буонаротті, Альбрехт Дюрер. Названі та інші яскраві багатогранні творці були одночасно філософами, поетами, художниками, скульпторами, архітектора ми, конструкторами, технологами. З огляду на сучасний рівень розвитку мистецтва, дизайну, техніки і технології їх по праву можна назвати дизайнерами свого часу. Серед наших співвітчизників XX ст. такі синтезуючі складові дизайнерського мис лення були характерні для О. Архипенка, О. Антонова та інших геніальних творців, у яких поєдналися професійні компетентності художника, винахідника, дослідника. Окремі роботи цих митців зображені на рис. 1.1.

ВСТУП

Проект Леонардо да Вінчі

Проект М ікеланджело Буанаротті. Собор Святого Петра у Римі

Авіаційна техніка О. Антонова

Канон фігури людини

Художній твір

Альбрехта Дюрера

0 . Архипенка

Рис. 1.1. Об'єкти художньо-проектноїдіяльності

Протодизайн на території України. На теренах сучасної України Трипільська культура в 6-3-му тисячоліттях до н. е. - одне з найбільш яскравих явищ в історії пер вісного суспільства всієї Європи. В той час трипільцями були розбудовані міста пло щею 100-450 та, кількість мешканців яких сягала 10-14 тис. осіб (Майданець, Талянки). Знайдені під час археологічних розкопок у трипільських містах керамічні пред мети побуту, їх оздоблення із зображенням Сонця, М ісяця, звірів, людей, птахів, рослин розкривають космогонічну сутність буття, де все перебуває в єдності, гар монії, циклічному русі. будівництво, розвиток ремесел, скотарство, землеробство, вирощ ування, зби рання, оброблення та збереження зернових зумовлювали створення дедалі доско наліших знарядь праці, одягу, зброї, побутових речей. Культурні пам'ятки бронзового віку, речі з кіммерійських та скіфських поселень і поховань свідчать про надзвичайно високу культуру художньої обробки металу, каменю, деревини, шкіри, тканин. Так зароджувався п р о то д и зай н (найстаріший вид дизайну, етнодизайну) (рис. 1.2). Об'єднання слов'янських племен у державу Київська Русь, яка стала однією з найбільших і наймогутніших у середньовічній Європі, сприяло подальшому розкві ту різних мистецтв, ремесел, будівництва. В цей час був написаний збірник законів про містобудування «Кормча книга» (XIII ст.), за яким заборонялось будувати міста скупчено та одноманітно.

ВСТУП

Кам 'яні сокири

Перші знаряддя праці та посуд

Трипільська кераміка

Золота пектораль. Скіфи

Золота чаша. Скіфи

Рис 1.2. Об'єкти протодизайну на території України Протягом Х-ХІІ ст. у Києві було побудовано першу дерев'яну, а потім з каменю Де сятинну церкву, Софію Київську, храм Спаса на Берестові та ін. Вони на багато століть стали зразками для будівництва храмових споруд у Північно-Східній Європі (рис. 1.3).

Софія Київська. Реконструкція початкового вигляду

Десятинна церква в XIX ст.

Києво-Печерська лавра. Церква Спаса на Берестові

Розфарбована (літографічна) листівка XIX ст.

Рис. 1.3. Витоки сучасної проектно-художньої культури. Руська будівельна школа

ВСТУП

У 1113 р. київський літописець Нестор заверш ує першу редакцію літописного зведення "П овість минулих літ"

"О стромирове Євангеліє’ 1057 р.

Рис. 1.4. Витоки сучасноїхудожньо-графічної культури. Руська школа книгописання Розквіт художньо-проектної культури в Київській Русі за доби Ярослава Мудрого

Територія пош ирення художньо-проектної культури

Ярослав Мудрий.

в Київській Русі за часів Ярослава Мудрого

П окровитель наук і мистецтв у Київській Русі

князя Ярослава Мудрого.

«Ярослав Мудрий».

Автор: І. Кавалерідзе.

Академік М. Герасимов, 1939р.

М. К. Реріх, 1941 р.

Скульптори: В. Сівко, М. Білик

Рис. 1.5. Ярослав Мудрий

ВСТУП На Печерських пагорбах міста Києва були засновані школи; будівельна, іконо писна, книгописання Там зберігалося більш е 900 різних книг. У Печерському монас тирі працював відомий Нестор-літописець. У той час було створено «Остромирове Євангеліє» (1057 р.), «Ю рійове Євангеліє» (1128 р.), «Добрилове Євангеліє» (1164 р.), які стали зразками художньо-графічної культури християнської доби (рис. 1.4). Навчання мистецтва відбувалося безпосередньо під наглядом майстра (харак терно для школи учнівства), де проводився природний відбір обдарованих учнів, здатних виконувати вправно і майстерно ту чи іншу мистецьку або ремісничу ро боту. Найчастіше діти навчалися у батьків і були продовжувачами їхньої справи. Тогочасні п р о то д и зай н ер ські т в о р и (художні вироби з металу, кераміки, скла, дерева, шкіри, тканин) свідчать про самобутню художню культуру нашого народу, який не втрачав духовних зв'язків з минулими тисячоліттями. Значного розвитку протодизайн набув за доби правління в Київській Русі Ярос лава Мудрого (рис. 1.5). У цей час художньо-проектна культура була поширена на всій її території. Наступним етапом розвитку художньо-проектної культури є цеховий е т а п у протод изайні. Протягом XIV-XVI ст. розширення торговельних і культурних зв'язків між багатьма країнами Азії та Європи сприяло бурхливому розвитку різних ремесел. Виникла цехова організац ія ремісничого ви р об н и ц тва. Конструктивна доскона лість, художня довершеність форм і вишуканість їх оздоблення сприяли зародженню меблевого мистецтва, яке виокремилося у самостійний вид ремесла (рис. 1.6).

Фортеця м. Кам'янець-Подільський

Столик.

Крісло.

Українське бароко

Рис. 1.6. Українське бароко в протодизайні У XVI—XVIII ст. в українській архітектурі, меблевому мистецтві, виробництві по суду зародж ується художній с ти л ь «бароко», характерними рисами якого були ба гатство форм, особлива виразність у застосуванні різних матеріалів при декору ванні архітектурних споруд, інтер'єрів, меблів, посуду. У сільській

місцевості розвивається і зберігається традиційне народне

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

ВСТУП У першій половині XIX ст. меблі, предмети культурно-побутового призначен ня нерідко створювалися спільними зусиллями архітекторів, художників, інжене рів (синтез образу і функції). Зовнішній вигляд виробу, його тектонічна виразність мали відбиток технології виробництва. Цей період характеризується п о чатко м промислового виробництва то ва р ів широкого вж и тку т а проникнення е с т е т и ч них принципів у їх створення, а отж е, і п о чатко м проектно-художньої культури. Наприкінці XIX - на початку XX ст. триваю ть пошуки нових форм та пластичнофактурної виразності матеріалу. Відмова від спадковості стосовно попередніх стилів зумовила виникнення «Нового мистецтва», «нового» стилю - м одерну - в розвитку протодизайну. За словами одного з представників модерну А. Ван де Вільде, «одухотворення матеріалу є принципом краси». Відомими представника ми цього стилю в Україні були І. Левинський та В. Кричевський. Для цього періоду характерним був спалах інтересу до національних художніх традицій, що відо бразилося в архітектурі, інтер'єрі, у прикладному мистецтві та товарах промис лового виробництва, що стало ознаменуванням нового етапу розвитку етнодизай н у (рис. 1.7,1.8).

Рис. 1.8. Фрагмент воріт, м. Київ. Стиль модерн

Рис. 1.7. В. Городецький. Будинок з химерами, м. Київ. Стиль модерн

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

із

виробництвом,

конструктивізм

відкидає практично не вмотивовану де коративність, схематизує мову мистецтва. В образотворчому мистецтві та літературі прихильники

конструктивізму

надавали

велике значення техніцизму, штучним кон Рис. 1.9.0. Родченко. Кімната-читальня

структивним формам, абстракціям тощо.

ВСТУП Значний вплив на появу нового стилю «конструктивізму» справили українські художники-авангардисти (кубісти, пуристи, абстракціоністи, футуристи, супрема тисти). Ш ироко застосовувався авангардний метод для проектування в стилі кон структивізму у 20-30-ті роки фабрик-кухонь, будинків-комун, палаців праці, кімнатчиталень тощо (рис. 1.9). Відомий не лише в Україні, а й визнаний ЮНЕСКО як зразок світового мистецтва «харківський конструктивізм» - будинок Держпрому, авторами конкурсної програми якого були професор Харківського технологічного інституту А. Молокін, інженер-будівельник Я. Кенський (рис. 1.10а, 1.106). (

'<14,

♦ І

Рис. 1.10а. «Держпром» («харківський конструктивізм») Автори конкурсної програми: професор Харківського технологічного ін с т и т у т у А. Молокін, інженер-будівельник Я. Кенський

Рис. 1.106. «Держпром», м. Харків (фрагмент)

У той бурхливий час розвитку в Україні конструктивізму будують свої перші плане ри С. Корольов (згодом генеральний конструктор космічних ракет-носмв), О. Антонов (згодом генеральний авіаконструктор, який створив знамениті літаки АН-12, «Руслан», «Мрія» та ін.), О. Сікорський (творець першого у світі гелікоптера (вертольота)). В інших видах мистецтва, одночасно з розвитком проектно-художньої культури постають відомі у світі художні твори О. Довженка (кінорежисера), Леся Курбаса (керівника театру), поезії А. Ахматової, П. Тичини, М. Рильського, проза М. Булгакова, М. Хвильового, М. Зерова та багатьох інших. Різновидом одного з архітектурних напрямів - р ац іоналізм у, що виник у 1920-х роках у Н ім еччині, е ф ункц іона лізм. Основні вимоги функціоналізму: обу мовленість зовніш нього виду будівлі її кон струкцією та внутрішнім плануванням, які, у свою чергу, визначаю ться її практичним призначенням (функцією). Архітектори-функціоналісти

прагнули

до типізації житлового будівництва, спо рудження великих житлових комплексів на вільних територіях (рис. 1.11).

Рис. 1.11. Функціоналізм в архітектурі

ВСТУП Фундаторами функціоналізму були представники школи Баугауз.

Дві дизайнерські школи: Баугауз і ВХУТЕМАС

Рис. 1.12. Головний корпус Баугауз у Дессау

Баугауз (або Баухаус) (нім. Bauhaus, Hochschule für Bau und Gestaltung - Вища шко ла будівництва й художнього конструювання, або Staatliches Bauhaus) - навчальний заклад, що існував у Німеччині з 1919 по 1933 р„ а також художнє об'єднання, що виникло в рам ках цього закладу, і відповідний напрям в архітектурі.

Ш кола Б аугауз виникла у Веймарі в 1919 р. у результаті об'єднання Саксон ської школи образотворчих мистецтв і Веймарскої школи промислового дизайну. Ініціатором створення нового навчального закладу виступив архітектор Вальтер Гропіус. Викладачів і учнів в епоху Веймарскої республіки об'єднували ліві погляди і новаторські підходи до мистецтва. Гропіус вважав, що в нову епоху архітектура має бути строго функціональною, економічною й орієнтованою на технологи ма сового виробництва (рис. 1.12). Школа випускала однойменний журнал (Bauhaus) і серію «Баугауз-книг» (Bauhausbücher). У 1925 р., коли влада Німеччини перестала субсидіювати школу, заклад був пере ведений у Дессау. Директором школи з 1919 по 1928 р. був В. Гропіус, потім його змінив Ханнес Мейєр, а в 1930 р. її керівником став Людвіг Міс ван дер Рое. В школі викладало багато провідних архітекторів і художників-авангардистів, зокрема І. Іттен, Л. МохойНадь, П. Клеє, В. Кандінський, Л. Фейнінгер, О. Шлеммер, Г. Маркс, Й. Шмідт, Г. Штельцль. У 1933 р. школа була ліквідована нацистським урядом (нацисти ще у 1920-х ро ках виступили проти Баугаузу, вважаючи школу розсадником комунізму). ВХУТЕМАС (Вищі художньо-технічні майстерні) - москов ський навчальний заклад, створений у 1920 р. у Москві шляхом об'єднання перших і других Державних вільних художніх майсте рень (утворених раніше на основі Строгановського художньопромислового училища і Московського училища живопису, творення і зодчества). Основні приміщення знаходилися на М'ясницькій вулиці, 216. Факультети Художні: живописний, скульптурний, архітектурний. Виробничі: поліграфічний, текстильний, керамічний, дере вообробний, металообробки. ВХУТЕМ АС. Наприкінці 1920 р. на архітектурному факультеті ВХУТЕМАСу, ра зом з майстернями, де студенти знайомилися з ордерною архітектурою (І. Жол-

ВСТУП товський, І. Рильський, А. Щ усев), виникло дві майстерні з новою методикою викладання. В одній об'єдналися Н. Ладовський, В. Кринський і Н. Докучаев, в ін шій - 1. Голосов і К. М ельников. У різний час у ВХУТЕМ АС викладали: В. В. Кандінський, О. М. Родченко, Н.А. Ла довський, В. Ф . Кринський, Л.М. Лисицький, К.С. М ельников, В.Ф.Степанова, В.Е. Татлін та ін. У 1926 р. реорганізований у ВХУТЕІН. На початку XX а . у Києві, Харкові, Одесі, Львові та інших містах працювали

художньо-промислові школи. В Харкові, крім художньої школи М. РаєвськоїІванової, було відкрито в 1921 р. вищий художній заклад освіти.

Рис 1.13. Художньо-промислова школа. Львів, бл. 1910 р. Споруду Художньопромислової школи збудовано на вул. Снопківській. Над головним входом в с т а новлено скульптури, що символізують «М истецтво» і "Працю». У будинку тепер розташований Технікум залізничного транспорту

Рис 1.14. Миргород. Державний керамічний технікум (старий корпус), пам'ятка архі тектури, 1896р. (вул. Гоголя, 146). Колишнє приміщення художньопромислової школи

Творці нових етномистецьких стилів першої чверті XX століття. У першій чверті XX ст. в Україні та за її межами за найактивнішою участю українських діячів культури, науки і техніки відбувається бурхливий процес переосмислення набу того світового досвіду, знань і пошуків нового у всіх сферах людської діяльності. Закладаються те о р е ти ч н і основи і п р акти ка сучасного дизайну, нових напрямів р озви тку світо вого м и с те ц тв а . У цей час творили нині знамениті митці, які поєд нували в собі риси художника-новатора, теоретика мистецтв, винахідника, учителя: О. Архипенко, О. Екстер, Д. Бурлюк, О. Богомазов, В. Пальмов, К. М алевич, яких мис тецтвознавець А. Наоков (Франція) назвав «Українським авангардом» (рис. 1.15) Саме вони разом з О. Родченко, В. Кандінським, В. Татліним, братами Вєсніними, В. М аяковським, В. Хлєбніковим запо чаткували не лише те о р е ти чн у основу і прак т и к у сучасного дизайну, а й нові напрями р о зви тку світо вого м и с те ц тва . Один з таких напрямів отримав назву «конструктивізм », який на відміну від німецького раціонально-логічного «функціоналізму » був по суті принципом творення (кон струювання) нових, більш рівноправних гуманістичних суспільних відносин. Вони вірили, що застосовуючи методи і засоби дизайну, можна створити більш гармоній не предметне і людське середовище.

ВСТУП ТВОРЦІ НОВИХ ЕТНОМИСТЕЦЬКИХ СТИЛІВ ПЕРШОЇ ЧВЕРТІ XX СТ.

Олександра О лександрівна Екстер

Давид Д авидович Бурлю к

(дівоче прізвище Григорович; 18 січня 1882, Білосток, Грод ненської губернії, нині

(9 червня (21 червня) 1882, хутір Семиротівщи-

Польщ а-17 березня 1949, Фонтане-о-Роз, поблизу Парижа) - пе дагог, маляр, сценограф. Яскравий представник європейського кубізму та футуризму

О. Екстер. «Цар Ірод». Театральний ескіз

на Лебединського повіту Харківської губернії - 15 січня 1967, Нью-Йорк, США) - український художник-футурист, поет, теоретик мисте цтва, літературний і ху дожній критик, видавець

Д. Бурлюк. «Козак Мамай»

Робота О. Архипенка

Олександр Костянтинович Богомазов (26 березня (7 квітня)

(11 (23) лютого 1878 К и їв-15 травня 1935, Ленінград) - український художник-авангардист,

1880, Ямпіль Харківської губернії, нині смт Сум один із засновників нових ської області - 3 червня напрямів в абстрактному 1930, Київ) - український мистецтві - супрематизму графік, живописець, пе та кубофутуризму, педа дагог, експериментатор, гог, теоретик мистецтва теоретик мистецтва

Робота О. Богомазова

К.С. Малевич. Супрематизм. 1915

Робота М. Бойчука

Рис. 1.15. Український авангард

Казимир Северинович М алевич

ВСТУП Ш ироковідомі центри дизайн-освіти в Україні З 1962 р. в Харківському художньопромисловому інституті та Київсько му художньо-промисловому технікумі розпочинається підготовка фахівців (ви щої та середньої ланки) для різних галу зей дизайнерської діяльності.

лТ# ¥ г

Г І З!Ш

Київський державний інститут декоративно-прикладного мистецтва і дизайну імені Михайла Бойчука ство рено 12 жовтня 1999 р. за постановою Кабінету М іністрів України № 1882 на базі

Київського художньо-промислового технікуму, який з 1962 р. розташований

Рис. 1.16. Харківська державна академія дизайну і м истец тв (з 1921 р. вищий художній заклад освіти)

на вул. Кіквідзе, 32 і замінив собою ліквідоване тоді Київське училищ е прикладного мистецтва. Останнє з довоєнного часу працювало на території Києво-Печерської лаври й називалося Школою майстрів декоративно-прикладного мистецтва на базі експериментальних майстерень при Київському музеї українського мисте цтва (1936-1938), а до кінця 1940-х років - Київським республіканським художньопромисловим училищем. Дипломи цих навчальних закладів отримали майже 5 ти сяч висококваліфікованих фахівців декоративно-прикладного мистецтва і дизайну. У 1930-1950-х роках з цим навчальним закладом пов'язане творче становлення М арії Приймаченко, Тетяни Пати, Надії Білокінь, Івана Гончара, Параски Власенко, Марфи Тимченко, Івана Скицюка та багатьох інших блискучих майстрів. У 1946 р. художнім керівником Київського училищ а прикладного мистецтва призначили ви датного митця та вченого Сергія Колоса. Понад 20 років тут викладав народний художник України, член М іжнародної академії кераміки Дмитро Головко. Свій досвід молодим майстрам передавали Тетяна Флору, Олександра Грядунова, Олександра Кулик, Ельвіна Талащенко, Іван Волкотруб, Анатолій і Віктор Горенки, Володимир Головко, Віталій Сівко, Адам Жук, Володимир Федько, Микола Попов. Серед сучасних викладачів вирізняю ться Сергій Нечипоренко, Петро Печорний, Володимир Прядка, Микола Лихошва, Василь Шпак, Віктор Гаранін, Микола Білик та багато інших митців і науковців, чиї твори відомі в Україні та за її межами. Викладачі та студенти інституту неодноразово були переможцями численних всеукраїнських та міжнародних фестивалів, конкурсів, брали участь у симпозіумах, проводили майстер-класи. Нині робочі в інституті імені Михайла Бойчука успішно триває: видаються збірники, монографії, розпочала роботу аспірантура. КДІДПМіД здобуває дедалі вищий авторитет як не лише навчальний заклад, а й науковий осе редок у галузі декоративного мистецтва та дизайну.

Всесоюзний науково-дослідний інститут технічної естетики (ВНДІТЕ) та його філіали. Спеціальні художньо-конструкторські бюро (СХКБ). Під впливом соціально-культурних та економічних процесів у світі, зокрема в Європі, лише на

ВСТУП початку 60-х років XX ст. уряд СРСР звертає увагу на підвищення якості промисло вих товарів та впровадження художнього конструювання (дизайну) у виробництво. Для цього в Києві та Харкові були створені філіали Всесоюзного науково-дослідного інституту технічної естетики (ВНДІТЕ) та Спеціальні художньо-конструкторські бюро (СХКБ). їх діяльність спрямовувалась на наукові, методичні пошуки в галузі теорії і практики дизайну та на виконання дизайн-програм у різних галузях вироб ництва. Київ стає одним із центрів у галузі літакобудування, створення верстатів та приладів; Харків - машинобудування; Л ьвів - автобудування, аудіотехніки, меблів, одягу; Дніпропетровськ - важкого машинобудування; Одеса - поліграфічної техні ки та іншої промислової продукції (табл. 1.2). Таблиця 1.2

Основна спеціалізація міст України в проектуванні та виготовленні продукції в різних галузях виробництва Міста України. Виробництва

Вироби Київ.

Основна спеціалізація в різних галузях виробництва Літакобудування, верстатобуду вання, приладобудування

АН-225 «Мрія». АНТК Антонова

Харків.

Машинобудування

Гідравлічний листо штампувальний прес. Дизайнери: Р. Камінський, Г. Карелі, Е. При блудний, Л. Рабінович

Львів.

Автобудування, аудіотехніка, меблі, одяг

Автобус ЛАЗ. Дизайнери: І. Євдокименко, М. Куликов, М. Возний, І. Піменов. Дніпропетровськ

Важке машинобудування

Одеса

Поліграфічна техніка

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

ВСТУП (Львів), Луцькому державному технічному університеті, Прикарпатському універ ситеті ім. Василя Стефаника (Івано-Франківськ), Д ніпропетровському національно му університеті, Херсонському державному технічному університеті, Черкаському інженерно-технологічному університеті, Київській національній академії мистецтв, КДІДПМД ім. М. Бойчука та багатьох інших закладах освіти. У різних навчальних закладах, особливо в обласних центрах, таких як Вінниця, Ж и томир, Луцьк, Хмельницький, Ужгород Херсон, Сімферополь, Запоріжжя, Кіровоград Черкаси, Дніпропетровськ, Донецьк, Суми, Чернігів, відкрито дизайнерські спеціаліза ції з урахуванням місцевих особливостей розвитку виробництва, мистецтва, культури. Науково-методичні розробки для сучасної дизайн-освіти. Протягом остан ніх десятиліть XX а . дизайнери, науковці, освітяни багато зробили для розкриття сутності дизайнерської діяльності, багатогранних форм, у яких вона існує. Завдяки досягненням у творчій праці зріс авторитет професії дизайнера серед населення. Учені, педагоги-дизайнери видають нові підручники, спеціалізовані ме тодичні посібники за різними напрямами роботи дизайнера: В.Я. Даниленко, Ю. Сомов, С. М. Яковлєв, С. Мигал, Ю. Божко, А.Тіц, О. Хмельовський та ін.

Характерні ознаки української дизайн-освіти у філософській, психоло гічній та педагогічній спадщині наших співвітчизників ^ Усвідомлення набутого багатовікового досвіду українського мистецтва, який неодмінно вирізняв г . * * ся своєю емоційною об разністю, ліризмом, що у є позитивним творчим началом і за словами Д. Чижевського: «Це дар 4 ж і Божий, який визначає Дмитро Чижевський л ю д ян ість і с основою (5 квітня 1894, Олександрія, нині Кіро історичного поступу».

; і 1 ] Софія Федорівна Русова (18 лютого 1856, Олешня -

воградської області -18 квітня 1977)

5 лютого 1940)

Учений-енциклопедист, культуролог,

Педагог і громадська діяч-

філософ, літературознавець, релігієзнавец ь, лінгвіст, дослідник укр аїн с ьк о ї і сл о в'ян ськ о ї літератур, історії' культури, ф ілософ ії, р елігійн о ї думки й сл о в'ян ськ о ї духовності. Один із найвидатніш их сл а вістів XX століття

Нова школа кладе с о ® 1^ к а , одна з піонерок україн за головну мету - збуди ського жіночого руху ти, дати виявитися само стійним творчим силам дитини... Софія Русова

ВСТУП Пізнаючи навколишній | світ, людина з дитинства повинна пізнавати лю дину - її думки, почуття, найтонші порухи душі, прагнення, поривання. Василь Сухомлинський

Анатолій Степанович Сімонік (нар. 10 квітня 1945 р.) Провідний педагог-дослідник і екс периментатор у галузі національної дизайн-освіти

4 Г

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

Василь Олександрович Сухомлинський (28 вересня 1918, - 2 ве ресня 1970, с. Омельник (О нуф ріївський район Кіровоградської області)) Український педагог, пу бліцист, письменник, поет

СВІТ ПРОФЕСІЙ

Державний діяч. Ярослав Мудрий. Архітектори. Видатні представники модерну в Україні: І. Левитський. Художники. Графіки. В.Г. Кричевський. Г.І. Нарбут. Худож ник. М Л. Бойчук. Дизайнери-викладачі. Вчений у галузі дизайну та графіки. В.Я. Да ниленко. Дослідник теорії художнього формоутворення. М.І. Яковлев. Дизайнердослідник, менеджер дизайн-освіти П.М. ТатГївський. Викладач-експериментатор. А.С. Сімонік, Т.О. Божко.

ПРАКТИЧНА РОБОТА 1

Ознайомлення з дизайнерською діяльністю На вибір учителя та учнів.

Завдання 1. Екскурсія в художньо-промислові організації, на виставкипрезентації дизайнерських проектів (або перегляд відеоматеріалів). О б 'єкти практичних розробок: письмовий, фото- або відеорепортаж (на вибір) про привабливі об'єкти дизайнерських розробок оглянуті під час екскурсії.

Завдання 2. Інформаційно-пошукова робота з історії дизайну. Ознайомлен ня з матеріалами виставок за каталогами, спеціалізованими виданнями, в мережі Інтернет. О б 'єкти практичних розробок: оформлення узагальнених матеріалів для папки (портфеля) індивідуального портфоліо в електронній або паперовій формі.

ВСТУП | -/ •

ТВО РЧІ ЗАВДАННЯ д л я з а к р іп л е н н я н а в ч а л ь н о г о м а т е р іа л у т е м и з а н я т т я

Завдання 1. Створення фотомонтажу за матеріалами каталогів, спеціалізова них видань, рекламних матеріалів про дизайн як вид проектної діяльності: етапи становлення, розвитку, перспективи. О б 'єкт практичних розробок: тематичний фотомонтаж для шкільного вебсайта, стенда, стіннівки. Завдання 2. Створення сценарію фото-, відеозйомок регіонального дизайнер ського центру (за вибором). Об’є к т практичних розробок: сценарій візуальної презентації регіонального дизайнерського центру. Завдання 3. Створення електронного банку даних про дизайн-центри, дизайндіяльність. О б 'єкт практичних розробок: електронний банк даних про дизайн-центри, дизайн-діяльністьдля індивідуального портфоліо.

П ЕРЕЛІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМ ІН ІВ

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

КОНТРОЛЬНІ ЗАПИТАННЯ д ля п ер евір ки власних н а в ч а л ьн и х досягнень з а т е м о ю за н я т т я

Чим вирізняю ться з-поміж інженерів, архітекторів, художників творці дизай нерського типу?

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

Чому яскравих представників художньо-проектної культури епохи Відроджен ня - Леонардо да Вінчі, Мікеланджело Буанаротті, Альбрехта Дюрера тепер на зивають дизайнерами свого часу, з притаманним їм дизайнерським мисленням?

Чому саме поєднання професійних компетентностей художника, винахідника і дослідника необхідне для дизайнерського мислення?

Аргументуйте твердження: «Первісні майстри створю вали вироби як дизай нери».

ВСТУП Робочі місця слід розташ овувати так, щоб уникнути потрапляння в очі пря мого світла (рис. 2.1). Д жерела освітлення рекомендується розташ овувати з обох боків екрана паралельно напрямку погляду працюючого. Для уникнення світлових відблисків екрана, клавіатури в напрямку очей користувача, від сві тильників загального освітлення або сонячних променів, на вікнах установлю ють жалю зі. М онітор повинен бути розташ ований на робочом у місці так, щоб поверхня екрана перебувала в центрі поля зору на відстані 400-700 мм від очей користувача. Реком ендується розміщ увати елементи робочого місця так, як зо браж ено на рис. 2.4.

Рис. 2.1. Приклад розташування Рис. 2.2. Приклад розташування правил з безкомп'ютерного обладнання у навчальній печно'іповедінки учнів у навчальній майстермайстерні (кабінеті) для проведення занять ні (кабінеті) для проведення занять з «Основ з «Основ дизайну» за вимогами правил бездизайну» пеки праці

Рис. 2.3. Приклад розташування правил без пеки праці біля кожного учнівського робочого місця у навчальній майстерні (кабінеті)

ВСТУП Інструкція з безпеки праці та правил поведінки учнів під час роботи на комп'ютерному обладнанні 1. Загал ьн і вим оги 1.

До роботи на комп'ютерному обладнанні допускаються учні, з якими було про ведено інструктаж з безпеки праці та електробезпеки з відповідним записом у журналі охорони праці та особистим підписом учня.

2. 3.

Не дозволяється перебувати в навчальній майстерні (кабінеті) без учителя. Робота в навчальній майстерні (кабінеті) має відбуватися за розкладом занять і графіком самостійної роботи учнів та учителя.

Учням

забороняється

відкривати

щиток

живлення,

як

під

час

роботи

комп'ютерів, так і у разі їх вимкнення. 2. Вим оги безп еки перед п о чатко м роботи 1.

Забороняється перебувати в навчальній майстерні (кабінеті) у верхньому одязі або приносити його з собою.

Забороняється приносити на робочі місця особисті речі, дискети та інші речі, що не стосую ться художньо-проектної діяльності.

На початку заняття треба зайняти визначене вчителем робоче місце так, щоб можна було, не нахиляючись, зручно користуватися клавіатурою і щоб було до бре видно зображення на екрані монітора.

Розпочинати роботу можна тільки за вказівкою вчителя. 3. Вим оги з безп еки праці під час роботи

Дотримуватися всіх вимог інструкції, а також поточних вимог учителя.

Під час роботи забороняється відволікатися від виконання поставленого на вчального завдання.

Можна виконувати тільки навчальні завдання. Категорично забороняється ви конувати інші роботи.

Працювати з клавіатурою слід чистими сухими руками.

На клавіші треба натискати плавно, не допускаючи різких натискувань.

Користуватись друкувальними пристроями можна тільки в присутності вчителя.

У разі виявлення несправностей обладнання слід повідомити вчителя.

Не можна намагатися самостійно проводити регулювання або усувати несправ ності комп'ютерного обладнання. 4. Вим оги з безп еки праці після закін че н н я роботи

Необхідно повідомити вчителя про несправності обладнання, виявлені під час

Після закінчення роботи на робочому місці не повинні залишатися зайві предмети.

У разі виявлення незвичного звуку або відключення комп'ютерного обладнан

У разі появи горілого запаху зупинити роботу та повідомити про це учителя. За

У разі потрапляння учнів під струм знеструмити навчальну майстерню, надати

роботи. 5. Вим оги з безп еки праці за авар ій н и х ситуац ій ня негайно припинити роботу і повідомити про це учителя. необхідності надати допомогу в гасінні пожежі. першу допомогу та викликати швидку допомогу.

ВСТУП 4.

У разі виникнення пожежі знеструмити навчальну майстерню (кабінет), викли кати пожежну команду і приступити до гасіння пожежі первинними засобами пожежогасіння.

За недотримання учнями вимог, правил і норм з охорони праці та пожежної безпеки адміністрація школи може притягти їх до дисциплінарної або адміні стративної відповідальності.

Типовий приклад навчальної майстерні з «Основ дизайну» з комп'ютерним обладнанням

Рис. 2.5. Типовий приклад навчальноїмайстерні з *Основ дизайну» з комп'ютерним облад нанням: 1- робоче місце; 2 - додаткові робочі столи для художньо-проектних робіт; З - робоче місце вчителя

Рис. 2.6. Приклад комплектаціїробочого місця вчителя: Рис. 2.7. Приклад комплектаціїучнівського 1- сервер - робоче місце викладача; робочого місця для дизайнерських робіт на 2 - монітор; 3 - принтер лазерний формату комп'ютері: А4; 4- сканер формату А4; 5 - гучномовці 1- системний блок; 2 - монітор

ЗО

ВСТУП О р ган ізац ія

проектно-технологічної

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

Рис. 2.8. Учні 10-го класу в на вчальній майстерні працюють на комп 'ютерному обладнанні під час вивчення розділу »Веб-дизайн» з «Основ дизайну»

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

використовує

найчастіш е

ігрові,

навчально-пізнавальні, соціально-

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

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

СВІТ ПРОФЕСІЙ Вчитель графічного дизайну, веб-дизайну, викладач дизайнерських дисциплін (графічного дизайну, комп'ютерної графіки, комп'ютерної анімації, відеомонтажу).

КОНТРОЛЬНІ ЗАПИТАННЯ

< М-

для п еревір ки власних н а в ч ал ьн и х д осягнень з а т е м о ю з а н я т т я

Назвіть схожі та відмінні вимоги до організації робочих місць дизайнерів-

Чим відрізняється організація робочих місць учнів:

графіків та веб-дизайнерів у виробничих та навчальних умовах. ■ на уроках образотворчого оформлювачів);

мистецтва

(юних

художників,

художників-

■ на заняттях з «Основ дизайну» дизайнерів-графіків; ■ на уроках інформатики (користувачів персонального комп'ютера); ш на заняттях з «Основ дизайну» веб-дизайнерів? 3.

Чому так багато уваги приділяється організації робочих місць дизайнерівграфіків та веб-дизайнерів у навчальних умовах?

Назвіть основне індивідуальне обладнання та обладнання загального користу вання для навчального робочого місця дизайнера-початківця.

Охарактеризуйте основні технічні вимоги до комп'ютерного обладнання на за няттях з «Основ дизайну».

Розкрийте правила безпеки праці та правила поведінки учнів під час роботи на комп'ютерному обладнанні.*

П ЕРЕЛІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМ ІНІВ

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

ВСТУП ^Г/ / N

ПРАКТИЧНА РОБОТА 2

Організація робочих місць дизайнерів

Завдання 1. Запропонуй власний проект навчальної майстерні (кабінету) з «Основ дизайну» з комп'ютерним обладнанням. О б'єкти практичних розробок: проект навчальної майстерні (кабінету) з «Основ дизайну» з комп'ютерним обладнанням у формі ергономічного плану (схеми). Зра зок див.: Типовий приклад навчальної майстерні (кабінету) з «Основ дизайну» із комп'ютерним обладнанням; на вибір - начерк, технічний малюнок, схема, план навчальної майстерні (кабінету) з «Основ дизайну» з комп'ютерним обладнанням; устаткування та оформлення інтер'єру навчальної майстерні (кабінету) з «Основ дизайну» з комп'ютерним обладнанням

Завдання 2. Запропонуй власний проект фронтальних виглядів оформлення стін навчальної майстерні (кабінету) з «Основ дизайну» з комп'ютерним обладнан ням (без змісту стендів). Див.: Змістову частину для комплектацїї стендів. Об’є к т и практичних розробок: фронтальний вигляд оформлення стін навчаль ної майстерні (кабінету) з «Основ дизайну» з комп'ютерним обладнанням (без зміс ту стендів).

Завдання 3. Запропонуй власний проект робочого місця вчителя або учнів ського робочого місця для дизайнерських робіт на комп'ютері у навчальній май стерні (кабінеті) з «Основ дизайну» з комп'ютерним обладнанням. Див.: 1. Приклад комплектації робочого місця вчителя. Обладнання робочого місця вчителя. 2.

Приклад комплектації учнівського робочого місця для дизайнерських робіт

на комп'ютері. Обладнання робочого місця учня (див. рис. 2.8). О б'єкти практичних розробок: робоче місце вчителя; учнівське робоче місце для дизайнерських робіт на комп'ютері у навчальній майстерні (кабінеті) з «Основ дизайну» з комп'ютерним обладнанням.

Змістова частина для комплектації стендів навчальної майстерні (кабінету) з «Основ дизайну» з комп'ютерним обладнанням Проектно-художня культура Дизайн середовища

Промисловий (індустріальний) дизайн

Засоби виразності у дизайн-проектах

Графічний дизайн

Веб-дизайн

Шафа-стінка

Мультимедійна дошка

Шафа-стінка

Художньо-графічна культура у дизайн-проектах

ВСТУП

ВСТУП 4

ТВО РЧІ ЗАВДАННЯ для закріплення навчального матеріалу теми заняття

1. Ознайомтеся на сторінках параграфа з типовим прикладом навчальної май стерні (кабінету) з «Основ дизайну» з комп'ютерним обладнанням. Запропонуй свій проект: ■ ергономічного удосконалення форми меблів; ■ технічного оснащення робочих місць дизайнерів-графіків та веб-дизайнерів у навчальних умовах; ш покращеного (або авторського) варіанта розробки інтер'єру навчальної май стерні (кабінеті) з «Основ дизайну» з комп'ютерним обладнанням. 2.

Обґрунтуйте твердження: «Мережа Інтернет є не тільки засобом комунікації, а й найбільш активним, динамічним, розвивальним середовищем для дизайнерівграфіків чи веб-дизайнерів».

Охарактеризуйте потребу для дизайнерів-графіків та веб-дизайнерів у навчаль

За зразком, поданим у рубриці «Світ професій», підготуйте інформацію про при

них умовах розвивати комунікативні та мовні здібності. вабливу для вас професію у сфері графічного та веб-дизайну.

СВІТ ПРО ФЕСІЙ Архітектори. Видатні представники модерну в Україні І. Левинський

Львівський Національний академічний т е а т р опери т а балету ім. Соломії Крушельницької

Головний залізничний вокзал у Львові

ВСТУП

Будинок банку «Південний» на вул. Чупринки, 11

І. Левинський також проектував храми, зо крема, греко-католицький у Києві, каплиці, санаторіі, лікарні, церкву в с. Підберізці, роз писану Модестом Сосенком

Церква в с. Підберізці

Художники. Графіки Він дуже багато зробив для розвитку сучасного укра їнського мистецтва і культури взагалі, працюючи в най різноманітніших ділянках. Різнобічністю свого таланту нагадував митців Ренесансу — живописець, архітектор, графік. Брат художника Федора Кричевського. Кричевський був архітектором, створив, на основі народного мистецтва, модерний український стиль бу дівництва. Він був блискучий і дуже плідний маляр кра євидів, започаткував новітнє мистецтво оформлення української книги, оформив славетний фільм Довженка «Звенигора». Кричевський був також ученим і досліджу вав українське народне мистецтво і будівництво, вивчав Василь Григорович Кричевський (31 грудня 1872— 1952) - видатний україн ський архітектор, митець, вчений і педагог

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

ВСТУП 22 березня 1918 р. Центральна Рада затвердила проекти В. Кричевського, зо крема герб, розроблений ним на основі Володимирового Тризуба, що тепер від роджений як малий Державний герб України.

Тризуб Володимира Святого

Тризуб Володимира І Святого на проекті герба України

Тризуб Володимира І Святого

Народився 25 лютого 1886 р. на хуторі Нарбутівка поблизу Глухова (тепер село Сумської області) у сім 'ї дрібного службовця. Змалку вирізував витинанки, любив малювати орнаменти, квіти, змальо вувати літери зі старих книжок Творчість Г. Нарбута — яскрава сторінка в українському мистецтві. Його по праву називають одним з найбільших графіків сучасності.

У березні 1917 р. переїхав до Києва.

Нарбут створю вав ескізи військових мундирів ар мії України, оформлення упаковок та етикеток для Георгій Іванович Нарбут

українських товарів. У вересні 1917 став професо ром графіки новоствореної Української академії мистецтв, а з грудня 1917 р. (за іншими даними, з лютого 1918 р.) — її ректором.

Проект поштових марок УНР, створених Г. Нарбутом: 10шагів — князь Костянтин Острозький, 20 шагів — філософ Григорій Сковорода, 40 шагів — гетьман Петро Дорошенко. Марка для продажу тю тю н у в ІОгривень

ВСТУП Художник-дизайнер. Вчений у галузі дизайну та графіки

Віктор Якович Даниленко

Член-кореспондент Академії мистецтв України (2001), доктор мистецтвознавства (2006), професор (1996), художник-дизайнер. Працює в галузі дизайну та графіки. Його професійна діяльність засвідчує високий педаго гічний хист, активну науково-дослідну роботу і майстер ність дизайнерської творчості. Творчий доробок В. Даниленка складається з числен них впроваджень у виробництво промислових зразків, об’єктів міського середовища, інтер'єрів, а також творів графіки і живопису. Автор великої кількості наукових праць (понад 150), виданих як в Україні, так і за її межами.

Ним опубліковано матеріали, що стосуються проблем розвитку дизайну Украї ни у світовому контексті, розвитку регіонального дизайну, оновлення методичних засад підготовки дизайнерів в Україні. В. Даниленко — активний учасник обласних, всеукраїнських, міжнародних виставок дизайну. Основні наукові праці: «Харківська школа дизайну» (1992), «Історичне підґрун тя української школи дизайну» (1993), «75 років художньої школи Харкова» (1996), «Основи дизайну» (1996), «Дизайнерська освіта України у світовому контексті» (1997), «Нові погляди на дизайн промисловий, графічний, середовищний» (2000), «Дизайн» (2003), «Дизайн України у світовому контексті художньо-проектної куль тури» (2005), «Майбутнє європейського дизайну: Чехія, Польща, Україна» (2007).

Біографічна довідка: 1952 — народився 24 липня у м. Харкові. 1974 — закінчив Харківський художньо-промисловий інститут за спеціальністю «Промислове мистецтво». З 1976 працює у Харківському художньо-промисловому інституті (нині Харків ська державна академія дизайну і мистецтв): молодшим науковим співробітником (1976), старшим викладачем кафедри художнього конструювання (1986), завідува чем кафедри дизайну (1991), проректором з науково-дослідної роботи (1992). З 1999 ректор Харківської державної академії дизайну і мистецтв. Член Спілки дизайнерів України, голова комісії з дизайну М іністерства освіти і науки України. Нагороджений Золотою медаллю Академії мистецтв України (2005).

▲ Робота студента В. Машинського. Керівники В. Голобородько, В.Даниленко.ХДАДМ. 2001 р.

4 Студентські роботи. Майстерня В. Елькова. ХХПІ. 1980-1990 рр.

ВСТУП Український художник, маляр-монументаліст, лі дер групи «бойчукістів». Один із засновників мону ментального мистецтва України XX ст. Брат Тимофія Бойчука, батько - Г. Бойчук-Щепко. Член Наукового товариства імені Т. Ш евченка (1912), Українського на укового товариства (1917).

Михайло Львович Бойчук (ЗОжовтня 1882, Романівна — 13липня 1937, Київ)

Дизайнер. Викладач. Менеджер дизайн-освіти Заслужений працівник народної освіти України. Канди дат технічних наук. Ініціатор та організатор відродження під готовки фахівців декоративно-прикладного-мистецтва. Реорганізатор Київськогохудожньо-промисловоготехнікуму в Київський державний інститут декоративно-прикладного мистецтва і дизайну ім. М. Бойчука. Перший його ректор. Керівник понад 300 дипломних робіт у різних-видах дизайн-ергономічної діяльності: промисловий дизайн, ди зайн середовища, дизайн виробничого середовища, дизайн житлового середовища тощо Петро Михайлович ТатГївський

Біографічна довідка: 1939 - народився 26 вересня у с. Водяно Ш полянського району Черкаської об ласті. 1964 - закінчив Державне художнє училище, м. Луганськ. 1969 - закінчив Харківський художньо-промисловий інститут за спеціальністю «промислове мистецтво» (кваліфікація - художник-конструктор). 1970 - дизайнер-викладач профілюючих дисциплін Київського художньопромислового технікуму. 1985-1999 — директор Київського художньо-промислового технікуму. 1999-2004

ректор

Київського

державного

інституту

декоративно-

прикладного мистецтва і дизайну ім. М. Бойчука. Має низку авторських свідоцтв на промислові зразки творчих робіт у галузі ди зайну. Член Спілки дизайнерів України.

ВСТУП Дослідник теорії художнього формоутворення Дійсний член (академік) Академії мистецтв України (2004) доктор технічних наук (1999), професор (2001), заслужений працівник освіти України (2004), архітектор. Працює в галузі теорії художнього формоутворення. Доктор наук зі спеціальності «Технічна естетика». Предме том наукової діяльності є дослідження закономірностей ком позиції в образотворчому, декоративно-прикладному мисте цтві, дизайні та архітектурі. Науковий доробок М. Яковлєва - понад 100 публікацій, Микола Іванович Яковлев

більш ніж 60 з яких стосуються проблем синтезу мистецтв. 2000 р. вийшла друком монографія «Принципи художнього формоутворення», у якій на широких дослідницьких матері алах подано методику композиційного аналізу творів архі тектури, образотворчого та декоративно-прикладного мисте цтва, у 2004 р. - підручник «Основи композиції» для студентів художніх навчальних закладів, у 2007 р. - монографія «Компо зиція + геометрія».

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

Біографічна довідка: 1948 - народився 10 червня у с. Ніцаха Тростянецького р-ну Сумської обл. 1976 закінчив Київський державний художній інститут за спеціальністю «Архітектура». 1976-1979 - викладав на кафедрі графіки Київського політехнічного інституту. 1976-2004 - викладач, завідувач кафедри теорії, історії архітектури та синте зу мистецтв, декан факультету архітектури Національної академії образотворчого мистецтва і архітектури. 2004-2007 - ректор

Київського

державного

інституту

декоративно-

прикладного мистецтва і дизайну ім. М. Бойчука. 2002-2004 - член-кореспондент Академії мистецтв України. 2007 - обраний головним ученим секретарем Академії мистецтв України. Член Національної спілки архітекторів України. Нагородженийюрденом «За заслуги III ступеня (2008), Почесною грамотою Мі ністерства культури і туризму України (2008), Відзнакою М іністерства культури і ту ризму України «За багаторічну плідну працю в галузі культури» (2008), Почесною грамотою Київського міського голови (2008) Посада: головний учений секретар.

ВСТУП Дизайнер-дослідник. Викладач-експериментатор А. С. Сімонік як провідний фахівець-педагог у галузі ди зайну в 1989 р. брав участь у розробці державної програми «Дизайн-освіта в Україні». Зробив значний практичний вне сок у справу відродження підготовки фахівців з національ ного декоративно-прикладного мистецтва України в м. Києві. Був одним з активних учасників реорганізації та становлення Київського державного інституту декоративно-прикладного мистецтва і дизайну імені М. Бойчука. Є організатором і пер шим деканом факультету заочної форми навчання. За його А н а т о л іи С т е п а н о в и ч

Сімонік

концепцією та методичним забезпеченням у 1986 р. була відкрита підготовка за спеціалізацією «дизайн середовища».

Плідно працює в галузі теорії і методики дизайну. Має багато теоретичних та методичних розробок, наукових публікацій, які використовую ться в навчальному процесі інституту та інших навчальних закладів. Разом з ученими Інституту педагогіки розробив навчально-методичні комплек ти (програми, календарно-тематичні плани, підручники, методичні рекомендації, словники-довідники) для профільних предметів: «Основи-дизайну», «Промисловийдизайн», «Дизайн середовища» для учнів 10-12-х класів; курсів за вибором для допрофільної підготовки у 8-9-му класах та поглибленої профільної підготовки у 10-12-х класах: «Основи композиції», «Художнє та технічне проектування та макетування». Нагороджений Почесною грамотою Спілки дизайнерів України, знаком «Відмін ник освіти України».

Дипломна робота ЗФН КДІДПМД ім. М. Бойчука *Кухня* ХарламовоїЛ. Керівник Сімонік А. С.

ВСТУП РЕКО М ЕНД О ВАН А ЛІТЕРАТУРА 1. Даниленко В.Я. Дизайн: Підручник. - X.: ХДАДМ, 2003. -320 с. 2. Даниленко В Я Дизайн України у світовому контексті художньо-проектної куль тури: Монографія. - X.: Колорит, 2005. -244с. 3.

Дизайн: Иллюстрированный слов.-справ. / Г.Б. Минервин, В.Т. Шимко, А.В. Ефимов и др.; Под общ. ред. Г.Б. Минервина и В.Т. Шимко. - М.: Архитектура-С, 2004. -288 с.

Иконников А. В. Функция, форма, образ в архитектуре. - М.: Стройиздат,

М алік Т.В. Історія дизайну архітектурного середовища: Навч. посіб. - К.: КНУБА, 2003.-192 с.

1986. -288 с.

Положення про кабінет інформатики та інформаційно-комунікаційних техноло гій навчання загальноосвітніх навчальних закладів.

Хмельовський О.М. Вступ у дизайн. Основи проектування систем життя: Курс лекцій. - Луцьк: Волинська мистецька агенція «Терен», 2004. -208 с.

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ

§ 3.

Тестові завдання на візуалізацію П РАКТИЧНА РОБОТА З В із у а л із а ц ія в л а с н о г о с п о н т а н н о г о е м о ц ій н о г о ст ан у , почут т я, н а ст р о ю

Завдання 1. Виявлення здібностей до художньо-графічної та об'ємнопластичної твор чої діяльності (за методикою А.С. Сімоніка). М е та : 1. Виявити рівень ваших здібностей до самоорганізації. 2. Визначити: а) рівень володіння мовними засобами виразності; б) здатність візуалізувати художніми засобами власний спонтанний емоційний стан, почуття, відчуття, настрій; в) можливість самопізнання та самовдосконалення, цілеспрямованість форму вання початкових професійних дизайнерських умінь та навичок; Для виконання тестових завдань необхідно виявити такі дизайнерські вміння: ■ зосереджуватися, концентруватися; ■ відчувати та усвідомлювати свій емоційний стан; ■ чуттєво, інтуїтивно визначати найвиразніші художні засоби, з допомогою яких можна візуалізувати власний спонтанний емоційний стан, почуття, відчуття, настрій; ■ визначати відповідні пропорції картинної площини чи обмеженого простору; ■ інтуїтивно визначати місце розташування художніх засобів виразності на картинній площині чи в обмеженому просторі; ■ інтуїтивно вибирати необхідні художні матеріали та техніку виконання для художньо-графічної візуалізації; ■ обґрунтовано добирати необхідні матеріали, конструктивне рішення та тех ніку виконання макета чи моделі, для об'ємно-пластичної візуалізації; ■ самостійно виконувати завдання. Вибір зображувальних засобів довільний. Для цього можуть бути використані абстрактні лінії, плями, знаки, символи або природні явищ а (рис. 3.1-3.17).

Завдання 2. Відображення протилежних (полярних) настроїв «Радість» і «Сум». М е та : 1. З'ясувати, як поляризація емоційних станів впливає на добір та структурну будову художніх засобів виразності дизайну. 2. Виявити ваші здібності до артистизму, емпатії, вміння самонастроюватись на заданий емоційний стан. 3. З'ясувати ваш рівень підготовленості та вправності у володінні художньографічною мовою дизайну. Завдання складається з двох окремих вправ «Радість» і «Сум». Перед виконан ням цих вправ необхідно самоналаш туватись на кожен емоційний стан окремо і відобразити його, використовуючи метод акторського тренінгу, який розвиває здатність до емпатії, вміння керувати рівнями своєї активності (настроєм).

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Візуалізація настрою передасться лише мовою дизайну через абстрактні фор ми (лінії, плями, крапки, об'єми тощо, без зображувальних елементів, таких як квіти, плоди, дерева). Завдання виконується під керівництвом вчителя, який сприяє зосередженості, самоналаштуванню та усвідомленню вашого емоційного стану і послідовному ви конанню роботи з використанням художньо-графічних засобів виразності.

Послідовність виконання першого і другого завдання Пошук зображувального поля (картинної площини) у формі квадрата, прямо кутника по вертикалі чи горизонталі, трикутника, еліпса чи кола (розміром 8-10 см). Зображувальне поле визначається обмежувальною лінією. 1. Ахроматичний пошук засобів виразності та їх розміщ ення у зображувальному полі (6 -8 ) варіантів (рис. 3.18 та 3.19). 2.

Виконання пошукових варіантів візуалізації власного спонтанного емоційного стану, почуття, відчуття, настрою в кольорі 6-8 варіантів (рис. 3.20).

3. 4.

Вибір найвиразнішого в кольорі пошукового варіанта. Виконання художньо-графічної чистової роботи в кольорі на форматі АЗ

збільшеному в 3-4 рази масштабі (рис. 3.21 та 3.22).

Обладнання та матеріали

а для ахром атичного виконання р обо ти: олівець, туш, сангіна, вугілля для ху дожніх робіт, папір формату АЗ; ■ для р о б о ти в кольорі: акварель, гуаш, темпера, кольорові олівці, фломасте ри, пастель, папір формату АЗ (не бажано виконувати вправи за допомогою комп'ютерної графіки); ■ для об'ємно-пластичної р обо ти: конструкційні та макетні матеріали, глина, пластилін, пластичні маси, природні матеріали. Кожне виконане навчальне завдання повинно вами аналізуватися (власні робо ти та роботи однокласників). У процесі аналізу необхідно з'ясувати закономірності у візуалізації певного пси хологічного чи емоційного стану, настрою: ■ Через які зображувальні елементи, символи, знаки відображений той чи ін ший ваш (однокласників) емоційний стан, настрій? ■ Якими художніми засобами виразності візуалізовано ваш (однокласників) внутрішній стан (характер ліній, плям, крапок, об'ємів, кольорів, тону, пропо рцій, масштабу тощ о)? ■ Яке вибране зображувальне поле за формою і пропорціями? ■ Яке композиційне розміщення засобів виразності в зображувальному полі? ■ До якого настрою, самопочуття спонукає виконаний рисунок або об'ємнопластичний образ? ■ Чи помітні відмінності у засобах виразності та їх розміщенні, що відобража ють різні емоції, почуття, настрої?

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Малюнкові тести Візуалізація емоційного стану. Образне мислення

Декоративно-стилізований образ

Абстрактно-символічний образ

Рис. 3.1-3.17. Роботи слухачів довузівськоїпідготовки КДІДПМД ім. М. Бойчука

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ

Малюнкові тести. Візуалізація настрою. Тема «Радість» (пошукові ескізи)

Рис. 3.18,3.19. Роботи слухачів довузівської підготовки КДІДПМД ім. М. Бойчука

14&А ф .>-^г\” .* ,^

Малюнкові тести. Візуалізація настрою. Тема «Сум» (пошукові ескізи)

•

% ■ * ■’ '

(

Рис. 3.20. Роботи слухачів довузівської підготовки КДІДПМД ім. М. Бойчука

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Малюнкові тести. Візуалізація настрою. Тема «Радість» (чистовий варіант)

Рис. 3.21,3.22

ТВО РЧІ ЗАВДАННЯ д л я з а к р іп л е н н я н а в ч а л ь н о г о м а т е р іа л у т е м и з а н я т т я

Чи спостерігаєте ви відмінність у засобах художньої виразності, що відобража

Яка відмінність у засобах художньої виразності, що відображають протилежні

Які об'єкти дизайну ви можете створити засобами художньої виразності, що ві

ють різні емоційні стани, почуття, настрої? настрої «Радість» і «Сум»? дображають радісний настрій? дображають спокій, розслабленість, смуток? 5. 6.

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

Наведіть приклади дизайнерських розробок, де засоби художньої виразності відображають спокій, розслабленість, смуток.

СВІТ ПРО ФЕСІЙ Фахівці художнього типу професій, які передають емоційний стан: художньо-

графічними засобами виразності - дизайнер-графік, веб-дизайнер, стиліст, деко ратор в театрі, художник-оформлювач; засобами виразності художнього слова письменник, поет, актор; засобами виразності пластики тіла - актор, танцюрист, балетмейстер, хореограф; засобами виразності музики: композитор, музикант

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ **

П ЕРЕЛ ІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМ ІН ІВ

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

КО НТРО ЛЬНІ ЗАПИТАННЯ іV 1.

для пер е вір ки власних н а в ч а л ь н и х д осягнень з а т е м о ю з а н я т т я

Чому підготовку дизайнера починають з тестування та вправ на візуалізацію власного спонтанного настрою, емоційного стану, почуття засобами художньої графіки (начерк-враження, колірний або лінійний малюнок)?

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

Світовий досвід підтвердив, що найбільш вдалі, а часто геніальні проекти були утих майстрів, які синтезували в собі художні, дизайнерські, конструкторські, техноло гічні обдарування. Наведіть всесвітньо відомі імена проектувальників та їх твори.

Чому для підготовки дизайнера важливе виявлення здібностей до художньографічної та об'ємно-пластичної саме творчої, а не репродуктивної діяльності?

Чому для вибору найвиразніших художніх засобів, з допомогою яких можна візуалізувати власний спонтанний емоційний стан, почуття, настрій використо вують естетичні відчуття, інтуїтивні методи, а не раціональні, усталені правила?

Обґрунтуйте необхідність наявності у дизайнера таких особистісних якостей: емоційності, емпатії, естетичного смаку, творчості. Результати аналізу візуалізації власного спонтанного емоційного стану, почут

тя, настрою (виконаних на підсвідомому рівні), що проводився в умовах довузівської підготовки А.С. Сімоніком протягом 23 років, дають можливість зробити такі висновки: 1.

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

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

II 3.

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Візуалізація протилежних настроїв, емоцій структурно розмежовує художні за соби виразності, відображені в таблицях «Радість» і «Сум» а також «Основи ком позиції та кольорознавства». Гармонічне поєднання засобів художньої виразності у творчості має відповідну залежність від внутрішнього стану митця, від його розвиненої чуттєвої інтуїції.

Керую чись раціональною логікою, можна побудувати схематичну та умовну композицію, керую чись настроєними відчуттями (входженням в образ), можна створити гармонічну емоційно та змістовно наповнену композицію.

Гармонічна композиція - це комплексна видозміна характерних ознак у засо

бах художньої виразності. Через засоби художньої виразності (художню мову) дизайнер створює одухо творене предметне середовище.

§4.

Графічне відображення української мови як візуальний засіб виразності дизайну 1. Чиє відповідність у сприйнятті звуків, слів української мови з їх візуальним гра фічним і колірним відображенням? Наведіть приклади. 2. Наскільки важливі для дизайнерів-початківців і професійних дизайнерів навички з візуалізацїї вербальної українськоїмови в колірно-графічні образи? 3. Н азвіть прізвища митців з історії дизайну, які віртуозно володіли прийомами трансформації почутого або прочитаного в колірно-графічний образ дизайноб'екта.

Художньо-дизайнерська т в о р ч іс т ь в навчальних умовах, т а к само як і у вироб ничих дизайнерських бюро, проектних виробничих підрозділах розпочинається зі

сприйняття на підсвідомому, інтуїтивному рівні обґрунтованого формулю вання техніко-технологічної сутності об'єкта дизайну, вираженого письмо вого чи усно. Словесне моделювання образу суспільно значущого об'єкта на різних етапах проектування поєднується з підготовкою: ■ графічних зображень (начерків, ескізів, технічних рисунків тощо); ■ пошукових макетів, моделей; ■ проектної дизайнерської документації, в тому числі із застосуванням комп’ютерної техніки; ■ експозиційного макета або моделі, іноді промислового зразка. Заверш ується художнє моделювання письмовим обґрунтуванням та усним за хистом дизайнерського проекту.

Дизайнер у процесі своєї т ворчої праці користується водночас різними ху дожніми мовами, які сприймаються: ■ зором (графіка, живопис, скульптура, архітектура), ■ слухом (вербальна мова, музика, спів),

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ

■ тактильно (пластика, фактура, текстура різних матеріалів).

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

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

П РАКТИЧНА РОБОТА 4

Вправи з пошуку асоціативного образу звуків української мови (за методикою А.С. Сімоніка) Завдання 1. Виконання графічних вправ з пошуку асоціативно-емоційного об разу звуків української мови. О б'єкти практичних розробок: образне асоціативно-емоційне уявлення у фор мі візуалізованого звуку української мови. Для розвитку у вас відчуття синтезу мистецтв, спорідненості вербальної україн ської мови і художньо-графічної мови дизайну пропонуємо виконати під час прак тичної роботи вправи з подальшим їх аналітичним осмисленням. Важливими умо вами виконання вправ є такі: 1.

Налаштування на слухове сприйняття певних звуків та їх сполучень.

Спонтанне відображення сприйнятого на підсвідомому рівні.

Сприйняття чітко і виразно промовленого, наприклад, звуку «А».

Проголошення звуку «А», вслухаючись у тембр свого голосу.

Озвучення близьких звуків, а також протилежних за тембром, силою звуку, його гучністю, наприклад; голосних «О», «€», приголосних «М», «Б», «П», для по рівняння та більш точного усвідомлення характерних ознак кожного звуку.

Емоційне налаштування на будь-який звук, наприклад, звук «А».

Пошук кількох слів, де, наприклад, звук «А» є домінуючим.

Пояснення своїх асоціацій після сприйняття звуку.

Аналіз, осмислення експерименту з трансформації звуку в асоціативноемоційне зображення.

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

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Орієнтовний зміст і послідовність пошуку вашого асоціативного уявлення під час лабораторного експерименту 1.

Вигляд картинного поля (видовженого горизонтального або вертикального; у формі квадрата, трикутника, еліпса чи іншої геометричної фігури).

Особливості розміщення елементів композиції у тому чи іншому картинному полі (статично або динамічно, симетрично або асиметрично, метрично або рит мічно, нюансно або контрастно тощо)

Пластика ліній, плям, об'ємів для візуалізації асоціацій.

Кольорове забарвлення, яке асоціативно викликає певний звук у різних комбі націях з іншими звуками. Наприклад, звук «А» з іншими.

Тектонічність сприйняття композиції - сприймається важко чи легко, виразно чи слабко, розмито.

Конструкційний матеріал, з яким асоціюється певний звук, наприклад «А».

7. 8.

Природне явищ е або стихія, з якою асоціюється цей звук. Ж иві істоти, з якими асоціюється звук «А».

Рослини або квіти, з якими асоціюється звук «А». О б 'єкт практичних розробок: словесне вираження асоціативного уявлення.

Завдання 2. Виконання графічних вправ з пошуку асоціативно-емоційного уявлення звуків української мови у формі художньо-графічного образу. Після письмових та вербальних вправ лабораторного дослідження, візуалізацію звуку необхідно здійснювати в такій послідовності: 1.

Виконання ахроматичного ескізного пошуку 6-8 варіантів (див. рис. 3.18 та 3.19).

Ваші ескізи та ескізи однокласників колективно обговорюються та аналізуються.

Із проаналізованих ескізів необхідно відібрати найбільш виразний варіант.

Уточнювальні запитання для добору найбільш виразного варіанта ескізу (оста точного): 3.1. Завдяки яким композиційним засобам виразнішим той чи інший варіант? 3.2. Які засоби виразності зайві або є не відповідними? Обґрунтуйте. 4.

Продовження виконання пошукових ескізів але в кольорі 6-8 варіантів (див. рис. 3.20).

Виконання чистової графіки Чистова кольорова графіка виконується у збільшеному масштабі. Якщо пошу

кові ескізи були розміром 8-10 см, то чистовий ескіз доцільно виконувати на фор маті АЗ або А2. Це дає змогу: ■ знову налаштуватись на асоціативне сприйняття того чи іншого звуку; ■ виправити композиційні помилки; ■ уточнити засоби виразності, оскільки незначні помилки у пошукових ескізах під час збільшення стають помітнішими. Для точності та легкості виконання на великому аркуші паперу необхідно зро бити кілька пробних варіантів. У процесі багатоваріантного ескізування ви будете

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ напрацьовувати професійні навички такого змісту: відчуваю, усвідомлюю дію, ви коную. Результати аналізу візуалізації звуків української мови (виконаної на підсвідо мому рівні), що проводився в умовах д овузівської підготовки А.С. Сімоніком про тягом 9 років, дають можливість зробити такі висновки: 1.

Наша рідна мова асоціативно переливається всіма кольорами, характеризуєть ся різною пластикою ліній, плям, об'ємів.

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

Візуальне (граф ічне чи об'ємно-пластичне) відображ ення звуків рідної мови

сутність. Кожен звук нашої мови містить у собі глибинну генетичну інформацію, і це дано

не збіднює, а навпаки, розкриває, збагачує, уточню є її емоційно зм істовну

нам від батька і матері як закодовану пам'ять про рідну мову.

Візуалізація звуків української мови

Рис. 4.1-4.10. Роботи слухачів КДІДПМД ім. М. Бойчука

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Верифікація графічного відображення звуків української мови

^ «і 9

СВІТ ПРО ФЕСІЙ Виї Зикладач-експериментатор, вчитель-експериментатор, новатори: викладач, вчитель, дизайнер-дослідник.

П ЕРЕЛ ІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМ ІН ІВ У н авчал ьн о м у м а т е р іа л і параграф а: колірно-графічні образи дизайнер ських розробок; прийоми трансформації, трансформація словесно виражених об разів у графічне образотворення дизайн-об'єктів; художньо-дизайнерська твор чість у навчальних умовах; дизайнерське бюро; проектні виробничі підрозділи; моделювання образу суспільно значущого об'єкта проектування. У словнику-довіднику: візуалізація відчуттів; словесні, художні, графічні, плас тичні засоби дизайнерського проектування; вираження проектного задуму дизай нерською мовою пластики; візуалізація звуків української мови.

(

ТВО РЧІ ЗАВДАННЯ д л я з а к р іп л е н н я н а в ч а л ь н о г о м а т е р іа л у т е м и з а н я т т я

Завдання. Створення цілісного асоціативного образу українського слова з окремих візуалізованих звуків-асоціацій. Послідовність 1.

виконання

завдання:

Ви оволоділи методикою А.С. Сімоніка з пошуку відповідного уявного асоціа тивного образу окремого звуку української мови та його вираження словесно,

колірно-графічно. На рис. 4.11 -4.16 подано приклади створених цілісних образів асоціації україн

Обґрунтуйте актуальність для дизайнера оволодіння методикою А.С. Сімоніка з

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

Спробуйте застосувати методику зі створення цілісного образу асоціації укра їнського слова з окремих візуалізованих асоціацій звуків на вибраних самою особою енергетично привабливих словах.

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

Приклади створених цілісних образів асоціації українського слова з окремих складових (візуалізованих асоціацій звуків) Візуалізовані окремі звуки, зокрема «А», «М», «Р», «У», «Т», «К», «О», «С» та ін. складені у слова-образи. Наприклад: «МАМА», «ТАТО», «УРА», «УКРАЇНА», «РАНОК», «СУМ», «ДУМА» і т. д. (рис. 4.11 -4.16), де можна: ■ побачити слова, їх будову, зображувальний асоціативний ряд; ■ розкрити сутність окремого звуку та українського слова в цілому.

ЗА С О БИ ВИРАЗНО СТІ V ДИЗАЙН-ПРОЕКТАХ Наприклад: ■ ми бачимо, що звук «М», асоціюється з водою, із синьо-зеленим кольором, з роз митою хвилястою пластикою ліній, плям, об'ємів, композиція - горизонтальна; ■ звук «А», навпаки, асоціюється з вогнем, сонячною енергією, помаранчевим і чер воним кольором, пластика ліній, плям, об'ємів - трикутна пірамідальна динамічна, композиція вертикально видовжена, з нахилом у верхній точці праворуч.

КО НТРО ЛЬНІ ЗАПИТАННЯ для п еревір ки власних н а в ч а л ьн и х досягнень з а т е м о ю за н я т т я

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

2. 3.

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

Чому дизайнеру має користуватися водночас різними художніми мовами, які сприймаються зором, слухом, тактильно?

Обґрунтуйте значення навичок володіння дизайнером мовними засобами для усного та письмового вираження проектного задуму однаковою мірою з про ектною мовою (художніми, графічними, пластичними засобами).

Опишіть, що означає для кожного дизайнера вивчати, відчувати рідну (природ ну) мову.

Як виражені у сучасному дизайні синтез мистецтв, спорідненість вербальної української мови і художньо-графічної мови дизайну?

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ § 5. Основи композиції та кольорознавства 1. Які композиційні рішення для вас е найбільш привабливими? 2. Наскільки важливими для дизайнерів-початківців і професійних дизайнерів е зна ння законів композиції і навички застосування їх під час виконання варіантів проектних рішень? 3. Чому саме композиція е засобом гармонізації об 'єктів дизайну

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

Вивчення основ композиції в профільній підготовці: ш сприяє розкриттю творчих здібностей дизайнера-початківця; ■ надає можливість збагнути багатство засобів виразності в мистецтві у цілому та в дизайні зокрема; ■ створює навчальне середовищ е для формування вміння аналізувати компо зиційні побудови та художні засоби виразності; ■ спрямоване на набуття навичок увиразнення об'єктивних закономірностей організації художнього твору, об'єкта дизайну, природи для їх застосування у дизайнерській творчості. Інструментом пізнання основ композиціїс унікальне художнє від чуття т а ана літичне мислення.

Об'єктами осмислення виявів композиційних закономірностей є: 1) людина, з її психофізичним станом (фізичним, емоційним, інтелектуальним), та процес відображення емоційного стану людини у творчості; 2) природні явища; 3) навколишнє середовище та його вплив на людину. Створюючи композицію, художник, дизайнер керується, крім знань, витонче ним відчуттям гармонії кольору, пропорцій, пластики форм, ритму, метру, конт расту, нюансу, рівноваги, динаміки, спокою, симетрії, асиметрії, домінанти, акцен ту, тектоніки, масштабу і т. ін. Втрата чи уникнення того чи іншого відчуття засобу виразності збіднює художній твір, він стає маловиразним, недосконалим. Тому ви вчення основ композиції с п о чатко м формування професійних в ід ч у т т ів , знань, вмінь, навичок, е с т е т и ч н о ї к о м п е те н тн о сті. Кожний художній твір вимагає неповторного, іноді евристичного художнього т а проектного вирішення, особливо об'єкт дизайнерськоїрозробки, а отже, має бути оригінальним за способом мислення і сприйняттям. Це означає, що матеріальна культура мистецтва починається з відчуття нової композиції, тієї гармо нії, яка буде задовольняти потреби людини, суспільства. Італійський архітектор і вчений, один із фундаторів нової європейської архітек тури і провідний теоретик мистецтва Л.-Б. Альберті ще в епоху Відродження зазна-

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ

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

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

ня композиції. 1. Організація площини, об'єму чи простору відповідно до функціональних ви мог, з урахуванням естетичних, утилітарних, соціально-культурних та економічних потреб. 2. Відображення техніко-технологічного вдосконалення, поданого в конструк тивній побудові та у фізико-механічних властивостях зовніш ньої форми об'єкти ди зайнерської розробки. 3. Гармонійне поєднання та підпорядкування всіх необхідних засобів виразнос ті в цілісному художньому образі. Для виріш ення зазначених завдань необхідно синтезувати дизайнерські знання т а вміння з композиції зі знаннями та практичним досвідом з інших наук: ш інженери: про функціонування предметів, предметного середовища, архітек тури, психофізіології про вплив об'єктів дизайнерських розробок на людину та на природне середовище; ■ загальнотехнічних дисциплін: про технічне проектування, матеріалознав ство, механіку, фізику, будівельну фізику, математику для надійного та опти мального архітектонічного вирішення, щоб функція предмета виконувалась надійно і тривалий час, про економіку виробництва; ■ гуманітарного та мистецького циклу дисциплін: про суспільство (філософія, соціологія, естетика та ін.), мистецтво (історія, теорія, культурологія та ін.); ■ циклу дисциплін про людину (психологія, анатомія, фізіологія та ін.), ■ циклу дисциплін з екології. Композиція - це закономірна організація засобів виразності з метою відображен ня в чуттєво-образній формі осягненоїфункціїабо сутн о сті художнього твору. П о н яття *композиція « походить від л а т. composition - з'ясування, складання, примирення, побудова складного рішення. Традиційно цим терміном позначають внутрішні зв 'язки твору. Якщо твір існує як образ, т о за допомогою композиції дизайнер (художник) створює цей виразний образ. Компонування - це переміщення, підпорядкування елементів композиційному цілому, пошук нового порядку. Компонування може бути лише етапом у процесі створення композиції.

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ

5.2. Види композиції в дизайні Назва виду композиції Площинна

Характеристика виду композиції Композиція, елементи якої розташовані на одній площині (рисунок, ре кламна графіка, аплікація, рисунок тканини)

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

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

Об'ємнопросторова

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

5.3. Візуальні носії композиції. Засоби виразності Назва засобів виразності та їх характеристика Лінія, риска. Один із найпоширеніших засобів виразності. Основа образотвор чого мистецтва, самого поняття рисунку. З лінії започатковується художній твір. Тому важливо з'ясувати її характерні особливості (рис. 5.1). Лінія може бути різною: ламаною, рівною, хвилястою, одноманітною чи пульсу ючою, чіткою або розмитою і т. ін. Лінією можна підкреслити чи передати форму площини, об'єму чи просторово го зображення, перспективи. Однією чи кількома лініями можна зруйнувати цілісне сприйняття площинної чи об'ємної форми. Аналізуючи пластику лінії, можна визначити стильові ознаки художнього твору. Лінією, рисунком знані майстри мистецтва А. Дюрер, К. Кольвіц, Ф. Гойя, М. Врубель та ін. уміло передавали емоції, думку, ідею, а також характер зображуваного об'єкта. Щоб збагнути значення л ін іїу мистецтві, слід звернути увагу на характерні озна ки ліній у творах Леонардо да Вінчі, Рафаеля, Мікеланджело і порівняти їх. Як зізна вався Мікеланджело, провівши першу лінію в новій роботі, він зупинявся і згадував, чи не повторює те, що колись таким чином зображував? У характері лінії можна побачити: ■ світосприйняття художника; ■ його манеру; ■ темперамент; ■ емоційний, фізичний стан.

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Лінія, риска

Рис. 5.1

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Крапка - знак, елемент, засіб виразності, що зупиняє, концентрує увагу у сприйнятті композиції. Сприйняття крапки залежить від її розміру, масштабності відносно картинного поля, об'єму чи простору. У разі збільш ення її величини може сприйматись як пляма. Крапку нерідко застосовують як акцентувальний елемент, регулюючи так рух, ритм сприйняття художнього твору (рис. 5.1).

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

Форма - геометрична будова площини, об'єму чи обмеженого простору. Най простіші різновиди площинної форми - від трикутної до багатокутної і кола. Най простіші об'ємні форми утворені від простих площинних форм: піраміда, конус, куб, паралелепіпед, призма, шар, еліпсоїдні об'єми (рис. 5.3). Різновиди форм такі: ■ аморфними називають форми, які не мають у будові геометричної основи; ■ б іоформами називають форми, створені природними процесами; ■ техноформами називають форми, створені людиною, що виконують лише технічну функцію; ■ художніми називають форми, що виконують не лише утилітарну, а й духовну, естетичну функцію і мають художньо-образний вираз, Сприйняття форми залежить від кута зору (ракурсу), освітлення, її розмірів сто совно людини, фактури, текстури, нанесених ліній, членувань, матеріалу, кольоро вого забарвлення. На процес формоутворення у дизайні впливають такі фактори: ■ функція (призначення предмета); ■ зміст; ■ ідея; ■ емоційність сприйняття; ■ умови комфорту, де необхідно враховувати знання про людину; ■ умови екологи (знання про природні процеси); ■ вибір матеріалу; ■ конструктивне рішення; ■ технології виготовлення; ■ економічна доцільність форми.

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

Іі

ЗА С О БИ ВИРАЗНО СТІ V ДИЗАЙН-ПРОЕКТАХ Пляма

Рис. 5.2

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Форма, об'єм

Рис. 5.3

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Сприйняття композиції залежить від: ■ освітлення; ■ сили світла;

в характеру освітлення; ■ характеру форми чи площини; ■ матеріалу; ■ його чистоти, обробки чи покриття поверхні (матової або глянцевої); ■ від покриття фарбами (яскраві фарби відбиваю ть більш е світла, темні менше). Дизайнеру не тільки важливо знати та розуміти світло, освітлення, світлотінь як фізичне явищ е, а й передбачати як воно сприймається людиною: емоційно, асоціа тивно, образно. Наприклад, бачити його як:

в боротьбу протилежностей - світла і тьми; ■ співіснування світла і тіней, ■ Всесвіт, Світ, Знання, Віру, Помисли, Дію чи щось інше. Крім того, світлом (освітленням) дизайнер, архітектор може забезпечити той чи інший рівень комфорту, знаючи їх фізичну, біохімічну дію на людину, вплив на фізіо логію та психологію сприйняття. Дизайнер може використовувати освітлення як засіб виразності, для підсилен ня емоційного сприйняття художнього задуму. За допомогою освітлення можна підкреслити домінуючий елемент чи акценти, а також пластику об'ємної форми, її текстури, фактури, кольору і т. ін. Ритмічним коливанням напруги світла можна під силювати ритмічне сприйняття композиції (рис. 5.4 та 5.5).

Колір - це світло, фізично розкладене на кольоровий спектр (червоний, пома ранчевий, жовтий, зелений, блакитний, синій, фіолетовий). Кольори поділяють на хроматичні та ахроматичні.

Кольоровий тон - це як звучання нот до, ре, мі, фа, соль, ля, сі, де кожен звук має свою тональність, тобто звуко-хвильове коливання.

Кольорове забарвлення також залежить від світлових коливань, наприклад: ■ червоний колір має 620-760 нанометрів (нм) (довжина хвиль);

в жовтий: 575-585 нм; ■ зелений:510-550 нм;

в блакитний:480-510 нм; в фіолетовий: 380-450 нм. Яскравість - властивість кольору в наближенні до світла. Наприклад:

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

Хроматичні - це спектральні кольори, вони характеризуються трьома озна ками: кольоровим тоном, яскравістю, насиченістю.

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ С вітл о , о с в іт л е н н я

Рис. 5.4

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Світлотінь, тон

Л Ш Ґ Л "

, .у ..

Рис. 5.5 Веселка - одне з найкрасивіших явищ природи. Люди вже давно замислюва лися над її природою. Навіть А р істо те л ь, давньогрецький філософ, намагався по яснити причину веселки. Сонячний промінь або звичайний промінь білого світла насправді є сполучен ням усіх кольорів. Білий промінь розпадається на різні кольори. Ми побачимо чер воний, жовтогарячий, жовтий, зелений, синій і фіолетовий кольори. Утворені кольори утворюють смужку з кольорових ліній, що сполучаються, на зивається «спектр». А х р о м а ти ч н і - це білий, сірий, чорний кольори. Відмінність між ними тіль ки в яскравості. Ахроматичного чистого кольору майже не буває, він може бути тільки умовним, оскільки білий, сірий чи чорний кольори сприймаються в оточен ні з більш насиченими кольорами, які у свою чергу зумовлюють сприйняття в них контрастних відтінків.

Використайте набуті знання з основ наук (Фізика, 7-й клас. Тема: «Світлові явища»).

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ З історії дослідження символіки кольору, впливу кольору на психологію людей Питання колірної гармонії та її впливу на психологічний стан людини вивчалося з давніх-давен. Перша ґрунтовна наукова праця про колір з'явилася в 1810 р. і належала перу відомого мислителя та природознавця Й.В. Гете. Він вважав дослідження кольору одним із найбільших досягнень у житті. Саме він першим подав колірний спектр у кольоровому колі. Різко контрастні кольори, які розташ овуються один навпроти одного (наприклад, фіолетовий і жовтий), він назвав додатковими. Гете також звернув увагу на широковідому тепер особливість: якщ о довго ди витися на якийсь колір, а потім закрити очі, у темряві з'явиться пляма протилеж ного - додаткового кольору. Так, після розглядання червоного ліхтаря пляма буде зеленого кольору. Гете з цього приводу зазначав: «...коли око споглядає колір, воно відразу приходить в активний стан і... несвідомо одразу створює інший колір, який у поєднанні з цим кольором містить у собі все колірне коло. ...У цьому виявляється основне правило колірної гармонії». Пари кольорів, які розташовуються на колі поруч і можуть сприйматися за відтінки один одного, Гете назвав безхарактерними (наприклад, жовтий і помаранчевий, зеле ний і синій). У колірному колі немає білого і чорного - вони безбарвні. Ці кольори при йнято називати ахроматичними і відокремлювати від хроматичних кольорів спектра. Вчені дотепер сперечаю ться про механізм впливу кольору на психологію лю дини. Багато хто вважає, що колір може впливати на організм безпосередньо через фізіологію (Я. Орбелі, С. Кравцова вважаю ть доведеним вплив кольору на вегета тивну нервову систему). Вже Гете вважав червоно-жовту гаму «збудливою, такою, що ож ивляє», а синьофіолетову - «такою, що викликає сумно-неспокійний настрій». Зеленому кольору було відведено проміжне, ніби врівноважувальне, місце. У 1911 р. Ф. Стефанеску-Гоанг виріш ив дослідити, які фізіологічні зміни відбу ваються в організмі людини за різного колірного освітлення. З'ясувалося, що пур пурний, червоний, помаранчевий і жовтий кольори збуджують нервову систему, викликають почастішання і посилення пульсу та дихання, активізацію м 'язової системи (особливо червоний). Зелений, блакитний, синій і фіолетовий діють проти лежно (гальмують) - дихання сповільню ється, частота пульсу стає рідшою. Відомі також досліди невропатолога Ш. Фере, який вивчав вплив колірного освітлення на працездатність (досліджувалися показники ручного динамометра). Учений з'ясував, що за короткочасної роботи найбільш ефективне червоне освіт лення, а за синього освітлення продуктивність праці знижується. За тривалої ро боти більш сприятливим виявилося «стабілізуюче» зелене освітлення. Висновки за результатами дослідів Ф ере нині сприймаються неоднозначно. Багато вчених вказували, що на працездатність впливає не тільки і не стільки спектр, скільки на сиченість світла. Тому будь-яке занадто насичене кольорове освітлення стомлює. Дія самого кольору, безумовно, визначається насамперед усталеними люд ськими асоціаціями, які сформовані на основі особистого досвіду, культури та при родного середовища.

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Г. Фрілінг і К. Ауер (автори книги «Людина - колір - простір») акцентують увагу на тому, що «всі колірні уявлення людини - відображення природних співвідношень». Досить назвати перші асоціації, що зумовлю ються червоним кольором - вогонь, кров, губи, щоб зрозуміти, чому він став символом небезпеки, агресивності та сек суальності. Недаремно у різних народів (і навіть різних соціальних груп) кольорова символіка і колірні переваги часом значно відрізняються. К.Д егтяр ьов у статті «Історія кольору» відзначає вражаючий факт «культурного дальтонізму» стародавніх греків, які практично не виокремлювали зелений та си ній кольори, а колір моря описували, наприклад, як «винний». Стародавні японці не вважали море синім, як ми, - для них воно було білого кольору. Втім, якщо подивитися на воду в стакані, це не здається таким уже дивним. Можна згадати і те, що в російській мові чітко розділяють синій і блакитний кольори, тоді як в англійській мові для цього діапазону зазвичай вистачає одного слова - blue. Цілком зрозуміло, що український сільський житель навряд чи відчуватиме особли ве захоплення від зеленого кольору і йому важко зрозуміти стомлених пустелею арабів, які вважають його священним коліром мусульманства («зелений прапор пророка»). Той самий асоціативно-психологічний принцип закладений і в поділ кольорів на «теплі» і «холодні». Безумовно, в червоно-помаранчевій кімнаті людині буде зда ватися набагато гарячіше, ніж у синьо-зеленій. Експерименти показали, що, незва жаючи на об'єктивно однакову температуру в таких кімнатах, суб'єктивно відчува ється різниця в 3-4 градуси. Червоно-помаранчева гама психологічно впливає на організм, стимулюючи кровообіг, а синьо-зелена - його «сповільнює». З тієї самої причини червоний стілець буде здаватися людині «теплішим» за синій. Все це наслідок не стільки «магічної» сили кольору, скільки відчуття певних асоціацій: синява - льоду і води, зелень - прохолоди лісу проти жовто-сонячного тепла і червоно-вогняної спеки. Важливим є також поділ кольорів на світлі й темні. Найбільший контраст у цьому випадку між чорним і білим, а у хроматичних кольорів - між фіолетовим і жовтим. Звичайно, характер кольорів сильно залежить від їх поєднання. Ж овтий квадрат на білому тлі матиме «тепліший» і темніший вигляд, ніж на чорному. Оптичні ілюзії взагалі відіграють визначальну роль у сприйнятті кольорів. Так, світлі теплі кольори (а також білий) за характером екстравертні, їх імпульс зверне ний назовні, вони мають тенденцію до «розширення». Темні холодні кольори (а та кож чорний), навпаки, інтровертні, спрямовані «вглиб». Так, промінь, що проникає крізь щілину, робить її візуально ширшою. До цього можна додати, що червоний колір має властивість наближатися до глядача, а синій - віддалятися. Крім ілюзорного й асоціативного є цілком об'єктивний вплив кольору на сіт ківку ока і зоровий аналізатор. Дослідники помітили, що адаптація очей до жовто го, зеленого і білого підвищує працездатність зорового аналізатора, а червоний і синій - погіршують. Для гостроти зору і швидкості розрізнення деталей найбільш сприятливим є неяскравий жовтий фон, а найменш - яскраво-червоний. У композиції колір допомагає: ■ виявити головне чи другорядне; ■ виділити акценти (змістові та емоційні); ■ підкреслити тектонічну, конструктивну, пластичну будову;

ЗА С О БИ ВИРАЗНОСТІ V Д ИЗАЙН-ПРОЕКТАХ ■ наблизити чи віддалити елементи композиції; ■ ритмічно організувати площину, об'єм чи простір.

Гармонічне поєднання кольору з іншими засобами виразності, такими як ритм, метр, контраст, нюанс, динаміка, статика і т. ін., підсилює виразність художнього твору та естетичне його сприйняття. Через колір, як і через музику, людина може передати найтонші та найбурхливіші почуття і думки. Колір - найвпливовіш ий засіб виразності. Він може діяти пригнічувально, тонізуючи або, навпаки, - збуджувати фізичний, розумовий та емоційний стан людини (табл. 5.1). Таблиця 5.1 Колір, асоціатив не відчуття

Дія, вплив кольору

Червоний колір Збуджувальний, енергетично напружений, стимулює роботу м'язів, (гарячий)

Помаранчевий, оранжевий, (яскравий)

Жовтий (теплий)

Зелений (природній)

Блакитний (світлій)

Фіолетовий (пишний)

Коричневий (спокійний)

Сірий (холодний)

Білий (легкий)

Чорний (важкий)

підвищує кров'яний тиск, ритм дихання, ритм біотоків мозку Викликає збудження, радість, рухливість, стимулює травлення їжі, прискорює кровообіг Стимулює зорове сприйняття, роботу мозку, нервової системи, за спокоює нервове збудження, звеселяє, стимулює спілкування, творчу розумову діяльність Діє заспокійливо, освіжаючи, впливає на розширення капілярів і так знижує кров'яний тиск, стимулює розумову діяльність Викликає відчуття свіжості, світлості, простору, діє заспокійливо, майже так само, як і зелений колір. Покращує хворобливий стан, кров'яний тиск. Стимулює творчу чуттєву діяльність Позитивно діє на роботу серця, легенів, збільшує їх витривалість. У великому обсязі деструктивно впливає на психіку. Колір втоми, журби Викликає відчуття стабільності, статичності, фізичної втоми. Із сірим і чорним кольором діє пригнічувально на психіку Діє пригнічувально на психіку аж до мінорного стану. Викликає сум, апатію. Асоціативно сприймається як діловий, стриманий. Гармонічно поєднується з насиченими кольорами Викликає невпевненість, сум'яття, дратливість, невизначеність. Асо ціюється як символ чистоти, шляхетності, світла. Як і сірий, добре по єднується з іншими насиченими кольорами Діє деструктивно (руйнівно) на психіку, пригнічувально у великих об сягах. Сприймається як безмежність, невизначеність. Чорний квадрат, ромб в українському народному мистецтві асоціюється з полем, люд ською долею. Чорний колір підсилює яскравість, насиченість інших хроматичних кольорів, його часто застосовують як акцент у композиції

Теплі насичені кольори ілюзорно наближають елемент композиції, холодні та світлі навпаки - віддаляють. Кольорова гармонія можлива на основі контрастного

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ чи нюансного поєднання. Вона може бути в холодній чи теплій гамі. Контрастне поєднання кольорів підсилює їх насиченість і яскравість. Нюансне поєднання ко льорів знижує сприйняття насиченості і яскравості (рис. 5.6). Колір іноді має значення, як символ, знак, який асоціюється з різними явищами, наприклад, показано в табл. 5.2. Таблиця 5.2 Назва кольору Червоний Блакитний

Колір

■ ЩЩЩШ шшшшт

Жовтий Чорний

Символ, асоціація Вогонь Небо, вода Золото, сонце, хліб

Земля, Всесвіт

Колір застосовується як попереджувальний засіб - на дорогах, в інтер'єрі, на транспортних засобах, у цехах. М а те р іа л - засіб для реалізації задуму і почуттів. Якщо ідея матеріалізована, то це є підтвердженням, що вона правильна. Водночас знання властивостей матеріалу, осо бливо естетичних, значно підсилює виразність художнього твору, матеріал стає оду хотвореним. Кожна творча робота виконується у відповідному їй матеріалі (рис. 5.7). У процесі проектування дизайнер працює з різними матеріалами: ■ на етапі ескізного пошуку - з графічними матеріалами; ■ на етапі роботи над пошуковими макетами - з матеріалами, які легко оброб ляти, клеїти, змінювати пластику форм, пропорції тощо (папір, картон, піно пласт, пластилін і т. ін.). Якщо доводиться виконувати діючу модель або промисловий зразок, добира ють матеріали, які відповідають задуму, конструктивним, технологічним, естетич ним та іншим умовам. Розвиток відчуття матеріалу, його пластичних властивостей, естетичних якос тей залежить від постійної роботи з ним (табл. 5.3). Таблиця 5.3 Специфіка дизайн-діяльності Художник-графік

Дизайнер

Архітектор

Матеріали для втілення задуму. Вибір з арсеналу графічних матеріалів Вибір з матеріалів, що є або можуть бути у виробництві (метал, дере во, скло, пластмаса, вуглепластик, склопластик, тканини та ін.). Іноді дизайнер для реалізації задуму робить замовлення на нові матеріа ли з новими властивостями Вибір з будівельних матеріалів: бетон, цегла, камінь, метал, скло, дерево

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Колір

ЛЛ/

АААА А

Рис. 5.6

Матеріал

Рис. 5.7

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ 5.4. Ком позиційні засоби виразності Пропорції, масштаб - закономірне співвідношення величин або кількісна міра чого-небудь. Це засіб виразності, що сприймається дуже активно і формує май же всі інші засоби виразності, де пропорційна кількість переходить у нову якість. Наприклад: метр, ритм, статичність і динамічність, урівноваженість і нерівновага, кольоровий або тоновий контраст чи нюанс. Усі ці засоби мають свою кількісну

міру (пропорції). Відчуття кількісної закономірності - це відчуття гармонії, краси, логічності дії, порядку, що відображено у пропорціях форм, відрізків, плям, тональних, кольоро вих співвіднош ень, розмірності мас, ваги, матеріалу, об'єму у просторі і часі (рис. 5.8 та 5.9). Найпростіші пропорційні співвіднош ення - це ряд раціональних чисел 1 : 2, 1 :4 ,1 :6 ,1 :8 і т. ін. Більш складний і динамічний ряд ірраціональних чисел: 1 : 3, 1:5,1 :7,1 :9 і т. д. Відомий ряд Фібоначі: 3 :5 ,5 :8 ,8 :13,13:21 і т. д. Пропорції «зо лотого перетину «, які відомі з давніх часів, - це співвідношення 1:0,65,1:1,65. Щоб досягти гармонії в композиції, необхідно вибрати пропорційні співвідно шення, що відповідають: ■ змісту; ■ функції твору; ■ його емоційному сприйняттю. Поняття закономірність розкриває суть пропорціонування - закон і міра, тобто міра в пропорціях, що відповідає об'єктивним законам природи, людського сприйняття, інакше це вияви дисгармонії.

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

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

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ П р о п о р ц ії

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Масштаб

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Контраст, нюанс

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Нюанс - організація засобів виразності (графічних, об'ємних, об'ємно-просторових та ін.) за зближеними характерними ознаками. Нюанс не тільки композиційний за сіб, а й характерна ознака ліній, плям, об'ємів, тональних, кольорових співвідношень та інших засобів вираження. Наприклад, нюансна будова плями - це коли її пластика утворена з ледь помітних переходів округлих чи ламаних ліній. Аналогічно організо вана об'ємна форма, де перехід від одного об'єму плавно переходить в інший. Ніжне, плавне поєднання тональних, кольорових, світлотіньових відтінків фактури, тексту ри, матеріалів тощо - це нюансне вирішення, або нюансування. Нюансне вирішення чого-небудь сприймається як послідовність, витриманість, ніжність, спокій, тому цей засіб виразності застосовують разом із засобами, які допомагають створити стрима ний або спокійний настрій. Нюанс у засобах виразності та в композиції - якість, проти лежна контрасту. Нюансна, як і статична, композиція, може бути однорідною або ускладненою, де нюансне вирішення домінуватиме, а включені контрастні елементи будуть доповненнями або уточненнями. Нюансна композиція створюється з майже непомітних відтінків, пластичних переходів, тому вимагає від художника і дизайнера відповідного настрою на таке відчуття. Нюансними можуть бути речі, які за призначен ням сприймаються ніжно, спокійно, наприклад: предмети та інтер'єр зони відпочинку. Сприйняття нюансного вирішення пластики, кольору, графіки, об'ємів потребує відпо відного настрою - зосередження, спокою (див. рис. 5.10).

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

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

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

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

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Динаміка, статика

Рис. 5.11

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Мет р - це одноманітний повтор у композиційній побудові чи у будові окремих засобів виразності. Розташ ування одного елемента на однаковій відстані вздовж осі називають метричним рядом, метричним повтором. Метричність можна спостерігати: ■ в одноманітній за товщиною і тоном лінії; ■ побудові кола, кулі, пластика яких створена одноманітним радіусним обер том лінії чи площини; ■ квадраті, кубі, які створені з однакових відрізків сторін, чи площин тощо; М етрична композиція утворю ється одноманітним розташ уванням на площині, об'ємі чи у просторі одноманітних за розміром, формою і тоном кольорових плям, ліній, об'ємних форм. М етричне розташ ування елем ентів будується відносно кількох осей чи од н ієї осі. М етричні елементи іноді застосовую ть у ритмічних композиціях як допо внення, для підкреслення напруженого ритмічного порядку. Як засіб виразності метричність застосовую ть для передання стану спокою, зосередженості, смутку (рис. 5.12). Тотожність - рівнозначність, рівність кількох характерних ознак у різних за собах виразності. Ритм - закономірна зміна, коливання або чергування у будові засобів вираз ності та у композиційній будові, розташуванні їх. Лінія, в якій послідовно у чергуванні змінюєються радіус, кут, товщина, розмір, тон, напрямок руху, є ритмічною. Пляма є ритмічною, якщо утворена з послідовною зміною радіуса чи розміру ламаних ліній (овальна, еліпсоїдна форма, трикутна чи багатокутна та ін.). Об'єм є ритмічним, якщ о послідовно побудований з кількох радіусних чи різних за розм іром ламаних форм (наприклад, форма груш і, амфори, глечика і т. ін.). Ритмічним може бути розміщення на площині, на об'ємі чи у просторі різних за формою, розміром, тоном, кольором ліній, плям, об'ємів та інших засобів виразнос ті. Важливо враховувати послідовність у чергуванні елементів композиції, відстані та простору між ними. Ритмізацією площини, об'єму чи простору організовується зорове сприйняття, його рух чи зупинка. Все живе у природі, у тому числі в людині, що функціонує і розвивається за законами ритму, називають біоритмічним процесом (біоритмом ). Вивчення закономірностей біоритмічних процесів допомагає у створенні більш ефектив них композицій, визначенні міри їх впливу на людину. Наприклад відомо, що ви яви напруженого ритму в музиці, в освітленні, у кольорових, графічних, об'ємнопластичних та інших засобах виразності активно впливають на людину, що може призвести до психічного розладу. Вміле застосування ритму у будові засобів ху дожньої виразності, у їх ритмічній (композиційній) організації, допомагає дозувати емоційне, фізичне та розумове навантаження (рис. 5.12). Симетрія - рівномірна організація у будові засобів виразності, плями, пло щини, об'єм у чи об'ємно-просторового середовищ а відносно однієї чи кількох осей (рис. 5.13).

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Асиметрія, симетрія

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ

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

Дзеркальна композиція - це відображення однієї частини композиції віднос но кількох чи однієї осі з протилежної сторони.

Анфіладна - це багатоосьова композиція, де основну вісь перетинають друго рядні осі, вздовж яких симетрично розміщені ті чи інші елементи композиції, не порушуючи симетрії навколо основної осі. Частіше симетрію застосовують там, де потрібно передати стан спокою, статич ності, рівноваги. Інколи симетричні елементи композиції використовую ть як допо міжний засіб виразності, щоб підкреслити в основному асим етричну (динамічну, ритм ічну) композицію. Для сприйняття симетричності форми важливі всі її елементи: тон, нанесена графіка, колір, освітлення, світлотінь, фактура тощо.

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

Асиметрія на противагу симетрії - це вияв руху, напруження або руйнації (рис. 5.13).

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

Для сприйняття рівноваги необхідно врахувати кут зору глядача та освітлення. Рівновага - засіб у створенні спокійних мінорних композицій, споріднений із си метрією, статикою, метром, нюансом. Іноді рівновага може сприйматись і в асиме тричнихкомпозиціях, але з певноюметою. Нерівновага - поруш ення рівном ірно збалансованої організації ліній, плям, об'ємів, об'ємно-просторового середовищ а. Це зміщ ене сприйняття ком позиції відносно умовного центру чи осі. Н еврівноваж еності, незбалансованості д ося гають: ■ різними засобами; ■ зміною характеру форми, текстури, розміру, освітлення, напрямку руху; ■ зупинкою руху. Нерівновага - засіб виразності, споріднений з асиметрією, динамікою, ритмом, контрастом завдяки яким можна створити напружену активну композицію (рис. 5.14).

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

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Нерівновага, рівновага

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Домінанти можна досягти величиною, кольором, тоном, фактурою, матеріалом чи характером лінії, плями, об'єму, що активно виділяється серед менш помітних. Домінуючий елемент можна підкреслити композиційним розташуванням. Важли во, щоб домінуючий елемент композиції був головним за змістом і в емоційному сприйнятті (рис. 5.15). А к ц е н т - засіб для створення композиційної впорядкованості та розкриття змісту за допомогою зосередження уваги, зупинки, вирізнення з-поміж оточення. Це засіб регулювання емоційного сприйняття. Акцентом з другорядного вирізня ється більш суттєве та емоційне, важливе. Акцент - це регулюючий засіб. На площині чи об'ємі акцентами ми регулюємо на прямок і темп зорового руху. У просторовому середовищі, крім регулювання зорового, слухового чи іншого сприйняття, регулюється також напрямок руху людини. Наприклад, на виставці чи в іншому багатофункціональному інтер'єрі. Акцентом можна підкреслити або зруйнувати статику, симетрію, метр. Акцентом можна підсилити сприйняття динамі ки, асиметрії, нерівновагі. Акцент є важливим елементом ритмічного порядку, означен ня його темпу чи напруження. Акцент - це організуючий засіб, від розташування якого залежить емоційне сприйняття та змістове осягнення твору (рис. 5.1 б).

Домінанта

Акценти

■

гл

Уи

V /?

Щ лл,

■

■ 0

Рис. 5.15

їм»

Рис. 5.16

ЗАСОБИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ 5.5. Категорії композиції. Об'ємно-просторова структура, тектоніка Об'ємно-просторова структура - це характер взаємодії простору з об'ємом.

За цими ознаками об'ємно-просторову структуру можна умовно поділити на три групи: ■ відкриту, де об'ємні елементи композиції, конструкція розташовані у відкри тому просторі і простір переважає над формою (сіткові конструкції, велоси пед, баштовий кран, колонада, арки); ■ напіввідкриту, де об'ємні елементи композиції, конструкція розташовані у напівзакритому просторі; ■ закр и ту, відносно просто організовану структуру з закритим внутрішнім простором (об’ємна поверхня корпусу промислових виробів, внутрішній простір житлових приміщень) (рис. 5.17).

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

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

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Об'ємно-просторова структура

'ЧЛ,

'Ч / Ч ,

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ 5.6. Основні закони ком позиц ії Цілісність - це відповідна єдність усіх засобів виразності, що є у художньому творі і відповідає його змісту та функції. Це взаємозв'язок, взаємозалежність та під порядкованість елементів головному в композиції.

Гармонії цілісності досягають за допомогою ч у т т є в о ї логіки - інтуїції. За твердженням Е.А. Кібрика, «схема творчого процесу така: інтуїція - аналіз - інтуї ція». Оскільки мистецтво від початку до кінця сприймається почуттями, а усвідом люється та пояснюється за допомогою аналізу, мислення.

Цілісність тут можна

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

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

Змістовна обумовленість - це логічне розкриття теми, ідеї твору, а у дизай ні - функції предмета чи середовища.

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

Міра - це кількісні показники художнього твору, де врахована його гармонічна дія за призначенням на навколишній світ і на людину. За давньогрецьким визначен ням, «мірою всіх речей є людина «. У сучасному мистецтві, дизайні є потреба врахову вати не тільки людський фактор, а й закономірності природного середовища. Міра може виявитись в обсязі інформації, яку містить художній твір, у емоцій ному навантаженні того, хто сприймає, у кількості елементів, що розкриваю ть суть твору, у співвідношеннях між засобами виразності наприклад: ■ пропорціях; ■ кольорі; ■ між лініями, об'ємами; ■ іншим. Створюючи мікроклімат у просторовому середовищі, варто визначати кількісну міру, температуру, вологу, склад повітря тощо. Архітектура і дизайн взаємодіють не тільки з людиною, а й з природним середовищем, тому знати та відчувати міру взає мовпливу означає створити гармонію між художнім твором, людиною, середовищем. Енергетика.

Енергетичний потенціал художнього т вору складається з

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

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Структура художнього мислення дизайнера та умови, що впливають на композицію Допроектні умови ш Світогляд. ■ Осягнення законів природи, що оточує людину (розвиток аналітичнологічного мислення). ■ Світосприйняття (чуттєвий розвиток).

Проектні умови ш Осягнення функції художнього твору (евристично-образне мислення). ■ Чуттєве сприйняття функції художнього твору (емпатія). ■ Вибір засобів художньої виразності. ■ Техніко-технологічний вибір: 1) матеріалу; 2) форми; 3) конструкції; 4) технології виготовлення. ■ Вплив середовища: 1) предметне середовище; 2) природне середовище, екологія, біоніка та ін.

Ергономічні умови ш Функціонування людини: 1) фізичне; 2) емоційне; 3) інтелектуальне.

Соціально-економічні умови 1. Суспільно-історичні. 2. Соціально-культурні. 3. Національні. 4. Етнічні. 5. Регіональні. 6. Економічні.

еГ/

П РАКТИЧНА РОБОТА 5

Виконання тематичної композиціїз абстрактно-геометрич них фігур на задану тему: «Плин часу» (мажор або мінор)

Мета: через емпатію виявити відповідні темі явищ а контрасту чи нюансу, рит му чи метра, динаміки чи статики, симетрії чи асиметрії, рівноваги чи нерівноваги, тональної та кольорової гармонії, пропорцій, масштабу та інших засобів виразності.

Емпатія - це емоційне сприйняття теми та добір відповідних засобів худож ньої виразності. Проблемні запитання, завдання: 1.

Усвідомлення, що таке Час.

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ 2. Що означає для людини плин часу? 3. Особисте ставлення, відчуття, емоційне сприйняття плину часу - «мажорне чи мінорне»? 4. 5.

Які кольорографічні, об'ємно-пластичні, композиційні асоціації зумовлює плин часу? Які засоби виразності більше відповідають «мажорній» чи «мінорній» композиції?

6. У якому форматі картинного поля (квадратній, видовженій прямокутній формі по горизонталі чи по вертикалі) краще сприймається та чи інша композиція? 7.

Виконання пошукових ескізів (без кольору). Відобразити особисте усвідомлен ня, емоційне сприйняття, асоціативно-образне бачення теми.

Послідовність виконання роботи 1.

Завдання спочатку виконується олівцем чи іншими графічними матеріалами у змен шеному масштабі (приблизно 9-12 чи 9-9 см), 6-8 варіантів (див. рис. 3.18 та 3.19)

2. Добір найвиразнішого чорно-білого варіанта особисто і колективно з комента рями - чому і за які якості вибраний той чи інший варіант. 3.

Виконання пошукових ескізів дібраного варіанта в кольорі: 6-8 варіантів (рис. 3.20).

4. Добір найвиразнішого варіанта проводиться особисто і колективно, з комента рями, чому і за які якості вибраний той чи інший варіант. 5.

Кольоро-графічне виконання відібраного варіанта у збільш еному масштабі (експозиційний, виставковий варіант) у форматі А2 (рис. 5.19). Рекомендовані матеріали для виконання роботи: папір, олівці, туш, акварель, гуаш.

Асоціативно-емоційне відображення теми засобами художньої виразності. Тема «Плин часу» (варіанти виконання)

Рис. 5.19. Роботи, виконані слухачами КДІДПМД ім. М. Бойчука

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ 1 П ЕРЕЛІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМ ІНІВ

■ Ф

У н авчал ьн о м у м а т е р іа л і параграф а: колірно-графічні образи дизайнер

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

КОНТРОЛЬНІ ЗАПИТАННЯ

для п еревір ки власних еа в ча л ьн и х досягнень з а т е м о ю за н я т т я 1.

Чи правильно ви розумієте, що таке метр і ритм, чим вони відрізняються один від одного? Яка відмінність між статикою і динамікою? Які знаєте методи пропорціонування? Які знаєте види симетрій? Що таке композиція і компонування?

Уважно розглянь свою композицію на тему: «Плин часу» та з'ясуйте якими ху дожніми та композиційними засобами вона побудована.

§ б.

Аналіз тестових та художньо-графічних вправ (виконаних за методикою А.С. Сімоніка) ПРАКТИЧНА РОБОТА б

Умови виконання завдання На першому етапі виконавець самостійно послідовно аналізує, фіксує свій емо ційний стан та його відображення у всіх тест-завданнях. На другому етапі він спостерігає, аналізує, вивчає подібні роботи інших виконав ців. З'ясовує наявність подібності чи відмінності у засобах виразності, що відобража ють ті самі настрої. Порівнюючи свої роботи з іншими, визначає найвиразніші. На третьому етапі індивідуально здійснюється аналіз засобів виразності, компо зиційної побудови завдань на «Радість» і «Сум» за допомогою спеціальних таблиць. На четвертому етапі колегіально чи самостійно перевіряються таблиці з характерни ми ознаками засобів виразності та композиційної побудови завдань на «Радість» і «Сум». Надалі шукають аналогії, проводять об'єктивізацію художньої творчості, вери фікацію засобів виразності та композиції об'єктів дизайну. Аналізуючи виконання першого тест-завдання, важливо акцентувати увагу учня на тому, як та якими засобами відображаються емоції - з визначенням, що пе реважає: абстрактні елементи, символи, знаки чи зображувальні (природні явища та ін.). Це дає змогу визначити ступінь художньо-образного мислення у виконавця, відповідності певній спеціалізації, фаху, яким він більш е відповідає. Вправність та

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ переконлива виразність свідчать про рівень допрофесійної підготовленості. У по дальших вправах ці аспекти перевіряю ться, уточнюються, розвиваю ться. Виконання тест-завдання є найважливішим у розкритті здібностей виконавця до емпатії, самонастрою. Це вияв максимально можливого: від радісно-бурхливого до найніжнішого, спокійного, сумного стану, вияв мобілізації волі, відчуттів на пошук по лярних найвиразніших художніх засобів; внутрішнього самоаналізу, самооцінки (що я відчуваю, як я відчуваю, як найпереконливіше емоційно виражаю). У цьому завдан ні найбільш чітко простежується художнє мислення особи, що тестується. Самостійно аналізуючи засоби виразності та композиційний стрій своїх робіт, виконавець демонструє вміння добирати найсуттєвіше, найхарактерніше і заноси ти їх у спеціальні таблиці. Після заповнення таблиць (засоби виразності «Радість», засоби виразності «Сум») виконана робота колективно обговорюється. При порів нянні виконаних таблиць з наочним посібником (теоретичний аспект) узагальню ється індивідуальний та колективний досвід, коли наводяться характерні ознаки графічних та композиційних засобів виразності. Порівняння проводиться послі довно від першого до останнього аркуша, а не навпаки.

Завдання 1. Аналіз першого тест-завдання Після виконання художньо-графічних вправ та засвоєння теоретичного матеріа лу з «Основ композиції та кольорознавства» важливо знову переглянути та проана лізувати виконання тестових завдань. Аналізуючи, зверніть увагу, як у першому тестзавданні, ще мало що усвідомлюючи, не застосовуючи відомі знання, ви інтуїтивно вибирали відповідні вашим емоціям лінії, плями, тон, колір, об'ємні форми та їх розта шування на картинній площині, як шукали техніку виконання (пастозно, по-мокрому чи накрапуванням). Пригадайте, коли ви були кволі чи невпевнені в собі або навпаки веселі, бадьорі чи злі, які лінії з'являлись на аркуші паперу, керовані вашою волею, виконані рухами ваших рук: чи то були рухи і лінії тремтливі, мляві, чи, навпаки, пруж ні, впевнені. Порівнюючи свої роботи з роботами інших учнів, ви побачите розмаїття у засобах художньої виразності, оскільки кожен відображав власні емоції. Ви поба чите, що емоції людини можуть бути видимі, відчутні у лініях, кольорі, плямах і т. д. Чи спостерігаєте ви яку-небудь закономірність у цих виявах - мабуть, це не легко зробити? А закономірність є. ЇЇ суть у розмаїтті. Різні емоції відображаються різними художніми засобами виразності. Ваші емоції є «фільтром» у процесі добору характер них ознак лінії (ламаної чи хвилястої, чіткої чи розмитої, пружної чи тремтливої) та інших засобів виразності. Але в такому розмаїтті ліній, форм, кольорових відтінків і т. ін. далі легко розгубитись і «заблукати», якщо не з'ясувати, як різні засоби виразності видозмінюються та взаємно узгоджуються (гармонізуються) у процесі самоналаштування (акторський тренінг), входження в образ.

Завдання 2. Аналіз відображення протилежних (полярних) настроїв «Ра дість» і «Сум» Якщо ви маєте здібності до самоорганізації (артистизму) і зуміли налаштуватись на по лярні настрої «Радість» і «Сум», зуміли найвиразніше їх відобразити візуально (художньографічно), то неважко буде з'ясувати як різні засоби художньої виразності можуть видо змінюватись та взаємно узгоджуватись (гармонізуватись).

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Таблиця 6.1 ХУД О Ж Н І ЗА СО БИ ВИ РА ЗН О С ТІ тема: " Р А Д ІС Т Ь " 1

10 Л ІН ІЯ

(Р(

п ласти ка ф ор м , М ЕТРРИ ТМ

ри тм

ч е р гу в а н ня кольру, ф ор м ,

1п р о п о р ц і й

11 СТАТИКА -

ПЛЯМ А

Д И Н А М ІК А

ДИНАМІКА

С И М Е Т Р ІЯ -

О Б 'Є М

А С И М Е Т Р ІЯ

АСИМЕТРІЯ

НЮ АНС -

КОНТРАСТ

13 ТО Н

КОНТРАСТ

5 К О Л ІР

ЕК

Р ІВ Н О В А Г А -

15 О С В ІТ Л Е Н Н Я

ЯСКРАВЕ

Д О М ІН А Н Т А

16 М А Т Е Р ІА Л

АКЦЕНТ

гуаш

< 9-

8 П Р О П О Р Ц ІЇ

1 : 3 ; 1 : 5,6

Т Е К Т О Н ІК А

ВАГОМА

9 М АСШ ТАБ

ВЕЛИКО МАСШТАБНО

О Б 'Є М Н О ПРОСТОРОВА СТРУКТУРА

НЕРІВНОВАГА

Н Е Р ІВ Н О В А Г А

ВІДКРИТА

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ

Таблиця 6.2 ХУД О Ж Н І ЗА СО БИ ВИ РА ЗН О С ТІ тема

1 ЛІНІЯ

"Н ІЖ Н И Й С У М "

М ЕТ Р РИТМ

МЕТР

ПЛЯМА 3 О Б ’ЄМ 4 ТОН

О А о І■гп

СТАТИКА • ДИНАМІКА

СТАТИКА

СИМЕТРІЯ АСИМЕТРІЯ

СИ М ЕТРІЯ

НЮАНС • КОНТРАСТ

НЮ АНС

•• ^ КОЛІР 6

РІВНОВАГА • НЕ РІВНОВАГА

РІВНОВАГА

ДОМІНАНТА

ОСВІТЛЕННЯ

розсіяне, тьмяне

МАТЕРІАЛ

гуаш

АКЦЕНТ

ПРОПОРЦІЇ

1 :1

МАСШТАБ

СЕРЕД НЬОМАСШТАБНО

ТЕКТОНІКА

МАЙЖЕ НЕВАГОМІСТЬ

18 О Б ’ЄМНОПРОСТОРОВА СТРУКТУРА

ЗАКРИТА

■

ЗА С О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ

Для цього вам необхідно проаналізувати та з'ясувати чи збігаються засоби ви разності вашої роботи з тими, що зображені в таблиці на «Радість» спочатку, а потім на «Сум» (табл. 6.1, та 6.2). Уточніть, які є відхилення і чому, - зрозуміло, що абсолютна тотожність не можлива, оскільки кожен радіє і сумує по-своєму і відображає це від повідно до своїх можливостей. Якщо ваші роботи виконані відповідно до запропо нованих таблиць, то зверніть увагу на принципову різницю між ними, де один набір засобів виразності абсолютно відрізняється від іншого. Порівнюючи таблиці і ваші роботи на «Радість» і «Сум», робимо з вами відкриття, що полярні настрої людини під час їх відображення розмежовують не лише один із засобів художньої виразності, лінію чи колір, а весь їх набір. Після того як ви побачите та усвідомите структурне роз межування у засобах художньої виразності, уважно перегляньте і порівняйте свої ро боти на «Радість» і «Сум» із рисунками характерних ознак кожного засобу художньої виразності (§ 5). Тепер перевірте згідно з цими рисунками, якому рівню характерних ознак (верхній, середній, нижній) відповідають засоби художньої виразності обох ва ших робіт. Наприклад розглядаємо рисунок «Лінія» і шукаємо, куди віднести лінії з ваших обох робіт, - до верхньої, середньої чи нижньої частини рисунка. Виконавши такі послідовні дії з усіма засобами виразності, що є у ваших роботах, зверніть увагу на ілюстрації «Роботи сучасних дизайнерів» і з'ясуйте, з якими об'єктами дизайну є близькими засоби художньої виразності ваших робіт «Радість» і «Сум». Порівняйте, якими засобами художньої виразності створені об'єкти дизайну в лівому стовпчику, де функція - стриманість, зосередженість, спокій, і правому стовпчику, де функція рух? Отже, ми дійшли з вами висновку, що самонастрій дизайнера (художника, архі тектора) на ту чи іншу функцію об'єкта дизайну (художнього твору) сприяє добору і гармонізації всіх засобів художньої виразності. Засоби художньої виразності є мовою дизайну, якою повинен професійно володіти дизайнер.

Завдання 3. Аналіз текстових та художньо-графічних вправ з пошуку ін терпретації звукових асоціацій української мови. Після художньо-графічної візуалізації звуку виконайте аналіз результатів візуалізації звукового образу в такій послідовності: 1. Звірте в процесі порівняльного аналізу методом зіставлення відповідність колірно-графічного образу його текстовому запису щодо відповідності асоціатив ного звукового сприйняття. 2. Визначте, які і чому відбулися зміни в процесі трансформації асоціативного образу від звукових уявлень до художньо-графічної інтерпретації. 3. Порівняйте результати власної пошукової роботи з роботами однокласників, що також проходили тестування. 4. З'ясуйте в процесі осмислення від суб'єктивного до об'єктивного та законо мірного, що на оглянутих та проаналізованих роботах є спільного у засобах вираз ності та композиційній побудові. 6. Проаналізуйте виконані роботи, щодо відповідності їх тому, що ви відчуваєте, усвідомлюєте, відображаєте. 7. За результатами осмислення опишіть особисті та спільні відкриття під час досі ще незнаного процесу дизайнерської творчості з пошуку асоціативного образу, як-от:

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ

а) взаємне доповнення та збагачення художньо-графічної мови дизайну та української вербальної мови; б) творче застосування образних вербальних асоціацій у назві об'єктів дизайну та їх образно-пластичному вирішенні. 8.

За результатами виконаної пошуково-експериментальної роботи розтлумач

те твердження А.С. Сімоніка: «Звуки вербальної мови асоц іативно м іс т я т ь у собі візуальні носи художньої мови: символи, зображення, знаки, які необхідно застосову вати у професійній художній, дизайнерській діяльності, в обґрунтованому виборі необхідних для цього засобів виразності». О б'єкти практичних розробок: план для реферативного виступу за результата ми індивідуально проведеного аналізу вербальних та художньо-графічних вправ (власних, однокласників) з пошуку інтерпретації звукових асоціацій з української мови у формі візуального асоціативного колірно-графічного образу.

Узагальнення та висновки Процес виконання тестових завдань їх осмислення а також засвоєння теоре тичного матеріалу з «Основ композиції та кольорознавства» постійно відбувається удвох основних аспектах:

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

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

ЗАС О БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Ж

СВІТ ПРОФЕСІЙ

Дослідники символіки кольору та його впливу на психологію людей Концепцію кольору розробив Й. Гете. «При мені жили чудові поети, ще краще жили до мене і такі самі будуть жити після мене. А те, що я в моєму столітті є єдиним, хто знає правду в скрутному вчен ні про колір, цим я можу трохи пишатися» (Гете И.В.: К учению о цвете (хроматика) И Бюст Арістотеля, римська копія оригінала Лісіппа. «Кольори за приємністю їх відповід ностей можуть ставитися між собою подібно музичній співзвучності і бути взаємно відпо відні пропорційній системі» (Арістотель із Стагіри (384 до н. е. - 322 до н. е.) - грецький філософ)

Психология цвета: Горник: Сб Пер. с англ. М.: Рефл-бук; К.: Ваклер,199б. - С. 281-349). Великий внесок в оптику зробив I. Нью т о н . У 1666 р. за допомогою тригранної скляної призми він розклав біле світло на 7 кольорів (у спектр), тим самим довівши його складність (явищ е дисперсії), від крив хроматичну аберацію . Намагаючись уникнути аберації в телескопах, у 1668 і 1671 рр. сконструював телескоп - реф лек тор оригінальної системи - дзеркальний (відбитий), де замість лінзи використовува лося увігнуте сферичне дзеркало (телескоп Ньютона). Досліджував інтерф еренцію і

Ісаак Ньютон (4 січня 1643 - 31 березня 1727) Видатний англійський учений, який заклав основи сучасного природознавства, творець класичної фізики. 1665 - закінчив Кембридж ський університет (у 1669-1701 очолю вав у ньому кафедру). З 1695 - доглядач, з 1699 директор Королівського монетного двору. Його наукові праці належать до механіки, оптики, астрономії, математики

дифракцію світла. Вивчаю чи колір тонких пластинок, відкрив так звані кільця Н ью тона, установив закономірності в їх розмі щенні, висловив думку про періодичність світлового процесу. Намагався пояснити подвійне пром енезалом лення і близько підійшов до відкриття явищ а поляризації. Ньютон вважав світло потоком корпус кул - корпускулярна теор ія світла (але на різних етапах розглядав можливість іс нування і хвильових властивостей світла, зокрема в 1675 р. здійснив спробу створи ти компромісну корпускулярну - хвильову теорію світла). Свої оптичні дослідження виклав у «Оптиці» (1704).

Йоганн Вольфганг фон Гете (28 серпня 1749 - 22 березня 1832) Німецький поет, мислитель і природознавець

ЗА С О БИ ВИ РА ЗН О С ТІ V Д И ЗАЙ Н -П РО ЕКТАХ Бехтєрєв

1907

р.

заснував

Санкт-

Петербурзі психоневрологічний інститут. «Умі ло дібрана гама кольорів здатна благотворніше впливати на нервову систему, ніж певні міксту ри» (В. Бехтєрєв). Разом із німецько-американським маляром Я. Фінінгером та німецьким скульптором Г. М арк сом, під керівництвом німецького архітектора В. Б«хтср€в Володимир Михайлович (20 Січня 1857 - 24 грудня 1927) Видатний російський медик-психіатр, невропатолог, фізіолог, психолог, осно воположник рефлексологіі і патопсихо логічного напряму в Росії, академік

Ґропіуса, Іттен був одним з учасників ядра веймарського Баугаузу. Був учителем у початковій школі з 1904 по 1908 р. Починаючи з 1908 р., він викладав з вико ристанням методу, розробленого Ф. Фребелем, і познайомився з ідеями психоаналізу. Іттен пере йняв принципи Шнейдера, серед яких - не ви правляти індивідуальної творчої роботи студен тів, щоб не порушити творчий імпульс. З 1919 по 1922 р. Іттен викладав у Баугаузі, розробивши інноваційний "початковий курс", метою якого було ознайомлення студентів з основами характеристик матеріалів, композиції та кольору. У 1920 р. Іттен запросив до співпра ці з ним у Баугаузі П. Клее та Г. М уче. Він також опублікував книжку "М истецтво кольору*, в якій

Йогаинес Іттен (11 грудня 1888 - 27 травня 1967)

викладено його ідеї щодо кращого розуміння ко

Ш вейцарський експресіоніст, художник

льорового кола А. Хользеля. Іттенова так звана

дизайнер, викладач, письменник і тео ретик пов'язаний зі школою Баугауз

"кольорова сфера" містила вже 12 кольорів.

Архітектор, вчений, теоретик мистецтва Леон-Баттіста Альберті (18 лютого 1404 - 20 квітня 1472) - ітаI лійський архітектор, вчений, письменник і музикант епохи, один із Іфундаторів нової європейської архітектури і провідний теоретик | мистецтва епохи Відродження. Альберті першим ґрунтовно виклав математичні основи |вчення про перспективу. Походив зі знатної флорентійської сім'ї, яка була у вигнанні в Генуї. Н авчався гуманітарних наук у Падуї, а права в Болоньї. у дворі Уффіці

У 1428 р. закінчив Болонський університет, після чого отримав посаду секретаря у кардинала Альбергаті, а в 1432 р. - місце в папській канцелярії, де прослужив більш е 30 років. У 1462 р. Альберті залишив службу в курії і до смерті жив у Римі.

ЗАСО БИ ВИРАЗНОСТІ V ДИЗАЙН-ПРОЕКТАХ Гум ан істи чн и й світо гляд А льбер ті Гар м он ія. Багатогранна діяльність Л.Б. Альберті - яскравий приклад універсальних інтересів людини епохи Відродження. Різнобічно обдарований і освічений, він зробив великий вне сок у теорію мистецтва і будівництва, в літературу і архітектуру, займався проблемами етики і педагогіки а також математикою і картографією. Центральне місце в естетиці Альберті посідає вчення про гармонії як важливі природні закономірності, які людина повинна не тільки враховувати у всій своїй діяльності, а

Палаццо Ручеллаї й поширювати особистою творчістю на різні сфери свого буття. у Флоренції (1451 - Видатний мислитель і талановитий письменник, Альберті ство 1456) рив послідовно гуманістичне, на противагу офіціальному орто доксальному, вчення про людину. Лю дина. Ідеальна людина, на думку Альберті, гармонічно поєднує сили розуму та волі, творчу активність і душевний спо кій. Вона мудра, керується у своїх діях принципами міри, усві домлює власну гідність.

Художник, гравер, математик, теоретик мистецтва Німецький живописець, малювальник, гравер, математик, теоретик мистецтва. Писав вівтарні кар тини, портрети, гравюри, екслібриси.

А втопортрет Альбрехт Дюрер (21 травня 1471 -6 квітня 1528)

Руки того, хто молиться

100

Чотири вісники апокаліп сису

ЗА С О БИ ВИ РА ЗН О С ТІ V Д И ЗА Й Н -П РО ЕКТА Х Художник, скульптор, графік Ж ивописець, художник театру, скульптор, графік, ілю стратор.

А втопортрет Врубель М ихайло Олександрович

(1856-1910)

Дворик узимку

Вершник

Живописець, скульптор, архітектор, вчений, інженер Історичний живописець, скульптор, архітектор, вче ний та інженер епохи Відродження. Народився 15 квітня 1452 р. біля Флоренції у сім 'і багатого нотаріуса. Леонар до да Вінчі створив гармонічний образ людини, який від повідав гуманістичним ідеалам, підсумувавши досліди кватроченто (період Раннього Відродження в Італії! і за клав основи мистецтва Високого Відродження.

Леонардо да Вінчі

(1452-1519)

Рисунок жіночої голови

Рисунок рослин

ЗА С О БИ ВИ РА ЗН О С ТІ V Д И ЗА Й Н -П РО ЕКТА Х Художник-графік Німецька художниця, графік і скульптор, випускниця Кенігсберзької академії мистецтв.

Кете Кольвіц (8 липня 1867, Кенігсберг 22 квітня 1945)

А втопортрет

А втопор тр ет

Скульптор, художник, архітектор, поет, інженер Італійський скульптор, художник, архітектор, поет та інженер. Ще за життя Мікеланджело і його твори вважалися найвищими досягненнями мистецтва Від родження.

Мікеланджело Буонаротті (1475-1564)

Леда

В ітто р ія Колонна

102

Голова Леди

Голова Савоофа

Рисунок східців бібліотеки

ЗА С О БИ ВИ РА ЗН О С ТІ V Д И ЗА Й Н -П РО ЕКТА Х

Художник, гравер

А втопортрет Фраискко Хосе де Гойя+Лусьснтес (ЗОберезня 1746- 16квітня 1828)

«Щоголь» біля дзеркала

Соггессібп «Капрічос•

Архітектор, художник, дизайнер Бельгійський архітектор, художник, дизайнер один з за сновників бельгійської гілки стилю «модерн-ар-нуво». у

Анрі Клемане Ван де Вельде (1863-1957)

Канделябр (1898-1899)

у Берліні

Майстер мебельник, дизайнер Німецький і австрійський майстер-мебельник.

Міхаель Тонет (2 липня 17963 березня 1871)

«О ю іто. 14» («Коти тЯ и ЬІ іїг. 14»)стілець фірми«Брати Тонет» (1859)

Крісло

103

ЗА С О БИ ВИ РА ЗН О С ТІ V Д И ЗАЙ Н -П РО ЕКТАХ Дизайнер, архітектор, винахідник

Роботи сучасних дизайнерів

104

ЗА С О БИ ВИ РА ЗН О С ТІ V Д И ЗА Й Н -П РО ЕКТА Х

СЛОВНИК-ДОВІДНИК Ескіз - попередній начерк художнього твору. Візуальна мова - система умовних зображень, призначена для передання спе ціальної інформації. Будується на основі візуальних символів і візуальних знаків.

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

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

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

105

ЗА С О БИ ВИ РА ЗН О С ТІ V Д И ЗА Й Н -П РО ЕКТА Х РЕКО М ЕНД О ВАН А ЛІТЕРАТУРА 1.

Божко Ю.Г. Основы архитектоники и комбинаторики формообразования. - К.:

Выща шк., 1991. Волков Н. Н. Композиция в живописи. - М.: Искусство, 1977. - 236 с.

3. Даниленко В Л Дизайн: ГПдручник. - X.: ХДАДМ, 2003. - 320 с. 4.

Дизайн: Иллюстрированный слов.-справ. / Г.Б. Минервин, В.Т. Шимко, А.В. Ефимов и др.: Под общ. ред. Г.Б. М инервина и В.Т. Шимко. - М.: Архитектура-С, 2004.-288 с.

5. 6.

Зубов В. П. Архитектурная теория Альберти. - СПб.: Алетейя, 2001 Иконников А. В. Функция, форма, образ в архитектуре. - М.: Стройиздат, 1986. 288 с.

Иоханнес И. Искусство цвета. - М.: Издатель Д. Аронов, 2000

Мигель С. П. Проектування мебл1в: Навч. поаб. - Л.: Свп; 1999.

Раппопорт А. Г. Категории и понятия художественно-проектного мышления // Разработка терминологического аппарата дизайна. - М.: ВНИИТЭ, 1982. С. 33-36.

10.

Ремизова Е. И. Эволюция представлений о композиции в искусстве и архитек туре нового времени и их историко-типологическая интерпретация // Вісник Харк. держ. акадщизайну та мистецтв: 36. наук, праць. - X.: ХДАДМ, 2006. - № 11.-С . 109-120.

11. Ремизова Е. И. Композиционная логика постмодернизма - традиции и новации // Ватерпас. -1996. - № 1-2. - С. 38-41. 12. Сидоренко В.Ф. К проблематике композиции в художественном конструирова нии//Техн. эстетика. - 1 9 7 6 .-№ 11.-С . 14. 13. Сомов Ю. С. Композиция в технике. - М.: Машиностроение, 1987. - 288 с. 14. Тиц А.А. Основы архитектурной композиции и проектирования. - К.: Вища шк., 1976.-256 с. 15. Хмельовський О.М. Вступ у дизайн. Основи проектування систем життя: Курс лек цій - Луцьк: Волин, мистец. агенція «Терен», 2004. - 208 с. 16. Чинь Ф. Архитектура, пространство, композиция. - М.: Астрель, 2005. - 400 с. 17. Шорохов Е. В. Основы композиции. - М., 1979. 18. Эдвардс Б. Художник внутри вас; Пер. с англ. - Минск: ООО «Попурри». 2000. 256 с. 19. Яковлев М.І. Композиція + геометрія. - К.: Каравелла, 2007. - 240 с.

106

. j ) adquireret quadrupe. suragarit plane adlaudabilis saburre, s oratoriagnascor cathedras. Chirographi sur, s agricolae corrum peret incredi biliter parsir r circum grediet pessimus bellus cathedras.Scot jri divinus suragarit quinquennalis chirograph., icubine. O ptim us trem ulus zothecas ad q uirej*/ quadruj irsi monia oratori. Rures vocicat perspicax s\c,,es Zothecas I ures lucide adquireret plane adfabilis d u ' a suis. Apparatus I am verecundus concu bine negle gtv fM( am putat pessir »erecunde senesceret incrédibilité .jârsim onia quadrupei. Pess erecundus catelli. Saetosus.æ lFia suis fortiter vocicat ugustus

am putat

in c ra « Jiiite r

parsim onia

agricola

ncubine. irre senesceret fa à b ilis um braculi. Oratori divinus st ducia sui' el,, et p

rsectat sae tosus concubine. dicax zothecas agnascor parsim or liscere m atrim onii. Verecundus IS Augustu

V-.l

agri

Г Р А Ф ІЧ Н И Й Д И З А Й Н

§ 7.

Знакові зображення та закономірності їх утворення. Види знаків 1. Пригадайте з уроків історії, як передавалася інформація в стародавні часи. 2. Якими засобами користувалися наші пращури для передавання інформації? 3. Н азвіть відомі вам приклади передавання інформації сучасними засобами.

Сучасний світ стає дедалі більш залежним від інформації, точності та швидко сті її створення і представлення. Постійне зростання обсягів інформації та усклад нення технологічних процесів її створення, оброблення і репрезентації потребує спеціальних наукових досліджень. У цих дослідженнях інформація розглядається не лише як текстові повідомлення, а і як зображення, креслення, фотографії, ко лажі, умовні графічні позначення (знаки). Всі означені вище способи кольоровографічної фіксації інформації для її передавання мають забезпечити посилення точ ності і швидкості її сприйняття. Відтак виникає потреба у фахівцях (дизайнерах-графіках), здатних проводи ти якісну інформаційно-комунікативну діяльність. Дизайнерам-графікам має бути властива професійна гнучкість мислення, вони повинні швидко адаптуватись до динамічних умов ринку праці та якісно виконувати завдання протягом дуже корот ких проміжків часу. Фахівці з графічного дизайну зобов'язані знати закономірності та способи за безпечення якості передавання і сприйняття колірно-графічної інформації. Серед найбільш поширених способів особливо складним є створення знакових зображень, оскільки воно потребує високої професійної майстерності дизайнерівграфіків. Знакові зображення в історії різних культур створювалися з давніх часів. Аргу ментованим підтвердженням такого висновку є історичні знахідки доби трипільскої культури (рис. 7.1). Археологічні експонати свідчать, що розвиток навичок передавання інформації через графічні позначення відбувався ще до виникнення писемності. У наведеному в параграфі прикладі графічних позначень доби трипіль ської культури втілювались найсуттєвіші якості об'єктів, процесів або подій за до помогою різних видів художніх технік і технологій. Аналізуючи знакові зображення в нашій прадавній культурі, викладач вищ ої школи, дослідник теорії образотворення О. Хмельовський стверджує, що в таких зображеннях відтворюються знання лю дей того часу про хвильову природу світу та циклічність усіх процесів у ньому. Знакова форма закріплення знань була характерною також для початкових ста дій розвитку єгипетської культури (рис. 7.2). Подальший розвиток знань і потреба у більш лаконічних і містких способах їх закріплення сприяли формуванню змістов ніших умовних позначень шляхом спрощення та схематизації форм у зображеннях різних культур (рис. 7.3). Посилення схематизації сприяло формуванню знаків пи семності - літер. Але графічна форма накреслення літер, навіть в одній мові, також не була постійною. Вона змінювалась залежно від техніки письма, матеріалу, на якому виконувався напис, і способу виконання. Тому певні способи накреслення літер можна розглядати як знаки тієї чи іншої історичної епохи.

Г Р А Ф ІЧ Н И Й Д И З А Й Н

Рис. 7.1. Історичні знахідки доби трипільскої культури

III

рис. 7.2. Знаки єгипетської культури

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

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

Рис. 7.3. Знаки доби крито-мікенськоїкультури

Г Р А Ф ІЧ Н И Й Д И ЗА Й Н

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

Рис. 7.5. Зображення з дотриманням ознак китайського стилю.

110

ГРА Ф ІЧ Н И Й ДИЗАЙН У

теорії

художнього

формотворення

термін «раціональна стилізац ія» використо вується також тоді, коли виникає потреба у виявленні певних ознак, прикмет або власти востей об'єкта зображення. Приклад графіч ної стилізації форми кленового листка наве дено на рис. 7.6. Формалізація - творчий метод, у якому форма зображуваних об'єктів зводить ся автором до чітко визначених графіч них примітивів (т а к званих архетипних елементів), які сприймаються оком і сві домістю. Суворе дотримання тільки од ного типу (максимум - поєднання двох) модульних геометричних елементів для відтворення загальних характеристик будь-якого реалістичного об'єкта зумов лює утворення максимально впорядко ваних і несуперечливих зображень, які сприймаються як знакові форми цього об'єкта.

Рис. 7.6. Приклад графічноїстилізації форми кленового листочка

Приклад графічної формалізації під час зображення рибок наведено на рис. 7.7.

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

знак

у графічному дизайні по

значає матеріально втілене зображення, що

Рис 7.7. Приклад графічноїформаліза ції, застосованої під час зображення рибок

сприймається насамперед чуттєво і сприйма ється у процесі пізнання та спілкування як представник (заступник) іншого пред мета чи явища. Використовується для приймання, збереження, перетворення та передавання інформації про заміщуваний предмет або явище. Зміст знакового зображення може формуватися за принципом подібності до об'єкта, що замінюється знаком (рис. 7.8), або за принципом наявності композицій них зв'язків (рис 7.9.), чи закріплюватися як спільно визнана умова, без наявності жодних асоціативних зв'язків (рис. 7.10). Але не треба вважати, що знаковим може стати будь-яке зображення, варто лише створити його і постійно застосовувати для позначення одного і того самого предмета,

111

Г Р А Ф ІЧ Н И Й Д И ЗА Й Н

ПОБЕДИН Владимир. Х а р ь к о в

ПОЛОМОШНОВ Андрей. ФЕЙГИН Леонид, • 'о с г и к

У к р а и н с к и й Н И И п т и ц е в о д е гв а

Рис. 7.8. Знак, подібний до об екта

М о с к о в с к и й т о р с о в ы й б а н к , 199$

Рис 7 9

подібний за композиційними зв'язками

П А Р М О Й Кирилл Россия. Логотип й>ш •Рацио Рос г г,- • 1994

РиСН№1< СН1№Т1№. AVSTRlA 1.000 сОЯ А ОАГ^СЕ « ІН О О І.199$

Рис. 7.10. Знак без асоціативних зв'язків П ЕРЫ Ш К О в Д м итрий. Ф ЕЙ ГИ Н Л еонид »осей« «РОСТРОМ- 199$

П ЕРЫ Ш К О в Д м итрий. Ф ЕЙ ГИ Н Л еонид. России • и Пропммма •

Рис. 7.12. Фірмові знаки

Рис. 7.11. Товарні знаки

ГР А Ф ІЧ Н И Й ДИЗАЙН явища чи події. Для знакових зображень характерний високий ступінь впорядкування всіх графічних елементів, що його утворюють. Досягти такого ступеня під час створен ня нових знаків - завдання складне, оскільки знакових зображень створено багато, а винайдення нових вимагає, крім упорядкування, також лаконічності - мінімальної кіль кості графічних елементів. Відтак дизайнер зобов'язаний оперувати найбільш прости ми та узагальненими геометричними фігурами, але не повторювати вже наявні знаки, а створювати нові, виразні та інноваційні знакові композиції. Вам варто пам'ятати, що зміст знаків великою мірою залежить від способу взаємодії композиційних елементів. У процесі створення знака дизайнер-графік зобов'язаний визначити чіткі алгебраїчні та геометричні закономірності організації його композиції. Розроблення знаків та по будова графічних композицій із дотриманням усталених вимог наближають роботу дизайнера-графіка до технічної, зокрема інженерної, творчості. Ви д и зн а к ів . Інформація, яку містить у собі знак, становить його значення та перетворю єть ся на засіб комунікативного зв'язку між людьми. Але графічні знаки є дуже різни ми. Ви звикли до умовних математичних знаків з перших шкільних років. Надалі ви ознайомитеся зі знаками, прийнятими в інших галузях наукових знань: фізиці, хімії, географії, позначеннях технологічних операцій, поширених у кресленні та будівництві, тощо. Велику кількість знаків ви звикли спостерігати у навколиш ньо му середовищі - це піктограми у торговельних центрах, на вокзалах, в аеропортах тощо. У сучасних соціальній та виробничій сферах використовується велика кіль кість різноманітних знаків. Найбільшого поширення набули знаки обслуговування, фірмові та товарні знаки (рис. 7.11,7.12). У процесі їх створення дизайнери-графіки дедалі частіше використовують не зображувальні форми, а геометричні елементи та фігури. Варто зазначити, що довершеного та лаконічного вигляду знаки набули не од разу. Знакові зображення формувались поступово, у різні епохи й у різних народів вони мали специфічні риси та відмінності. Серед значної кількості знакових зображень, поширених у країнах Європи, осо бливе місце посідають геральдичні знаки. Геральдичні знаки - історичні родинні знаки, а також знаки цехових, земельних або військових угруповань. Історія становлення та розквіту цього типу знаків в Європі сягає корінням у XIXII ст. - період хрестових походів і лицарських турнірів. Неодмінною умовою ство рення геральдичного знака є геральдичний щит. Власне, перші геральдичні знаки були зображені на бойових щитах лицарів, що вирушали у похід або приїздили на турніри. Наприкінці X - на початку XI ст. такі умовні зображення на щитах лицар вибирав особисто або вони були погоджені з орденом чи угрупованням, яке лицар представляв на турнірі. В окремих випадках індивідуалізований характер зображення був пов'язаний з родовим прізвищем або надавався королем.

113

Рис. 7.ІЗ. Історичні зразки геральдичних знаків З розвитком феодальних відносин у Європі виникає необхідність підтверджен ня знатності роду та родових відзнак у військовій службі, чому неабияк сприяє по ширення геральдичних знаків лицарства. Надалі такі знаки не тільки свідчать про особисті якості лицарів або їх причетність до певного угруповання, а й уже переда ються у спадщину та отримують назву «гербів». У графічному вирішенні таких знаків часто застосовували значну кількість різних стилізованих зображень. Приклади історичних варіантів виконання геральдичних знаків наведено на рис. 7.13. Приклади виконання учнівських робіт з укладання геральдичних компо зицій для власного міста або району показано на рис. 7.14. Історія становлення геральдичних знаків, або «гербів», нерозривно пов'язана з історією та воєнними традиціями кожної з європейських держав. Відтак сама фор ма геральдичного щита, який є основою геральдичного знака, є вагомим показни ком його «дешифрування» та тлумачення змісту, покладеного в основу символіч ного групування геральдичних фігур і кольорів, які утворюють герб. Геральдичний щит круглої форми як ознака належності до родоводу, що походить від античних

114

ГР А Ф ІЧ Н И Й ДИЗАЙН

Рис. 7.15а. Екслібрис від руки

Рис. 7.156. Штемпельний відбиток

Рис. 7.15в. Складна композиція

героїв, був поширений в Італії. У середньовічній Франції найбільш поширеним був так званий нормандський щит. За формою чітко вирізнялись також варязький, гер манський та іспанський щити (рис. 7.27, наприкінці параграфа). Одноманітність тлумачення та сприйняття геральдичних фігур досягалася у Серед ні віки завдяки суворо обумовленим правилам їх розташування, що утворили окремий вид знакової граматики. Однією з основних вимог було суворе обмеження на кількість і порядок розташування кольорів у гербах. Згідно з цим правилом під час створення гербів можна було використовували лише шість кольорів: золото (жовтий), срібло (бі лий), пурпур (червоний), землю (чорний), лазур (блакитний) і зелень (зелений). Кольори в геральдиці поділяють на дві групи, відокремлюючи золото і срібло від чотирьох інших кольорів. Правилами геральдики заборонено розташовувати поруч або накладати один на інший кольори однієї групи. Така заборона пов'язана насамперед з технологіями виготовлення справжніх металевих щитів, які потім за ливалися кольоровими емалями. Геральдичні знаки, як і кожна знакова система, трансформувались і змінювались із плином часу. їх основні ознаки - сталість, врівноваженість, імпозантність і дотепер забезпечують їм значну кількість прихильників і практичне застосування у знаковій мові сьогодення, попри те, що у більшості геральдичних знаків, створених у XX ст., особливо у другій його половині, спостерігаються певні порушення правил класич ної геральдики, насамперед дотримання колористичної гами. Вона дедалі ускладню ється, урізноманітнюється та доповнюється новими кольорами та їх відтінками. Екслібрис - графічна композиція, яка текстом , або символічним зображенням без тексту, або їх поєднанням позначає належність книги її власнику. Сама назва с є похідною від латинських слів «ех \ibris» - «із книг...», де нижче позначалось ім я влас ника книг або назва бібліотеки, якій належала книга. Екслібрис (рис. 7.15) відрізняється від торговельної або видавничої марки, яр личка палітурної майстерні або інших знаків видавництв і підприємств, що подекуди

115

Рис. 7.1б. Екслібрис

Рис. 7.17. Екслібрис

наявні на книгах. Наведені вище знаки можуть бути не тільки на книжках, а й на кон вертах, бланках, повідомленнях, запрошеннях та інших предметах, безпосередньо не пов'язаних з книгою, тоді як книжковий знак, або екслібрис, має стояти саме на книжках. Екслібрисом не називають також особистий напис власника від руки на книзі. Хоча спосіб нанесення знака власника на книгу не змінює його мети й характеру. Екслібрисом може бути авторська композиція, зображена, наприклад, тушшю від руки (рис. 7.15 а), штемпельний відбиток (рис. 7.15 б), ярлик, віддрукований у то пографії або за допомогою ручного друку, особлива композиція з рядків або літер складеного тексту (рис. 7.15 в) або конгревне тиснення на одному з аркуш ів книги. Приклади професійного виріш ення екслібрисів, студентських та учнівських ро біт з графічним вирішенням композицій для екслібрисів наведено на рис. 7.15-7.17. Серед знакових зображень також поширені монограми та каліграми. Монограма - каліграфічно оформлені перетин т а взаємопродовження елементів літер в ініціалах власника (виконавця) у вигляді загального композиційного цілого. Монограма може бути конструктивною, пластичною або декоративною залежно від характеру літер, використаних у процесі її створення. Але в усіх випадках вона обов'язково має сприйматись як суцільне, нерозривне групування, знак, в яко му жодну з його складових не можна змінити без шкоди для загального цілого. Варіанти виконання монограм наведено на рис 7.18а, б. Каліграма - складне за технологією виконання декоративне зображення реальних або фантастичних об'єктів, утворене за допомогою послідовного руху графічного інструмента. Як правило, каліграма містить Рис. 7.18а

116

Рис. 7.186

у собі поєднання схематичного зо-

Рис. 7.19

Рис. 7.20а

Рис. 7.206

браження об'єкта та каліграфічно виконаного напису (ініціалів або прізвища її ви конавця). Але трапляються каліграми, виконані лише у вигляді ілюстративного зо браження або каскадної каліграфічної композиції з елементів літер або цілих слів. Виконання каліграми передбачає високий рівень володіння як технікою побудови декоративних, узагальнених зображень, так і культури побудови різноманітних графічних форм літерно-алфавітної системи писемності (рис. 7.19-7.22). Піктограма - це найбільш лаконічне т а узагальнене знакове зображення послуг, місць загального користування, спортивних змагань, ярмарків, розподілу секцій у торговельній мережі тощ о. Піктограми уособлюють по няттєві висловлювання через пов'язаний із зображеним предметом зміст. Піктограми мають містити зрозумілу інформацію, яка легко та недвозначно сприй мається. У піктограмах не застосовують будь-які літери або слова. Вся інформація в них передається через зміст спрощеного, схематичного зображення. Піктограми розташо вують у місцях пожвавленого пересування великої кількості різномовних людей. Зна чна кількість піктограм розробляється для проведення міжнародних спортивних зма гань - олімпіад. Приклади сучасного вирішення піктограм наведено на рис. 7.23-7.25.

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

Рис. 7.24

Рис. 7.25

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

ГР А Ф ІЧ Н И Й ДИЗАЙН Процес створення знаків о б о в'язко во має передбачати технологію їх ви конання промисловим способом і д оречність застосування того чи іншого виду друку. Під час нанесення одного знака на різні види носіїв за допомогою різних видів друку дещо зміню ю ться кольори і м ож уть поруш уватись пропо рції зображуваних елементів. Тому в процесі розроблення знаків дизайнерпроектувальник має чітко показувати пропорційні закономірності та норми відтворення знакових елементів. Знаки і графічні композиції на основі використання знакових форм, із варіатив ним використанням властивостей означених форм, називають промисловою графікою. Закономірності організації композицій на основі варію вання постійної кількос ті графічних форм зумовлюють формування своєрідної візуальної мови, в якій гра фічні форми ототожнюються зі способом побудови вербальної мови: слів, речень та цілісної послідовної розповіді. Порушення закономірностей використання зна кових форм призводить до виникнення негативного враження у глядачів. Так само, як і різний підхід до викладання змісту вербальних повідомлень формує недовіру у слухачів. Тому вміння складати гармонійні композиції, в яких задіяні знакові форми, а також професійно варіювати їх властивостями в процесі розроблення носіїв зна кової мови широко застосовую ть у сучасній рекламній графіці.

СВІТ П Р О Ф Е С ІЙ Художник по тканинах.

П ЕР ЕЛ ІК О С Н О В Н И Х П О Н Я Т Ь ТА Т Е Р М ІН ІВ У н а в ча л ьн о м у м а т е р іа л і п ар агр аф а: інф ормація; текстові повідомлення, зображення, креслення, фотографії, колажі, умовні графічні позначення (зна ки); технологічні процеси створення, оброблення та представлення інформації; способи кольорово-граф ічної ф іксації інформації; закономірності та способи передавання і сприйняття колірно-граф ічної інф ормації належної якості; різні види художніх технік і технологій; відтворення у зображеннях знань людей ста родавніх часів про хвильову природу світу та ц иклічність усіх процесів у ньому; знакова форма закріплення знань; ум овні позначення способом спрощ ення та схематизації форм; стилізація, ф ормалізація; теорія художнього ф ормотворен ня; раціональна стилізація; графічні примітиви - архетипні елементи; модуль ні геометричні елементи; піктограми; графічна візуальна форма; асоціативні зв'язки; алгебраїчні та геом етричні закономірності організації ком позиції знака; геральдичні знаки.

У словнику-довіднику: знакові зображення; дизайнер-графік; візуальна мова; візуальний (зображувальний) знак; графіка; графічне мистецтво; графічний дизайн; логотип; семантика; семіотика; стиль; товарний знак;

119

ГР А Ф ІЧ Н И Й ДИЗАЙН ПРАКТИЧНА РОБОТА 7

Розробка декоративно-стилізованої композиції (із використанням образних якостей об'єктів) О б 'є к т и п р а к ти чн и х розробок, геральдичні знаки та емблеми (симетричні, частково симетричні та асиметричні). Послідовність виконання завдань:

Завдання 1. Уважно розгляньте зображення тварин та птахів на рис. 7.26. За пропонуйте варіанти графічної формалізації та стилізації деяких з наведених зо бражень для утворення знаків.

Рис. 7.26

Рис. 7.27 Об’є к т и практичних розробок: варіанти графічної формалізації та стилізації д е яких з наведених зображень для утворення знаків. П а м ' я т а й т е ! Знакові зображення мають бути виразними та лаконічними. За максимальної подібності до прототипу вони мають бути створені за допомогою мінімальної кількості графічних засобів.

Завдання 2. На рис. 7.27 зображено геральдичні щити, кожний з яких співвід носиться з певною країною та історичним періодом. Побудуйте композиції гераль дичних знаків на основі використання наведених форм щитів та створених у п о п е редньому завданні стилізованих зображень. О б 'єкти практичних розробок: композиції геральдичних знаків.

ТВОРЧІ ЗАВД АННЯ

для закріплення навчального матеріалу теми заняття Завдання. Розробіть варіанти піктограм для шкільних кабінетів на основі по переднього виконання формалізованих зображень. О б'єкти практичних розробок: варіанти піктограм для шкільних кабінетів

ГРАФІЧНИЙ ДИЗАЙН 7

КОНТРОЛЬНІ ЗАПИТАННЯ

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

Уважно розгляньте зображення листочків на рис. 7.14. Поясніть, які саме якості та характеристики хотів відтворити художник у кожному із зображень.

За рис. 7.11-7.20 проаналізуйте залежність сприйняття характеру зображення

від застосованих графічних засобів і технік. За рис. 7.15 наведіть приклади застосування стилізованих зображень у знаках.

Назвіть основні відмінності стилізованих зображень від реалістичних.

Поясніть, які якості матеріальних об'єктів були втілені авторами на знакових зо браженнях (див. рис. 7.15-7.17; 7.23-7.25).

Назвіть відомі вам види знаків.

§ 8.

Шрифт як складова образно-знакової системи І. Н азвіть особливості креслярського шрифту. 2. Які, крім креслярського, вам відомі види шрифтів? Розкрийте особливості їх формотворення т а прийоми написання. 3. Визначте за наданими зразками відмінності креслярського шрифту т а худож ніх шрифтів для ілюстрації дитячих книг.

Історичні умови виникнення писемності та створення різних типів шриф тів. Найважливішими з винаходів людства, що забезпечили системність і надійність процесу пізнання, безперечно, були мова та писемність. Писемність дає можливість передавати думки на відстані та закріплювати їх у часі. Сучасні інформаційні носії це удосконалені варіанти писемності. Вони базуються на використанні усталених систем: кодування-декодування. Виникнення писемності є поступовим та послідовним історичним процесом, що розвивається та розгалужується відповідно до вимог історичної доби, рівня культури, особливостей технічних засобів для відтворення. Одним з найперших різновидів писемності, опанованих людиною, була п ік то гр а ф іч н а п и се м н ість. Піктограма - це умовний малюнок із зображеннями яких-небудь подій, явищ, пред м етів і т . ін„ який використовувався в найдавнішому письмі. Фактично піктограма нічим не відрізнялась від умовно-знакових зображень, ви світлених у попередньому параграфі. Загальний зміст повідомлення в піктографічному запису мав вигляд схематичного рисунка або послідовного ряду рисунків. Цей вид пи семності відомий ще з часів неоліту (IX—III тис. до н. е.). Мнемограми - рисунки на поверхні предметів побуту, що виконувалися з метою запам'ятовування (збереження, увічнення події, місця, явища).

III

ГРАФІЧНИЙ ДИЗАЙН

Приклад піктографічного зо браження наведено на рис. 8.1. Умовне зображення людини з прапором над схематичним по значенням

житла

означає: «Ми

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

Рис. 8.1. Приклад піктографічного зображення з китайського бронзового посуду, II тис. до н. е.

Петрогліфи - зображення на поверхні скель, каменів, малозаглиблені, найімовірні ше, магічно-ритуального характеру: риби, тварини, птахи, воїни, човни т а ін. Ідеограми - умовні знаки, зм іст яких потрібно було або запам 'ятовувати, або декодувати, залежно від додаткових знаків, розташованих поруч. Декодування змісту піктографічних рисунків-текстів ґрунтувалося на системі припущень і не завжди було точним. Для посилення точності потрібно було корис туватися графічними знаками постійної форми і характеру накреслення. Такі знаки поступово формувались у єгипетській та шумерській писемностях. Приклади по ступового перетворення зображувальних знаків на умовні подано на рис. 7.2, 7.3 у попередньому параграфі. Кожний знак-ідеограма позначав слово (іменник, при кметник або дієслово) залежно від того, які знаки були розташовані поруч. Інколи знак-ідеограма навіть позначав ціле речення. Але ід еограф ічна п и се м н ість також не була довершеною для точного відтворення змісту повідомлень та передання знань. Тому семітські племена, що кочували з країни в країну, вигадали нову систе му означень. Запозичивш и у єгиптян більш ість знаків-ідеограм, вони почали позна чати ними не слово, а лише його першу літеру (рис. 8.2). Так виникли передумови для формування літерно-алфавітної писемності, якою ми користуємось дотепер. Літери алфавіту для зручності запам'ятовування т а поширення природно вини кли на основі образних асоціацій з назвами тих предметів, що широко застосову валися у довкіллі т а у побуті людей. Сучасний алфавіт втратив ці властивості та став лише умовною, абстрагованою графічною схемою.

Вимоги до якості та способів передавання інформації. Необхідність чіткої графіч ної індивідуалізації кожного зі знаків писемності разом із вимогами до точності та швид кості їх відтворення привели до того, що знаки здебільшого втратили асоціативні харак«алєф» - бик

/ Г

«алеф»

Р «гімл»-жсзл

«гімел»

& «далет»-двері

/ \ «далітс»

«альфа» А Л Л «маїм» - вода ч Д А «гамма»

«аік»-око

«мом» Л Л «мю»

«айн»

«омикрон»

/ \ «дельта»

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

122

ГР А Ф ІЧ Н И Й ДИЗАЙН

< 9 1 А А У %

^ о з

III

Т \ А ® V /

Рис. 8.3. Знаки фінікійського алф авіту IX ст. до н. е.

теристики. Вони перестали бути зображувальними, поступово набуваючи властивостей лише умовних позначень (рис 8.З.). Варто зазначити, що графічна форма і характер знаків великою мірою зале жали від способів їх виконання. Так, знаки, які використовували для письма ста родавні шумери, наносились на глиняні дощечки клиноподібно розщепленими дерев'яними паличками, що мали різну довжину. Тому цей вид писемності отримав назву клинопис. Приклади графічного виконання знаків ш умерського силабічного письма наведено на рис. 8.4. Але згодом люди помітили, що зручність і швидкість сприйняття літерних знаків значною мірою залежать від упорядкованості форм і послідовного чергування мікроелементів у словах та реченнях. Вже у стародавніх Греції та Римі велике значення надавали засобам гармонізації та індивідуалізації літерних знаків. Художники, що вміли красиво і правильно накреслювати знаки, здобували суспільну пошану і звання вільного громадянина.

Розвиток писемності у різні історичні епохи. Найдавніші з пам'яток латин ської писемності, що збереглися, належать до VI—IV ст. до н. е. Вони вирізняю ться тим, що всі літери цього письма - великі, малі літери ще не вживалися. Такий спо сіб виконання літер називався м о н ум е н та л ьн и м письм ом (рис. 8.5). Літери цього письма виконувалися стилусом на диптихах, триптихах та поліптихах або каламом та пташиними перами на пергаменті і папірусі.

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

ір

му

аб

ан

іп

аш

ні

не

бур

ґа

нір

пі

ру

гам гіш

ліб

туг

лю

ул

ін

ма

ул

Рис. 8.4. Приклади графічного виконання знаків шумерського силабічного письма

123

ГР А Ф ІЧ Н И Й ДИЗАЙН

Б Р _ Я ІМ Р-С А Е А И Г О І N ЕПУАЕ'Р-М ЕКЛ/АЕ 0

Рис. 8.5. Приклад графічного виконання напису за зразком давньоримського монументального письма

М Я т Ш Н С Х - Г У С ІИ Ч Е С Н О Ж - п и сьм о П О Ч Т И - П А Р А > \ Л Е Л Ь Н О - О Р А ІБ И Г И Е Л \ - К Е А Д ' В Л Ш 0 Г 0 ‘К А ІШ Т А * \ Ь Н 0 Г 0 - Ш Е И : ^ А Т А З Б ІІБ А * П С Я - Х А ІІІЛ А Л Ь Н О Г - Р У С Т И Ч Е С К О Е - П И С Ь М О * Р У С Г О К А ’Б 'П Е Р Е Б О Д Е - С - Л А Ш Н С К О Г О - О Б О З Н А ' Ч А Б Г - К Р Е С ІЬ Я Н С К О Е Рис. 8.6. Приклади графічної адаптаціїлітер рустичного письма до кириличного варіанту накреслення. стосовували більш економний спосіб накреслення літер, який отримав назву «рус тичного», тобто провінційного, написання (рис. 8.6). У добу Середньовіччя широко застосовувалася загальна вимога заощадливості та економії місця на дорогих матеріалах з пергаменту, на сувоях чи аркушах під час переписування релігійних трактатів і ділових паперів. Саме тому виникли зразки письма, що отримали назви ф р а к т у р а та т е к с т у р а (рис. 8.7 та 8.8).

Л У ^ - ^ о р орока? к ^ ІВЬкдиКтшсЙшЙ

Ч І «крнсцр/иснарй ураііш шрифт® Витонченого ж £ Лих і} ^бишЦрш, характерного т, дои^орниг к(Шцс')ідоіЙ’. ^ Ф й ниг^® Ьи$

готичного писали -фвакідуїхх 3а ша)5(а ітератора ^ ........ на^КоРанй^./іІРіШ

Ліана: ® його Іхтщ снні ї осітточнаГ рохроВц[ шрисрр-рхР участь Оррср. «ккх де^х^угпі? ррщфКобо с^ракщури. х % іа отоишр ШуІ0Н4(іЦ(П Рис. 8.7. Варіант письма «фрактура»

124

it.fr айшпйй рагаЬ оІївявй К е м ітйіпраг аЬоН вяейй отв.^шпІе&Лішйпдішпіош Шшгіпіпді^&шпирпаеШіоЬш. іЕгші&іЬте Гиовипшггішт&ш* айтіргіав:пооііЬшшпііг.х|№и ітГпаіигаГгашвйіппг.2)іш?шиі« тгів.£агргапйшпийратіі-тіга пніі аІіШаогаїаяотпіарагаїа: шлиайпирпа^Иіайгпгдігішії: паЬішігаішвт пШаГиа-аішеиг іоайшдогіапопіГиа.іЯгіиргішш Рис. 8.8. Варіант письма «текстура».

Г Р А Ф ІЧ Н И Й ДИЗАЙН

г ч р »0 м отМ мг пгил хт£>(спп С*ч (ип^Ьт іішЬгя

иксп(5гтп іиотсгпжититіг ОпйК'аш^р'їііНі\Ч>Г(*7Т»гиЬсг £ІіІ0 і>«гп6 п’(иіт£чтдглі^уЬагрй/Гґп СЛп* тс> ітАІгиі&м

т ^ І І с т 6 Зтоаіф'. . _'Ф0РРП” іта туяа/оі: _______ 'ІарсV Иша| 6.XIX? ст! биниіаг ] розбибаєтЬсд 6ид эотичнсгао тщфри ІЬогаумда (Кд /ага. пЛтбив~^заоіа^?4гніПіПІІІріц'і!і значмо ш ф ш ш Г б їд Ш с т у р ц .б о ^ '

_____ __ ііт доЛІаїЛп си/ппідт |Л* тійсгкіт^іМп тгг *го<т * гЫгТоїп **тл)5*тА щтяпітгягт ягпАггво^сг іЧгтг{Л) ЖНСЛииПЧММ йт-г+т дрм » і*(П/п ойсг м.і т Іг Ь і т л їй т т і • ЧЬФІу<иГоп^кгсгптпи« < > ггМЬспГил^.т+ттптпігЬгпдгти*тгп «м рп£дидпти#їйІдіїггт Ь:щМ

' язао кр у8 (гау% карофзбі« Л / т ^ .^ ^ ё к с т ^ трісЬгоо біжимо у УдіЬщчф\ _ щ ] осшапючмо ародошіюсЬ уЖ > ст

кия«« сегдгтп}ш\{^1тті т д -т і иГі Ь «т п с Ь |адгп • ^ и г Л )

цг^Ьгцгипёг'п рогтЬггцідЬіи гоЬ*Ь«грмОТ<ттг Ь/Ьт тііс Ы «гаіІтгтЬп^ др» та їїсл тт(Фкп Ігаг >?»*ігпі сг ртогїі ■ ттЛіпддгтліЬгі ї>а#г>(* ши4»^«*тпЬгя ^іп#пт4юі сш^тгп дг р^ірт (и/І/п *ргЛгтп Іилр/Ьл И^-плгЬбггп ипЛ М аш Ь{пе ит к к|6І?івЬгті. "Зі;» А іів ік <ігтспі< »пб

А* •уеп риятіі«#!

лгяіфґЬт*(фвЬт»«дул двКіл^Кдт їипд<>тдстчгЬа*'Чгп£ я*^ттят«^лпятвг»{ішиуг піїт іютітгп оіг ОГггоГт і^0*1шЬгп'^п*йіІҐгпГігиГГХііг:іііпгі)піггуіЬі*Ґіи>аҐ Н ^ и **п * ЛІІ«*ТТгпі»пгЬггйгя \mdnOif

Рис. 8.9. Приклад графічного виконання письма «бастарда».

бГнниу закїнчгнЬ.^7ъьот зберра-

рис. 8.10. Приклад графічного виконання письма «ротунда».

Незручність сприйняття великих обсягів текстів, виконаних письмом, що на лежить до типу «фрактура» або «текстура», поступово зумовила зміни в характе рі накреслення літер. Елементи багатьох літер стають більш заокругленими. Крім того, у написах збільш ую ться внутріш ньолітерні простори та міжрядкові відстані, а також значно збільш ую ться виносні елементи літер. Виникають нові види письма, що отримують назви «бастарда» та «ротунда» (рис. 8.9 та 8.10). Такі види готичного письма сприймалися значно легше і прискорювали швидкість розуміння текстів порівняно з текстурою і фрактурою. Але сприйняття довгих і склад них за змістом текстів, виконаних таким письмом, все одно вимагало надто багато зу силь. Тому захоплення готичною писемністю у Європі тривало відносно недовго. Одночасно із зародженням і розвитком капіталістичних відносин у більшості країн Європи, зокрема в Італії, Іспанії, Франції, Англії, значно збільш ується попит на книжки. Тому виникає потреба у простих та виразних формах літер і швидких технологіях їх нанесення. Винахід Й. Гутенбергом у 1450 р. друкарства відкрив шлях для поширення таких технологій. Потреба розроблення гармонійних форм накреслення літер стала ще більш актуальною. Для вирішення цієї потреби було залучено найвидатніших д іячів мистецтва того часу. У створенні та обґрунтуванні форм літер взяли участь Ф. Петрарка, А. Дюрер, Леонардо да Вінчі та інші відомі діячі мистецтва і культури. Всі вони сходились у поглядах на те, що найбільша гармонійність і виразність притаманні літерам не готичної, а античної писемності. Тому нові варіанти накреслення шрифтів, в яких зберігалася чітка геометрична конструкція літер, але використовувалися різні про порції між елементами, зараховують до типу "антиква" (рис. 8.11,8.12). Поширення шрифтів типу «антиква» у Європі тривало до кінця XVIII ст. Розвиток капіталістичних відносин, потреба у підвищенні рівня освіти широ ких верств населення, книгодрукування та розповсюдження газетно-журнальної продукції зумовили необхідність урізноманітнення літер. Потрібно було виділяти й акцентувати рекламну інформацію, а отже, характер накреслення літер мав від різнятися від класичної «антикви».

125

Рис. 8.11. Схема побудови літер, запропонована /І. Пачоллі

Рис. 8.12. Схема побудови літер, розроблена А. Дюрером

Тому видавці друкованих видань, художники і палеографи змушені були знову звер нутись до шрифтової спадщини стародавності. На основі досліджень рустичного спосо бу виконання літер були спеціально розроблені нові види шрифтів, що отримали назву «Єгипетський» та «Кларендон». Літери цих шрифтів відрізнялися більш видовженими пропорціями і містили значно збільшені за масою засічки (серифи) прямокутної форми. У подальшому поширення подібних шрифтів зумовило виділення їх в окрему групу, що отримала назву «брускові» у зв’язку з характером виконання засічок (рис. 8.13 та 8.14). Такі літери сприяли акцентуванню коротких текстових блоків у заголовках та рекламних текстах. Але зручними для сприйняття значних обсягів текстової інформації все-таки за лишались шрифти типу «антиква», робота з удосконалення яких тривала.

АБВГД ЕЖСМ КЯ Рис. 8.13. Приклад графічного накреслення шрифту «Єгипетський»

Рис. 8.14. Приклад графічного накреслення шрифту «Кларендон»

ГР А Ф ІЧ Н И Й ДИЗАЙН

АБВГДЕЖЗ ИКЛМНОП РСТУФХЦЧ ШЩЬЗЮЯ Рис. 8.15. Приклад конструктивного виконання гротескових шрифтів

III

АБВГДЕЖ ЗИ и к л м н о п р

СТУФХЦЧШ Ш Ь Ь Ь ІЗ Ю Я Рис. 8.16 .Приклад рубленого виконання гротескових шрифтів

В Англії на початку XIX ст. почали використовувати принципово нові для того часу способи накреслення літер - взагалі без засічок. Англійці назвали їх гротеско вими, а французи в подальшому поширили назву поп зегееГ на всі шрифти, що вико нувались без засічок. Використання таких шрифтів стало справжньою революцією утворенні літерно-алфавітних знаків. Відтепер конструкція літер була стрункою та чіткою, «раціональною», як любили підкреслювати в розмові англійці. Але, позбув шись «зайвих» засічок, такі літери великою мірою втратили образність, стали «ней тральними» стосовно інформації, яку відтворювали. Накреслення гротескових шрифтів, у свою чергу, набуло великої кількості варі ацій за пропорціями. Але основною відмінністю між гротесковими шрифтами стало впровадження різних способів виконання загальної форми більшості літер - кон структивного та рубленого (рис. 8.15,8.16). У рублених шрифтах втратились круглі та трикутні літери, натомість усі вони стали подібними до прямокутників із ледве закругленими кутами або похилими сторонами У XX ст. процеси, пов'язані з розвитком інформаційних джерел і мереж, набули бурхливого і необоротного характеру. Активно впроваджувались нові види друку, стрімко зростали темпи поширення знань, рівень їх досяжності. Наприкінці XX ст. стало остаточно зрозуміло, що розвиток держав і особистостей у них залежить від швидкості сприйняття та засвоєння нової інформації. З'ясувалось, що форма літерно-алфавітних знаків відіграє в цих процесах зна чну роль: саме вона здатна надавати літерам образно-емоційне забарвлення та забезпечувати індивідуалізацію інформації, а відтак подовжувати терміни ії збе реження в пам'яті. Крім того, було виявлено, що форма літер, відстані між ними у словах і рядках та строках вагомо впливають на швидкість і зручність сприйняття інформації. Відтак способи накреслення шрифтів і умови їх застосування у друко ваних та електронних виданнях стали об'єктами прискіпливого вивчення багатьма науковцями у різних країнах. Найбільше визнання серед інших досліджень здобула праця М. Тінкера «Виразність друкованих видань». Висновки

науковця, наведені у

цій

праці, на практиці застосовуються

дизайнерами-графіками з багатьох країн світу в процесі проектування багатосто рінкових видань - журналів, каталогів, альманахів та книжок. Але вимоги індиві-

127

ГР А Ф ІЧ Н И Й ДИЗАЙН 1

АБВРДЕ8 ЖЙКЛМП «ОРЕТНФ Рис. 8.17. Варіант декоративного шрифту

А ВС 0Е ГОИЫК ЬИШОР Рис. 8.18. Варіант декоративного шрифту

Ш Ш

Б іІ І К д А

Рис. 8.19. Варіант декоративного шрифту

Рис. 8.20. Варіант декоративного шрифту

дуалізації кожного з видань зумовлюють необхідність продовження наукових до сліджень і подальшого розроблення нових варіантів образних шрифтів. Поєднання зусиль науковців, дизайнерів-практиків і типографів зумовлює роз роблення і впровадження численної кількості нових видів шрифтів, у тому числі декоративних, що ґрунтуються як на геометричних, так і на рукописних способах виконання. Деякі варіанти декоративних шрифтів наведено на рис. 8.17-8.20. Найдавніші пам'ятки слов'янської писемності відносять до ІХ-Х ст. Вони напи сані двома графічними варіантами абетки - глаголицею (рис. 8.21) та кирилицею (рис. 8.22). Історичні пам'ятки рукописних та віддрукованих з дерев'яних дошок ви дань свідчать, що обидві ці форми існували паралельно до початку XII ст. Глаголиця - це алф авіт із 40 літер, з яких 39 м аю ть аналоги в кирилиці. Деякі сучасні дослідники, зокрема О. Брайчевський, стверджують, що саме глаголи цю розробили для слов'янського середовища брати-просвітники Кирило т а Мефодій. Загалом щодо походження глаголиці висунуто понад ЗО гіпотез. Знаки алфавіту, що отримав назву «кирилиця», більше схожі на історично сформовані знаки латинської писемності. І хоча назва алф авіту утворена від імені відомого просвітника з Македонії Кирила, найімовірніше, кирилиця виникла в р е зул ьтаті поступового процесу ад аптац ії латинських літер до слов'янської мови. Форми літер в алфавіті, що отримав назву «кирилиця», також зазнали істотних змін під впливом часу. Цікаво, що на перших етапах створення та використання цього алфавіту він, як і латинський у Європі, найбільше поширився серед монахівпереписувачів. Але у слов'янському середовищі не було сформовано чітких вимог

128

ГР А Ф ІЧ Н И Й ДИЗАЙН і

+ не V & сГЬ Э -8 ^ о&Г сХ

> & 9 ° сТ

гЯ

с8

, 5

£ Д

Ж у о

Я о

3 *8

Я 3

с£

{° 6

СТО

39-

ф Є О0 О § ,

/о ф

\У

*У

Л Е В Г ^ е Ж

о п р с т о у ч |> д ч о

^ Ч » т ^ у к Ю

Рис. 8.21. Приклад графічного накреслення літер алф авіту глаголицею

ІА К А Ж

Рис. 8.22. Приклад графічного накреслен ня літер алфавіту кирилицею

ДБВГДЄЖ 2.И КА V II М О П ()С Т ~ ¥ А ф ІК Рис. 8.23. »Устав» до послідовності виконання елементів літер певними інструментами, і тому літе ри переважно не писали, а рисували. Кожна з літер мала індивідуальні відмінності у виконанні, міжлітерний простір і характер скруглених елементів були різними. Запам'ятати, як потрібно рисувати кожну з літер, було дуже важко. Тому перший варіант виконання цього алфавіту також називали «устав» (рис. 8.23). Незважаючи на складність графічного відтворення, «уставом» було переписано велику кількість примірників Біблії, зокрема Євангелій. Цей вид написання літер за стосовувався з IX до XVII ст. Але з кінця XIV ст. виник і новий варіант калі графічного виконання літер, що отримав назву «напівустав». Він вирізняється обмеженням кількості рисованих елементів. Виконання літер стає системнішим, у них збільш уються виносні елементи і між рядкові відстані (рис. 8.24). Устав та напівустав застосовували для написан ня текстів значного обсягу. А заголовки у книжках виконувались іншими літерами, декоративними та значно витягнутими у висоту. Вони отримали назву «в'язь» (рис. 8.25).

АБВГ ДЄ Є ї І Ж

Т Н

НЦАМ Н ОПРСТу Рис. 8.24. Приклад графічного виконання те к стів літерами напівуставу

129

ГР А Ф ІЧ Н И Й ДИЗАЙН Необхідність поширення знань і написання не тільки церковних книг, а й ділових паперів, розви ток міжособистісного спілкування зумовили те, що серед широких верств населення з XIV а . популяр ність здобув інший вид виконання форми літер, який отримав назву «скоропис». Йому притаманні без перервний рух пера та яскраво ви Рис. 8.26. Приклад графічного виконання алфаві т у літерами скоропису

ражені виносні елементи (рис. 8.26). У формах літер скоропису яскраво втілю вались відмінності рис харак

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

СВІТ П РО ФЕСІЙ Художн ик-пла катист.

П ЕРЕЛ ІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМ ІН ІВ У словнику-довіднику Йоганн Гутенберг; бастарда; диптих; калам; поліптих; си

лабічний; стилус; типографіка; триптих; шрифт; шрифтова гарнітура. У н а вча л ьн о м у м а т е р іа л і параграф а: писемність; сучасні інформаційні носії; системи кодування-декодування; піктографічна писемність; піктограма; мнемогра ми; петрогліфи; ідеограми; ідеографічна писемність; літерно-алфавітна писемність; образна асоціація; силабічне письмо; монументальне письмо; рустичне письмо; фрактура; текстура; бастарда, ротонда; антиква; шрифти; «Єгипетський» та «Кларендон»; засічки (серифи); гротескові шрифти; конструктивний та рублений шрифти; форма літерно-алфавітних знаків; образно-емоційне забарвлення літер; образні, декоративні шрифти; глаголиця; кирилиця (устав, напівустав); в'язь.

ПРАКТИЧНА РОБОТА 8 А н а л із р е т р о с п е к т и в и р о з в и т к у с у с п іл ь с т в а у р із н і іс т о р и ч н і е п о х и (за к а р т к а м и -з а в д а н н я м и ) Завд ан н я 1. Аналіз ретроспективи розвитку писемності і суспільства у різні іс торичні епохи (за картками-завданнями). О б'єкти практичних розробок: реферати, реферативні виступи. Завд ан н я 2. Аналіз впливу ритму та естетичних властивостей літер на зруч ність сприйняття текстових блоків. О б 'єкти практичних розробок: художньо-проектний аналіз.

ГР А Ф ІЧ Н И Й ДИЗАЙН Завдання 3. Вправляння у доборі історичних типових видів шрифтів. О б'єкти практичних розробок: зарисовки з аналізом для порт-фоліо.

/ V

ТВО РЧЕ ЗАВДАННЯ д л я з а к р іп л е н н я н а в ч а л ь н о г о м а т е р іа л у т е м и з а н я т т я

Охарактеризуйте типові види шрифтів, наведені на картках-завданнях, відпо відно до історичних періодів країни їх створення. О б'єкти практичних розробок: характеристики типових видів шрифтів, відпо відних історичних періодів країни їх створення (наведених на картках-завданнях).

•} &

КОНТРОЛЬНІ ЗАПИТАННЯ для пер е вір ки в ласни х н а в ч а л ьн и х досягнень з а т е м о ю з а н я т т я

1. Визначте, до якого типу належать шрифти, зображені на рис. 8.28 та 8.29. Відпо відь обґрунтуйте. Наведіть свої міркування щодо того, в який історичний період було створено кожен із зображених шрифтів. 2. 3.

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

Обґрунтуйте залежність зручності та легкості сприйняття шрифтів від їх ритміч них, геометричних та естетичних властивостей.

5. Назвіть основні різновиди історично сформованих шрифтів. 6. Які образні асоціації виникають у вас під час спостереження шрифтів, зображе них на рис. 8.23-8.24? Проаналізуйте, завдяки саме яким елементам та характе ристикам літер у шрифті вони з'являю ться. 7. Обґрунтуйте спосіб і характерні особливості літер латинського письма. 8.

Обґрунтуйте спосіб і характерні особливості літер українського скоропису (рис. 8.23).

9. Обґрунтуйте спосіб і характерні особливості накреслення заголовних літер для старослов'янських рукописних книжок, що отримало назву в'язь (рис. 8.24). 10. Проаналізуйте вплив ритму та естетичних властивостей літер на зручність сприйняття текстових блоків.

А£^ДЛІ>ЕЖ <| 4 У К Х > Ч *

НО ДЛ ІуІ ГШ дд^тд-ю Рис. 8.29

131

ГРАФІЧНИЙ ДИЗАЙН §

Образно-асоціативні характеристики шрифтів 1. Як впливає вид шрифту на емоції т а п о чуття людини? 2. Охарактеризуйте каліграфію як мистецтво. 3. Наведіть цікаві приклади з історії розвитку каліграфії в різних країнах світу.

Огляд видів шрифтів у попередньому параграфі засвідчив, що зміст повідо млень, написаних різними шрифтами, сприймається неоднаково. Емоційне забарв лення повідомленням надає саме характер виконання шрифтів. Насправді, важко сприймати серйозно зміст повідомлення, виконаного шрифтами з коміксів або мультиплікаційних фільмів, і навпаки, назви дитячих книжок та журналів не будуть цікавими, якщо виконати їх однотипними літерами рубленого гротеску. Відтак, для керування процесами утворення асоціативних характеристик шрифтів, необхідно опанувати ті елементи, за допомогою яких утворюється певна графічна сис тема (шрифт). Системні зміни у графічній формі накреслення літер зумовлюють різне асоціативне сприйняття шрифту. Завдяки змінам у пропорційних співвідношеннях між елементами літер, виведенні кінцевих елементів, застосуванню серифів та індивіду альних пластичних характеристик основних і допоміжних штрихів проектувальники шрифтів отримують абсолютно новий характер сприйняття шрифтів спостерігачами. Порівняйте шрифти, виконані літерами кириличної абетки відомим вітчизняним художником О.В. Снарським (рис. 9.1-9.4). Різний характер графічного накреслення літер приводить до того, що кожен зі шрифтів ми сприймаємо як певний вид націо нального: арабський, індійський, китайський та японський. Завдяки можливостям шрифту відтворювати асоціативні характеристики різно манітних об'єктів дизайнери можуть більш е не застосовувати у візуальних повідо мленнях жодних зображень, ні реалістичних, ні декоративно-стилізованих. Шрифт перебирає на себе функцію образного забарвлення у візуальних повідомленнях, водночас надаючи можливість подавати в них значно більші обсяги інформації. Розгляньте варіант графічного виріш ення політичного плаката на рис. 9.5.

Р Щ Щ т

і ї ?

зишт їїш ір д а

Рис. 9.1. «Арабський» шрифт, виконаний О.В. Снарським

Рис. 9.2.«Індійський» шрифт, виконаний О.В. Снарським

III

ГРАФІЧНИЙ ДИЗАЙН

ДБВГДБЖЗ ЙКЛМНОП

А - Б В Г А Е ^ И К

АЩППП-РСТ УфХЦЧЬ

рстеФхд; чщі»і зюя

\я

Рис. 9.3.«Китайський» шрифт, виконаний О.В. Снарським

п р н и я

/’

Рис. 9.4.«Японський» шрифт, виконаний О.В. Снарським

Зміст плаката розкривається перед глядачем завдяки професійному викорис танню властивостей різних шрифтів і високій технічній майстерності у їх відтворен ні, що забезпечують емоційну виразність графічного твору. Кожна літера має певну чітко індивідуалізовану форму, що вирізняє її серед інших. Така форма називається графемою. Для деяких літер, наприклад О та С, графеми малих (рядкових) та великих (за головних), рукописних та друкованих літер є майже незмінними; у різних шрифтах застосовують лиш е деякі нюансові зміни у їх виконанні. Для інших, наприклад, для літер А, Г, застосовують декілька різних графічних форм. Розгляньте приклади різ них графем для літери А, наведені на рис. 9.6. Водночас ми вже звикли розпізнавати літери в кожному з варіантів накреслен ня саме за формами графем, навіть різними. Проте одну і ту саму форму (графему) можна написати в різних пропорційних співвідношеннях, із різною товщ иною та

Ід К

с н у к р л

ї н

с ь к

2 А

А Л А а

Я д о ч а с ти м и д р у го ї с т а т т і 9 0 К о н с т и т у ц ії У кр аїн и т а к о г о змісту: -а т а к о ж у разі ниг / ю п л г и и я н е д о в ір и В е р х о в н ій Раді У к р а їн и на в с е у к р а їн с ь к о м у р е ф е р е н д у м і-. щ о л а г п ід с та в и П р е зи д е н то в і У к р а їн и д л я р о зп у с к у В е р х о в н о ї Ради У к р а їн и ?

Рис. 9.5. Варіант графічного вирішення політичного плаката

А А Ж А

Ж Г

Ді А

А А &

я й А

На

Рис. 9.6. Приклад різних графем для літери А

ГР А Ф ІЧ Н И Й ДИЗАЙН певними доповненнями. Тоді ми отримаємо змінені асоціативні характеристики лі тери. Але якщ о такі самі зміни зробити у всіх літерах, то ми матимемо новий шрифт із заданими асоціативними властивостями. Задаючи літерам певні властивості гра фічного накреслення, можна отримувати шрифт, що буде сприйматись відповідно до тематики: кінематографу або фотостудії, зоопарку або цирку тощо. Для того щоб зберігати умови системності під час внесення змін у форму літер, необхідно розуміти основи їх побудови. Насправді, літери, дуже схожі на конструк тор і утворюю ться завдяки поєднанню типових елементів (рис. 9.7).

Рис. 9.7. Елементи літер і надписів

Елементи літер: 1) основний штрих;

9) висота (корпус) великих літер;

2) додаткові штрихи

10) висота малих літер;

(допоміжний і з'єднувальний);

11) оптичне поле літер;

3) серифи;

12) кегль.

4) округлений елемент з напливом;

Елементи надписів:

5) виносні елементи (верхній та нижній);

13) міжлітерний простір;

6) внутріш ньолітерний простір;

14) міжрядкова відстань;

7) кінцеві елементи;

15) довжина рядка (у багаторядковому

8) діакретичний знак;

тексті - ширина шрифтової смуги).

Вимоги до написання шрифтів: 1.

Основні штрихи всіх літер одного шрифту мають бути однаковими за товщи

ною та висотою.

134

ГР А Ф ІЧ Н И Й ДИЗАЙН 2. Додаткові (допоміжні та з'єднувальні) штрихи, якщ о вони вирізняю ться за масою від основних, теж мають бути узгоджені; повторю ватися за кутами нахилу, пластикою, товщ иною та характером накреслення у літерах, де вони застосову ються. 3. Всі літери одного шрифту повинні мати приблизно однаковий оптичний внутрішньолітерний простір. 4. Пропорціонування літер (добір товщини штрихів до відповідних модулів В та Н) має відбуватися на спільних для всіх літер означеної гарнітури засадах. 5. Лівий штрих може бути менше правого, але не навпаки (винятком є тільки літера «у» деяких шрифтах). Створено велику кількість видів шрифтів із гармонійним пропорціонуванням лівого та правого штрихів. Не варто відразу намагатись створювати власні варіан ти графічного накреслення шрифтів. Краще спробувати змінити пропорції літер та простежити, як це позначиться на загальному вигляді шрифту. Якщо у шрифті застосовую ться серифи, крапко- або полум'яподібні елементи, вони мають використовуватись у певній системній послідовності та відповідати графематичному складу літер. Украй небажано застосовувати в одному шрифті більш е ніж один тип серифів, але один і той самий різновид (наприклад, пластичних серифів) може і має зміню ватись за масою у верхній та нижній частинах похилих літер (найчастіш е це літери

АЛЛ). Від характеру рисунку серифів значною мірою залежить характер сприйняття шрифту. З наведеного вище рисунку видно, що серифи можуть бути горизонтальними або вертикальними, одно- або двосторонніми. Найбільш поширені горизонтальні серифи, які утворюю ться завдяки нюансовим змінам у пропорціях, варіюють їх довжина, ширина та характер з'єднань з основним штрихом. Краєчки серифів бува ють зрізаними, гострими або скругленими. Коли художник або дизайнер обирає шрифт, необхідний для подальшої робо ти, він насамперед звертає увагу на пропорції між елементами літер і на характер шрифту (конструктивний чи рублений, світлий чи жирний). Не обов'язково, щоб шрифт одразу містив серифи. Художник може домалювати їх у процесі роботи, якщо цього потребує образний характер візуального повідомлення. Навіть одна кові серифи можуть справляти в шрифті різне враження на спостерігачів залежно від їх маси та способу поєднання з основним штрихом. Варіанти способів поєднання серифів з основним штрихом показані на рис. 9.8. Для побудови цілоїграфічноїсистеми шрифту на основі властивостей однієїл іте ри дизайнери використовують поліграму - метричну сітку, що дає можливість визначити т а унаочнити закономірності пропорційних співвідношень між еле ментами літер. Приклади виконання поліграми для шрифту, що належить до типу «антиква» див. на рис. 7.11, а поліграми для літер шрифту, що належить до типу «гротеск», - на рис. 9.9.

135

ГР А Ф ІЧ Н И Й ДИЗАЙН

Т Т Т Ї І І Т т

ттттііііі Рис. 9.8. Варіанти способів поєднання серифів з основним штрихом Кожному шрифту відповідає власна поліграма. Практичні вправи з виконання поліграм для різних шрифтів дають змогу зрозуміти вимоги до системного застосу вання мікроелементів літер і способів їх упорядкування в процесі візуального на креслення шрифту. До цих умов нале

ПУЕГНЬВ

тхждш

жить

також

дотримання

постійних

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

поліграм

можна зрозу

міти, що шрифт є «конструктором» з м ікроелем ентів літер, що вимагає на явності лиш е стандартних, «уніфіко

ЯФШМЩ ЛЦЄСИБЧ Рис. 9.9. Приклад виконання поліграми для шрифту, що належить до типу «гротеск»

136

ваних» для цього шрифту, елементів. Бажання

урізном анітнити і змінити

хоча б один елемент в якій сь із літер нем инуче зум овить необхідність ро бити подібні зміни у декількох літе рах або в цілісній системі, яку ми на зиваєм о ш р и ф то м . На рис. 9.10 надано приклад свідо мої зміни характеру сприйняття шриф-

ГР А Ф ІЧ Н И Й ДИЗАЙН ту, через доповнення до основних штрихів всіх літер однакових за характером серифами. Дизайнер, який володіє знаннями про закономірності побудови літер і утво рення шрифтів, може самостійно змінювати образні якості літер, дотримуючись ви мог системності до накреслення цілого шрифту. Такі зміни стають можливими за умови додавання допоміжних деко ративних елементів: засічок (серифів) або орнаментального оздоблення. Вони дають можливість отримувати надзвичайно виразні літери, які будуть привертати значно більш у увагу спо стерігачів і допомагати їм краще запам'ятати зміст повідомлення. Зви чайно, у значних обсягах тексту не вар то застосовувати декоративні літери. Вони необхідні для виділення першої літери на сторінці тексту, так званої буквиці. Приклади графічного вирі шення буквиць наведено на рис. 9.11 та 9.12. Крім

того,

сучасній

дизайн-проектування Рис. 9.10. Приклад с в ід о М н и характеру сприйняття шрифту через доповнення основних штрихів усіх літер однаковими за характером серифами

практиці

поширені

ви

падки, коли літерам або навіть цілим словам навмисно надається образний ,. т , характер графічного відтворення. Такі .г г г т ЛІТЄР И та 0/1063 використовують у ло-

137

ГР А Ф ІЧ Н И Й ДИЗАЙН

Рис. 9.13. Приклад образнографічного вирішення літер

Рис. 9.14. Приклад образно-графічного вирішення літер т а слів

готипах фірм-виробників, назвах друкованих видань або є складовими плакатних звернень. Найбільшого поширення вони набули саме в галузі театрального плака та. Образне виріш ення шрифтів дає змогу мінімальними засобами закріпити та від творити зміст написаного слова. Згадайте, коли ви починали вивчати абетку, то для кращого запам'ятовування літер доводилося звертатися саме до зображень слів, що починаються на ту саму літеру. Приклади образно графічного вирішення літер та слів наведено на рис. 9.13-9.14.

СВ ІТ П Р О Ф Е С ІЙ Художник-ілюстратор книги.

П Е Р Е Л ІК О С Н О В Н И Х П О Н Я Т Ь ТА Т Е Р М ІН ІВ У словнику-довіднику: ескіз; насиченість шрифту; інтерліньяж; кегль; курсив; похилий шрифт; кернінг. У н авчал ьн о м у м а т е р іа л і параграф а: асоціативні характеристики шрифтів; асоціативне сприйняття шрифту; серифи; індивідуальні пластичні характеристики основних та допоміжних штрихів шрифтів; літери кириличної абетки; зображення: реалістичні, декоративно-стилізовані; емоційна виразність графічного твору; графе ма; графеми малих (рядкових) та великих (заголовних), рукописних та друкованих літер; оптичний внутрішньолітерний простір; пропорціонування літер; образний ха рактер візуального повідомлення; поліграма - метрична сітка; шрифт типу «антиква», «гротеск»; основні властивості літер: форма (конструктивна чи рублена), пропорції та контрастність; буквиці; дизайн-проектування; логотипи фірм-виробників

П РАКТИЧНА РОБОТА 9

Образно-асоціативні шрифтові роботи Завдання 1. Порівняльний аналіз різних типів шрифтів О б 'єкти практичних розробок: антиква, гротеск, декоративні шрифтові гарні тури та група пластично-рукописних шрифтів.

Завдання 2. Побудова образного виріш ення окремих літер

ГР А Ф ІЧ Н И Й ДИЗАЙН О б'єкти практичних розробок: образне виріш ення окремих літер, яке б відпо відало змісту слів, у яких ці літери стоять першими.

Завдання 3. Побудова образного виріш ення окремих слів О б'єкти практичних розробок: образне виріш ення окремих слів, яке б відпо відало їх змісту.

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

Завдання 5. Побудова літер шрифту, що належить до типу «антиква». О б'єкти практичних розробок: літери шрифту, що належить до типу «антиква».

Завдання б. Впровадження змін у графічну форму виконання літер (А, П, Н, Е). О б'єкти практичних розробок: літери шрифту, що допомагають сприймати такі асоціативні якості: літери театральні, музичні, геометричні, святкові, жартівливі тощо.

ТВОРЧІ ЗАВД АН НЯ

для закріплення навчального матеріалу теми заняття 1. Запропонуйте образне виріш ення для окремих літер (за вибором), яке б відпо відало змісту слів, у яких ці літери стоять першими. 2. Запропонуйте образне вирішення для окремих слів (за вибором), яке б відпо відало їх змісту. 3.

За зразком, наведеним на рис. 9.9, побудуйте поліграми для літер К, П, Е, Н гро тескового шрифту.

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

5. Уважно розгляньте поліграми літер на рис. 9.9. Користую чись плакатними пера ми, побудуйте літери шрифту, яких там немає, з тими самими пропорціями, що визначені поліграмою на рисунку. Виконайте ескізи з внесення змін у графічну форму виконання літер (А, П, Н, Е),

які б допомагали сприймати такі асоціативні якості: літери театральні, музичні, геометричні, святкові, жартівливі тощо.)•

•)

КОНТРОЛЬНІ ЗАПИТАННЯ

для перевірки власних навчальних досягнень за темою заняття 1. Поясніть, які зміни потрібно внести до графеми літери, щоб отримати умови для розробки нового виду шрифту. Яких умов потрібно дотримуватись, щоб усі літе ри відповідали єдиній графічній системі? 2.

Порівняйте шрифти типу «гротеск» і шрифти, що належать до типу «антиква», і

Порівняйте різні типи шрифтів («антиква», «гротеск», декоративні шрифтові гар

поясніть особливості та відмінності у їх побудові. нітури та група пластично-рукописних шрифтів). Назвіть основні відмінні влас тивості кожного з означених типових угруповань.

139

Г Р А Ф ІЧ Н И Й ДИЗАЙН 4.

Назвіть основні елементи мікроструктури літер та їх термінологічні позначення.

Порівняйте якісні ознаки, втілені у мікроструктурі літер шрифтів на рис. 9.1 -9.4. Опишіть їх.

Поясніть, які можливості є для візуального урізноманітнення шрифтів, зображе них на рис. 9.16,9.17.

лш д ІЖ З Н К ЛЬМ Н О П Рис. 9.16

АБВЩ ЕЖ З ЙКЛМНОП РСТУФХЦЧ

шщъэюя Рис. 9.17

§10. Дизайн пакувань у системі візуальних комунікацій 1. Як інформативність пакування впливає на конкурентоспроможність товару? 2. Охарактеризуйте вплив шрифтового напису назви на титульних сторінках літературних видань на психофізіологічний стан людини?

Значення пакувань для покращання життя і побуту людини. Функції лаку вань у системі споживання. Ми часто не помічаємо або не замислюємось, наскільки важливе значення відіграє пакування у процесах збереження та реалізації товарів. Пакування дає можливість найбільш точно фасувати продукти споживання, за безпечує для цього найбільш зручні конструкції т а матеріали, допомагає подовжу вати термін збереження товарів, забезпечує якість їх зберігання т а зручність подальшого використання. Для усвідомлення численних функцій, які виконує пакування в системі спожи вання, та встановлення зв'язків між ними варто скористатися даними, представле ними на рис. 10.1. У процесі розроблення та створення майбутнього пакування проектувальник має продумати та забезпечити поєднання значної кількості вимог, зумовлених функ ціями пакування. Інтегрований підхід до розроблення пакувань дає змогу називати процес їх ство рення дизайном. На рис. 10.2 графічно представлено комплекс вимог до проектування пакувань, за безпечення яких втілюється під час процесу дизайнерського проектування пакувань.

140

-----------------------------------------------------------—

----------------

ГР А Ф ІЧ Н И Й ДИЗАЙН Естетична функція

Рекламна функція

Утилітарна функція

Забезпечення асоці ативної відповідності образного характеру представлення това ру його споживчим якостям та техноло гіям виготовлення, а також гармонійності та привабливості у їх сприйнятті та іннова ційного способу пред ставлення

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

Забезпечення технологіч ності виготовлення та еко номних витрат матеріалу; забезпечення зручності наповнення (фасування); захист товару від шкідливо го впливу навколишнього середовища або навпаки; забезпечення відповідності вимогам транспортних за собів, місць складування та реалізації; забезпечення зручності використання

Рис 10.1. Функції, які виконує пакування у системі споживання і встановлення зв'язків між ними

ДИЗАЙН

А*с. 10.2. Графічне представлення комплексу вимог до проектування пакувань, забезпечен ня яких дає можливість називати процес проектування дизайном

ГР А Ф ІЧ Н И Й ДИЗАЙН 1 У практ иці сучасного виробництва дизайном та к о ж н ази ваю ть зовнішнє декорування, художнє оздоблення вже визначеної технологами, маркетологам и т а іншими фахівцями форми, яку в а р т о лише дещо «прикрасити» кольором, шриф т о м т а зображенням і при цьому бажано ще й зр обити не схожою на інші, які вже існую ть. Подібний підхід до дизайну в реаліях сьогодення є хибною практикою і відпо відає вчораш ньому рівню, але аж ніяк не сьогоднішньому, і тим більш е не завтраш ньому.

Дизайн у пакувальній галузі є м и сте ц тво м і водночас си н те ти чн и м явищем, яке охоплює, обумовлює т а утр и м ує т а к у сукупність ф акторів, яка жодним чином не вклад ається в рамки с у т о декорування форми. Форма пакування та пов'язані з нею матеріали та конструкція вже є вагомим фактором у формуванні зовніш нього цілісного образу майбутнього пакування. І че рез відповідність загального образу пакування якості споживчій вартості товару забезпечує успіх або неконкурентоспроможність пропонованої продукції. Одна і та сама загальна форма пакування може мати певний варіативний ряд втілень за способом функціонування. Споживачу часом важко розрізнити та визна чити відмінності між пачкою, коробкою або пеналом, особливо, коли ці конструк тивні типи наближені за пропорціями та використані у поєднанні з додатковими пакувальними засобами (наприклад, термозбіжною стрейтч-плівкою). Але ці відмін ності можуть вагомо впливати на процес функціонування пакування, або виклика ючи у споживача відчуття або зручності та задоволення, або навпаки, врешті-решт, призводячи до підвищення чи зменшення і навіть припинення попиту на товар. Нові варіанти конструктивного виріш ення пакувань, запропоновані дизайне рами, дають можливість забезпечити індивідуалізацію товарів та значно еконо мити кошти на графічному вирішенні, що стає максимально інформативним і вод ночас позбувається другорядних і несуттєвих декоративних елементів. Правило: «Менше графічних елементів, більш е варіювання ними» - один з визначних показ ників рівня професійної майстерності художників та дизайнерів пакувальної галузі. В реаліях сьогодення цього правила поки що не завжди дотримуються, оскільки нововведення дизайнерів зумовлюють необхідність модернізації або технічного переоснащ ення всього підприємства. Виробники не завжди погоджуються на такі рішучі кроки, віддаючи перевагу випуску стандартних конструкцій і графічних ви рішень для їх представлення. У процесі внесення змін у образне вирішення пакування перевага віддається новим технологіям, вже запровадженим на поліграфічних підприємствах, де такі пакування виготовляються, які також мають бути враховані дизайнерами.

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

142

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

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

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

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

Рис. 10.5. Приклад креслення для пакувальної конструкції

143

ГР А Ф ІЧ Н И Й ДИЗАЙН 1 Процеси формування пакувальних конструкцій промисловим способом вима гають чіткого позначення і подальшого виконання спеціальних ліній, що відповіда ють технологічним операціям бігування та рилювання. Бігуванн я - технологічна операція, у процесі якої по матеріалу прокочується бі гувальна муф та - важке коліщатко з тонким т а ледь округленим краєм, що зали шає чіткий, глибоко вдавлений слід, не порушуючи водночас щільності матеріалу. Рилювання - технологічна операція, в р езультаті якої формується чіткий, гли боко вдавлений слід, але з частковим рівномірним порушенням щільності матері алу, оскільки на краю рилювальної муфти розташовані невеличкі т а гострі ножі. Лінії бігування т а рилювання називають також модульно-технологічними лініями. Лінії, за якими відсікають пакувальну конструкцію від загальної площини рулонно го або аркушевого матеріалу, називають лініями основного контуру, або лінія ми висікання. Графічне позначення ліній бігування, рилювання та висікання подано на рис.10.6. Для зручності формування пакувальних конструкції на підприємствах, що ви готовляють продукцію, і для забезпечення швидкості процесів пакування, замало тільки виконати технологічну розгортку на поліграфічній фабриці. Її потрібно також

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

увагу!

Елементи пакування збирають за допомогою затворів,

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

Лінія бігування Лінія рилювання Лінія висікання Рис. 10.6. Графічне позначення ліній бігування, рилювання т а висікання

144

ГР А Ф ІЧ Н И Й Д ИЗАЙН Основні види пакувальних конструкцій з картонажно-паперових матеріалів, поширених на споживчому ринку України Конструкціїпакувань, що м іс тя ть мінімальну кількість конструктивних еле ментів і чітко відповідають умовам створення певного виду пакувань, назива ю ть стандартним и (рис. 10.7). Конструкція, зовнішній вигляд

Визначення, стандарт

Конструкція, зовнішній вигляд

Визначення,стандарт

КО РО БК А

Разова споживча тара з корпусом різноманітної форми, п л а с т и дном, та кришкою, що закривається на шарнірах або знімається (ДСТУ 17527-86)

БАРАБАН

Транспортна тара з гладким або гофрованим корпусом переважно циліндричної форми (Д<300 мм) без обручок або зігів катання з пласким дном або кришкою (ДСТУ 17527-86)

П А К ЕТ

Разова м'яка або напівжорстка споживча тара з корпусом у вигляді рукава з дном і відчинюваною горловиною місткістю до 20 дм куб (ДСТУ 17527-86)

ВІДЕРЦЕ

Транспортна тара переважно циліндричної форми з кришкою та відкидною ручкою місхістю 5-20 дм куб

Споживча тара з відпитого корпусу (картонажні та полімерні матеріали) з пластиковими кришками з обох сторін

ЯЩИК

ПЛ ЯШ КА

Споживча тара переважно з циліндричним корпусом, що переходить у вузьку горловину, передбачену для укупорювання з пласким або вогнутим дном (ДСТУ 17527-86)

ЛОТОК

Транспортна тара, різновид ящика пареважно прямокутної форми, обмеженої висоти, з кришкою або без неї

ПАЧКА

Разова споживча тара з корпусом у формі переважно паралепіпеда. щ о закривається клапаном (ДСТУ 1752786)

ПЕНАЛ

Невелика коробка з висувним корпусом або

Транспортна тара з корпусом, що має у перетині паралельному дну, переважно форму прямокутника з дном, двома торцевими і боковими стінками або без неї

зачинюваною кришкою у вигляді обійчатки

Рисунок 10.7. Приклади стандартних конструкцій пакувань

145

ГР А Ф ІЧ Н И Й ДИЗАЙН

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

СВІТ ПРОФЕСІЙ Дизайнер пакувальної галузі. ПЕРЕЛІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМІНІВ Условнику-довіднику. естетика, ідея, макет, макетування, моделювання, модель. У навчальному матеріалі параграфа: система візуальних комунікацій; де корування форми; пачка, коробка, пенал; термозбіжна стрейтч-плівка; варіанти конструктивного вирішення пакувань; пакувальна галузь; образне вирішення па кування; картонажно-паперові матеріали; візуалізація пакувальної конструкції у ви гляді ілюзорно-об'ємногозображення; проектні пропозиції; схема технологічної розгортки, макет пакування; креслення пакувальної конструкції; процеси формування пакувальних конструкцій промисловим способом; технологічні операції бігування та рилювання; бігувальна муфта; рилювальна муфта; лінії бігування та рилювання модульно-технологічні лінії; лінії, за якими висікають пакувальну конструкцію від загальної площини рулонного або аркушевого матеріалу, - лінії основного контуру, або лінії висікання; технологічні операції: задрукування технологічної розгортки, склеювання технологічної розгортки; технологічні процеси фасування продукції у пакування та закріплення пакувальних конструкцій в об'ємно-просторову конструк цію; конструктивно-затворні елементи; стандартні конструкції пакувань, стандарти зовані допоміжні конструктивні елементи; стандартизовані пакувальні конструкції; 146

ГР А Ф ІЧ Н И Й ДИЗАЙН П Р А К Т И Ч Н А Р О Б О Т А 10 Р о зр о б ка д и зай н у па кув а н ь для сист ем и в із у а л ь н и х к о м у н ік а ц ій Об ладнання

м а теріали:

натуральні геометричні тіла та їх

розгортки, набір оригіналів різного виду пакувань, набір кольорових олівців, крес лярські прилади, папір формату А4.

Завдання 1. Огляд і порівняльний аналіз різновидів пакувань і способів їх фор моутворення. О б'єкти практичних розробок: реферати, реферативні виступи.

Завдання 2. Виконання проектних зарисовок у вигляді ілюзорно-об'ємних кон струкцій стандартних і стандартизованих пакувань О б'єкти практичних розробок: наприклад, ялинки, будинку, автомобіля і т. ін. Приклади проектних зарисовок див. на рис. 10.8.

Завдання 3. Виконання схеми технологічних розгорток О б'єкти практичних розробок: для наявних і виготовлених промисловим спо собом пакувальних конструкцій.

Завдання 4. Виконання креслення технологічних розгорток. О б'єкти практичних розробок: для наявних і виготовлених промисловим спо собом пакувальних конструкцій, з урахуванням всіх вимог до постановки розмірів і позначення технологічних операцій.

Завдання 5. Створення авторського варіанта графічного виріш ення пакувань О б'єкт практичних розробок: авторський варіант графічного виріш ення паку вань для солодощів до свят після вивчення конструктивних особливостей утворен ня різних типів пакувань.

' V

ТВОРЧІ ЗАВД АН Н Я д ля з а к р іп л е н н я н а в ч а л ь н о г о м а т е р іа л у т е м и з а н я т т я

Поясніть, чому чинник формоутворення є важливим для інноваційного способу представлення товару. Визначте, до якого типу належать пакувальні конструкції, зображені на рис. 10.9.

Рис. 10.9

Г Р А Ф ІЧ Н И Й ДИЗАЙН 7 'V

КОНТРОЛЬНІ ЗАПИТАННЯ д ля пер е вір ки власних н а в ч а л ьн и х д осягнень з а т е м о ю занят т я

Розкрийте значення пакувань для покращання життя і побуту людини.

Поясніть, які функції виконують пакування у системі споживання.

3. 4.

Розкрийте визначення «дизайн пакування». Опишіть відмінності між схемою технологічної розгортки та кресленням.

Поясніть відмінність між стандартними та стандартизованими пакувальними конструкціями.

§11. Дизайн книги. Історія і сучасність 1. Н а зв іт ь х а р а к т е р н і в ід м ін н о ст і м іж д и за й н о м к ниг для д іт ей т а дорослих. 2. В каж іт ь н а о со б л и в о ст і р о б о т и х уд о ж н ика і д и за й н е р а д р ук ов а н о го видання. 3. Які н а й б іл ь ш в и д а т н і в ід к р и т т я в іс т о р ії р о з в и т к у д и за й н у книги з р о б л ен і їх ав т орам и? 4. О характ еризуйт е особливост і проф есійної діяльності фахівців видавницт в на ета пі розроблення і фахівців т ипограф іїна е т апі т ираж ування друкованого видання.

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

дизайном поліграфічного видання.

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

ГР А Ф ІЧ Н И Й ДИЗАЙН

риклади

м а к е т ів

із т и п о г р а ф і ч н о ю

іє р а р х іє ю

Р и с 11.1. П р и кл а д и р ізн и х в а р іа н т ів р о з м іщ е н н я т е к с т о в о го м а т е р іа л у в м еж ах с т о р ін к и

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

Гармонійність друкованого видання -

це явищ е, щ о ф о р м у єт ь с я за л е ж н о від

ф ункції і т и п у видання, від вікових х а р а к т е р и с т и к й о го спож ивачів, від т е м а т и к и і, нареш т і, від см а к у п р о ект ув а л ьн и ка .

У цій р о б о т і н е м а є дрібниць.

Значення м а

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

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

149

ГРАФІЧНИЙ ДИЗАЙН ність викладення текстового та друкованого матеріалу. Як результат узагальнення в структуруванні складових друкованих видань було сформовано такі конструк тивні елементи, що повторюються в усіх виданнях: ■ основні: 1) обкладинка і палітурка, титул; 2) розділ і текст, зміст, 3) технічні характеристики видання; ■ д о д а тк о в і (залежно від типу видання до основних елементів можуть додаватися): 4) ілюстративний матеріал (малюнки, рисунки, фотографії, креслення,схеми, таблиці-додатки), 5) словники, 6) покажчики, 7) інші елементи. О бкладинка і п а л іт у р к а мають подвійне призначення: 1) скріплюють сторінки, захищають їх від пошкодження; 2) дають читачу перш очергову загальну інформацію про друковане видання. Від нашого першого враження часто залежить, чи захочемо ми детальніше ознайомитись із виданням. Таким чином, зовнішні елементи виконують не тільки інформаційну, а й рекламну функцію. Але декоративність зовніш нього оформлення має випливати зі змісту і призначення, а не перетворюватись на оздоблення. Обкладинка - це папер о ве покрит т я. Будова обкладинки нескладна - це аркуш папе ру. У виданнях із пал іт ур кою обкладинка охопл ю є блок спереду, ззаду і збоку. Увиданнях без паліт ур ки обкладинка виконує її функцію. Випуск видання в обкладинці простіший і зн а ч н о ш видш ий, ніж у палітурці. Крім того, обкл адин ка дешевш а. В обкладинці ви п ускаю т ься видання, розрахо вані н а ко р о т к и й а б о середній т ерм ін користування, на кор ист уванн я від випадку д о випадку, а т акож багат о видань невеликого обсягу.

Приклад видання в палітурці бачимо на рис. 11.2, а в обкладинці - на рис. 11.3.

Рис. 11.2. П р и к л а д в и д а н н я в п а л іт у р ц і

150

Рис. 11.3. П р и к л а д в и д а н н я в обкл адин ці

ГР А Ф ІЧ Н И Й ДИЗАЙН

III

Ілюстративний матеріал: графічне чи або кольорове змістове наповнення ви дання у вигляді реалістичних або декоративних зображень, а також схем, крес лень, фотографій тощо. До ілюстративного наповнення видання висувається не менше вимог стосовно системності та послідовності представлення інформації, ніж до текстового матері алу. Ілюстративне наповнення видання має бути виконаним в єдиному графічному стилі, що передбачає суворе дотримання графічно стійких форм зображувальних елементів і їх групувань. Графічний стиль - єдність змісту, образної системи т а художньої форми. Така єдність може сформуватися за конкретних суспільно-історичних умов і є власти вою різним історичним періодам т а епохам у розвитку графічного мистецтва або її свідомо утворює художник, дизайнер для ефективного представлення інфор маціїу виданні. Приклади ілюстрацій, виконаних із дотриманням умов стильової єдності, пода но на рис. 11.4 (а, б, в). Приклади ілюстрацій до того самого видання, але виконаних в інших мистець ких стилях, бачимо на рис. 11.5,11.6,11.7. Цікаво зазначити, що навіть перші видання, виготовлення і тиражуван ня яких спирались на значну кількість ремісничої ручної праці і були дуже дорогими, містили багато ілюстрацій. Декоративні заголовні літери-буквиці, ілюстрації на повну сторінку, ілюстра ції поруч із текстом та наприкінці роз ділів

супроводжували

процес

фор

мування видань від їх виникнення до сьогодення. Рис. 11.4а. Приклад ілюстрації, виконаної з дотриманням умов стильової єдності

Рис. 11.46. Приклад ілюстрації, виконаної з дотриманням умов стильової єдності

Чи був процес розроблення та випуску в історії книгодрукування ви-

Рис. 11.4в. Приклад ілюстрації, виконаної з дотриманням умов стильової єдності

151

ГР А Ф ІЧ Н И Й ДИЗАЙН

Рис. 11.5. Приклад ілюстрації до того самого видання, але виконаної в іншому мистецькому стилі

і П р и к л а д ілюстрації до того самого виданнявиконаної в іншому мистецькому стилі падковим? Чи був він лиш е даниною моді і часу? Н аскільки

необхідним

елементом книги є ілюстрація? На всі ці та багато інших питань, пов'язаних з проектуванням книги, намагались відповісти багато авторів, які присвя тили проектуванню видань усе життя. Серед найбільш відомих і визнаних у світі необхідно назвати роботи: Я. ЧиРис. 11.7. Приклад ілюстрації до того самого видання, але виконаної в іншому мистецько му стилі

хольда «О бличчя книги», Є. Рудера «Типографіка», М .Тинкера «Олтимізація друку», Е. Ф айоля «Мистецтво ти-

пографіки», Т. Самара «Дизайн публикацій. Практикум», Б. Валуєнко «Мистецтво книги» тощо. Наступними структурними елементами видання є: 1) розділ; 2) зміст; 3) технічні характеристики видання. Розділ - змістова одиниця літературного або наукового твору, що має власну на зву т а відрізняється від інших розділів збільшеною кількістю вільного простору. Зміст - покажчик послідовності викладених у виданні розділів, із зазначенням сто рінок, на яких їх подано. Технічні характеристики видання - відомості про технологічні процеси друку, формат, папір і обсяги видання т а поліграфічне підприємство, відповідальне за ви готовлення означеноїпродукції. Технічні характеристики також можуть містити дані про матеріали, дані про відповідальних за підготовку т а випуск видання, ін формацію про умови отримання т а розповсюдження видання тощо. У свою чергу, кожний з означених вище елементів видання має бути виконаний у межах єдиної системи, що визначається ф орм атом і модульною сіткою . Формати, у свою чергу, залежать від розмірів рулонного поліграфічного матеріалу (шпальти) і не завжди дорівнюють креслярським форматам.

ГРАФІЧНИЙ ДИЗАЙН

Рис. 11.8. а. Варіант модульної сітки

Рис. 11.8. б. Варіант модульної сітки

Вибір формату мас залежати від характеру розміщеного у виданні матеріалу і відповідати цільовому призначенню, умовам, в яких чи тачі будуть користувати ся ним. Широкі формати потрібні для видань з великими та численними ілюстраціями. Текст у таких виданнях подасться у дві й навіть три колонки. Широкі формати дають можливість гарно розмістити текст й ілюстрації найрізноманітніших розмірів. Водно час можна застосовувати для подібних видань і подовжені формати. Для системності представлення інформації у виданнях, крім формату, застосо вується модульна сітк а . Модульна сітка - система умовних (візуально не виявлених горизонтальних т а вертикальних ліній), що забезпечує найбільш раціональний розподіл площини ви дання, відповідно до зм істу і обсягів інформації, яка має надаватися. На основі ва ріювання властивостями модульної сітки можна якнайкраще представляти всі елементи, виявляти ступінь їх важливості один відносно одного. Кожне видання вимагає розроблення т а встановлення індивідуальної модульної сітки. На рис. 11.8-11.10 представлено різні варіанти модульних сіток, які застосову ються в процесі проектування друкованих видань.

Рис. 11.9. Варіанти модульної сітки

ГР А Ф ІЧ Н И Й ДИЗАЙН

Рис. 11.106. Варіант модульної сітки Системність представлення інформації у виданні передбачає також наявність колонтитулів. Колонтитули - рядки тексту, розташовані вище або нижче основного текстово го блоку і дещо із відривом від нього, що допомагають краще орієнтуватись у змісті друкованого документа. Як правило, колонтитулами с номери сторінок, але інколи колонтитул також м істи ть назву розділу, теми, дані про авторів тощо. Застосування модульної сітки рекомендовано починати з розподілу полів на краях сторінки: лівого та правого, верхнього та нижнього. Надалі формат поділя ється на визначене число колонок, а в разі необхідності і на число рядків. Залежно від загальної ширини сторінок є можливість встановлювати число колонок у межах від 2 до 8. Ширина та кількість колонок залежать від орієнтації формату і мають за безпечувати зручність читання і сприйняття, насамперед текстової інформації. _________

_________

На рис. 11.11 представлено один з варіантів фор-

---------------------- мування модульної сітки, а на рис. 11.12 різні способи розташування текстового матеріалу на її основі. У процесі застосування модульних сіток не слід розглядати їх як жорстку умову розподілу текстового

аЯ в^ imspLS S r

Рис. 11.11. Один з варіантів формування модульної сітки

154

Рис. 11.12. Різні способи розташування текстового матеріалу на основі модульноїсітки

ГР А Ф ІЧ Н И Й ДИЗАЙН матеріалу, усталену схему. Спосіб розташування матеріалу в межах модульної сітки великою мірою залежить від призначення видання та змісту інформації, що в ньому подається. Найбільші можливості для варіативного застосування модульних сіток по стають перед проектувальником у процесі роботи над навчальними та науковопізнавальними виданнями. Тоді на кожній зі сторінок, у межах декількох коло нок, є можливість розташ овувати основний текст і допоміжний інформаційний матеріал. Цікаві та привабливі рішення з'являю ться саме тоді, коли дизайнер зна ходить можливість гнучкого варію вання способів розташ ування матеріалу в за гальній системі обмежень, установлених модульною сіткою.

Види оригінальних конструктивних рішень дизайну книги. У процесі про ектування друкованих видань значна увага приділяється оригінальності та інноваційності представлення текстового та ілюстративного матеріалу, оскільки незви чайна форма великою мірою сприяє запам'ятовуванню змісту. Особливого поширення інноваційні ко н стр укти вн і вирішення набули в проце сі проектування видань для дітей, а саме для дітей молодшого шкільного віку. Варто пам'ятати, що визначення «конструктивне виріш ення» враховує положення, згідно з яким друковане видання - цілісна, послідовна система представлення інформації, в якій текстові блоки доповнюються графічним або ілюстративним матеріалом. Конструкція книги - спосіб поєднання текстового т а ілюстративного м атері алу, що забезпечує поетапність і логічність сприйняття змісту. Вище було зро блено стислий огляд найбільш суттєвих конструктивних елементів друкованих видань. Спираючись на набуті знання, наведемо класифікацію найбільш поширених способів поєднання текстового та ілюстративного матеріалу: 1. Ілюстрація виконується розміром на всю сторінку і займає праву сторінку ви дання (рис. 11.13).

Рис. 11.13. Ілюстрація розміром на всю сторінку, займає праву сторінку видання

155

Ill

ГРАФІЧНИЙ ДИЗАЙН

Рис. 11.14. Одна ілюстрація на цілий роз ворот книги, поєднана з текстовим м ате ріалом

Рис. 11.15. Дві або декілька ілюстрацій на розвороті, що послідовно поєднуються з текстовими блоками

Рис. 11.16. Ілюстрація на початку розділу, що займає не всю, а лише частину сторінки

рис. 11.17. Ілюстрація всередині розділу, яка займає частинку сторінки

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

На розвороті розташовують дві або декілька ілюстрацій, що послідовно поєдну ються з текстовими блоками (рис. 11.15).

Ілюстрація розташ овується на початку розділу і займає не всю, а лише частку

сторінки (рис. 11.16). Ілюстрація розміщ ується всередині розділу і займає частку сторінки (рис. 11.17). Такі ілюстрації найчастіше містяться у виданнях для дітей молодшого і серед

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

156

ГР А Ф ІЧ Н И Й ДИЗАЙН

III

Рис. 11.19. Чорно-білі графічні зображення (рисунок пером)

Рис. 11.20. Чорно-білі графічні зображення (у техніках офорту, лінориту, гравюри)

Рис. 11.21. Графічні зображення у два-три кольори (у техніках лінориту, гравюри)

За способами виконання іл ю с т р а ц ії можна поділити на: 1) контурні графічні зображення (рис 11.18); 2) чорно-білі графічні зображення (рисунок пером) (рис. 11.19); 3) чорно-білі графічні зображення (у техніках офорту, лінориту, гравюри)

(рис. 11.20); 4) графічні зображення у два-три кольори (у техніках лінориту, гравюри)

(рис. 11.21);

ГР А Ф ІЧ Н И Й ДИЗАЙН

Рис. 11.22. Кольорові ілюстрації, вико нані олівцями, акварельними, гуашевими або олійними фарбами

Рис. 11.23. Кольорові ілюстрації, виконані в елек тронних графічних редакторах

Рис. 11.24. Фотографії т а фотоколажі, де поєднуються графічні зображення і фотоаплікаціі, пластилінова пластика, вишивка, макраме, плетіння з соломки тощ о 5) кольорові ілюстрації, виконані олівцями, акварельними, гуашевими або олій ними фарбами (рис. 11.22); 6) кольорові ілюстрації, виконані в електронних графічних редакторах (рис. 11.23); 7) фотографії та фотоколажі, де поєднуються графічні зображення і фотоаплікацґї, пластилінова пластика, вишивка, макраме, плетіння з соломки тощо (рис. 11.24). Ілюстративний матеріал, особливо у виданнях для дітей молодшого шкільно го віку, подекуди представляють у вигляді напівоб'ємних або рельєфних компози цій, що утворюю ться внаслідок часткового висікання зображення та наклеювання основ (тих частин, що не містять висічки) двох аркуш ів між собою. Приклад рельєф ної композиції ілюстрації наведено на рис. 11.25. Оригінальність представлення ілюстративного матеріалу також може досяга тися за рахунок введення рухомих героїв окремо висічених зображень, що руха ються у заданому напрямку за допомогою картонажних ричагів. Сучасні технології

158

Г Р А Ф ІЧ Н И Й Д И ЗА Й Н виготовлення друкованої продукції дають також можливість застосовувати у виданнях рельєфні наклейки шильди, ароматизувати сторінки видання, вклеювати між сторінками прозорі матеріали кальки або плівки з конту рами ілюстрацій тощо.

СВІТ П Р О Ф Е С ІЙ Ілюстратор поліграфічних видань, дизай Рис. 11.25. Приклад рельєфної компози ції ілюстрації

нер поліграфічних видань.

« 0

П ЕРЕЛ ІК О С Н О В Н И Х П О Н Я Т Ь ТА Т Е Р М ІН ІВ

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

* 7

П Р А К Т И Ч Н А Р О Б О Т А 11

/ \

Р о з р о б к а д и з а й н у п о л іг р а ф іч н о г о в и д а н н я

Обладнання

м а т е р і а л и ; набір дитячих книг з кольоровими

ілюстраціями, набір кольорових олівців, креслярські прилади, папір формату А4.

Завдання 1. Виконання макета дитячої книги О б'єкти практичних розробок: ескізи посторінкового макета дитячої книги, ілюстрації якої розташ овуються на кожній зі сторінок, поряд із текстом.

Завдання 2. Виконання ілюстрацій до історичного літературного твору О б'єкти практичних розробок: ескізи ілюстрацій до історичного літературно го твору в техніці чорно-білої графіки (приклади графіки див. на рис. 11.18-11.20, 11.27,11.28).

Завдання 3. Створення ілюстративного матеріалу для однієї з дитячих казок. О б'єкт практичних розробок: за зразками розташ ування ілюстративного мате ріалу, наведеними на рис. 11.13-11.17, ілюстративний матеріал для однієї з дитячих казок.

159

Рис. 11.27

Рис. 11.28

ТВОРЧІ ЗАВД АННЯ д л я з а к р іп л е н н я н а в ч а л ь н о г о м а т е р іа л у т е м и з а н я т т я

Визначте, до якого типу належать ілюстрації на рис. 11.27-11.28.

Надайте перелік відомих вам варіантів поєднання ілюстративного та текстово го матеріалу.

Який спосіб представлення ілюстративного матеріалу найбільш відповідає: ■ виданням для дітей молодшого шкільного віку; ■ навчально-пізнавальній літератури; ■ літературному твору для ш колярів старшого віку?

Розкрийте зміст визначення «ілюстративний матеріал». Назвіть відомі вам спо соби представлення ілюстративного матеріалу.

Розкрийте зміст визначення «конструкція книги».

КОНТРОЛЬНІ ЗАПИТАННЯ д ля перевір ки власних н а в ч ал ьн и х досягнень з а т е м о ю занят т я

Розкрийте зміст визначення «стиль ілюстративного матеріалу» та поясніть не обхідність його дотримання в процесі проектування друкованих видань.

Поясніть залежність вимог до якості та кількості ілюстративного наповнення видання від вікових характеристик читачів.

Обґрунтуйте залежність зручності та легкості сприйняття текстів від їх міжряд

Знання яких напрямів мають поєднуватись у процесі проектування друкованих

кових відстаней у них та вільного місця на сторінці. видань? 5.

Наведіть перелік основних конструктивних елементів друкованих видань.

Назвіть умови системності представлення інформації у друкованих виданнях.

ГРАФІЧНИЙ ДИЗАЙН

617. Лп § 12. Друкована реклама та види сучасних друкованих засобів інформації 1. Назвіть спільні т а відмінні характеристики різних видів друкованої продукції. 2. Охарактеризуйте особливості оформлення друкованої продукції.

Особливості та сфери застосування сучасної друкованої рекламної про дукції. Сучасний рівень розвитку суспільства вимагає швидкого донесення інфор мації до кожного з громадян, що зумовлює потребу в її ефективному представленні та спрямуванні зусиль на пошуки принципів раціональної побудови інформацій них повідомлень. Під час розгляду теми "Шрифт як складова образно-знакової системи" ви пе реконалися, що найбільш ефективним способом закріплення думок є мова та пи семність. Думки, а особливо заклики та звернення, викладені лише за допомогою літерно-алфавітних знаків, не викликають емоційного піднесення, не залишають у свідомості яскравих вражень, і, як наслідок, до них швидко втрачаю ть інтерес. Тому для посилення емоційного впливу від тієї інформації, що має бути висловлена гра фічною мовою, її не тільки надають у вигляді текстових повідомлень, а й доповню ють ілюстраціями. Особливого поширення такий принцип формування візуальних повідомлень набуває у рекламних зверненнях та друкованій рекламній продукції. Розглядаючи рекламні звернення, зауважте, що зображення в рекламі найчас тіше посідає найбільш важливе місце, а текстовим блокам належить другорядна, пояснювальна роль. Серед численних рекламних звернень, що зустрічаю ться у сучасному повсяк денному житті, особливого поширення набули біл-борди, банери, постери, лайтбокси, флаєри, проспекти, буклети та каталоги. Зведену схему видів сучасних рекламних звернень по дано на рис. 12.1, а приклади окремих видів та ких звернень на рис. 12.2-12.5. Означене

вище

розмаїття

друкованих

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

Рис ;2 , Види сучаснихрекламних звернень

Рис. 12.4. Приклад банера

ГРАФІЧНИЙ ДИЗАЙН Постери т а к о ж р о з т а ш о в у ю т ь у т р а н с п о р т і, але в о н и вже з н а ч н о м е н ш і з а р о з м ір ам и і н е л и ш е п р и в е р т а ю т ь ув а гу т а ви к л и к а ю т ь зацікавлення, а п е р е в а ж н о інф о р м ую т ь т а п о т р е б у ю т ь сут т єв и х зусиль, зосер ед ж еного с п р и й н я т т я т а гар н о р о з в и н е н о ї з о р о в о ї пам 'ят і.

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

Флаєри - невел ичкі а р к у ш і з р е к л а м н о ю інф ор м ацією , які р о з п о в с ю д ж у ю т ь ся се ред н а й ш и р ш о г о к о л а п о т е н ц ій н и х спож и в а ч ів

з м е т о ю закр іп л ен н я ін ф о р м а ц ії

п р о к о о р д и н а т и п ід п р и є м с т в а т а вид и й о го п р о д у кц ії чи послуг.

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

Листівка як серійний об'єкт графічного дизайну Листівка є о д н и м з об'єкт ів гр аф ічн ого дизайну, щ о с т в о р ю є т ь с я для за кр іп л е н н я уявлень п р о інд ивід уал ьн ий ст и л ь сп іл куван н я гр а ф іч н о ю м овою . Н а л и с т ів ц і м о ж н а д об р е в ід ст е ж и т и у м о в и д о т р и м а н н я серійност і.

Елементами графічної мови в л и стівц і є: 1) характеристики ліній, що утворюють зображення (пластична або одномодульна, товста або тонка, округлена або гострокутна); 2) техніки нанесення зображення (аплікація, покриття лаком чи фольгою, ж иво пис олійними або акварельними фарбами тощо); 3) постійність формату зображення, виконання зображення на білому або ко льоровому тлі;

163

III

ГРАФІЧНИЙ ДИЗАЙН

Рис. 12.6. З о б р а ж е н н я серійн их о б'єкт ів д р у к о в а н о ї р е к л а м н о ї продукції

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

Р и су н о к 12.7.

164

Г Р А Ф ІЧ Н И Й Д И З А Й Н Узагальнений характер зображень, властивий сучасним листівкам, дає змогу добирати для їх виготовлення тільки ті кольори, що вже були використані у серійній рекламній продукції певної фірми. Насправді, срібна ялинка на яскраво-червоному тлі, доповнена такими самими срібними крижинками, справляє не менш святкове враження, ніж зелена ялинка, зображена з усіма відтінками і напівтонами олійними або гуашевими фарбами.

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

Постер часто не відрізняю ть від плакату, хоча за функціями вони мають суттєві відмінності. Завдання плакату миттєво привертати увагу перехожих, відволікати їх від буденності життя, актуалізувати вічні цінності, спонукати до роздумів. Плакат відрізняється від постеру філософським підходом, парадоксальністю світогляду поглядів розробників. І хоча в процесі розроблення постерів фахівці графічно го дизайну поступово починають застосовувати алегоричну мову, але в постері вона не набуває яскраво виражених та довершених форм. До спільних ознак, що об'єднують ці два види візуальних комунікацій, належать: новизна ідеї, асоціатив ність, лаконічність, естетичність, у тому числі - благозвучність, колорит, здатність адаптації до умов різних мовних середовищ. Постер має бути зрозумілим кожному, містити точну і переконливу інформацію про ті переваги, котрі споживач отримає разом із придбанням товарів або послуг. Як рекламне звернення постер має відповідати високому рівню культури спілку вання, культури висловлювання думки. Згідно із Законом України «Про рекламу» друковане рекламне звернення, зокрема постер, не може містити антиреклами або образливих висловів щодо продукції конкурентів. Постер має захоплювати та переконувати, закликати або інтригувати, він обов'язково має змусити споживачів звернути через нього увагу на товар. Основна вимога до рекламних текстів у по стері - максимальна лаконічність. Краще вкласти в зображувальні або шрифтові елементи більше емоційне забарвлення, ніж надавати довгий і нецікавий перелік технічних характеристик. Приклади графічного виріш ення плакату і постеру наве дено на рис.12.8та 12.9.

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

165

ГРАФІЧНИЙ ДИЗАЙН О б'єкти практичних розробок, ескізи серн рекламних постерів на один вид товару.

Завдання 4. Розроблення та виконання макета рекламного буклету для серій ного ряду продукції одного виробника. О б 'єкт практичних розробок, макет рекламного буклету для серійного ряду продукції одного виробника з обґрунтуванням застосованих кольорів, їх асоціа тивних властивостей та пропорційного поєднання.

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

ТВОРЧІ ЗАВД АННЯ

для закріплення навчального матеріалу теми заняття Завдання 1. Виконання стилізованого зображення одного з видів промисло вих товарів. О б 'єкти практичних розробок: стилізоване зображення фотоапарата, кавовар ки, фена тощо.

Завдання 2. Виконання серії рекламних постерів виробу. Об’є к т и практичних розробок: серія рекламних постерів виробу із застосуван ням попередньо виконаних стилізованих зображень промислового виробу, типо вих засобів проектної графіки та образних характеристик шрифтів.

Завдання 3. Розробка рекламних текстів для вибраного виду промислових то варів. О б 'єкти практичних розробок: рекламні тексти для вибраного виду промисло вих товарів, які б могли зацікавити споживачів.

Завдання 4, Структурування змісту розроблених текстів. О б 'єкти практичних розробок: структурований зміст розроблених текстів з увиразненням найбільш суттєвих для реклами слів, словосполучень або цілих ре чень.

Завдання 5. Виконання макета рекламного буклета для продукції одного ви робника. О б 'єкти практичних розробок: макет рекламного буклета для продукції одного виробника, з поєднанням ілюстративних зображень та імітувальних рядків для на бору текстових блоків.

КОНТРОЛЬНІ ЗАПИТАННЯ

для перевірки власних навчальних досягнень за темою заняття 1.

Порівняйте зображення рекламної друкованої продукції на рис. 12.11 та 12.12.

Визначте залежність способів формоутворення кожного з видів друкованої

Проаналізуйте їх функціональне призначення. рекламно-поліграфічної продукції від їх функціонального призначення.

168

ГРАФІЧНИЙ ДИЗАЙН 3.

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

а які ні. Відповідь обґрунтуйте. 4. Уважно розгляньте зображення листівок на рис. 12.13,12.14. Визначте чинники, покладені в основу утворення образного характеру їх сприйняття.

\ ІЖЇЮУ

все т в о є з тобою! www.DERBY.ua

’У *» І

Рис. 12.11

Рис. 12.12

Рис. 12.13

ГРАФІЧНИЙ ДИЗАЙН СВІТ П Р О Ф Е С ІЙ

Художник-плакатист Характер роботи. Роз робляє графічне виріш ення плакатів, призначених для поліграфічного відтворення та розповсю дження м асови ми тиражами. В роботі має використовувати ш ирокий спектр образотворчих засо бів і графічних технік для до сягнення

найбільш

дієвого

та емоційно переконливого результату. Плакат вимагає знань і вм інь щодо стилізації зображ увальних

елементів

і відтворення образних ха рактеристик найбільш лаконічним и засобами. Вимоги лаконізації графічної мови у цьому різновиді фахової діяльності зу мовлені також особливостями процесів технологічного виготовлення плакатів. (Вартість продукції, виконаної друком в 1-2 фарби, є значно нижчою, ніж вартість продукції, де застосовано повнокольорову гаму з усіма можливими тональними відтінками.) Ті самі вимоги лаконізації змісту потребують високого ступеня якості в оволо дінні шрифтовим мистецтвом, оскільки значна кількість плакатів може бути ство рена взагалі без використання зображувальних елементів, а лише на основі засто сування образних властивостей літер та характеру їх графічного виконання. Для якісного виконання роботи треба володіти не тільки техніками ручного виконання графічних зображень і шрифтів, а й електронними засобами підготовки зображень до друку, тобто пакетами прикладних графічних програм.

Підготовка. Художник-плакатист має здобути освіту за напрямом «Мистецтво» зі спеціальностей «Дизайн» або «Прикладна графіка» у вищих навчальних закладах відповідного спрямування. Для вступу в такий заклад абітурієнт має навчитись якіс но володіти зображувальною мовою та її технічними складовими: академічним та декоративним рисунком, живописом, композицією.

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

Близькі професії. Ілюстратор книги. Художник -декоратор у театрі або на кіно студії.

170

ГРАФІЧНИЙ ДИЗАЙН Дизайнер пакувальної галузі

Характер роботи. Роз робляє ескізні варіанти кон структивного та графічного вирішення пакувальних кон струкцій. Бере участь в об говоренні та визначенні до цільності впровадження того чи іншого варіанта конструк тивного виготовлення паку вань з картонажно-паперових матеріалів

виробництво.

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

Підготовка. Дизайнер пакувальної галузі має здобути освіту за напрямом «Мис тецтво», за спеціальністю «Дизайн», «Прикладна графіка» або «Дизайн пакувань з картонажних матеріалів» у вищих навчальних закладах відповідного спрямування. Для вступу в такий заклад він має навчитись якісного володіння зображувальною мовою та її технічними складовими: академічний і декоративний рисунок та живо пис, композиція.

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

Близькі професії. Художник-плакатист. Дизайнер-графік. Художник-декоратор у театрі або на кіностудії.

171

ГРАФІЧНИЙ ДИЗАЙН Ілю стратор поліграф ічних видань

Характер роботи. Здій снює своєчасне і якісне вико нання

художньо-проектних

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

технік

(у тому числі ескізи макетів друкованих видань з об'ємнопросторовою для

унаочнення

характеристик

структурою) візуальних проектного

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

Підготовка. Ілюстратор поліграфічних видань має здобути освіту за напрямом «Мистецтво» у вищих навчальних закладах відповідного спрямування. Для вступу в такий заклад він має навчитись якісного володіння зображувальною мовою та її технічними складовими: академічним та декоративним рисунком, живописом, ком позицією.

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

Близькі професії. Аніматор. Художник-декоратор у театрі або на кіностудії.

172

ГРАФІЧНИЙ ДИЗАЙН ^

С П О В Н И К -Д О В ІД Н И К БІЛ-БОРД - великий щит з рекламним зображенням 3x4 або 4 х 10 м на власній

опорній конструкції.

БУКЛЕТ - неперіодичне видання у вигляді аркуша друкованого матеріалу, без твердої палітурки, який складається за допомогою ліній згину так, що його читають або розглядають, розкриваючи, як ширму.

ВИДАВНИЧИЙ ОРИГІНАЛ-МАКЕТ - записаний на електронних носіях макет майбутнього видання, в якому враховано порядок, обсяг і технологічні способи ви конання всіх елементів видання (посторінково), з урахуванням технологій друку та наступних брошурувальних робіт.

ДИСПЕНСЕР - образно вирішена об'ємно-просторова конструкція для збері гання та довільного отримання широким загалом споживачів мобільної інформації про послуги, можливості та специфіку діяльності організації. Використовується на виставках та в місцях громадського користування.

ДИСПЛЕЙ - широкий термін, який охоплює велику кількість об'єктів, призначе них для рекламування товарів і послуг. Умовно можна поділити на декілька різнови дів: дисплеї-панелі, дисплеї з реальними об'єктами, дисплеї-сендвічі, дисплеї-фігури та дисплеї-вітрини (стенди). Широко використовуються для проведення рекламних акцій.

ЕСКІЗНИЙ ОРИГІНАЛ-МАКЕТ - виконаний у натуральному розмірі або у масш табі макет майбутнього видання, в якому розраховано кількість сторінок, необхід них для розміщення всіх елементів видання, передбачено системність викладення текстового матеріалу, його пропорції та розташ ування на сторінках, а також спосо би взаємодії з ілюстративним матеріалом.

ЕСТЕТИКА (від грец. «те, що чуттєво сприймається») - наука про прекрасне і його роль у житті людей та загальні закономірності художнього сприйняття дій сності та розвитку мистецтва.

ІДЕЯ - у дизайні цей термін використовують для позначення головної, най більш значущої для втілення дизайн-проекту провідної думки.

ІМЕННИЙ ПОКАЖЧИК - допоміжний покажчик, що містить перелік прізвищ (імен) осіб, про яких ідеться у тексті твору, з вказівками на ті фрагменти тексту, де про них згадується. Будується зазвичай за абеткою, у рубриці першим подається прізвище, за ним - ініціали.

КАЛАМ («їїоШ, араб., від грец. тростина) — гостро зрізана очеретяна паличка для письма на бересті або пальмових листях, а пізніше — чорнилами на папері, яку застосовували у народів Сходу (в Індії, Ірані та інших країнах).

ЛАЙТ-БОКС - рекламний об’єкт, що має реалістичне, стилізоване або комбіно ване зі шрифтами зображення, розмірами не менше 1,0 х 1,8 м та внутрішнім під свічуванням.

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

17З

МАКЕТУВАННЯ - виготовлення макетів об'єктів проектування з різноманітних матеріалів, зокрема в натуральний розмір або в необхідному масштабі. Макету вання - найбільш поширений засіб отримання повної та наочної інформації про властивості об'єктів проектування, їх зовнішній вигляд, зручність у використанні, внутрішню злагодженість складових і конструктивних елементів і т. ін. М. надає можливість вирішувати низку суттєвих завдань проектної діяльності: від формуван ня оригінальних проектних ідей до перевірки і відпрацювання найбільш значущих і відповідальних чинників, що стосуються майбутнього функціонування об'єктів.

МОДЕЛЮВАННЯ - процес відображення, представлення або опису цілісного об'єкта (системи об'єктів) чи окремих елементів загальної структури.

МОДЕЛЬ - ідеальна, уявна, знакова або матеріально реалізована система, утворе на з метою дослідження об'єктів або представлення проектної ідеї. Залежно від засобів побудови М. може бути знаковою (математична, інформаційна), наочно-образною або матеріальною (технологічною). Залежно від функцій М. відтворює той чи інший пред мет дослідження або експерименту (технологію, принцип дії, параметри і т. ін.). З цього погляду вирізняють: художню, культурну, конструктивно-технологічну і пластичну М.

ПЛАКАТ - тематичний, проблемний або інформаційний рекламний твір, викона ний на папері розміром більше ніж 500 х 700 мм і призначений для масового огляду. Має швидко кріпитись до жорстких носіїв: дощок оголошень, панелей, стін тощо. За функцією візуальної активності плакат споріднений із рекламним постером, але відріз няється філософським підходом, парадоксальністю поглядів та гротескністю ситуацій, які використовуються для висвітлення подій. За способом графічного висловлення ду мок у плакаті спостерігач має миттєво впізнавати та ідентифікувати: суспільну ідеоло гію, естетичні критерії, уподобання, що панують у свідомості населення. Саме в плакаті відображаються ритми повсякденності, втілюються життєво важливі цінності і змісти. Плакат - частина візуально-символічного середовища, того «повітря», яким живиться і «дихає» сучасне йому суспільство. Плакат «спілкується», власне, за рахунок зіставлення різних способів наочного виявлення інформації. У проектуванні плакатів виокремлю ють такі напрями: політичний, соціальний, театральний, рекламний плакат.

ПОЛІПТИХ (давньогрец. поХєлтихоу, роІурїусЬоп — той, що складається з бага тьох складок або дощечок, від поХєс; — численний і лтиуг^ — складка, дощечка) — 1) в античності та на початку Середніх віків — три або більш е навощених дощечок, скріплених на зразок книги, що використовувалися для записів; 2) декілька картин, пов'язаних загальним задумом (темою), а також колірною і композиційною єдністю. Див. також: диптих, тр и п ти х , ретабпо.

ПОСТЕР - одно- або двобічно задрукований аркуш зменшеного формату (від А5 до А7) для мобільного якнайширшого розповсюдження інформації про діяль ність фірми, основна мета якого - поширення відомостей про її координати серед максимальної кількості осіб.

СИЛАБІЧНИЙ - той, що ґрунтується на дотриманні однакової кількості складів, незалежно від розміщення в них наголосів.

ТРИПТИХ (від грец. потрійний) - 1) твір мистецтва з трьох самостійних, але ідейно чи задумом пов'язаних частин, об'єднаних спільною темою; 2) картина з трьох частин.

ГРАФІЧНИЙ ДИЗАЙН Р Е К О М Е Н Д О В А Н А Л ІТ ЕР А Т У Р А і Г Адамов £ Б. Десять лиц времени: [Об оформлении книжных обложек] // Роди на. - 2000.-№ 12. - С. 30-34. 2. Адамов Е. Б., Кричевский В. Г. Оформление справочных изданий. - М.: Книга, 1981.-110с. 3. Алехина Е. М., Западов А. В. Аппарат книги. - М.: Искусство, 1957. - 100 с. 4. Арнхейм Р. Искусство и визуальное восприятие. - М., 1980. - 390 с. 5. Ваш им В. В. Оформление газет разного типа: Учеб.-метод. пособие / Под ред. А.П. Киселева. - М.: Изд-во Моек, ун-та, 1981.-71 с. 6. Б а р т Р. Риторика образа // Барт Р. Избранные работы. Семиотика. Поэтика. - М., 1989. 7. Барышников Г. М. и др. Шрифты, разработка и использование. - М.: ЭКОМ, 1997. 8. Белецкий П. Георгий Иванович Нарбут. - Л.: Искусство, 1985. 9. Белічко Ю. В. Українське радянське мистецтво періоду громадянської війни. - К.: Мистецтво, 1980. - 183 с. 10. Білецький П. О. Георгій Іванович Нарбут. - Л.: Мистецтво, 1985. - 119с. 11. Бове К. Л., Аренс У Ф. Современная реклама

/ Пер. с англ. Д.В. Вакина

и др. - То

льятти: Довгань, 1995. - 704 с. 12. Божко Т А Подарки - не отдарки//Мир упаковки. - 2002.- № 1 (21).-С . 50-52. 13. Божко ТО. Дизайн-пакування - синтез мистецтв // Упаковка. - 2002. - № 4. С. 40-41. 14. Божко Т.О. Пакування для квітів // Упаковка. - 2004. - № 1. - С. 40-41. 15. Божко ТО. Роздуми про дизайн пакування // Упаковка. - 2003. - № 3. - С. 52-53. 16. Божко Ю. Г. Архитектоника и комбинаторика формообразования: Учеб, для студ. худ.-пром. вузов. - К.: Вища шк., 1991. - 245 с. 17. Бойчук А. В. Дизайнерское образование: выбор приоритетов в условиях им порта материальной культуры // Вісн. Харк. держ. акад. дизайну і мистецтв. - X., 2 0 0 2 .-№ 6 .-С . 3-6. 18. Большаков М. В. Декор и орнамент в книге. - М.: Книга, 1990. - 157 с., ил. 19. Большаков М. В., Гречихо Г. В., Шицгал А. Г. Книжный шрифт - М.: Книга, 1964. 311с. 20. Бочковський О. Сірополко С. Українська журналістика на тлі доби: Історія, де мократичний досвід, нові завдання / За ред. К. Костева, Г. Комаринського; Укр. техн.-господар. ін-т. - Мюнхен, 1993. - 204 с. 21. Буковецкая О. А. Дизайн текста: Шрифт, эффекты, цвет. - 2-е изд., испр. - М.: ДМК, 2000. - 304 с. 22. В'юникА. Мистецтво оформлення видань Києво-Печерської лаври XVII - XVIII ст. //Друкарство. - 2000. - № 2. - С. 16-19. 23. Валуенко Б. В. Выразительные средства набора в книге. - М.: Книга, 1976. - 128 с. 24. Валуенко Б. В. Использование «нематериальных» фактур во внешнем оформле нии книги. - К.: Реклама, 1989. - 32 с. 25. Валуенко Б. В. Наборный титул и рубрики книги. - К.: Техніка, 1967. - 127 с. 26. Валуенко Б. В. Архітектура книги. - К.: Мистецтво, 1976. - 212 с., іл.

ГРАФІЧНИЙ ДИЗАЙН

27. Валуєнко б. В. Зовнішнє оформлення друкованих видань: Способи композицій ного зв'язку шрифту і зображення // Друкарство. -1999. - № 3. - С. 12-13. 28. Валуєнко Б. В. Специфіка оформлення книжкових оправ. - К.: Час, 1990. - 48 с.

29. Валькова Н. П., Грабовенко Ю. А., Евстаф ьева А. П. и др. Опыт работы експери ментального курса ЛВХПУ им. В. И. Мухиной по подготовке дизайнеров // Прак ти к а .- Л ., 1 9 7 7 ,- 112с. 30. В ар тан о в Г. I. Короткий довідник газетного працівника. - К.: Політвидав України, 1989.-173 с. 31. Вейль Г. Симметрия / Пер. с англ. Б.В. Бирюкова и Ю.А. Данилова; Под ред. Б.А. Розенфельда. - М.: Наука, 1968. - 191 с. 32. Видавець майбутнього: Маркетинг і менеджмент у видавництві. - К.: Основи, 1994.-175 с. 33. ВолкотрубИ. Т. Основы художественного конструирования: Учеб, для учащ. сред, спец. учеб, заведений. - 2-е изд., перераб. и доп. - К.: Вища шк., 1988. -192 с. 34. Газета: Опыт, проблемы. Сб. статей / Сост. А.С. Осипов. - Л.: Лениздат, 1975. 303 с. 35. Газетное оформление. Теория и практика моделирования: С6. статей / Под ред. С. И. Галкина. - М.: Изд-во Моек, ун-та, 1981. - 86 с. 36. Га л а т Е. В музее одной улицы // Упаковка. - 2003. - № 4. - С. 58-60. 37. Га л а т Е. Посуда: как ее упаковывать // Упаковка. - 2003. - № 3. - С. 11 -13. 38. Га л а т Е. Праздничная упаковка //Упаковка. - 2003. - № 6. - С. 42-45. 39. Га л а т Е. Упаковка - это праздник на каждый день // Упаковка. - 2003. - № 2. - С.

20- 22. 40. Галеева М. Г. Некоторые вопросы технического оформления газеты // Вісник Київ, ун-ту. Серія журналістики. - 1970. - Вип.12. - С. 49 - 54. 41. Галкин С. И. Оформление газеты и журнала: От элемента к системе. Общее и осо бенное в худ.-техн. конструировании период, изданий. - М.: Изд-во Моек, ун-та, 1984.-152 с. 42. ГеоргиевД. Режиссура газеты / Пер. с болг. Э. М. Дурыгиной. - М.: Мысль, 1979. - 260 с 43. Георгиев €., Ангелов Д. И др. Вклад болгарского народа в мировую сокровищни цу культуры. - София: София-пресс, 1968. 44. Георгій Нарбут. Альбоми. - К.: Мистецтво, 1983. 45. Герчук Ю. Я. Что такое орнамент? Структура и смысл орнаментального образа / Е.Ю. Герчук, М.П. Раяк (худож. фото). - М.: Галарт, 1998. - 327 с., ил., фото. 46. Гессен Л. И. Архитектура книги. - М.; Л.: Науч.-техн. изд-во, 1931.- 439 с. 47. Гессен Л. И. Оформление книги. Руководство по подготовке рукописи к печати.Л.: Б.и., 1935.-336 с. 48. Голицын Г. А., П етров В. М. Гармония и алгебра живого. - М.: Знание, 1990. 128 с. - (Естественнонаучный факультет). 49. Головко С. Свойства и приемы композиции // Журналист. - 2001. - № 11. - С. 89 - 91. 50. Гончарова Н. А. Композиция и архитектоника книги // Книга как художественный предмет. - М., 1990. - Ч. 2: Формат. Цвет. Конструкция. Композиция. - С. 291 -394. 51. ГОСТ 9254-77. Газеты. Размеры. - М: Изд-во стандартов, 1977.-3 с. 52. Гуревич С. М. Номер газеты: Учеб, пособие. - М.: Аспект Пресс, 2002. - 191 с.

176

ГРАФІЧНИЙ ДИЗАЙН 53. Даниленко В. Я. Дизайн України у світовому контексті художньо-проектної куль тури. - X.: ХДАДМ; Колорит, 2005. - 243 с. 54. Даниленко В.Я. Дизайн України у світовому контексті художньо-промислової культури: Монографія. - X.: ХДАДМ: Колорит, 2005. - 244 с. ►

55. Дизайн.Очерки теории системного проектирования / Под ред. Н. П. Валькова,

ун-та, 1983. - 185 с. 56. Добкин С. Ф. Оформление книги. Редактору и автору. - 2-е изд. - М.: Книга,

1985.-208 с. 57. Добровольський О.О., Хойнацький М.С. Підготовка оригіналів до видання: На до

Ю. АТрабовенко, Е. Н. Лазарев и др.; Глав. ред. М. С. Каган. - Л.: Изд-во Ленингр.

помогу авторові, рецензентові, редакторові, коректорові. - К.: Вища шк., 1991.111с. 58. Друкарське устаткування: Підручник / Я. І. Чехман, В. Т. Сенкусь, В. П. Дідич, В. О. Босак. - Л .: Укр. акад. друкарства, 2005. - 468 с. 59. ДСТУ 3017-95. Видання. Основні види, терміни та визначення. - К.: Держстан дарт України, 1995. - 50 с. 60. ДСТУ 3018-95. Видання. Поліграфічне виконання. Терміни та визначення. - К: Держстандарт України, 1995. -21 с. ,

61. Дурняк б. В., Ш та н ге р т А. М „ Мельников О. В. Видавничо-поліграфічна галузь України : стан, проблеми, тенденції, статистично-графічний огляд : М оногра фія - Л.: Укр. акад. друкарства, 2006. - 274 с. 62. Иваненко Т А. Письмо как особый вид шрифтового искусства // Традиції та но вації' у вищій архітектурно-художній освіті: 36. ст. - X.: ХДАДМ, 2003. - № 3-4; 2004.-№ 1-2.-С. 116-118.

(

63. И стр и н ВА . Развитие письма, - М.: Изд-во АН СССР, 1961. 64. Іванов В. Ф. Техніка оформлення газети: Курс лекцій: Навч. посіб. для студ. фак. журналістики. - К.: Знання, 2000. - 222 с. 65. КапрА. Взаимоотношения между почерком, печатным шрифтом и каллиграфи ей // Рукописная книга. - М.: Наука, 1975. - С. 80-85. 66. Капр А. Эстетика искусства шрифта: Пер. с нем. - М.: Книга, 1979.- 124 с. 67. Кар тер М. А. Сучасний дизайн газет. - К.: Нац. ін-т преси, 1998. - 1 8 с. 68. Кафтанджиев X. Тексты печатной рекламы / Пер. с болг. А. Ю. Погарской; Под ред. М. Н. Дымшица. - М.: Смысл, 1995. - 127 с. 69. Кибрик Е. А. К вопросу о композиции // О композиции: Сб. статей. - М.: Изд-во Акад. художеств СССР, 1959. - С. 37-57. 70. Кирсанов Д. М. Историко-морфологическая модель развития русского наборно го шрифта. Взаимосвязь объективных и субъективных факторов: Автореф. дис. ... канд. искусствоведения: 17.00.04 / МГХПУ им. С. Г. Строганова. - М., 2007. - 26 с. 71. Кирсанов Д. М. Коммуникативный и шрифтовой дизайн накануне третьего тысячелетия //Лаборатория рекламы: Альманах. - М., 2000. -N«11-12.- С. 21 -25. 72. Книга как художественный предмет: В 2 ч. - М.: Книга, 1988. - 1990. 73. Коган М. С. Морфология искусства. - М.: Искусство. 1965. - 297 с. 74. Конструкція книги: Навч. посібник для студ. полігр. спец. вищ. навч. закладів / С. Гавенко, Л. Кулік, М. Мартинюк. - Л.: Фенікс, 1999. -134 с.

177

ГРАФІЧНИЙ ДИЗАЙН 75. Конторчук А.К. Композиционно-архитектонические особенности жанра кор респонденции в газете (под рубрикой «Командировка по письму»): Дис. ... канд. филол. наук: 10.01.10 / Киев. гос. ун-т им. Т. Г. Ш евченко. - К.,1984. - 221 с. 76. Кричевский В. Типографика в терминах и образах: В 2 т. - М.: Слово, 2000. -Т. 1,142 с. 77. Ле Корбюзье. Мос1-1-Мос1-2. Модулор / Сокр. пер. с фр. Ж.С. Розенбаума; Науч. ред. В.Г. Калиш; Вступ, ст. Д.Б. Хазанова. - М.: Стройиздат, 1976. - 239 с. 78. Лесняк В. И. Шрифт как индикатор культуры // Дар шрифта. - X.: Консум, 2003. С. 123. 79. Ляхов В. Н. Образное отражение содержания книги во внешнем оформлении: Учеб, пособие / Моек, полиграф, ин-т. - М.: Б.и., 1964. - 36 с. 80. Ляхов В. Н. Очерки теории искусства книги. - М.: Книга, 1971,- 254 с. 81. Ляхов В.Н. О художественном конструировании книги. Системное проектирова ние. Функциональный анализ. - М.: Книга, 1975. - 91 с. 82. М аш та л ір Р. М., Ковба Ж. М „ Феллер М. Д. Розвиток поліграфії на Україні: - Л.: Вища шк. Вид-во при Львів, ун-ті, 1974. - 188 с. 83. М ітчен ко В. С Естетика українського рукописного шрифту. - К.: Грамота, 2007. 208 с. 84. Мягкова Л. А. Особенности и общие характеристики оформления детских газет // Вестник Моек, ун-та. Сер. 10. Журналистика. - 2000. - № 1. - С. 23-35. 85. Овдієнко О. Книжкове мистецтво на Україні (1917-1974). - Л., 1974. 86. Огієнко 1.1. Історія українського друкарства. - К.: Либідь, 1994. 87. Оформление газет и журналов за рубежом: Сб. переводов / Под ред. и с предисл. А. П. Киселева. - М.: Изд-во Моек, ун-та, 1978. - 148 с. 88. Оформление изданий: Норматив, справ. / Сост. В.Б. Иванова. - М.: Книга, 1984. 320 с. 89. Оформление периодических изданий: Учеб, пособие / А. П. Киселев, В. В. Бакшин, Л. Н. Кудрявцева и др.; Под ред. А. П. Киселева. - М.: Изд-во Моек, ун-та, 1988,- 160 с.: ил., фото. 90. Пара Тайл. Цифровые шрифты 1989-2004. - М.: Новости, 2004. - 506 с. 91. Пахомов В. В. Книжное искусство: В 2 т. - М.: Искусство, 1961-1962. - Т. 1: Замысел оформления. - 1961.- 424 с.; Т. 2: Иллюстрации. - 1962. - 432 с. 92. Поліграфія та видавнича справа: рос.-укр. тлумачний слов. / Уклад.: Б. В. Дурняк, О. В. М ельников, О. М. Василишин, О. Г. Дячок. - Л.: Афіша, 2002. - 456 с. 93. Попов В. В. Производство и оформление газеты: Учеб, пособие для студ. / В. В. Попов, С. М. Гуревич. - 2-е изд., перераб. - М.: Высш. шк., 1977. - 246 с. 94. Попов В.В., Гуревич СМ . Производство и оформление газеты. - 2-е изд. - М.: Высш. шк., 1977. 95. Попов В.В., Гуревич СМ . Производство и оформление газеты. - М.: Книга, 1967. 96. Почепцов Г. Г. Теорія коммуникаций - М.: Рефл-бук: Ваклер, 2003. - 605 с. 97. П таховаИ . Простая красота буквы. - СПб.: Рус. графика, 1997. 98. Пучков А. А. Архитектоника книги, или Метемпсихоз библиофила: Архитектор И.Ф. Рерберг и отечественная книга 1930-х годов. - К.: НИИТАГ, 1995. - 43 с. 99. Різник М.Г. Письмо і шрифт. - К.: Вища шк., 1978.

178

ГРАФІЧНИЙ ДИЗАЙН

100. РудерЭ. Типографика: Руководство по оформлению / Пер. с нем., послесл. и коммент. М. Ж укова. - М.: Книга, 1982. - 286 с. 101. Сава В. І. Основи техніки творення книги: Навч. посіб. - Л.: Каменяр, 2000. -136 с. 102. Серов С. И. Гармония классической типографики: В 3 ч. - М.: ЗАО «Линия Гра фик», 2 0 0 3 .-4 .1 .-3 2 с. 103. Сидоров А. А. История оформления русской книги. - 2-е изд., испр. и доп. - М.: Книга, 1964. - 391 с. 104. Сидоров А. А. Книга и жизнь: Сб. книговедческих работ. -М .: Книга, 1972.-231 с. 105. С м ітД . К. Посібник книговидавця / Пер. з англ. В. Звиняцьковського. - К.: Лю біть Україну, 1999. - 144 с. 106. Снарский

О.В.

Шрифты-алфавиты

для

рекламных

декоративно

оформительских работ. - К.: Реклама, 1979. - 152 с. 107. Снарський О.В. Шрифт в мистецтві художнього оформлення. - К.: Реклама, 1975. 108. Стандарты по издательскому делу / Сост. А. А. Джиго, С. Ю. Калинин. - М.: Юристъ, 1998.-375 с. 109. Стасенко В. Український вплив на оформлення московських книг у XVII ст. // Друкарство. - 2000. - № 2. - С. 20-21. 110. Табашников И. Н. Газета делается по модели: Теория и опыт композиционно графического моделирования. - М.: Изд-во Моек, ун-та, 1980. - 95 с. 111. Тасалов В. С. Теория дизайна и проектная культура //Техническая эстетика. 1991.- №7 - с. 10. 112. ТимошикМ. С. Видавнича справа та редагування: Курс лекцій: У 2 ч. / Київ. нац. ун-т ім. Тараса Ш евченка. - К., 2002. 113. У истоков русского книгопечатания. - М.: Изд-во АН СССР, 1959. 114. Фаворский В. А. О графике, как об основе книжного искусства // Искусство кни ги. - М.: Книга, 1961.- Вып. 2:1956-1957. - С. 51-78. 115. Фаворский В. А. О рисунке. О композиции. - Фрунзе: Кыргызстан, 1966. - 77 с. 116. Фаворский В. А. О художнике, о творчестве, о книге. - М.: Мол. гвардия, 1966. -127 с. 117. Фаворский В. А. Об искусстве, о книге, о гравюре. - М.: Книга, 1986. - 239 с. 118. Харджиев Н. И. Эль Лисицкий - конструктор книги // Искусство книги. - М.: Кни га, 1962.- Вып. 3:1958-1960. - С. 145-161. 119. Хёрлберт А. Сетка: М одульная система конструирования и производства га зет, журналов и книг / Пер. с англ. И. А. Ковалевой, И. М. Паперна. - М.: Книга, 1984.-108 с. 120. Хмельовський О. М. Вступ у дизайн. - Луцьк: Волин, мистец. агенція «Терен», 2004. - 208 с. 121. Хмельовський О. М. Графіка і основи графічного мистецтва. - Луцьк: Вид-во Луцьк, держ. техн. ун-та, 2003. - Кн. 1. - 160 с. 122. Хмельовський О. М. Теорія образотворення: В 2 т. - Луцьк: Вид-во Луцьк, держ. техн. ун-та, 2002. - Кн. 1. - 148 с.; Кн. 2. - 163 с. 123. Холмянський Л. М., Щипаное А. С. Дизайн. - М.: Просвещение, 1985. - 240 с. 124. Художественное конструирование и оформление книги / Е. Б. Адамов, В. Я. Быкова, И. Ф. Бельчиков и др.; Под общ. ред. А. Д. Гончарова. - М.: Книга, 1971.-248 с.

179

ГРАФІЧНИЙ ДИЗАЙН 125. Художественно-техническое оформление периодических изданий: Сб. статей / Под ред. А. П. Киселева. - М.: Изд-во Моек, ун-та, 1980. - 106 с. 126. Черневич Е. В. Язык графического дизайна: материалы к методике художе ственного конструирования. - М.: ВНИИТЭ, 1975. - 137 с. 127. Чихольд Я. Облик книги: Избр. статьи о книжном оформлении. - М.: Книга, 1980.-238 с. 128. Шевченко В. Е. Елементи оформлення сучасного газетного видання // Наук. зал. Ін-ту журналістики. - К., 2000. - Т. 1. - С. 88-95. 129. Шевченко В. Е. Лексика комп'ютерних редакційно-видавничих систем. Англоукраїнський словник. - К.: ВПЦ «Київ, ун-т», 2000. - 112 с. 130. Шевченко В. Е. Основні принципи конструювання макету видання // Сучасна інформаційна політика. - К.: Центр вільної преси, 1999.-С . 105-108. 131. Шевченко В. Е. Оформлення сучасного газетного видання / Київ. нац. ун-т імені Тараса Ш евченка, Ін-т журналістики; За ред. В. В. Різуна. - К.: Поліграф, д-ця Інту історії України НАН України, 2003. - 344 с : рис., табл. 132. ШицгалА.Г. Русский типографский шрифт, - М.: Книга, 1985. 133. Шорохов Е. В. Основы композиции: Учеб, для студ. пед. ин-тов. - 2-е изд., перераб. и доп. - М.: Просвещение, 1986. - 287 с. 134. Шпаков А. П. Художник і книга: Українська радянська книжкова графіка. Шляхи становлення і розвитку. - К.: Мистецтво, 1973. - 256 с. 135. Шпаков А.П. Художник і книга. - К.: Мистецтво, 1973. - 248 с. 136. Шубников А. В. Симметрия. Законы симметрии и их применение в науке, техни ке и прикладном искусстве. - М.; Л.: Изд-во АН СССР, 1940. - 176 с. 137. ШульцД. Эстетические критерии типизации изданий / Пер. со словац. Л.Ф. Ши роковой; Под ред. и коммент. Е. Б. Адамова. - М.: Книга, 1982. - 144 с. 138. Щербаков А. С. Организация работы редакции журнала: Учеб, пособие. - М.: Высш. ш к„ 1987. - 206 с. 139. Энциклопедия книжного дела. - М.: Ю ристь, 1998. 140. Юрьев Ф. И. Цвет в искусстве книги. - К.: Вища шк. Изд-во при Киев, ун-те, 1987.-246 с. 141. ЯцюкО.Г., РоманычеваЭ. Т. Компьютерные технологии в дизайне. Эффективная реклама. - СПб.: БХВ-Петербург, 2001. - 432 с., ил.

ВЕБ-ДИЗАЙН §13. Вступ до веб-дизайну 1. У мережі Інтернет ви з кожним новим переглядом бачите надзвичайно різно манітні форми образотворення сайтів т а їх змісту. Але, незважаючи на таку своєрідність, як би ви поділили їх на групи, види, класи тощ о за якимось спорід неними ознаками? 2. Чому інформаційна діяльність людства перемістилася в тривимірмірний про стір віртуальної реальності веб-сайтів, яскравіше т а змістовніше синтезу вавши в собі інформаційні поліграфічні видання, радіо- т а телепередачі? 3. Що вам відомо про сучасний стан комунікаційних технологій? Шкода, що ми не малюємо прямо очима. Як багато втр а ч а ю ться на довгому шляху від очей через руку до кисті. Г.Лессінг

Веб-дизайн як сучасний вид проектно-технологічної діяльності в комуні каційних технологіях. Початок XXI століття для комунікаційних технологій харак терний поширенням одного з найперспективніших видів дизайну - веб-дизайну. Дизайн сайта найефективніше відображає розвиток продуктів інтернет-бізнесу і є досить зручним для представлення економічних інтересів різних компаній з допо могою дизайнерського проектування. Незважаючи на те, що веб-дизайн є відносно новим напрямом комп'ютерного художньо-технічного проектування, потреба у ви сококваліфікованих фахівцях для цього напряму невпинно зростає. З розвитком комп'ютерної техніки та інтернет-технологій практично вся люд ська діяльність перемістилася в тривимірний простір віртуальної реальності. Ко мунікаційні технології спрямовані на якісний перехід від вербальної інформації (аудіальної), засобами усного і друкованого слова, до вербально-візуальної - з посиленим впливом на емоційно-чуттєву сферу споживачів засобами насиченої комп'ютерної графіки, з елементами мультимедіа. Попит, що зростає, на урізнома нітнення інформаційного впливу в поєднанні з майже фантастичними можливостя ми комп'ютерних техніки і технологій висуває надзвичайно високий рівень вимог навіть до початкової (профільної1 ) підготовки майбутніх фахівців із побудови сайтів. Крім того, сучасні комунікаційні цифрові технології зручно та швидко передають будь-яку інформацію в лічені хвилини, а то й навіть секунди. Але незважаючи на стрімкий науково-технічний зліт, кожен споживач віртуальної сфери не втратив ес тетичного відчуття любові до прекрасного, навіть у технічній сфері. Поряд із бажан ням отримати практичний товар виникає бажання, щоб він радував око. Найбільш поширеним видом діяльності сучасного веб-дизайнера є створення макета для сайтів (приклади різновидів дизайну сайтів див. на рис. 13.1, різних стилістичних рішень сайтів - на рис. 13.2). В основі дизайну сайта лежать ті самі базові принципи, що і в основі інших різ новидів дизайну. Принцип ф ункц іоналізм у ("що функціонально, то красиво") було сформульовано в першій половині XX ст. у межах школи Баухауз. Створення ди зайну сайта робить реалізацію цього принципу цілком досяжною метою. Під час

182

ВЕБ-ДИЗАЙН

Рис. 13.1. Приклади різновидів дизайну сайтів: а - організація меню сайту - б- організація меню розділу в - головна сторінка сайта посібника з курсу «Зарубіжна сайта - посібника з курсу електронного посібника зі література», теми «Фран- «Зарубіжноїлітератури», шкільного курсу «Зарубіжна цузька література XIX с т „ у теми «Французька літелітер атура» за 11-й клас, вигляді як текстових, т а к і ратура XIX ст., у вигляді оформлена у вигляді гіпертекграфічних гіперпосилань текстових гіперпосилань, з стового меню розділів сайта елементом оформлення у ви- з візуальним оформленням з гляді візуального зображення репродукцій митців, тем и розділу розроблення сайта вирішують усі питання його функціонування ще на етапі про ектування макета. Дуже важливими під час проектування сайта також є сукупність колірних та гра фічних елементів і їх смислове розташування на полотні макета майбутньої сторін ки сайта. Звідси випливає другий принцип дизайнерського мистецтва - к о н с тр у к ти візм у, який полягає в конструктивному вирішенні композиції конструкції. Сайт, продуманий у технічному розумінні, має бути пройнятий також духовної ідеєю, і лише за такого змістового наповнення він зможе претендувати на конкуру вання з іншими роботами подібного спрямування. Розробник дизайну веб-сайта ставить перед собою такі завдання: ■ формування у користувача позитивного сприйняття образу об'єкта реклам ного продукту; ■ простота і чіткість у сприйнятті структури сайта; ■ інтуїтивно зрозумілий інтерфейс для користувача; ■ зручність навігаційної системи.

Мал. 13.2. Приклади різних стилістичних рішень сайтів а - бізнес-стиль; б - сай т у стилі Веб-2; в - дизайн у стилі флеш

183

ВЕБ-ДИЗАЙН Вирішення зазначених завдань дає змогу реалізувати як економічну мету прогресивних компаній, так і проблеми сучасної культури ін формації. У зв'язку з цим створення сайтів на було нового сенсу. Іноді дизайнери вражають до глибини душі своєю майстерністю і вмінням втілити задумане в розроблених сайтах, деякі з котрих справді заслуговують на зарахування їх до сучасного виду мистецтва. Поряд з виставка ми дизайну інтер'єру стали з'являтися виставки веб-майстрів. Нові комп'ютерні технології сприяють ши рокому застосуванню стилізованих образів вебхудожником, але водночас вимагають значних знань у різних наукових сферах і сфері культури, Рис. 13.3. Перший веб-дизайнер Тім Бернес-Лі

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

володіти технічними навичками конструювання макета сторінки сайта на принци пах поєднання зручності, економічності та краси. Веб-дизайн є досить перспективним видом художньо-технічної творчості, а лю дина, яка займається такою діяльністю, характеризується як креативна. Першим веб-дизайнером був Тім Бернес-Лі, який винайш ов Світової павутину (W orld W ide W eb) і розмістив он-лайн перший веб-сайт у серпні 1991 р. Він першим поєднав інтернет-комунікаци (які кілька десятиліть включали e-mail і Usenet) із гіпертекстом, який теж уже використовувався кілька десятиліть, але об межувався використанням для перегляду інформації, що зберігається на окремому комп'ютері, наприклад, для дизайну інтерактивних CD-ROM. Спочатку веб-дизайн полягав у використанні простої мови розмітки, так званого HTML, яка включає деякі опції форматування і можливість пов'язувати сторінки між со бою, використовуючи гіперпосилання. Саме ця відмінна риса виокремлювала W W W се ред інших засобів комунікації, і саме вона відрізняла веб-дизайн від інших видів дизайну. Завдяки цій унікальній особливості Всесвітньої павутини і унікальній поведінці її користувачів, якій вона сприяла, веб-дизайн став абсолютно не схожим на всі інші види дизайну, що були раніше. У міру того як прогресувала Всесвітня павутина, веб-дизайн, мова розмітки HTML ставали більш складними і гнучкими. Такий інструмент, як таблиці, які могли використовуватися для відображення табулярної інформації, незабаром було ви користано для управління розташ уванням елементів. З появою каскадних стильо вих таблиць (CSS) управління розташ уванням елементів на сторінці вважається та ким, що дедалі більш е застаріває. Технології інтеграції з базами даними, відомі як серверне програмування (CGI, РНР, ASP.NET, ASP, JSP, ColdFusion), і стандарти дизайну, такі, як CSS, змінили та вдо сконалили шлях, яким відбувається розвиток Всесвітньої павутини.

184

ВЕБ-ДИЗАЙН Поява Macromedia Flash в інтернет-комунікаційних технологіях, де всі вже були готові до інтерактивності, ще більш е змінила обличчя Всесвітньої павутини, пропо нуючи нові функції дизайнерам і творцям медіа і надаючи нові інтерактивні можли вості користувачам. Flash - набагато більш вимоглива технологія, для застосування якої необхідне встановлення відповідного плагіна і не підтримує інтеграцію з більшістю функцій для користувача інтерфейсу веб-браузерів, таких як кнопка повернення «назад».

СВІТ П Р О Ф Е С ІЙ Вчені з галузі інформаційних технологій, фахівці комунікаційних технологій, веб-дизайнер.

П ЕРЕЛ ІК О С Н О В Н И Х П О Н Я Т Ь ТА Т Е Р М ІН ІВ У н авчал ьн о м у м а т е р іа л і п араграф а: комунікаційні технології; Світова па

вутина (World W ide W eb); інформаційні технології; он-лайн; інтернет-комунікації; e-mail; Usenet; гіпертекст; табулярна інформація; каскадні стильові таблиці (CSS); серверне програмування (CGI, РНР, ASP.NET, ASP, JSP, ColdFusion) і стандарти ди зайну (CSS); інтерактивність; креативність; порт фоліо веб-проектів; папка (порт фель) індивідуального портфоліо; структура веб-проекту; сценарій презентації; професіограма. В словнику-довіднику: HTML (Hypertext Markup Language); JAVA; Javascript; W W W (World W ide W eb - Всесвітня павутина); банер (banner); W eb; веб-сайт (W eb Site); сайт; веб-сторінка (Web-page); веб-хостинг (W eb Hosting); гіперпосилання (Hyperlink); гіпертекст (Hypertext); глобальна мережа (WAN - W ideArea Network); веб-дизайн (Web-Design); електронна пошта (e-mail)

П Р А К Т И Ч Н А Р О Б О Т А 13

Розробка індивідуального портфоліо для веб-дизайнерських робіт Завдання 1. Створення папки (портфеля) індивідуального портфоліо. О б 'єкт практичних розробок: папка (портфель) індивідуального портфоліо з усталеною структурою.

Завдання 2. Укладання папки особисто привабливих презентацій веб-проектів. О б 'єкт практичних розробок: архівна папка особисто привабливих презента цій веб-проектів.

Завдання 3. Обґрунтований вибір особисто привабливої структури для ство рення веб-проектів. О б'єкти практичних розробок: банк варіантів структур веб-проектів; обґрунту вання вибору особисто привабливої структури для створення веб-проектів.

Завдання 4. Створення електронного банку зразкових сценаріїв особисто при вабливих веб-проектів.

185

ВЕБ-ДИЗАЙН О б 'єкти практичних розробок: електронний банк зразкових сценаріїв особис

то привабливих веб-проектів.

Завдання 5. Створення електронного банку матеріалів для створення автор ських сценаріїв особисто привабливих веб-проектів. О б'єкти практичних розробок: електронний банк матеріалів для створення ав торських сценаріїв особисто привабливих веб-проектів.

Завдання 6. Інформаційно-пошукова робота. О б'єкти практичних розробок: електронний банк інтернет-матеріалів стосов но варіантів структур веб-будування; професіограми фахівців із веб-будування.

ТВО РЧІ ЗАВД АН Н Я д л я з а к р іп л е н н я н а в ч а л ь н о г о м а т е р іа л у т е м и з а н я т т я

Спробуйте поділити відомі вам сайти на групи, види, класи тощо за якимось спорідненими ознаками.

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

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

Наведіть приклади широкого застосування стилізованих веб-художником об разів для висвітлення різних сфер: виробництва, сфер обслуговування, культу ри, науки тощо. Які з наведених прикладів стилізованих образів стали брендами підприємств, компаній, закладів, виробництв, видів діяльності?

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

Назвіть причини виокремлення професії веб-дизайнера серед технічних обслуговувачів веб-сайтів.

КОНТРОЛЬНІ ЗАПИТАННЯ

•У 1.

для п еревір ки власних н а в ч ал ьн и х досягнень з а т е м о ю зан ят т я

Завдяки чому інформація сайта найефективніше відображає розвиток продук тів інтернет-бізнесу, ефективно представляє економічні інтереси різних компа ній?

Як постійно змінюються комунікаційні технології з розвитком комп'ютерної тех ніки та інтернет-технологій? Наведіть приклади.

3. 4.

Що впливає на підвищення естетичного відчуття споживача віртуальної інфор мації, навіть у технічній сфері? Охарактеризуйте базові принципи, на яких ґрунтуються розроблення дизайну сайта, функціональність, конструктивність. Чому саме їм приділяється так бага то уваги під час проектування макета сайта?

186

ВЕБ-ДИЗАЙН

5. Чому для підвищення конкурентоспроможності сайта важливо під час пред ставлення змісту враховувати духовні, етичні, екологічні, ергономічні складові, а не тільки технічні, економічні? 6. Назвіть основні цілі, які ставить перед собою розробник веб-дизайну сайта. Об ґрунтуйте їх по черзі і розкрийте їх зміст. 7. Хто винайшов Світову павутину (W orld W ide W eb), розмістив он-лайн перший веб-сайт і став першим веб-дизайнером? Чому це стало можливим лише у 1991 р.? 8.

Назвіть технічні передумови, необхідні для створення веб-сайта.

§ 14. Основи проектування інформаційного середовища - веб-сайта 1. Чи помічали ви, що сайти різної тем атичної спрямованості м аю ть різну бу дову, а сайти однієї тем атичної спрямованості - однакову будову, але безліч художньо-проектних рішень. Поясніть цю закономірність. 2. У чому відмінність сайтів приватних осіб, загальноосвітніх шкіл, позашкільних закладів освіти, вищих навчальних закладів, фірм, корпорацій, концернів? 3. Назвіть особливості замовників сайтів, що характеризують їх рівень іміджу і презентабельності у своєму професійному середовищі, знаючи рівень підготов ки їх сайтів. Для порівняльного аналізу обирайте широковідомі фірми, виробни цтва, організації невиробничої сфери. 4. Культура навчальної праці передбачає наукову організацію розумової праці як з поліграфічними, т а к і з електронними джерелами. Наскільки якісно підвищиться ваша культура навчальної праці після н аб уття компетентності користувача в інформаційному середовищі Інтернет і розробника веб-сайта початкового рівня? Задачу комплексного проектування дизайнер може успішно р о зв'язати лише тод і, коли він у думках охоплює всю с тр у к т у р у о б 'єк та п р оекту вання і виходить з р е з у л ь т а т ів цілісного сп р и й н яття. Ф рагм ентарні проектні рішення, що періодично виникаю ть, навпаки, перешкоджа ю т ь цілісності образу проектованого о б 'єк та і ускладню ю ть вибір єдиного комплексного рішення. Еміль Рудер

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

187

яв

ВЕБ-ДИЗАЙН

Розглянемо послідовність побудови сайта: ■ Визначення основних розділів сайта (правильний поділ інформації за категоріями допоможе в подальшому супроводі сайту і наповненні його вмістом - контентом). ■ Визначення зв'язків між розділами - так званих навігаційних ланцюжків (наві гація сайта має бути логічною і зручною, сприяти швидкому пошуку бажаної інформації). ■ Підготовка плану створення веб-сайта із зазначенням етапів створення сайта. План створення сайта - покрокове керівництво для роботи, свого роду детальний хідроботи для тих, кому необхідно опанувати специфіку процесу створення сайта Залежно від конкретної мети і завдань сайта цей план у процесі роботи може бути скоригованим. Нижче наведено орієнтовний мінімальний технологічний план робіт для на вчального створення веб-сайта (табл. 14.1). Повний план реального виробничого проекту веб-сайта містить більш е ЗО різних видів робіт. Таблиця 14.1

Орієнтовний мінімальний технологічний план робіт для навчального створення веб-сайта етапи технологічного процесу навчального створення веб-сайта 1-й блок

1. Етап комерційної пропозиції. 2. Планування. 3. Маркетинг

2-й блок

3-й блок

4. Дизайн. 7. Синхронізація. 5. Програмування. 8. Наповнення мате ріалами 6. Верстка

4-й блок

9. Тестування. 10. Доопрацювання. 11. Здавання проекту

Перші три етапи (1-й блок) у цьому плані, які ми повинні обов'язково розгляну ти, - найважливіші для стадії запуску проекту. Якщо на цих етапах припустилися сер йозних помилок, то результати проекту будуть малопродуктивними. Це стосується однаковою мірою як замовника, так і виконавця. Адже саме на цих стадіях обидві сто рони домовляються про те, що вони хочуть зробити й одержати в результаті роботи. Якщо підійти до цих етапів непрофесійно, то проект може не завершитися зовсім, партнери розірвуть відносини задовго до його закінчення. Обидві сторони ризику ють втратити ділові домовленості, час, нерви, репутацію й багато чого іншого. Таких прикладів у практиці створення сайтів чимало. Розглянемо більш докладно перший етап, на якому саме і пропонується розробити структуру сайта (табл. 14.2). Таблиця 142

Етап комерційної пропозиції Зміст етапу

Виконується концептуалізація й визначається бюджет проекту (у виробничому проекті - це обсяг коштів, у навчальному - обсяг часу на виконання)

188

Завдання етапу

На цьому етапі необхідно виконати такі завдання: - зібрати вихідні вимоги; - розробити зразкову структуру сайта; - оцінити терміни виконання робіт; - оцінити вартість виконання робіт; - сформувати кінцеву комерційну пропозицію. Комерцій ну пропозицію повинні затвердити обидві сторони

ВЕБ-ДИЗАЙН Для логічної організації сторінок сайта ми скористаємося деревоподібним представленням усіх його сторінок (табл. 14.3). Таке уявлення дає можливість ство рювати розділи сайта, надаючи кожній зі сторінок сторінку «родича» (розділ верх нього рівня). Така структура дає змогу перетворити непов'язаний набір окремих сторінок на логічно структурований сайт. Таблиця 14.3

Варіанти деревоподібних структур сайта за зростаючим рівнем складності проектування - від навчального до професійного ■ ? ? « п г т ія іг г .і « и ічН п гнігаїгг» саосйаю сжнзв

■ [rfaii.ii і іг ііг т т г З т г іп Г І'іг й і Тип а. Сайт з 10 сторінок («візитна картка» базовий варіант)

Я) Тип б. Сайт з 20 сторінок («візитна картка» 2 варіант)

Тип в. Сайт з ЗО сторінок (корпоративний сайт почат кового рівня)

В кожному з поданих типів сайтів може бути розташована така інформація: 1 - Головна (домашня) сто рінка; 2 - Прайс-лист; 3 - Фото (каталог) товарів; 4 - Довідкова інформація; 5 - Про фірму; 6 -Офіс; 7 - Партнери; 8 - Вакансії; 9 - Потреби; 10-Сервіси

1 - Головна (домашня) сторінка; 2,11,12,13 — Прайс-лист; 3,14,15,16,17, 18 - Фото (каталог) товарів; 4,19,20 - Довідкова інформація; 5 - Про фірму; 6 - Офіс; 7 - Партнери; 8 - Вакансії; 9 - Потреби; 10- Сервіси

1 - Головна (домашня) сто рінка; 2,11,12,13 - Прайслист,^, 14,15,16,17,18,21, 22 - Фото (каталог) товарів; 4,19,20,23,24,25-Довід кова інформація; 5,26 - Про фірму; 6,27,28, 29 - Офіс; 7, 30 - Партнери; 8 - Вакансії; 9 - Потреби; 10-Сервіси

Деревоподібну структуру сайта можна також розглядати як його каркас, який наповнюють текстом і графікою. Структура сайта може бути різною. Розкриємо ба зові принципи її створення. Останнім часом каркаси для сайтів розробляють за блоковим типом. Розгля немо принцип побудови структури сайта з таблиць. Цей варіант класичний і у всіх браузерах має однакову будову. Табличний каркас сайта - таблиця, в якій є декілька комірок, або, якщо він склад ніший, також є вкладені таблиці. Таблиця може м ати фіксовану ширину, а може розвертатися на весь екран, залежно від можливостей монітора. Варіант структури сайта з табличним каркасом див. на рис. 14.1 (ліворуч). Шапку таблиці краще робити не просто графічним зображенням, а компонуванням зви-

ВЕБ-ДИЗАЙН

Ш апка сайту Посилання 1

Посилання 3

Посилання 2

П оси лан н я 7

Посилання 8

Основний текст

або ще одне меню

Посилання 2

Посилання 3

Посилання 9

Посилання 1

П ід в а л с а й т а (к о п и р а й т )

Рис. 14.1. Варіанти структури сайта з табличним каркасом чайного (П тІ-тексту і малюнка на задньому плані. Це сприятиме значному поліп шенню позиції в пошукових системах. Структура сайта матиме такий вигляд, як по казано на рис. 14.1 (праворуч).

Модульні сітки в проектуванні сайтів. Подані вище варіанти структури сайта з табличним каркасом рис. 14.1 (ліворуч і праворуч) побудовані за правилами ви користання модульних сіто к. Модульна систем а - це система для графічного проектування веб-сайта, за якої основою композиції смуг і сторінок стає модульна сітка з певним кроком, однако вим або різним по горизонталі і вертикалі. Модульна система спрощує та прискорює художнє конструювання і створює сприятливі умови для створення правильної структури сторінок сайта. Модульна сітка - важливий допоміжний засіб для веб-дизайнера, особливо при проектуванні веб-сайта у фірмовому стилі. Якщо ви не впевнені у своєму окомірі та відчутті пропорційного співвідношення графічних елементів, то велику допомогу в підготовці структури сайту може надати саме модульна сітка. За допомогою модульної сітки визначають зовнішній вигляд майбутнього сайта і чітко визначаю ть місця розміщення площин для зображень на сторінці, сторінках або в усіх однорідних документах усіх передбачуваних елементів, тексту, ілюстра цій, заголовків статей та інших графічних і інформаційних об'єктів. Модульна сітка привносить у дизайн сайта лад, забезпечує цілісність і зв'язок усіх його частин. Вона дає можливість раціонально організувати будь-який графічний простір, чи то бланк, візитівка, постер, книга, сайт, інтер'єр, зберігаючи в усіх його елементах єдність стилю, а також помітно прискорює виконання замовлення. Адже працювати за шаблоном набагато легше, ніж кожного разу заново вибудовувати табличний каркас. Аргументом на користь цього є приклад із сивої давнини, коли фахівці з протодизайну книги намагалася зрозуміти природу краси, розчленувати її на окремі складові, перевірити гармонію співвідношень математичними формулами. Найдавніший приклад використання модульної сітки - середньовічний канон, яким користувалися переписувачі книг, коли розмічали рукописні книжкові сторінки.

190

Рис. 14.2. Модульна сітка на сайті У веб-дизайні модульна сітка застосовується набагато частіше, ніж може здати ся на перший погляд. Якщо ви використовуєте таблицю для формування елементів на сторінці - ви вже застосовуєте модульну сітку, особливо якщо сітка повторю єть ся на декількох сторінках. Інколи сітка може бути прихованою, інколи явною - коли ви як фон блоку застосовуєте колір, відмінний від фону веб-сторінки (рис. 14.2). Слід додати, що суть сітки у веб-дизайні та сама, що і в типографіці, за винятком того, що у веб-сітці можуть містити елементи змінних розмірів. Сторінка може бути різною за висотою, що залежить від кількості тексту і зображень на ній, а також ав томатично розширюватися залежно від використовуваного розріш ення монітора. Модульна сітка є набором прихованих напрямних, уздовж яких розташ овують ся елементи веб-сторінки. Це полегшує розміщення даних у документі, забезпечує візуальний зв'язок між окремими блоками і зберігає стильність веб-дизайну в разі переходу від однієї сторінки до іншої. Веб-сторінка фактично розглядається як набір прямокутних блоків, які викла даються в певному порядку. При цьому, як правило, дані розташ овуються за колон ками, тому при верстанні застосовують термін одно-, дво-, триколонний м а к е т і так далі. Для прикладу розглянемо головну сторінку сайта (рис. 14.3). Кожен блок цієї сторінки чітко відокремлений від інших за допомогою порож нього простору, рамки або роздільника, за яким виступає кольоровий прямокут ник з текстом заголовка. Виникає питання, чи справді ми маємо справу з трьома колонками. В деяких випадках відразу визначити, скільки колонок містить макет, складно. У такому разі слід розуміти, що колонки можуть об'єднуватися, а також містити не лише суцільний текст, а й графічні вставки. Якщо уявити основні блоки сторінки у вигляді однотонних прямокутників, то отримаємо наочну модульну сіт ку, з якої відразу стає зрозуміло, як складається документ (рис. 14.4). На цьому рисунку видно, що верхній блок з назвою сайта, формою пошуку і кнопками навігації займає всю ширину сторінки. Далі йдуть три колонки, причому перші дві колонки заздалегідь об'єднано в одну для зручного представлення необ хідної інформації. Заверш ує макет блок з контактною і правовою інформацією.

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

191

Рис. 14.3. Головна сторінка сайта

Рис. 14.4. Модульна сітка для головної сторінки сайта

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

Рис. 14.5. Позначення те к с ту в макетах

192

Рис. 14.6. Варіанти позначення зображень у макетах

ВЕБ-ДИЗАЙН

Таблиця 14.4

Варіанти структурування макетів сайтів залежно від вибору кількості колонок модульної сітки Одноколонна модульна сітка

Текст в одну колонку найбільше по ширений в академічному дизайні, за фіксованого макета і публікаціївелико го те к с ту

Приклад сайта в академічному стилі дизайну з одноколонною модульною сіткою

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

193

ВЕБ-ДИЗАЙН

______________________________________ Приклад сайту з двоколонною модульною сіткою Це один з найпоширеніших варіантів побудови сайтів. За такої модульної сіт ки використовую ть дві колонки: одна - під основний текст, а друга для навігації та іншої корисної інформації. Принципового значення не має, зліва або справа розташ овується колонка з навігацією, трапляється і той, й інший варіант. У певном у розумінні двоколонна сітка де-факто стала стандартом для ін формаційних сайтів у зв'язку зі своєю зручністю . Справді має місце зручне розташ ування для використання - і тексту, і посилання, до того ж ця сітка не відкидає підклю чення горизонтальної навігації, як це прийнято в одноколонній сітці. Двоколонні сітки зручні для створення найрізноманітніших сайтів і не потре бують особливих навичок з верстання веб-сторінок. Єдиний їх недолік - подібні сайти мають досить одноманітний вигляд. Але, з іншого боку, користувачам зручніш е працювати з сайтом звичного ви гляду, без зайвих ускладнень

194

ВЕБ-ДИЗАЙН Триколонна модульна сітка Детальніша модульна сітка

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

застосовується три колонки, дві з них часто

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

195

ЩШЯ

В Е Б "АИЗАЙН

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

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

Створення, оброблення та структурування електронного банку даних для сайта за визначеною темою. Під час роз роблення сайта після вибору теми для ньо го та складання його структури треба ство рити банк даних матеріалів для сайта. Однією з властивостей пам'яті є забу вання. Це фізіологічна властивість нашого Рис. 14.7. Образне зображення електро нного банку даних для сайта за визна ченою темою, в том у числі місця для зберігання ідей т а матеріалів для май бутнього сайта

головного мозку. Але інколи ми забуваємо та, що треба пам'ятати обов'язково. В тако му разі постає завдання - вчасно пригада ти необхідне. Якщо ви просто придумали ідею - це важливо. Щоб не забути про неї,

ВЕБ-ДИЗАЙН

слід занотувати її. До занотованої ідеї ви завжди можете повернутися і завдяки за пису викликати в уяві ряд спогадів, асоціацій, уявлень. Суть рекомендації - створіть місце для зберігання ідей та матеріалів для май бутнього сайта, як образно зображено на рис. 14.7. Зауважимо позитивні сторони створення, оброблення та структурування електронного банку даних для сайта за визначеною темою: 1. Запис всього, що вам спадає на думку дає змогу пригадати придумане в будьякий слушний час. Коли-небудь записи можуть вам знадобитися і дуже допомогти! 2. Ви можете структурувати ваші ідеї та матеріали (за галузями, розділами тощо). 3. Ви можете групувати ідеї та матеріали, продукуючи якусь нову ідею з комбі нації старих. 6 два поширені способи створити банк даних (табл. 14.4). Таблиця 14.4

Способи створення банку даних

Електронний.

Паперовий.

За допомогою комп'ютера створити За допомогою канцелярських засобів зберігання документ у Microsoft Office (Word, інформації у поліетиленових файлах, папках, ко Excel), Open Office, блокноті або у робках. будь-якому іншому редакторові Сучасний, мобільний, динамічний

Традиційний, консервативний, статичний

Записуйте туди в електронному ва ріанті все те, що знайдено для сайта. Це може бути: стаття за темою сай та, малюнок, фотографія, будь-який інший матеріал для сторінок сайта. Так день у день ваш банк даних по повнюватиметься свіжими ідеями. Комп'ютерний варіант складання списку ідей хороший ще і тим, що ви можете сортувати ідеї за групами

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

П а м ' я т а й ! Сайт - це електронне інформаційне середовище, тому всі матері али слід перевести в електронний варіант. Для цього використовуйте сканування.

СВІТ ПРОФЕСІЙ Менеджер інтернет-проектів, розробник сайтів.

ПЕРЕЛІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМ ІНІВ У н авчальн ом у м а т е р іа л і параграф а: концептуалізація проекту; визначення

бюджету проекту; наукова організація розумової праці з поліграфічними і електро нними джерелами; структура сайта; графічні елементи сайта з певним зв'язком і ло

197

ВЕБ-ДИЗАЙН гікою побудови; контентом; план створення сайта; варіанти деревоподібних струк тур сайта; табличний каркас сайта; модульна система; модульна сітка; одно-, дво-, триколонний макет сайта; інформаційне середовище (Information environment). У словнику-довіднику: система управління сайту (CMS - Content Management System ); W YSIW YG (W hat You See Is W hat You Get); домен; клацання (клік); модуль (програмнний модуль); розділ сайта; сайт; юзабіліті (usability); дизайн сайта; інтер фейс сайта; цільова аудиторія; структура сайта; SEO (Search Engine Optimization); лічильник відвідуваності; хіт; хост; сесія; завантаження (або показ); ядро аудиторії; аудит сайта; індексація сторінок сайта; інтерфейс сайта; цільова аудиторія; струк тура сайта; логічна структура сайта; фізична структура сайта; розділ сайта; сто рінка сайта (синоніми: веб-сторінка на логічному; фізичному рівні); матеріали для сайта; корпоративний сайт; інформаційне середовіщ е (Information environment)-, навчально-інформаційне середовище.

П Р А К Т И Ч Н А Р О Б О Т А 14

Розробка структури сайта Послідовність виконання роботи:

Завдання 1. Визначити параметри макета сайта. О б 'єкт практичних розробок: параметри макета сайта за уточненими технічни ми умовами.

Завдання 2. Розробити модульну сітку головної сторінки сайта за обраною темою. О б 'єкти практичних розробок: модульна сітка головної сторінки сайта (на ви бір: одно-, дво-, триколонна).

Завдання 3. Конструювання дизайн-макета головної веб-сторінки сайта за об раною темою. О б 'єкти практичних розробок: конструктивні проектні пропозиції варіантів дизайн-макета головної веб-сторінки, схвалений замовником дизайн-макет голов ної веб-сторінки сайта за обраною темою.

Завдання 4. Розробити елементи (модулі) макету сайта. О б 'єкти практичних розробок: варіативні пошукові варіанти елементів (моду лів) макета сайта в єдиному стильовому рішенні в начерках, остаточне деталізова не проектне рішення в ескізній формі.

Завдання 5. Розробити та оформити систему навігації сайта. О б 'єкти практичних розробок: варіанти розробок та оформлення системи на вігації сайта, остаточне проектне виріш ення системи навігації сайта.

Завдання б. Вибір оптимального варіанта розташування текстових і графічних елементів сайта. О б 'єкти практичних розробок: варіанти розташування текстових та графічних елементів сайта, схвалений замовником варіант схеми розташування текстових та графічних елементів сайта.

Завдання 7. Обґрунтування вибору оптимальної кількості сторінок сайта. О б 'єкти практичних розробок: обґрунтування вибору оптимальної кількості сторінок сайта, макет сайта з обґрунтуванням оптимальної кількості сторінок сайта.

198

ВЕБ-ДИЗАЙН

І\

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

^ І

ТВОРЧІ ЗАВД АН Н Я

для закріплення навчального матеріалу теми заняття 1. Зобразіть відомі вам варіанти різних структур сайтів тематичної спрямованості. Чому їх форми деревоподібного представлення всіх інформаційних розділів і підрозділів відрізняю ться? 2.

Чому повний план реального виробничого проекту веб-сайта м істить по над ЗО різних видів робіт, а орієнтовний м інім альний технологічний план робіт для навчального створення веб-сайта - 11? Які, на ваш у думку, етапи не беруть до уваги під час навчального створ енн я веб-сайта? Обґрунтуйте відповідь.

3. Знайдіть у технічній літературі або в електронних джерелах повний план ре ального виробничого проекту веб-сайта. Проведіть порівняльний аналіз планів реального виробничого проекту веб-сайта і навчального веб-сайта за зразком утабл. 14.5. Таблиця 14.5

Порівняльний аналіз планів реального виробничого проекту веб-сайта і навчального веб-сайта Етапи технологійного процесу

Виробничий проект веб-сайта

Навчальний проект веб-сайта

1 2 3

4. Розгляньте табл. 14.2. Які з відомих вам сайтів побудовані за показаним у табли ці варіантом деревоподібної структури? Результат власного дослідження зане сіть у відповідний стовпчик табл. 14.6. Таблиця 14.6

Результати дослідження окремих тематичних сайтів

Варіанти деревоподібних структур сайта за зростаючим рівнем проектування - від навчального до професійного Тип а. Сайт з 10 сторінок Тип б. Сайт з 20 сторінок Тип в. Сайт з ЗО сторінок (кор («візитна картка», базовий («візитна картка», 2-й варіант) поративний сайт початкового варіант) рівня)

Назви сайтів та їх деревоподібна структура (графічна схема та словесний деталізований перелік сторінок)

Створіть електронний банк даних матеріалів для сайта за обраною темою.

КОНТРОЛЬНІ ЗАПИТАННЯ

для перевірки власних навчальних досягнень за темою заняття

Сформулюйте визначення структури сайта.

Назвіть етапи розробки сайта.

На якому етапі розробляється структура сайта?

За якими логічними правилами будується система сторінок і графічних елемен тів сайта?

Які зв'язки утворюють сукупність елементів сайта?

Як можна представити структуру сайта у формі деревоподібного представлен ня всіх інформаційних розділів і підрозділів сайта?

Із чого починається робота над веб-проектом?

За якими базовими принципами створю ється деревоподібна структура сайта

Сформулюйте визначення модульної сітки.

(каркас)? 10. Поясніть важ ливість застосування модульної сітки дизайнером-початківцем 11. Який елемент найчастіше використовується при розробленні структури сайта? 12. Які головні модульні структури сайта? 13. Для чого призначений електронний банк даних при розробленні сайта? 14. Як створити банк даних? 15. Які ви знаєте види банків даних? 1б. Назвіть переваги вашого способу формування банку даних

200

ВЕБ-ДИЗАЙН

§ 15. Комп'ютерна графіка у веб-сайтах

1. Наведіть приклади широкого застосування комп'ютерної графіки (назва сфери матеріального і нематеріального виробництва, об'єкти праці з застосуван ням комп'ютерної графіки). 2. Коли вперше графіку почали виконувати з допомогою комп'ютерних техно логій? 3. Чому виникла потреба у візуалізацїї даних у різних сферах людської діяльності? Уяких? 4. Завдяки чому складається перше враження від веб-сайту? 5. Що умотивовує відвідувача сай та заглибитися в це інформаційне середовище і часто переглядати його або швидше закрити сай т і ніколи його не відвідувати?

Растрова та векторна графіка в проектних інформаційних веб-технологіях. Дизайн веб-сайта практично завжди першим впливає на враження користувача про сайт у цілому. Від того, яким буде перше враження, залежить чи залиш иться користувач на сайті, при цьому в глибині душі вирішивши більш е ніколи не звер татися до нього. Щоб привернути увагу користувача, завоювати його інтерес до вашого ресурсу, необхідно зробити дизайн вашого веб-сайту приємним, зручним, виразним для запам'ятовування. Представлення даних на моніторі комп'ютера в графічному вигляді вперше було реалізовано в середині 50-х років для великих ЕОМ, що застосовувались у на укових і військових дослідженнях. Тепер графічний спосіб відображення даних по ширився на всі персональні комп'ютери. Графічній інтерфейс є необхіднім майже для усіх програм, включаючи операційні системи.

Комп'ютерна графіка - це наука, що вивчає м етод и і засоби створення т а об робка зображень за допомогою програмно-апаратних обчислювальних комплексів. Комп'ютерна графіка охоплює всі види та форми представлення зображень, як на екрані монітора, так і на зовніш ньому носії (папір, плівка тощо). Комп'ютерна графіка застосовується для візуалізації даних у різних сферах люд ської діяльності: ■ у медицині: комп'ютерна томографія; ■ у науці: наприклад, для наочного зображення складу речовини, побудови графіків тощо; ■ у дизайні: для реклами, поліграфії, моделювання (рис. 15.1); ■ у кіно: для мультиплікації (рис. 15.2), відеоіндустрії (рис. 15.3). Залежно від способу формування зображення, комп'ютерну графіку можна по ділити на растрову, векторну, фрактальну, тривимірну. Ми розглянемо більш детально доступнішу для дизайнерів-початківців растро ву і векторну графіку, яка дуже широко представлена на персональних комп'ютерах. За способами представлення кольорів комп'ютерна графіка поділяється на: 1) чорно-білу; 2) кольорову. За спеціалізацією в різних галузях, комп'ютерна графіка є: 1) інженерною; 2) науковою; 3) веб-графікою; 4) комп'ютерною поліграфією.

201

Рис. 15.1. Комп'ютерна графіка у моделюванні

Рис. 15.2. Комп'ютерна графіка у мультиплікації

Рис. 15.3. Комп'ютерна графіка у відеоіндустріі Таблиця 15.1

Д ва т и п и ко м п 'ю тер н о ї графіки Типи комп'ютерної графіки

Растрова графіка

Векторна графіка

Використання Кожний піксель визначається у веб-технологіях окремо

Для малювання ліній використову ються математичні формули

Утворення зобра Растрові зображення склада жень ють пікселі

Векторні зображення утворюють контури

Приклади зобра ження

і В

іг С Д -

Растрового

Векторного Обидва типи зображень широко застосовують у веб-технологіяхі

Растрова графіка. Растрове зображення (див. табл. 15.1) складається з пікселів різного кольору. Комп'ютер запам'ятовує кольори всіх пікселів поспіль у визначе ному порядку. Тому растрове зображення потребує для збереження великий обсяг пам'яті. Таке зображення важко масштабувати і ще важче редагувати. Щоб збільшити зображення, доводиться збільшувати розмір пікселів, і тоді рисунок отримується ступінчастим (рис. 15.4). Для зменшення растрового рисунка доводиться кілька

202

ВЕБ-ДИЗАЙН

Рис 15.4. Елемент збільшеного растрово го зображення з табл. 15.1

Рис. 15.5. Приклад зменшеного растрового зображення з табл. 15.1

сусідніх пікселів зливати в один або вилучати зайві пікселі (рис. 15.5). У результа ті зображення спотворюється, його дрібні деталі стають не помітними. Розмір ра стрових зображень залежить від їх розподільності (ширини та висоти) і глибини кольору. Усіх цих недоліків немає у в е к то р н ій граф іці. Векторний рисунок створюється і запам'ятовується як сукупність контурів - геометричних фігур і ліній. Для зміни його розміру досить змінити один-два коефіцієнти і перерозрахувати всі криві, що виконують автоматично під час зміни розміру векторного зображення. Якість зо браження при цьому не змінюється. Математичною основою векторних зображень є криві Б ез’є, названі так за ім'ям французького інженера П 'ера Без'е. Кривим Без'є властива плавність з'єднань. Вони не спотворюються за афінних перетворень (переносів, поворотів і масш табування). Криві Без'є економні в циф ровому кодуванні: розмір коду прямо залежить від кількості об'єктів в зображенні (рис. 15.6). Проблемою векторної графіки (рис. 15.7, 15.8) є її нереалістичність. Це графіка малюнків, а не фо тографій. У веб-дизайні найчастіш е застосовується растрова графіка. Засоби її створення та обробка ви вивчатимете у параграфі «Комп'ютерна графіка у вебсайтах», застосовуючи програму АбоЬе Р Ііо ^ Ь о р . Кольорові зображення є найпривабливішою час тиною мультимедійних видань. До появи на екрані, а

Рис. 15.8. Приклад век торного зображення

Рис. 15.6. Приклад збільшення растрового зображення

Рис. 15.У. Приклад збільшення векторного зображення.

ВЕБ-ДИЗАЙН

потім на папері колір проходить певний ланцюжок цифрового кодування та обробка. Як і будь-яка інша, колірна інформація подається у цифровому вигляді, причому її від творення на екрані та папері має відповідати оригіналу. Для цифрового кодування по трібна побудова правил відповідності кольорів іх цифровим кодам або колірній моделі. Колірною моделлю називається такий спосіб представлення кольорів у зобра женні, коли кожен колір розділяється на базові кольорові компоненти, при цьому зазначаються їх кількісні значення. Кольоровим простором називається сукупність кольорових і тонових відтінків, які відтворює або сприймає то й або інший технічний чи біологічний пристрій. Субтрактивними називаються кольори, які створю ю ться шляхом віднімання кольорових компонентів (при поглинанні світлових хвиль). Адитивними називаються кольори, які створюються шляхом додавання кольо рових компонентів (при випромінюванні світлових хвиль). Більш ість кольорових моделей описує кольори, які входять до кольорових просторів відповідних пристроїв, призначених для відображення або виведення графічної інформації, хоч є моделі, які від цих пристроїв не залежать (модель Lab).

Створення та обробка графічного зображення. Для створення та редагу вання графічних зображень на екрані дисплея є спеціальні програми, які назива ють графічними редакторами. У середовищі операційної системи W indows таким редактором є стандартна програма Paint. Прикладною програмою - графічним редактором з більшим спектром можливостей для створення та обробка графіч них зображень в електронному вигляді та підготовки їх до друку є редактор Adobe Photoshop. З його можливостями та способами використання цих можливостей ви ознайомитеся у цьому параграфі.

Adobe Photoshop є найкращою програмою для редагування та компонування графічних зображень, для імпорту, обробка та демонстрації цифрових зображень, керування ними, створення графічних зображень. Детальну інформацію про прийоми роботи з графічним редактором Adobe Photoshop див. у розділі 5 «Резерв навчального часу».

Стилістичне вирішення сайта. Веб-дизайн - це графічне оформлення сайта, яке включає розробка структури сайта, розробка логіки сайта, з урахуванням зручності користування (юзабіліті). Причому оформлення має бути таким, аби не відсторонювати відвідувачів, а ро бити користування сайтом для них зручним. Компанія, що має представництво в Інтернеті, повинна створити індивідуаль ний фірмовий стиль, який чітко її позиціонує. Поняття стилю веб-дизайну сайта охоплює: ■ ефективну колірну гаму у сфері діяльності фірми; ■ функціональний і зручний для користувача веб-дизайн сайта;

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

204

ЬІасК - чорний

Yellow - жовтий;

M a g e n ta - рожевий;

Cyan - блакитний;

Ці кольори відповідають фарбам, які використову ють при друці кольорових зображень на типографічному обладнані

Використовується для оформлення векторних, растрових та текстових об'єктів документа.

Складається з чотирьох базових кольорів; блакитного, рожевого, жовтого, чорного, кожен з яких описується 8 бітами

Є моделлю субтрактивних кольорів, що створюються відображаючими елемен тами.

Дає можливість описати 16,7 мпн кольо Застосовується під час роботи з монітором та ска рів, що входять до кольорового простору цієї моделі нером

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

Є моделлю адитивних кольорів, що ство рюються випромінюючими елементами

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

>***-•« Попарне змішування осно вних кольорів дає три інші важливі кольори

Палітри моделей

Візуалізація процесу

<л

B lu e - синій

Green - зелений;

Red - червоний;

Опис моделі

Використання

•Ч

CMYK

Тлумачення

назви моделі

§Э vg

Назва моделі

Найбільш поширені кольорові моделі

ВЕБ-ДИЗАЙН

/ 0 Я В Б і£ к

3 g О. л £

«Ш ВЯ ЁК о 2 ї

5 ї s JS С та а С ПР

205

Закінчення табл. 15.2

ВЕБ-ДИЗАЙН

Рис 15.9. Інтерфейс програми АйоЬеРЬоШИор. Головне вікно програми

Рис. 15.10. Діалогове вікно створення нового документа

Рис. 15.11. Діалогове вікно збереження документа

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

Мінімалізм

Інформаційний дизайн

Бізнес-стиль

Промостиль

Дизайн у стилі флеш

Рис. 15.12. Поширені типи фірмових стилів

207

Характеристика поширених типів фірмових стилів

IV ВЕБ-ДИЗАЙН

ВЕБ-ДИЗАЙН

Документальні матеріали у творчому проекті. Відновлення документів, фотографій. Застосування комп'ютерних технологій у проектних технологіях не

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

■ «

Обробка цих графічних документів для використання їх на веб-сторінках теж потребує застосування відповідних технік роботи з графічними комп'ютерними па кетами програм. СВІТ ПРОФЕСІЙ Компютерний дизайнер, викладач комп'ютерної графіки, комп'ютерного проектування.

ПЕРЕЛІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМІНІВ У навчальному матеріалі параграфа: комп'ютерна графіка; типи комп'ютер ної графіки: растрова, векторна, фрактальна, тривимірна, графічній спосіб відобра ження даних; графічній інтерфейс; програмно-апаратні обчислювальні комплекси; візуалізація даних у різних сферах людської діяльності; криві Без'є; мультимедійні видання; ланцюжок цифрового кодування та обробки кольору; колірна модель; кольоровий простір; субтрактивні кольори; адитивні кольори; графічні редактори Paint, Adobe Photoshop. У словнику-довіднику. CMYK; JPG; JPEG (Jo in t Photographie Expert Group); GIF (Graphie Interchange Format); банер (Banner); flash-банери; java-банери; банерна ре клама; блог; веб 2.0; веб-архів; векторна графіка (vector graphics); векторний шрифт (vector font); глибина кольору (color depth); глибина кольору (Color Depth); головна сторінка; домашня сторінка (Home Page); графічний адаптер (graphics adapter); гра фічний примітив (graphicsprimitive); графічний прискорювач; акселератор (graphics accelerator); графічний процесор (graphics chip); графічний співпроцесор (graphics coprocessor); графічний фільтр (graphics filter); заливка (Fill); ілюстрація; карта сайту; кегль (те саме; що й кегель); кольороподіл; контент (Content); контекстна рекла ма; мультимедіа (Multimedia); оптимізація сайта; растр (raster); растрова графіка (bitmapped graphics); растрова графіка (raster graphics); растровий файл (raster file); растровий шрифт (raster font); роздільна здатність екрана (Screen Resolution); розмір 210

ВЕБ-ДИЗАЙН шрифту (font size); тип файла (file type); «точок на дюйм» (dots per inch, dpi); формат BMP (bitmap); формат файла (file format); шрифтова гарнітура.

П Р А К Т И Ч Н А Р О Б О Т А 15 О волод іння п р и й о м а м и р о б о т и за со б а м и к о м п 'ю т е р н о ї граф іки

Завдання на вибір.

Індивідуальні об'єкти практичних розробок.

Оволодіння прийомами комп'ютерної графіки.

оброблення

графічних зображень

засобами

1. Фотомонтаж: змонтувати на пейзажній фотографи декілька об'єктів (фігур лю дей, тварин, небесних світил). Зробити напис, що імітує дату, який проставля ється фотоапаратом. 2. Фотомонтаж: портрет +головний убір. Далі зображення перетворити надуотон у стилі старої вицвілої фотографи. Додати обгорілий край. 3. Перетворити чорно-біле зображення будівлі на кольорове. Додати сонячні від блиски на вікнах і даху. 4. Перетворити кольорове зображення в зображення у стилі старовинної роз фарбованої фотографії. Додати фігурно вирізані краї. 5. Фотомонтаж: люди +будівлі. Перетворити кольорове зображення в чорно-біле (градації сірого). Додати подряпини. Зробити задній фон злегка розмитим. 6. Використовуючи зображення людини, створити довкола неї сяючий ореол. 7. Використовуючи будь-яке зображення, створити ефект його віддзеркалення від гладкої кахельної підлоги. 8. Перетворити фотографічне реалістичне зображення будівлі, додавши у верхній частині будівлі різноколірне підсвічування, в нижній частині будівлі - неонову вивіску. 9. Перетворити фотографічне реалістичне зображення в зображення різних ху дожніх стилів: малюнок вугіллям, малюнок олівцем, малюнок маслом і акварел лю, літографію. 10. Кольорове зображення перетворити в чорно-біле (градації сірого). Додати ефект зернистості плівки. Додати напис, що імітує напис чорнилом. 11. Відсканувати і відретушувати стару фотографію. Усунути розриви і подряпини. Очистити артефакти. 12. Використовуючи зображення спортсмена, зробити ефекту великої витримки. Рухспортсмена мають бути розмиті, а задній фон чітким. 13. Використовуючи фотографію лісу, зробити ефект потрапляння променя світла в об'єктив фотоапарата. 14. Підготувати ряделементів сайта: кнопок, смуг. При цьому використовуйтеи на лаштування, шаруючи для завдання об'єм елементів і тіні. Оволодіння прийомами комп'ютерної графіки.

створення

графічних

зображень

засобами

1. Створити фон для НТМІ.-сторінки. Фон при повторенні не повинен утворювати стики. 2. Створити фон для НТМІ.-сторінки з використанням тексту. 211

ВЕБ-ДИЗАЙН

Знайти в Інтернеті алгоритми створення та створити текстові написи з ефекта ми вогненних, крижаних і неонових букв.

Створити макет етикетки газованого напою. Використовувати напис уздовж еліпса. Використовувати градієнтну заливку. Використовувати стилі, шаруючи

задані тінь і об'єм. Використовуючи різні набори кистей, створити зображення в стилі дитячого

Створити набір кистей для представлення кутових елементів.

7. 8.

Намалювати проекцію куба і на грані накласти різні зображення. Використовуючи панорамне зображення (гори, море і так далі), добитися ефек

малюнка.

ту погляду крізь мильні кульки.

ТВОРЧІ ЗАВД АННЯ д л я з а к р іп л е н н я н а в ч а л ь н о г о м а т е р іа л у т е м и з а н я т т я

Поясніть взаємозалежність розвитку комп'ютерної графіки і зростання будівни

Обґрунтуйте приклади доцільності застосування комп'ютерної графіки:

Охарактеризуйте особливості комп'ютерної графіки:

Які математичні дослідження впливають на розвиток комп'ютерної графіки. На

цтва сайтів як інформаційно-рекламної сфери. Обґрунтуйте. 1) чорно-білої; 2) кольорової; 3) поєднання обох видів. 1) інженерної; 2) наукової; 3) веб-графіки; 4) комп'ютерної поліграфіки. ведіть приклади досліджень. Що вас зацікавило в біографіях дослідників? 5.

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

6. 7.

Поясніть ознаки стилістичного виріш ення сайта. Н азвіть основні покрокові технологічні процеси, технологічні переходи під час відновлення документів, фотографій.

КОНТРОЛЬНІ ЗАПИТАННЯ для перевір ки власних н а в ч а л ьн и х досягнень з а т е м о ю за н я т т я

1. 2.

Які відчуття формують перше враження користувача сайта? Чому саме графічній спосіб відображення даних є найпоширенішим в інтернеттехнологіях?

3. 4.

Дайте визначення комп'ютерної графіки. Як змінилися ваші уявлення про застосування комп'ютерної графіки для візуалізації даних у різних сферах людської діяльності після засвоєння теми цього параграфа.

5. 6.

Назвіть типи комп'ютерної графіки залежно від способу формування зображення. Чому дизайнери-початківці спочатку мають опанувати прийомами роботи з ра стровою і векторною графікою серед інших типів комп'ютерної графіки?

212

ВЕБ-ДИЗАЙН

7. Як поділяється комп'ютерна графіка за способами представлення кольорів? 8.

Що впливає на поділ комп'ютерної графіки за спеціалізацією в різних галузях виробництва?

9. Опишіть відмінності растрової та векторної комп'ютерної графіки за її викорис танням у веб-технологіях для утворення зображень, за зручністю в роботі для дизайнерів-початківців. 10. Наведіть приклади зображення растрової та векторної комп'ютерної графіки. 11. Охарактеризуйте колірну модель як спосіб представлення кольорів у зобра женні. 12. Дайте визначення кольорового простору. 13. У чому відмінність субтрактивних та адитивних кольорів? 14. Назвіть і охарактеризуйте найбільш поширені кольорові моделі. 15. Які комп'ютерні програми називають графічними редакторами? Н азвіть

їх

основні відмінності. 16. Чому АсІоЬе РЬю їоібор є найкращою програмою для редагування та компону вання графічних зображень, для імпорту, обробки та демонстрації цифрових зображень, керування ними, створення графічних зображень? Обґрунтуйте свою думку. 17. Назвіть і охарактеризуйте складові стилю веб-дизайну сайта. 18. Назвіть і охарактеризуйте поширені типи фірмових стилів. 19. Опишіть значення документальних матеріалів у творчому учнівськом у проекті. 20. Чому застосування комп'ютерних технологій у проектних технологіях не замі нює документальні джерела інформації, а скоріше, навпаки, посилює потребу в документах як носіях інформації. 21. Дайте визначення документа. 22. Чим відрізняються документи у науці, науково-технічній сфері, проектних орга нізаціях, побуті? Поясніть відмінності. 23. Охарактеризуйте

документальні

матеріали

проектній

діяльності

веб-

дизайнера. 24. Яких технік роботи з графічними комп'ютерними пакетами програм потребує обробки графічних документів для використання їх на веб-сторінках?

ВЕБ-ДИЗАЙН §

1б. Розмітка гіпертексту НТМІ 1. Назвіть передумови появи гіпертексту. 2. Чому ще в сиву давнину виникла потреба застосовувати гіпертекстову сис тем у? 3. Що сприяло розвитку з давніх-давен інформаційної системи в сучасну гіпертек стову технологію зберігання т а застосування знань ?

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

Історія розвитку гіпертекстових технологій. Гіпертекст з'явився задовго до Інтернету. Першою системою гіпертексту прийнято вваж ати тлум ачення Книги псалмів Г іл ь б е р т а П о р р е та н с ьк о го з П у а т ь е (близько 1150 р. н. е.) (рис.16.1 —16.2). Спеціальні позначки на полях направляли читача на сторінки в інших місцях книги. Не вистачало лиш е комп'ю тера, щоб гіперпосиланнями стало зручно ко ристуватися. Перша

теорія

автоматизації цього

процесу належить Ван н евар у Буш у

(рис. 16.3), який представляв гіпертекстову систему у вигляді машини, що оперус мікрофішами (мікрофотоплівкамі). У 1945 р. Буш описав цю, так ніколи і не створе ну, машину, назвавш и її «Мемексом». Зрозуміло про можливість переходу запиту від одного «Мемекса» до іншого не було мови - машина була задумана у вигляді автономного письмового столу (рис. 16.4).

Рис. 16.1. Гільберт Порретанський з Пуатье

214

Мініатюра з рукопису «Коментарю на Боеція». XII ст. (Ратіп. М і . йаіепсіеппеі. 197. Рої 9)

ВЕБ-ДИЗАЙН

Рис. 16.3. Ванневар Буш

Рис. 16.4.«Мемекс» (Метех - memory extender, «розширювач пам 'яті)

Першим на практиці використовував гіпертекст Д углас Ен гел ьб ар т («батько» миші) (рис. 16.5) у 1968 р. Теодор Нельсон, послідовник Енгельбарта, працював над створенням загальної системи електронних публікацій і загального архіву. Нельсон запропонував сам термін "гі пертекст" і багато зробив для того, щоб ідеї гіпертексту на були поширення. Власне термін «гіпертекст» був уперше введений в обіг Теодором Нельсоном (рис. 16.6) у 1965 р. Через сім років ним же була запропонована система візуалізації «паралель них документів» - «Ксанаду», що наочно представляла по силання і зв'язки (рис. 16.7).

Рис. 16.5. Дуглас Енгельбарт

Гіпертекстом називають будь-який те к с т, в якому виявляються які-небудь по силання на інші фрагменти. Гіпертекстова система - це інформаційна система, здатна зберігати ін формацію у вигляді електронного те к сту, яка надає можливість встанов лю вати електронні зв'язки між будь-якими "інформаційними одиницями’ що зберігаються в її пам 'яті, і викликати їх на екран монітора “простим н ати с ненням кнопки".

Рис. 16.6. Теодор Нельсон

Рис. 16.7. Термінал «Ксанаду» з двома паралель ними документами на екрані

215

ВЕБ-ДИЗАЙН Складові мови розмітки гіпертексту HTML Мова розмітки гіпертекстових документів HTML IHypertext Markup Language) основний спосібзберігання і передавання документіву мережі Інтернет. HTML-файл е звичайним текстовим файлом, в якому те, що ми зазвичай бачимо на сторінках, перемежовується невидимим для перегляду з браузера кодом. Цей невидимий код і є мовою розмітки HTML. Як елементи форматування використовують команди мови - т а к звані теги (tag). Мова розмітки гіпертексту надає можливість за до помогою м іток (тегів) визначати структуру і зовнішній вигляд HTML-документа (web-сторінки) при відображенні у програмі-браузері, а також створю вати поси лання на інші файли. Головною особливістю HTML є здатність використовувати гіперзв'язки (англ. links), завдяки яким можливі посилання на інші документи, як локальні, так і ті, що знаходяться на іншому кінці земної кулі, а також впровадження в документи зобра жень, звуку, відео і т. ін. HTML застосовують для надання певного вигляду тому або іншому елементу, будь то таблиця, текст або картинки. Є програми-редактори для створення веб-сторінок - веб-ковпоузери, такі як M icrosoft Frontpage, Macromedia Dreamweaver, які можуть створювати веб-сайти для вас (за словами їх розробники). Але сумнівно, що ці програми навчать вас ко дувати веб-сайт. Найкраще починати працювати з простим текстовим редактором. Якщо ви ви користовуєте систему W indows, то в ній є Notepad, який міститься в меню С т а р т , Програми, С та н д а р тн і (рис. 16.8). Якщо ви використовуєте не Windows, то можете вибрати аналогічний простий текстовий редактор, наприклад, Pico (Linux) або Sim ple Text (Мас). Notepad прекрасно підходить для ство рення коду, оскільки ніяк не впливає на те, що ви пишете, - зберігаються тільки тек стові символи, а не їх форматування, як у Microsoft Word. Браузер і Notepad (або аналогічний про стий редактор) - все, що вам необхідно для ро боти з цим параграфом і створення веб-сайтів. HTML - це мова, яка надає можливість представляти інформацію (наприклад, на укові дослідження) в Інтернеті. Те, що ви ба чите при перегляді сторінки в комп'ютерній мережі, - це інтерпретація вашим браузе ром Htm l-тексту. Щоб побачити Html-коди Рис. 16.8. Програма Windows, в якій є Notepad, що м істи ться в меню С тар т, Програми, Стандартні

216

сторінки в Інтернеті, відкрийте меню “View" у лінійці меню вашого браузера і виберіть "Source" (перегляд HTML-коду) (рис. 16.9).

ВЕБ-ДИЗАЙН Команди мови HTML називають тега ми. Це мітки, які ви використовуєте для вказівки браузеру, як він має показу вати ваш веб-сайт.

Іи ІО Г ІЛ Іі

Г*

(«

М и fo to fl

«в .

Internet

ГШ1Ш*Ш

hek

І ір ІО Г С І

м*

Всі теги мають однаковий формат: вони починаються знаком '< " і закінчую ться зна ком sign *>*. Зазвичай є два теги - що відкриває (<html>) і що закриває (</html>). Відмін ність полягає в тому, що у закривальному тезі є слеш Т . Весь вміст, що розміщений між тегами, що відкривають і закривають, є вміс том тега.

Рис. 16.9. Html-коди сторінки в Internet в меню «View»: в лінійці меню вашого бра узера у «Source» (перегляд HTML-коду)

HTML простий і логічний. Браузер читає HTML так, як читаєте його ви: зліва на право і згори до низу. Таким чином, Htm l-документ починається і закінчується тим, чим має починатися і закінчуватися текст. По-перше, необхідно повідомити браузера, що ви "говоритимете" з ним мовою HTML за допомогою тегу <html>. Отже, перш ніж надрукувати що-небудь, слід по ставити тег "<html>" у першому рядку документа Notepad. <html> - тег, що відкриває htm l-сторінку. Він повинен мати і тег, що закриває, після того, як ви закінчите введення HTML. Тому, щоб не забути, поставте тег, що за криває ('</htm l>'), на пару рядків нижче і вводьте весь текст документа між <html> і </html>. Наступне, що необхідне, - це "head" (голова, або "ш апка"), яка містить службо ву інформацію про ваш документ, і "body" (тіло), вміст самого документа. Оскільки HTML логічний, head (<head> і </head>) міститься вище body (<body> і </body>). Зверніть увагу, що цей title не з'являється на самій веб-строрінці. Все, що ви хочете бачити на самій сторінці, є змістом (англ, content) і має міститися між тегами "body*. Якщо ви хочете записати на сторінці "Ура! Це моя перша сторінка" ваш текст,він має розташ овуватися в розділі body. Тому в розділі body надрукуйте: <р>Ура! Це моя перша сторінка </р>. Буква р в <р> - це скорочення від "paragraph" і означає, що починається новий параграф тексту. Тег р визначає текстовий параграф. Тег <Р> є елементом блоку, тому почина ється з нового рядка, параграфи тексту, ті, що йдуть один за одним, розділяються вертикальним проміжком. Якщо тега, що закриває, немає, вваж ається що кінець па раграфа збігається з початком наступного блоку документа.

Синтаксис: <р> Текст</р> Ваш Html-документ повинен тепер мати такий вигляд: <html> <head>

217

ВЕБ-ДИЗАЙН <title>My first page </title> </head> <body> <p>Hurrah! This is my first page.</p> </body> </html> Після виконання цього програмного коду потрібно зберегти її на жорсткий диск, а потім відкрити в вашому браузері: ■ У Notepad виберіть 'Save as...’ у меню 'File'. ■ Виберіть'A ll F ile s'у боксі ‘ Save as type". Це дуже важливо - інакше ви збереже те файл, як звичайний текстовий документ, а не як Htm l-документ (рис. 16.10). ■ Тепер збережіть ваш документ як «page1.html» (розш ирення «.html» вказує, що це Html-документ). Де ви збережете документ на жорсткому диску - не має значення, головне запам'ятайте це місце, щоб потім легко знайти файли. У розділі head завжди пишіть: <title> Назву ваш ої сторінки </title>. Зверніть ува гу, що title виводиться в рядку заголовка вікна браузера (рис. 16.11). Цей title дуже важливий, оскільки використовується пошуковими машинами (такими як Google) для індексування вашого веб-сайта і показу в результатах по шуку (рис.16.12).

Текстові елементи та таблиці на гіпертекстових сторінках. HTML пропонує шість заголовків різного рівня, які показують відносну важливість секції, розташо ваної після заголовка. Так, тег <Н1> є найбільш важливим заголовком першого рівня, а тег <Н6> використосовується для позначення заголовка шостого рівня і є найменш значущим. Синтаксис: <h1 З а го л о в о к 1-го у р о в н ж /hl > < h 2 > Заголовок 2-го piBHfl</h2>

<б6>Заголовок 6-го уровня</іі6> Тег, що закриває, обов'язковий. Заголовки дуже «люблять» пошукові системи, вони підвищують цінність тексту на веб-сторінці, який розташ овується всередині тегів <Н1>...<Н6>. З цієї причини

О*»-О

—

■ ■_______________ __

Рис. 16.11 Заголовок вікна програми-браузера

Google

Рис 16.10. Вікно збереження html-документа

218

Рис. 16.12. Вікно пошукової системи

ВЕБ-ДИЗАЙН Щ краще завжди використовувати ці теги, незважаю чи на те, що за допомогою стилів будь-який текст можна встановити великого розміру і зробити його заголовком. Є теги, що надають характер шрифту, зокрема тег <Ь>. Він встановлює жирне зображення шрифту. За необхідності цей тег використовується спільно з іншими тегами, які визначаю ть зображення тексту. Так само, як ви робили текст жирним шрифтом за допомогою тегу <Ь>, ви мо жете надати йому характер курсиву (italic) тегом <і>. Звичайно, «і» це скорочення від «italic», а також <и> - підкреслення (underline) тексту. Якщо ви хочете вивести текст bold і italic, це потрібно зробити так: < Ьхі> Т екст bold і italic< /ix/b> , а НЕ так: < Ьхі> Текст bold і italic< /bx/i> Відмінність у тому, що в першому випадку ми закрили перший тег в останню чергу. Так ми уникаємо конфліктів у браузері. € теги, які є такими, що одночасно відкривають і закривають. Ці теги містять команди, які не пов'язані з конкретними буквами, є ізольованими командами. При клад - тег <Ьг/>, який створює перехід до нового рядка. Цей тег записаний як гібрид тегів, що відкривають і закриваю ть, з пропуском і слешем: <Ьг />. У принципі його можна записувати < brx/br> , але це буде зайвим ускладненням. Також перенесення на інший рядок можна зробити за допомогою використан ня тегу < рх/р> . Цей тег потребує закриття, якщо використовує атрибут, напри клад, align. Інший такий тег - <hr /> - малює горизонтальну лінію ("hr" від "horizontal rule"). Для створення списків використовують теги, що також вимагають наявності тегу, що закриває: <ul>, <оІ> і <1і>. <ul> - скорочення від "unordered list / невпорядкований список" - вставляє значок кнопки для кожного елемента списку. <оІ> - скорочення від "ordered list / упорядкований список" - нумерує кожен елемент списку. Для створення елемента списку використовуйте тег <li> (“list item / елемент списку"). А т р и б у т и . Теги - це мітки, що вказую ть браузеру, як потрібно представляти

ваш веб-сайт. Наприклад, <Ьг/> інформує браузер, що потрібно зробити перехід на новий рядок. У деяких тегах можно вводити додаткову інформацію. Д од аткова інформація н ази вається а т р и б у т о м . Основна ч а сти н а т е г у н ази вається е л е м е н то м (наприклад, р у <р>). Таким чином, тег складається з елемента (наприклад <р>), або з елемента та одного або більше атрибутів (наприклад, <р style="background-color:#ffOOOO;">). Атрибути завжди записують усередині тегу, після них йде знак рівності та деталі атрибуту, які беруть у подвійні лапки. Крапка з комою після атрибуту застосовуєть ся для розділення команд різних стилів. Атрибути буваю ть різні. Перший атрибут, що ми почали вивчати, - це style/стиль. За допомогою цього атрибуту ви можете будувати відображення вашого веб-сайта. Наприклад, колір фону / background colour: <body style=”background-color:#ffOOOO;"> Такий код виведе в браузері сторінку червоного кольору.

ВЕБ-ДИЗАЙН Зверніть увагу, що деякі теги і атрибути використовують американський різ новид англійської мови, тобто color замість colour. Уважно використовувати саме такий варіант написання, як ви використовували в прикладах у цьому підручни ку, - інакше браузери не зможуть зрозуміти ваш код. Також не забувайте ставити подвійні лапки після атрибуту. У попередньому прикладі ми забезпечили виведення червоного фону кодом "#ff0000". Це код червоного кольору в так званому шістнадцятковому форматі (HEX). Кожному кольору відповідає своє шістнадцяткове число. Наприклад: Білий: #ffffff, Чорний: #000000 (нулі), Червоний: #ff0000, Синій: #0000ff, Зелений: #00ff00, Жовтий: #ffff00. Шістнадцятковий код кольору складається з # і шести цифр або букв. Є більше 1000 НЕХ-кодів, і часом не просто визначити, який Hex-код якому кольору відпо відає. Для зручності слід мати карту 216 найбільш поширених кодів кольору: 216 W eb Safe Colour Chart. Можна використовувати також англійські назви найбільш поширених кольорів (white, black, red, blue, green і yellow). У цій темі ми пригадаємо необхідну для дизайнерів-початківців технічну інфор мацію про найважливіші атрибути (табл. 16.1). Таблиця 16.1 Опис а т р и б у т ів т е г у <Н1>...<Н6> Атрибут/Опис

Атрибут A LIG N Опис: ви р івн ю вання заголовка тексту по краю

Атрибути тегу <body>: alink Опис: встановлю є колір активного посилання

А трибут A LIN K Опис: встановлю є колір активного заслання

Синтаксис. Аргументи

Синтаксис: <h1 align=»left |center |right |justify»>...</h1> Аргументи: left - вирівнювання заголовка по лівому краю; center - вирівнювання по центру; right - вирівнювання по правому краю; justify - вирівнювання по ширині (одночасно по правому і лівому краю). Цей аргумент працює лише для заголовка, довжина якого більше ніж один рядок Аргументи: background - задає фоновий малюнок на веб-сторінці; bgcolor - колір фону веб-сторінки; bgproperties - визначає, чи прокручувати фон спільно з текстом чи ні; bottommargin - відступ від нижнього краю вікна браузера до контенту; leftmargin - відступ по горизонталі від краю вікна браузера до контенту; link - колір посилань на веб-сторінці; scroll - встановлює, відображувати смуги прокручування чи ні; text - колір тексту в документі; topmargin - відступ від верхнього краю вікна браузера до контенту; vlink - колір відвіданих посилань Поточний колір посилання змінюється на активний, коли на посислання натискують курсором миші або виділяють її за допомогою клавіатури. Синтаксис: <body аІіпк=»цвет»>...</Ьогіу>

ВЕБ-ДИЗАЙН П р о д о в ж е н н я т а б л . 16.1

Атрибут/Опис

Атрибут BACKGROUND. Опис: визначає зображення, яке використовува тиметься як фо новий малю нок

Синтаксис. Аргументи

На відміну від звичайних зображень для фону не встановлюють ши рину і висоту, і він завжди відображається у натуральну величину з масштабом 100 %. Якщо малюнок за розміром менше вікна браузера, то картинка повторюється по горизонталі управо і вниз, вибудову ючись, як мозаїка. 3 цієї причини на місці стику фонових картинок можуть виникнути видимі перепади, помітні для відвідувачів сайту. При виборі фонового малюнка переконайтеся що забезпечений до статній контраст між ним і текстом веб-сторінки. Як фон дозволяється використовувати анімовані зображення у форматі GIF, але вони відво лікають увагу читачів. Синтаксис: <body background=»url»>...</body>. Аргументи: будь-яка допустима адреса зображення - можна вико ристовувати відносний або абсолютний шлях

Атрибут BGCOLOR. Опис: встановлю є колір фону вебсторінки Атрибут BGPROPERTIES. Опис: за зам овчу ванням ф оновий малюнок п рокру чується спільно 3 вмістом вебсторінки

Атрибут LEFTMARGIN. Опис: визначає відступ від лівого краю вікна браузера до коитенту веб-сторінки

Можна використовувати цей параметр спільно з background, дібрав ши колір фону близький до фонового малюнка. Синтаксис: cbody bgcolor=uBeT>...</body> Використовуючи параметр bgproperties можна зафіксувати фон на одному місці і, таким чином, змусити прокручуватися лише контент. Подібна якість веб-сторінки рідко застосовується для сайтів, тому для користувачів може здатися дивною і незвичною. Синтаксис: cbody bgproperties=»fixed»>...</body> Аргументи: є лише одне значення fixed, яке фіксує фон. Якщо по трібно, щоб фон не фіксувався, видаліть параметр bgproperties з тега <BODY> або встановіть у нього порожнє значення - «» Синтаксис: cbody leftmargin=»4noio»>...c/body> Аргументи: ціле додатне число, яке встановлює відступ у пікселах. Значення за замовчуванням: 10 пікселів для Windows і 8 пікселов для Macintosh. П р и м іт ка. Браузер Firefox не розуміє параметр leftmargin, для уста новки відступів у ньому використовують параметри marginwidth відступи по горизонталі і marginheight - відступи по вертикалі. Для завдання відступів від правого, нижнього і верхнього краю застосовуються, відповідно, параметри rightmargin bottommargin і topmargin

Атрибут LINK. Опис: встановлю є колір посилань, що ще не відвід

Синтаксис: cbody link=4BeT>...c/body> Значення за замовчуванням: #0000ff

увалися

221

ВЕБ-ДИЗАЙН Закінчення та б л . 16.1 Атрибут/Опис

Синтаксис. Аргументи

Атрибут SCROLL. Опис: парам етр scroll управляє наявністю смуг п рокручування у вікні браузера, коли вміст вебсторінки пере

Цей параметр працює лише в браузере Internet Explorer. Синтаксис: <body scroll=»yes | no»>...</body> Аргументи: yes - відображує смуги прокрутки, no - забороняє показ смуг прокрутки у вікні. Значення за замовчуванням: yes

вищ ує р озм ір поточного вікна

Кольори окремих елементів можна легко змінювати за допомогою стилів. Синтаксис: <body text=»UBeT»>...</body> Значення за замовчуванням:#000000. Для зміни характеристик шрифту, таких як розмір, колір і гарнітура є тег <FONT>. Атри бут TEXT. Синтаксис: <font>TeKcr</font>. Опис: встановлю є Тег, що закриває: обов'язковий. колір тексту, ви Атрибути: користовуваного color - встановлює колір тексту; на веб-сторінці за face - визначає гарнітуру шрифту; зам овчуванням size - задає розмір шрифту в умовних одиницях. Атрибут face застосовується для задавання гарнітури шрифтів, що використовуються для тексту. Назв шрифтів можна навести декілька, через кому. В цьому випадку, якщо перший вказаний шрифт не буде знайдений, браузер почне використовувати наступний за списком. Синтаксис <font face=»шpiфт1, шріфт2...»>...</к>т>

Універсальні шрифти: ■ serif - шрифти із зарубками (типу «антиква»); ■ типу Times; ■ sans-serif - рублені шрифти (шрифти без зарубок або гротески), типовий представник - Arial; ■ cursive - курсивні шрифти; ■ fantasy - декоративні шрифти; ■ monospace - шрифти, ширина кожного символу в яких однакова. Атрибут size задає розмір шрифту в умовних одиницях від 1 до 7. Середній роз мір, що використовується за замовчуванням взято за 3. Розмір шрифту можна вка зувати як абсолютною величиною (наприклад, size="4"), так і відносною (наприклад, size=”+1", size="-1"). В останньому випадку розмір змінюється щодо базового. На роз мір шрифту впливає не лише заданий параметр size, але і вибір гарнітури шрифту. Так, шрифт Arial має вигляд більший, ніж шрифт Times, а шрифт Verdana трохи більше шрифту Arial. Враховуйте цю особливість при виборі шрифту і його розмірів.

222

ВЕБ-ДИЗАЙН Синтаксис <font size="4Haio">...</font> Ціле число від 1 до 7 або зміна значення у більший або менший бік за допомо гою символів «+ »і «-». Таблиці використовують, коли вам необхідно показати "табличні дані", напри клад, інформацію, логічно впорядковану в стовпці та рядки. Побудова таблиць у HTML може здатися складною на перший погляд, але, якщо ви розберетесь, все виявиться строго логічним - як і все у HTML. Для вставлення таблиць використовую ться три базових теги: ■ <table> - початок і кінець таблиці. ■ <tr> - “table row / рядок таблиці", починає і закінчує горизонтальний рядок комірок. ■ <td> - скорочення від "table data / табличні дані". Цей тег починає і закінчує кожне вічко ряду таблиці. Все просто і логічно. Таблиця починається з <table>, потім іде <tr>, показуючи на початок нового рядку. Рядок поділено на дві комірки: <td>Cell 1</td> і <td>Cell 2</td>. Рядок за кривається </tr>, і відразу починається новий ряд <tr>. У новому рядку також дві комірки. Таблиця закривається </table>. <table>

У браузері це матиме такий вигляд:

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

Cell 7

Cell 8

Cell 9

Cell 10

c e im

C ell! 2

Атрибут border використовую ть для налаштування товщини меж таблиці, яка задається в пікселях. Можна вказувати розмір всієї таблиці в пікселях або у відсо тках залежно від розміру екрана. <table border=»1» width=»30%»> Цей приклад буде відображений у браузері як таблиця шириною в ЗО % екрана. При створенні таблиць використовуйте два атрибути: ■ colspan ■ rowspan.

223

ВЕБ-ДИЗАЙН

Colspan - скорочення від "colum n span / вміст стовпців”. Colspan використову ється в тегу <td> для введення того, скільки стовбців вміщ ується у цю комірку. Rowspan встановлює, скільки рядків вміщ ується у цю комірка.

Графічні, динамічні, аудіо- та відеооб'єкти у HTML-документі. Структура навігації сайта. Для графічного оформлення веб-сторінки необхідно повідомити браузеру, що треба вставити зображення/image (im g) і вказати його розміщення (src, скорочення для "source"). <img src="picture.jpg" alt="school' /> Зверніть увагу, що тег img не потребує наявності тегу, що закриває. Як і <Ьг/>, це команда не пов'язана з буквеним текстом. "picture.jpg" - назва файла зображення, ".jpg" - розширення файла, тип зобра ження. Як ".htm l" вказує, що файл є Htm l-документом, так і "jp g " повідомляє браузе ру, що файл є зображенням. Є три типи файлів зображень, які можна вставити на ваші сторінки (табл. 16.2). Таблиця 16.2 Типи ф айлів зображень для ви кор и стан н я на веб-сторінки № з/п

Тип файла

Характеристика файла

GIF (Graphics Interchange Format)

Gif-зображення зазвичай найкраще для графіки і малюнків. Gif-зображення містять лише до 256 кольорів. Формат GIF краще стискує прості зображення, ніж JPEG

JPG /JPEG (Joint Photographic Experts Group)

JPEG - для фотографій, до мільйонів кольорів. JPEG оптимізований під складніші зображення

PNG (Portable Network Graphics)

Формат PNG за багатьма параметрами перевершує JPEG і GIF: мільйони кольорів і ефективне стискання

П а м ' я т а й т е ! Чим вище стискання, тим менше файл зображення, тим швид ше завантажується ваша сторінка. Як ви, ймовірно, знаєте з власного досвіду, ко ристувачі не люблять «важкі» сторінки. Традиційно формати GIF і JPEG є переважними типами, але останнім часом де далі популярнішим стає формат PNG (насамперед через витрати формату GIF). Можна легко вставляти зображення, розташовані в інших папках або навіть на інших веб-сайтах: <img src="images/logo.png">

або

<img src="http://www.

Shvedova.net/logo.png"> Атрибут ait використовую ть для альтернативного опису зображення, якщо з якихось причин його не показано користувачеві. Це особливо стосується користу вачів з ослабленим зором або якщо сторінка дуже повільно завантажується. Отже, завжди потрібно використовувати атрибут alt. Деякі браузери відображають текст цього атрибуту в невеликому боксі при наведенні покажчика миші на зображення. Зверніть увагу, що при використанні атрибуту alt метою є надання альтернативного опису зображення. Атрибут alt не слід використовувати для створення повідомлень, що спливають, оскільки тоді ко-

224

■

ВЕБ-ДИЗАЙН

ристувачі зі слабким зором будуть вимушені слухати повідомлення, не знаючи, що

зображено на картинці. Атрибут title можна використовувати для короткого опису зображення. Два інших важливих атрибути - width і height. Атрибути width і height можна використовувати для установлення ширини і висоти зображення відповідно. Зна чення вказується в пікселях. Піксель - це одиниця для виміру роздільної здатності екрана. (Звичайна роздільна здатність - 800 х 600 і 1024 х 768 пікселів.) На відміну від сантиметрів, пікселі є відносними одиницями, що залежать від роздільної здатністі певного екрана. Якщо не встановити width і height зображення буде показано у реальному розмірі.

Посилання Гіперпосилання - це засіб для налагодження зв'язку між документами. Якщо у файл встави ти гіперпосилання на інші файли, т о можна отр им ати доступ від разу до двох і більше файлів, не вставляючи їх один в один. Гіперпосилання - це виконаний іншим кольором об'єкт (підкреслений т е к с т чи картинка), який м іс ти ть адресу іншого файла. Клацнувши раз на гіперпосиланні, можна відкрити потрібний файл. Посилання з page1.html на page2.html: <а href="page2.htmr>KnagHiTb тут для переходу на раде 2</а>. Якщо раде 2 розміщена у підпапці “subfolder", посилання матиме такий вигляд: <а href="subfolder/page2.html">. Клацніть тут для переходу на раде 2</а> У зворотний бік посилання зі сторінки раде 2 (у підпапці subfolder) на page 1 буде таким: <а href=".7page1 .html”>. Посилання на раде 1</а>. Поєднання “J " вказує на папку, розташ овану на один рівень вище від розташу вання цього файла, з якого робиться посилання. Також ви можете також вказати на два рівні вище або більше. Посилання можливі не тільки текстові, а й графічні. Зображення можуть бути посиланнями: <а href=»http://w w w .Shvedova.net"xim g src="logo.png”x / a >

Посилання всередині однієї сторінки. Можна також створювати посиланняпереходи всередині самої сторінки - наприклад, зміст із посиланнями на глави. Все, що вам необхідно, - використовувати атрибут id і символ Використовуйте атрибут id для маркування елемента, на який ви хочете зроби ти перехід. Наприклад: <h1 id=»heading1»>heading 1</h 1> Тепер можна створити посилання на цей елемент за допомогою знака «#» в атрибуті посилання. Знак «#» повідомляє браузеру, що це перехід на тій самій сторінці. Після «#» має бути id тегу, на який виконується перехід. Наприклад: <а href=»#heading1»>nocnnaHHfl на heading 1</а> Можна також зробити посилання на e-mail-адресу майже так само, як у по силанні на документ: <а href=»m ailto:nobody@bigm ir.net"> Відправити e-mail на nobody@bigmir.net </а>

225

ВЕБ-ДИЗАЙН

Єдина особливість посиланнях на e-mail і на файл полягає в тому, що замість адреси документа, ви записуєте mailto: з подальшою адресою електронної пошти/ e-mail. При клацанні по посиланню відкривається програма за замовчуванням для роботи з електронною поштою з адресою, вже записаною в рядку адреси. Звер ніть увагу, що ця функція працюватиме лише в тому випадку, якщ о е-таіі-програма встановлена на вашому комп'ютері. Таблиця 16.3 Д одавання звуку т а динамічних ефектів на ст орінки сайт а Атрибут/Опис

Тег <ВС50и№ > визначає музичний файл, який п р о граватиметься на веб-сторінці при її відкритті

Тег <МАИОиЕЕ> створю є рядок, щ о біжить, на сторінці

Синтаксис. Аргументи

Гучність, тривалість звучання музики та інші характеристики визначаються за допомогою параметрів тегу. Цей тег має розмі щуватися лише в контейнері <HEAD>. Ter <BGSOUND> не входить до специфікації HTML і при його використанні код не пройде валідацію. До того ж користувачі, як правило, негативно ставляться до музики, яка грає на сайті, тому використовуйте цю можливість з обережністю і за потреби. Синтаксис <head> <bgsound ...> </head> Параметри: Balance - управляє балансом звуку між правою і лівою колон ками; loop - встановлює, скільки разів програвати музичний файл, src - шлях до музичного файла; Volume - задає гучність звучання музики. Тег, що закриває, не обов'язковий Насправді, вміст контейнера <MARQUEE> не обмежується ряд ками і дає моживість рухати будь-які елементи веб-сторінки зображення, текст, таблиці, елементи форм і т. ін. Переміщення можна задати не лише по горизонталі, а й по вертикалі, в цьому випадку вказуються розміри полоси, в якій відбуватиметься рух. Спочатку тег <MARQUEE> був призначений лише для браузера Internet Explorer, але сучасні версії інших браузерів (Firefox 1.0, Netscape 7, Opera 7 і новіші) також розуміють і підтримують цей тег. Синтаксис <marquee>...</marquee> Параметри: behavior - задає тип руху вмісту контейнера <MARQUEE>; bgcolor - колір фону; direction - показує напрям руху вмісту контейнера <MARQUEE>; height - висота області прокручування; hspace - горизонтальні поля довкола контенту; loop - задає скільки разів прокручуватиметься вміст; Scrollamount - швидкість руху контенту

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

226

ВЕБ-ДИЗАЙН

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

Тому є редактори htm l-програми, створення сайта без яких неможливо. Які редак тори html буваю ть? Що можна зробити з їх допомогою? HTML-редактори можна поділити на дві умовні основні групи: т е к с т о в і і в і зуальні. У текстових htm l-редакторах можна писати й правити htm l-код вручну. А за допомогою візуальних редакторів ви можете, не знаючи мову html, створювати веб-сторінки, використовуючи візуалізовані компоненти. Таблиця 16.4 HTML-редактори Умовні основні групи текстові

візуальні

У текстових html-редакторах можна писати й правити html-код вручну

За допомогою візуальних редакторів ви можете, не знаючи мову html, ство рювати веб-сторінки, використовуючи візуалізовані компоненти

Блокнот - звичай ний вбудований в ОС Windows текстовий редактор «Блокнот» (Notepad). Для того щоб написати в блокноті html-код веб-сторінки, не потрібно жодних додаткових інструмен тів - досить запустити блокнот, написати в ньому html-код і збе регти документ із роз ширенням .html. Однак, щоб писати й редагувати html-код у блокноті, необхідно дуже добре знати мову html і уважно стежити за написанням коду, тому що написання великих обсягів коду вручну підвищує ймо вірність виникнення помилок

Notepad ++ - роз ширена версія зви чайного блокнота, що постачається окремо й зазвичай безкоштовна. В Notepad ++ htmlтеги підсвічуються кольоровим шриф том, і розробник може візуально відрізнити код від основного тексту сторінки. Тому ймовірні помилки й неточності в коді легше виявити, однак, так само як і при роботі у зви чайному блокноті, в Notepad ++ по трібне гарне знання мови html

Microsoft Frontpage - html-редактор з пакета MS Office. Microsoft FrontPage є ві зуальним редактором (WYSIWYG - What You See Is What You Get - що бачиш, то й отримаєш), але в Microsoft FrontPage код можна також редагувати вручну. Інтерфейс Microsoft FrontPage схожий на інтерфейс Microsoft Word, звичний для більшості користувачів, тому дуже зручний для новачків у веб-дизайні. В Microsoft FrontPage для роботи доступні три режими: Normal, HTML і Preview. У режимі «Design» користувач може реда гувати текст і картинки як у звичайному текстовому файлі. Засоби редагування в Microsoft FrontPage дають можливість легко форматувати текст, додавати та блиці (навіть таблиці MS Excel!) і малюнки, створювати марковані й нумеровані списки користувачам без знань мови html. У режимах «Split» та “Code" користу вач може переглядати й редагувати код веб-сторінки, що створюється, а в режимі «Preview», може побачити, який вигляд матиме ця веб-сторінка в браузері

СВІТ ПРОФЕСІЙ HTML-верстальник, редактор сайта, адміністратор сайта, W eb-програміст.

227

ВЕБ-ДИЗАЙН П Е Р Е Л ІК О С Н О В Н И Х П О Н Я Т Ь ТА Т Е Р М ІН ІВ

У навчальному матеріалі параграфа: гіпертекстові технології; гіпертекстова система; історія розвитку гіпертекстових технологій; теорія автоматизації; складові мови розмітки гіпертексту HTML; HTML-редактори.

У словнику-довіднику: HTML (Hypertext Markup Language); JAVA; URL (Uni form Resource Locator); веб-сайт (W eb Site); веб-сторінка (Web-page); гіпертекст (Hypertext); автоматизація сайта; гіперпосилання (Hyperlink); браузер (Browser); вбу дований шрифт; відвідуваність; дизайн (W eb Design); лінк (Link); Інтернет (Internet); портал (W eb Portal); сайт (W eb Site); сервер мережі Інтернет; тег (Tag); фрейм.

П Р А К Т И Ч Н А Р О Б О Т А 16 С т в о р е н н я в л а с н о ї в е б -с т о р ін к и Завдання

на

вибір.

Завдання 1. Створити власну веб-сторінку за вивченими тегами: <i>ltalic</i> <5таІІ>Зменшений ш р и ф тс А та ІБ <br /> переклад рядка <hr/> Горизонтальна лінія <иІ>Список<иІ> <оІ>Впорядкований список<оІ> <Іі>Елемент списку</1і>

Послідовність виконання роботи: У програмі Notepad (Блокнот) створіть наступний документ: <html> <head> <Ьбе>Шрифти<ЛШе> </head> <BODY bgcolor=»#FF00FF»>* <Н1>Шрифтове виділення фрагментів тексту</Н1> <Р>Фрагменти тексту можна вьіділяти <В>жирним </В>або <І>курсивом (з нахилом) </І>шрифтом.<Ьг /> <и>А ця фраза буде підкресленою </их/р> <hr/> <Р> Крім того, можна включати в тексті фрагменти з фіксованою шириною символу <br /> <ТТ>(імітація друкарської машинки)</ТТх/Р> Розмір та колір шрифту задасться так:<Ьг /> <small>pi букви маленькі </small> <big>a ці великі.</Ьід> <br />

228

__________________________________________________________________

ВЕБ-ДИЗАЙН

<Ьхи>Цей текст жирний та підкреслений </их/Ь> <Ьг/>

Це впорядкований список. Перед кожним елементом списку стоїть номер. По чатковий номер -333.<Ьг/> <оІ Іуре=1 5ІаП=333>

<ІІ>Елемент <ІІ>Елемент <ІІ>Елемент <Іі>Елемент <Іі>Елемент <Іі>Елемент <Іі>Елемент </оІ> <Р>

Це невпорядкований маркований список. Він демонструє різні маркери перед елементами списку.<Ьг/> <иі>

<Іі>Елемент <Іі>Елемент <Іі>Елемент <ІІ їуре=сігсіе>Елемент <Іі Іуре=здиаге>Елемент </иІ> <Ьг/> <АхВ>Термін</ВхЬг>

<сІсі><и>Назва терміна</ІІ>. Якщо назва довга, тоді після заповнення ряд ка вікна текст переходить на новий рядок. Текст назви виділяється в основному тексті документу відступом по лівому краю. Кожний термін починається з нового рядка.<Ьг/> <сКхВ>Термін</ВхЬг />

ВЕБ-ДИЗАЙН <dd><U>Ha3Ba терміна </U>. Якщо назва довга, то після заповненням рядка вікна текст переходить на новий рядок. Текст назви виділяється в основному тексті документу відступом по лівому краю. Кожний термін починається з нового рядка. < /d lx b r /> </body> </html>

Завдання 2. Створити W EB-сторінку на задану тему. Мета. Набути навичок роботи з гіпертекстовою навігацією, оформленням сторінки, форматуванням тексту. Послідовніст ь виконання робот и: 1. Задати як тло файл fon.jpg, створити заголовок, провести горизональну лінію. 2. Створити три текстові абзаци,

з них

два - у вигляді списків двох видів. Провести лінію. 3. Створити додатковий html - файл, що містить деяку таблицю. 4. Вставити на сторінку графічний файл lake.jpg. 5. Створити гіперпосилання-текст на гра фічний файл evening.jpg. 6.

Створити

гіперпосилання-картинку

(файл butterfly.jpg) на htm l-файл з таблицею.

evenmg.jpg

7. У кінці сторінки реалізувати посилання на її початок. 8. Застосувати динамічний ефект до заго ловка. Текст для сторінки: Для пункту 2.

Курс Web-дизайну Для

створення

Web-сторінок

Web-

дизайнери ви кор и сто вую ть гіп ер те ксто ві редактори. Сучасні редактори

(Frontpage,

lake.jpg

DreamWeaver т а ін.) д аю ть змогу ство р ю ва т и веб-сторінки м етодом конструю вання без засто сування кодів мови HTML.

При вивченні теми,, Web-дизайн" нам бу дуть необхідні програми: и графічний редактор; ш візуальні редактори HTML; ш програми-броузери;

я редактори для р о б о ти з анімацією. butterfly.jpg

fon.jpg

ВЕБ-ДИЗАЙН

Основні теми, які ми будемо проходити, щоб навчитися поєною мірою пра цювати з Web-сторінками: 1. Мова р о зм ітки гіп е р те к сту HTML. 2. Редактори для р о б о ти з HTML. 3. Графіка для WEB. 4. Динамічний HTML. 5. М ова JavaScript. 6. Анімація. Технологія Flash.

ТВО РЧІ ЗАВДАННЯ

для закріплення навчального матеріалу теми заняття

Скласти проект-сайт на вільну, обрану учнем проблемну тему. 1. Інформаційно в проекті треба розкрити обрану тему, надаючи на сторінках структуровану послідовну інформацію. 2. З погляду дизайну проект-сайт має бути власноруч оздоблений за всіма прави лами та нормами веб-дизайну. 3. Структурно сайт має складатися з головної сторінки та не менше ніжз чотирьох додаткових сторінок. Естетичні вимоги до сайта: ■ Гармонійне поєднання зображувальних та шрифтових елементів композиції. ■ Виразність і доречність використання зображувальних та шрифтових еле ментів композиції. ■ Гармонійне поєднання кольору з елементами композиції. Технічні вимоги до сайта: ■ Сайт повинен мати: зручну навігацію, засіб зв'язку з користувачами. ■ Формат сторінок має бути розрахований на роздільну здатність екрана. ■ Завантажуваний файл має містити назву index.html. ■ Назви файлів повинні містити тільки англійські літери. э

КО НТРО ЛЬНІ ЗАПИТАННЯ

для перевірки власних навчальних досягнень за темою заняття

1. Щотаке гіперпосилання? 2. Щотаке гіпертекст? 3. Щотаке веб-документ? 4. Для чого призначена програма-броузер? 5. Що таке web-вузол (веб-сайт)? 6. Яка структура простого веб-документа? 7. Для чого призначена мова HTML? 8. Щотаке тег і які є теги? 9. Які параметри може мати тег BODY? 10. Який тег позначає початок нового абзацу? 11. Якітеги позначають товстий, курсивний і підкреслений шрифти? 231

ВЕБ-ДИЗАЙН

12. Які теги призначені для вирівнювання елементів на сторінці? 13. Яке призначення тега FONT? 14. Яких значень можуть набувати параметри тега FONT? 15. Які є типи списків? 16. Як створити ненумерованийсписок? 17. Як створити нумерований список? 18. Як створити список означень? 19. Яке призначення тегаTABLE? 20. Які параметри може мати тегTABLE? 21. Які теги формують у таблиці рядки, клітинки-заголовки і звичайні клітинки? 22. Як у таблиці об'єднати декілька клітинок в одну? 23. Який параметр використовують для вирівнювання елементів? 24. Яка особливість пари тегів? 25. Як вставити графічне зображення у веб-сторінку? 26. Як вставити відеофільм у веб-сторінку? 27. Які параметри може мати тег IMG? 28. За допомогою якого тегу вставляють гіперпосилання? 29. Як деяке графічне зображення зробити гіперпосиланням? 30. Які є види посилань у межах одної веб-сторінки? 31. Як вставити у веб-документ звук чи відеозображення? 32. Як запустити звук одночасно з відкриванням сторінки? 33. Як створити динамічний ефект рухомого тексту? 34. Які ви знаєте параметри рухомого тексту?

§17. Анімація. Flash-технології 1. Н азвіть передумови появи анімаційних комп'ютерних технологій. 2. У чому полягає користь використання анімаціїу угеЬ-дизайні? 3. Як знайти «золоту середину» у використанні анімації на меЬ-сторінках? Як не перевантажити сторінки сайта анімаційними ефектами? Анімація (з лат. anim a - душа і похідного французького anim ation - оживлен ня) або мультиплікація (з лат. m ultiplicatio - розмноження, збільш ення, зростан ня) - вид кіномистецтва, твори якого створю ю ться шляхом зйомки послідовних фаз руху намальованих (графічна мультиплікація) або об'ємних (об'ємна муль типлікація) об'єктів. Ці твори називаю ть анімаційними або мультиплікаційними фільмами. Перші мальовані фільми були випущені в 1908 р. у Франції, об'ємні - в 1911 р. у Росії. Перші мультиплікаційні фільми в Україні з'явилися у 1927 р. у центральній муль типлікаційній майстерні в Києві: художник В.Дев'ятін зробив мультиплікаційний од ночастинний фільм «Українізація» про вивчення української мови, а В. Леванжовський поставив «Казку про солом'яного бичка», поклавши в основу сценарію сюжет популярної казки.

232

Принцип анімації знайшли задовго до винаходу братами Люм'єр кінематогра фу. Бельгійський фізик Жозеф Плато, австрійський професор-геометр Симон фон Штампфер та інші вчені і винахідники використовували для відтворення на екрані зображень, що рухались внаслідок обертання диска чи стрічки з малюнками, систе мудзеркал і джерело світла - ліхтар. Анімація - це серія дій, що становлять послідовність зміни певних картинок. Кожнатака картинка відображує частину цілої дії в певний момент. Коли ці картин кипрокручуються та переглядаються на великій швидкості, вони створюють ілюзію того, що рухаються у постійній послідовності. Використання анімації у \л/еЬ-дизайні не повинно перетворюватися на демон страцію можливостей \«еЬ-студії. Анімація (у тому числі флеш-анімация) у ууєЬдизайні має використовуватися лишетам, де завдання не вирішується іншими засо бами. Не слід використовувати анімацію у \«еЬ-дизайні тільки для прикраси сайта. Особливо треба уникати застосування анімації на кожній сторінці и/еЬ-сайта - це призводить до наростаючого роздратування відвідувача сайта. І, як наслідок, від відувачі якнайшвидше покинуть такий \л?еЬ-сайт. Нещодавно анімація у шеЬ-дизайні була дуже популярна. Вважалося, що велика кількість анімованих елементів при розробці \«еЬ-дизайну є показни ком кількості праці, вкладеної в розробку сайта. Створити гарну анімовану картинку дуже непросто. Крім того, що вона має бути візуально привабливою, її «вага», тобто розмір, не повинна бути дуже великою. Інакше вона буде занад то довго завантажуватися - користувач просто не буде чекати на закінчення завантаження. Аналогічна ситуація склалася і з флеш-роліками -такою самою анімацією, але виконаною на сучасному рівні. Безумовно, флеш-роліки мають дуже ефектний ви гляд, і для створення презентаційних сайтів, розрахованих на користувачів з якіс нимилініями зв'язку, флеш-анімация у \меЬ-дизайні просто незамінна. Але давайте спробуємо з'ясувати доцільність використання анімованих картинок на сайтах інформаційної спрямованості. Безумовно, рухомі картинки

Рис. 17.1. Огюст (зліва) т а ЛуїЛюм'єр

Рис. 17.2. Жозеф Плато

233

ВЕБ-ДИЗАЙН приваблюють значно більше уваги, ніж звичайні, статичні. Відповідно користу вач гірше сприймає інший вміст сторінки, оскільки основна його увага приді ляється саме рухомим картинкам. Коріння цього явища криється в далекому минулому. Тоді периферійний зір, що гостро реагує на рухомий предмет, часто врятовував життя людині, наприклад, коли на неї полював якийсь звір. У сучас ному світі цей інстинкт для нас не такий важливий (хоч і, безперечно, корисний, особливо на дорозі), проте він присутній у кожному з нас: ми чуттєво реагуємо на рух, що уловлюється периферійним зором. Тому, якщо ми читаємо текст на сторінці, а в кутку «рухається» маленька картинка, це нас дуже відволікає, часто навіть дратує. Водночас використання анімації у web-дизайні в деяких випадках не лише виправдане, а й вельми корисне. Але, перш ніж почати розробку анімації, слід поставити питання, чи можна того самого ефекту у web-дизайні досягти і без ані мації. Дуже популярним останнім часом вважається прийом у web-дизайні, що надає можливість користувачеві переглядати серію зображень, не перегортаючи при цьому web-сторінки. Як правило, слайд-шоу забезпечується якимось «пультом ке рування», який дає можливість як переглядати зображення по одній картинці, так і запустити процес безперервного показу ілюстрацій, що змінюються. Цей прийом можна зарахувати до анімації лише з деякою натяжкою. Незважаючи на критику анімації, інколи у web-дизайні анімацію можна і по трібно використовувати для залучення уваги. Але важливо, як її використовува ти. Якщо, наприклад, ми хочемо виділити в меню назву сторінки, на якій пере буває користувач, то можемо поставити миготливу кнопку. Але «мигнути» вона має лише кілька разів, щоб привернути увагу користувача, далі їй досить трохи змінити колір. Або, наприклад, текст, що спливає. Якщо якесь важливе повідомлення зро блене у вигляді тексту, що спливає з-за краю екрана, - це цілком розумний при йому web-дизайні для залучення уваги. Але текст повинен «виплисти» лише один раз, тільки для того, щоб користувач звернув на нього увагу, а далі він залишаєть ся на місці. Ще є флеш-анімация. Це дуже потужний інструмент, що дає змогу робити webсайти, які нелише мають чудовий вигляд, а йзручні для користувача. Флеш-анімація це анімація, що застосовується у web-технологіях, для розробки анімаційних роли ків, флешзаставок, флешсайтів, презентацій, рекламних блоків (флеш-банер) тощо. Поширеним середовищем розробки як флеш-анімації, так і анімованих додатків є програмний продукт фірми Adobe - Adobe Flash MX. Якщо анімацію застосовувати з конкретною метою і не зловживати нею, то це цілком прийнятно. Проблеми виникають, коли анімовані зображення використо вують «просто так»: щоб показати, що web-дизайнер вміє це робити, або застосо вують їх у такій кількості, що користувач без роздратування не може вже дивитися на них, навіть якщо ці картинки - справжні витвори мистецтва. Важливо пам'ятати: все-таки користувач зайшов на ваш web-сайтотримати інформацію, а не милувати ся майстерністю web-дизайнера.

ВЕБ-ДИЗАЙН

Анімоване зображення. GIF-анімація (ImageReady). Програма Image Ready постачається разом з Photoshop і використовується для підготовки графіки для Webта створення анімованого зображення. Слід зазначити, що малювання в Image Ready неназвеш зручним, але створення анімації і збереження файлів у різнихфор матах, орієнтованих на Web, управління їхстисненням - його «коник». Функція Safe for Web безпосередньо пов'язана з Image Ready. Image Ready, як правило, використовують лише для анімації, що пов'язано зі специфікою можливостей цих застосувань: Photoshop для підготовки макетів Image Ready для підготовки їх публікації на web-сайті. Отже, запускаємо Image Ready і бачимо його робоче вікно. Головна палітра, з якою намдоведеться працювати, - це Animation (рис. 17.3). Під номером 1 - перший фрейм. На ньому зображення, яке ви зробили в про грамі Photoshop перед переданням його в Image Ready. (Чому «як правило»? Тому, щови можете вільно переміщати фрейми, як і шари в палітрі Layers.) Номером2 по значений активний фрейм, тобто той, з яким ви працює, він буде виділений синім, або сірим, або ще яким-небудь кольором залежно від використовуваної колірної схеми у вашій операційній системі. Також цей фрейм є додатковим, тобто отрима нимза допомогоюдублювання якого-небудь з доступних фреймів. Підномером 3 розташована опція, що надає можливість контролювати, чи буде ваша анімація програватися постійно або вона буде відтворена лише один раз. У першому випадку слід вибрати пункт Forever, у другому - Once, а тим, кого такий стандарт не влаштовує, розробники пропонують опцію Other..., що надає можли вість встановити кількість відтворень анімації самостійно. Номер4 - опція управляє проміжком часу, протягом якого фрейм відображува тиметься на екрані. При значенні 0sec, фреймзникне практично миттєво, і сама ані мація матиме плавніший вигляд. Якщо вам знадобитися створити паузу на якомунебудьфреймі, просто виберіть зі списку потрібне значення в секундах або задайте свій проміжок часу, позначивши пункт Other... Часто потрібно встановлювати одне і те саме значення в секундах для декіль кох фреймів, тоді можна звичайно вибирати кожен фрейм окремо і задавати для нього необхідне значення, але якщо таких фреймів 40- потрібно, утримуючи клаві шу Shift, клацнути спочатку на першому фреймі, а потім на останньому, тим самим виділивши потрібні фрейми для роботи, а потім змінити в одного з фреймів час його відображення. Номер 6- «розмноження» вибраного фрейму із застосуванням ефекту загасан ня - плавного переходу, кому як більше подобатися. Номер 7- кнопка у ви гляді чистого аркуша па перу, яку ви не раз могли бачити при роботі з палі трами, вона завжди ви конує функцію створення чогось нового: у палітрі Layers - це створення ноРис. 17.3

235 І

ВЕБ-ДИЗАЙН вого шару, в Channel - нового каналу, Styles - нового стилю. Тут ця кнопка від повідає за дублювання фрейма. Тобто, якщо у вас є три фрейми, і ви зараз на другому, то після натиснення на цю кнопку буде створена копія фрейма під но мером 2. Номер 8 - тут, напевно, можна обійтися без коментарів, ви напевно здогадали ся, що це кнопка видалення вибраного фрейма. Номер 9- це кнопка виклику додаткового меню палітри Animation, за допомо гою якого ви можете виконувати практично всі дії, в яких є кнопки, плюс декілька додаткових. У будь-якому фреймі ви можете робити ті зміни, які визнаєте потрібними. Щоб бути впевненим у тому, що зміни відбуваються лише в активному фреймі, а не в усіх, слід відключити опцію Propagate Frame 1Changes на будь-якому шарі, який є частиною анімації, бере участь у ній (рис. 17.4). Найпростіший спосіб зробити анімацію - це створити окремі зображення для кожного фрейма. Такий спосіб дає можливість забезпечити будь-який ефект, але в цьому випадку вамдоведеться витрачати час, щоб промальовувати кожну дію, та й у принципі важко промальовувати окремі фрейми і продумувати їх розташування заздалегідь. Проте деякі ефекти вимагають створення саме пофреймової анімації. Спочатку розглянемо саме цютехніку. Найпростіший приклад такого роду анімації - створення тексту, що друку ється. Почнемо зі створення зображення. Великого значення не має, чи будете ви його відразу створювати в Image Ready або спочатку у Photoshop, в останньому ви падку після закінчення роботи треба натиснути клавіші Ctrl +shift +mдля передання файла в Image Ready. Почнемо роботу у Photoshop. 1. Створюємо нове зображення, роз міром, наприклад, 200 х 100 пікселів. Скидаємо кольори за замовчуванням (клавіша D), потім заповнюємо чорним кольором єдиний доступний фоновий шар, за допомогою клавіатурного поєд нання Alt +backspace. 2. Тепер потрібно надрукувати текст. Натискайте X для того, щоб поміняти міс цями колір переднього плану і колір ма лювання. Колір першого плану має бути білий. Натискаємо клавішу Т, вибираємо гарнітуру шрифту, його розмір, і друку ємо текст. Вибираємо шрифт Arial Black, розмір 14 pt. Дублюємо текстовий шар, натискаючи Ctrl +j або за допомогою ко манди Layer >Duplicate layer. Задаємо не прозорість шару (Opacity) 50%. 236

ВЕБ-ДИЗАЙН

Отже, ми маємо три шари: фоновий, текстовий з непрозорістю 100 % і тексто вий з непрозорістю 50%. 3. Шар з непрозорістюЮО % переводимо у растрове зображення. Зробити це можна як мінімум двома способами: або у палітрі Layers клацнути по шару правою кнопкоюмиші, з контекстного менювибрати рядок Rasterize type, або з рядку меню виконати команду Layer >Rasterize >Layer (або Type). 4. Теперобираємо інструмент Rectangular Marquee, виділяємо першу букву і на тискаємоCtrl +х(Edit >Cut) для виконання операції переміщення виділеноїділянки в буфер обміну. Потім натискаємо Ctrl +v (Edit >Paste) для вставлення вмісту буфе ра обміну в новий шар, який буде створений автоматично. 5. Як бачите, після цієї операції буква розташовується зовсім не в тому місці, де їй належить бути, її треба перемістити. Саме тому створена копія шару з текстом зі зміненою непрозорістю - щоб отримати орієнтир. Отже, переміщуємо за допомо гоюінструменту Move букву в належне місце. 6. Виконуємо аналогічну операцію з буквами, що залишилися. 7. Після закінчення видаляємо шар з малою непрозорістю або відключаємо його видимість, він нам більше не знадобиться. Перевіряємо, щоб усі букви роз містилися на окремих шарах. 8. Натискаємо Ctrl +shift +mдля передання файла в Image Ready. Тепер відклю чаємо опцію Propagate Frame 1Changes, не забудьте лише, що її слід відключити у всіх шарів. Тепер наше завдання полягатиме в тому, щоб створювати окремі фрейми, по стійно підключаючи видимість шару з відповідною буквою. Для найпершого фрей ма слід відключити видимість усіх шарів з буквами (видимість відключається кла цанням лівою кнопкою миші по оку в палітрі Layers). Панель анімації цей час має вигляд, як на рис. 17.5. 9. Зробіть активним першим фрейм і одночасно увімикніть видимість шару з першою буквою. Потім виберіть другий фрейм і увімкніть видимість шару з пер шоюі шару здругоюбуквами і т.д. Потрібно виконати аналогічну операціюдля всіх фреймів, що залишилися. 10. Тепер трохи модифікуємо напис. Цього разу можна не переходити до ро боти з Photoshop. Спершу, дублюємо перший фрейм, і переміщуємо його копію за допомогою миші на першу позицію. З панелі інструментів виберіть Pencil і нама люйте білу горизонтальну лінію на новому шарі (Ctrl +shift +п) подібно до тієї, яку ви не раз могли бачити в MS-DOS, - курсор.

Рис. 17.5

237

ВЕБ-ДИЗАЙН 11. Вимкніть видимість шару з першою буквою. Вона нам була потрібна, щоб правильно розташувати курсор. Знову зробіть копію фрейма, тепер уже шару з кур сором операційної системи MS-DOS. Вимкніть видимість шару з курсором. Тепер зробіть копію шару, в якому курсор відображається. Помістіть його на третю по зицію, і, нарешті, створіть копію шару без курсора, поставивши його на четверту позицію. 12. Відключіть у цих шарів опцію Propagate Frame 1 Changes, інакше вони так і залиш атимуться доти, доки наш напис друкуватиметься. Ці чотири фрейми мають залишитися виділеними. 13. Натискайте кнопку дублювання. У палітрі Ainim ation всі виділені фрейми дублюються, виділіть їх і перемістіть у самий кінець. Як ви вже зрозуміли, після того, як напис друкуватиметься, курсор також має блимати. Поки що курсор явно не в тому місці, де б нам хотілося. Тому озброюємося інструментом M ove і переміщуємо. Єдиний неприємний момент полягатиме в тому, що для кожного з чотирьох дуб льованих фреймів доведеться включати видимість шарів з текстом, інакше курсор так і блиматиме «в гордій самоті». Проведемо ще одну модифікацію. Тепер у нас спочатку блимає курсор, потім друкується напис, далі курсор знову блимає і все починається спочатку. Давайте зробимо так, щоб напис ще і стирався у зворотний бік. 14. Виділяємо всі фрейми, у яких видимий лише напис (без курсора) і, натис нувши кнопку дублювання, перемістимо ці фрейми в кінець списку. 15. Клацаємо по кнопці виклику додаткового меню палітри (цифра 9) і виби раємо рядок Reverse Frames, тим самим відобразивши всі фрейми, тобто розташу вавши їх у зворотному порядку. Можна також зробити стирання букв у зворотному порядку, вимикаючи видимість шарів із буквами у зворотному порядку в дубльова них (але не відображених) шарах. Загалом варіантів може бути багато, все залежить від ваш ої фантазії. Tw een. Для збільшення кадрів анімації ви можете використовувати кнопку Tween. Робота цієї функції полягає в тому, що вона бере за основу два фрейми і автоматично заповнює додаткові фрейми, щоб зробити перехід в анімації плавнішим. Tween інколи просто незамінний, оскільки надає можливість уникнути ство рення безлічі окремих фреймів уручну. Якщо максимально спростити, то все, що треба, - це мати два фрейми: один на початку, інший у кінці, а додаткові фрейми будуть створені між ними. Отже, натискаємо на цю кнопку і поглянемо, які параметри нам доступні для зміни (рис. 17.6). Опція Tween With надає можливість встановити, з якого фрейма починатиметь ся дублювання. Рядок Previous Frame означає, що дублювання відбуватиметься злі ва від поточного вибраного фрейма, тобто за основу буде взято попередній фрейм. Рядок Selection використовується для вибраних фреймів, тобто якщо, наприклад, виділити два фрейми, а потім цей рядок у вікні Tween, то дублювання відбувати меться лише з використанням обраних фреймів. І, нарешті, First Frame дає змогу провести дублювання між виділеним, поточним і першим фреймами.

ВЕБ-ДИЗАЙН

Опція Frames to Add змінює кіль кість фреймів, які будуть додані між позначеними фреймами. Н айчасті ше саме з нею і доводиться працю вати, оскільки, саме тут можна зада ти ту оптимальну кількість фреймів, яка б забезпечувала м'який ефект переходу в анімації за невеликого розміру файла завдяки

правиль

ному добору кількості додаткових фреймів. Опція Layers надає можливість анімувати будь-які зміни на обрано му шарі. Зазвичай вони застосовува тимуться на всіх шарах (All layers). Опцією Parameters можна задати те, що у вибраних шарів буде дубльовано. Якщо ви поставите прапорець біля всіх трьох доступних рядків, то в дубльованих фреймах будуть міститися всі зміни, зро блені на шарах. Найчастіше Tween використовують на текстових ефектах, наприклад, щоб бук ви красиво зникли або плавно перейшли в інший напис. Розглянемо це на конкрет ному прикладі - зникненні. 1.

Створюємо нове зображення такого самого розміру, як і минулого разу.

Створюємо напис на окремому шарі (букви ділити на цей раз не доведеть

ся). До речі, ефект зникнення зовсім не прив'язаний до тексту, це може бути будьяке зображення. 3.

Отже, створюємо два фрейми, перший з них міститиме текст, а другий - ні.

Тепер, утримуючи клавішу Shift, виділіть ці два фрейми, натисніть на кнопку Tween, не змінюючи жодних параметрів, залиште значення за замовчуванням. Натисніть кнопку Play і побачите, як ваш текст зникає, або з'являється. Наведений приклад елементарний, його виконання навряд чи в когось викли че труднощі, але є й інший спосіб створення ефектів переміщення об'єктів по зо браженню. 1.

Намалюємо, наприклад, простий еліпс. Створимо нове зображення. Вибе-

римо з панелі інструментів Ellipse tool і намалюємо коло або еліпс. 2.

«Растеризуємо» шар. Все, підготовка до Image Ready закінчена.

Створюємо новий фрейм, у ньому робимо переміщення кола по прямій у

будь-який бік. 4.

Надалі знову виділяємо ці два фрейми і натискаємо кнопку Tween, можна

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

239

ВЕБ-Д И ЗА Й Н

J Г Proooli |[U№ «M d]

351

|parmb [G F

Color T o th |MducHQni [stfecthr«

4 S I

сок».. [• ____ [ a j L o b »up . |o%

W h il l I DOFuOon

0 Т п и р о го п с у

Motto. 1

Mhtri [NoMhor

[L I

Рис. 17.8

Amount; ; 1004 V ;

О птим ізація в Im age Ready. Залишився остан ній аспект, який ви повинні знати на цьому етапі про | (JU m U n fM Color ТоЫо

анімацію в Image Ready. На відміну від Photoshop в

|0AddM otodoU

Image Ready немає рядка меню Safe for Web, але це

I Sp an g» - I

зовсім не означає, що для збереження вам дове Рис. 17.7

деться перекидати всю роботу в Photoshop і здій снювати збереження там, в Image Ready результат

роботи можна зберегти за допомогою команди Save Optimized у меню File. Але перш ніж виконати згадану вище команду, потрібно налаштувати вихідні дані файла, для чого потрібно відобразити палітру Optimize, встановивш и відповід ний прапорець за допомогою меню W indow (рис 17.7). Тут перед нами відкривається весь спектр налаштувань з оптимізацм. Почати потрібно з установлення формату (Format). Слід вибрати Gif, оскільки він на відміну від того самого jpg або png підтримує анімацію. Наступним нашим кроком, буде установлення максимально допустимого розміру файлу. Доступна ця опція стане, якщо клацнути по кнопці виклику додаткового меню палітри. Її назва - Optimize to File Size (рис. 17.8). У цьому діалоговому вікні слід встановити прапорець біля рядка Current Settings, щоб ви змогли продовжити роботу у встановленому раніше форматі - gif. У полі Desired file size введіть максимальний розмір, який повинен мати файл. Не забувайте, що чим менший розмір файлу, тим гіршою буде його якість.

П Р А К Т И Ч Н А Р О Б О Т А 17.1 М ета. Оволодіти прийомами створення анімованого зображення засобами АбоЬе РЬоЮ 5)юр.

Хід роботи: 1.

Відкриваємо фотографію у програмі РЬоЮ 5Ьор і створюємо додатковий шар.

240

ВЕБ-ДИЗАЙН 2. Беремо

інструментів

програми

Photoshop кисть (рис. 17.9) і відкриваємо налаштування кистей, щоб підібрати по трібну кисть для такого свічення. Приклад вибору показаний на рис. 17.10. Далі проводимо налаштування кисті, щоб вона допомогла втілити наш задум. 3.

На новому шарі робимо один мазок кис тю в потрібному для нас місці.

Після кожного мазка створюємо новий шар і повторюємо нанесення кистю на шого відблиску на новому місці або з но вими налаштуваннями кисті (рис. 17.11).

Кожен шар є новим фрагментом наш ої

Рис. 17.9

анімації і потрібно чітко у яв л я ти, в якій закономірності про мальовувати спалахи і сяяння (рис. 17.12). 6.

Після закінчення роботи потріб но викликати вікно для з'єднання елементів анімації.

Г »мраОугмма

Ги+т*Щ Гти кя ro u rffrw * Г С *гО «п м а Г OtwOfnewei

Відкриття вікна анімації у програ мі Photoshop показано на малюн

rw m um

ку (рис. 17.13).

P 1м о**Ч

Вимкніть усі шари окрім осно

Г»г«м т«кл

В ы

а а

ИИНННШ УШ И

в в

в в в в в

J . jüsüJäjnvT:

вного - у нас намальована кішка. 9.

На панелі анімації натисніть: ство рити новий шар (схожа кнопка, як у панелі шарів)

Рис. 17.10

і— 11— I L -

ВЕБ-ДИЗАЙН

jtMt •Ь»аі р „г г ї« л > / , ßirih< W -

Рис. 17.14.

Рис. 17.13.

10. На кожному новому анімаційному шарі вмикайте той шар, який демонструєть ся на цьому фрагменті. 11. Виконайте з кожним шаром подібну операцію. 12. Пам'ятаєте, що кожен шар анімації має відрізняться від попереднього, крім нижнього шару, де демонструється сама кішка (рис. 17.14). 13. Задайте час, скільки кожен шар буде демонструватися, і збережіть для webсервера в gif-форматі.

Flash-анімація: редактор MacromediaFlash. Анімація в творчому проектуванні Анімація у Flash базується на зміні ознак об'єктів, що використовуються у тій чи іншій сцені. Наприклад, об'єкти можуть зникати чи з'являтися, змінювати своє місце розташування, форму, розмір, колір, ступінь прозорості тощо. Перш ніж перейти до більш серйозних речей і взятися за розробку власних flash-банерів, сайтів, ігор чи проектів, кожен флешер-початківець повинен довіда тися про три способи (механізми) реалізації анімації у Flash.

1. Покадрова (класична) анімація - коли автор

сам створює або імпортує з

інших програм кожен кадр майбутнього «мультфільме» і встановлює послідовність перегляду. Така анімація найбільше нагадує створення gif-банерів, де також вико ристовується покадровий підхід. 2.

Автоматична (tweened) анімація - коли

автор створює тільки перший і

останній кадри мультиплікації, а алгоритми Flash автоматично генерують усі про міжні кадри. При цьому розрізняють кілька типів

tweened-анімації. Наприклад, ані

мація, яка базується на переміщенні об'єкта (motion anim ation), або анімація, що базується на трансформації (зміні форми) об'єкта (shape anim ation).

3. Анімація на основі сценаріїв вбудованої мови програмування (Action Script). Сценарій - це опис поведінки об'єкта внутрішньою мовою Flash, яка назива ється ActionScript. Синтаксис цієї мови нагадує синтаксис інших мов сценаріїв, які використовую ться у w eb-публікаціях (наприклад, JavaScript чи VBScript).

242

ВЕБ-ДИЗАЙН Кожен із цих трьох підходів до анімації має як переваги, так і недоліки. Напри клад покадрова анімація зазвичай вимагає найбільше часу та прискіпливості, а ре зультат виявляється дуже масивним і займає багато місця (адже кожен кадр - це по суті окреме зображення). Автоматична (tweened) анімація позбавлена цих недоліків. Використовуючи її, ви не зобов’язані створювати кожен кадр окремо. А оскільки для програвання та ких файлів достатньо зберігати тільки перший і останній кадри, анімованоий про дукт отримується набагато меншого розміру, ніж у файлі з покадровою анімацією. Водночас tw eened-анімація придатна тільки для створення найпростіших сюжетів, в яких властивості об’єктів змінюються рівномірно. З допомогою сценаріїв на ActionScript можна описати доволі складну поведінку об'єктів, але для цього, як ви вже здогадалися, потрібно вивчити мову ActionScript. Проте головне, про що слід пам'ятати, - для досягнення найкращого ефекту всі три механізми анімації можна і потрібно об'єднувати. На щастя, Flash (зокрема, його остання редакція Adobe Flash CS4) дають нам таку можливість. Власне, якщ о говорити про функцію tw een у Flash - то варто звернути ува гу, що програма підтримує два її види: автоматична анімація руху (motion

tween) та автоматична анімація форми (shape tween) (тут ми говоритимемо CS4 реалізований ще один механізм створ ен ня автом атичної анімації - Classic tween, який по суті є спрощ еним варіантом

лише про перш ий). У Adobe Flash

функції m otion tw een і яким ми будемо користуватися на перших етапах роботи з Flash. Д ля яких потреб ви ко р и сто вується M otion (C lassic) tw een ? Основна функція motion tween полягає в автоматичному «промальовуванні» проміжних кадрів між двома ключовими кадрами. Саме завдяки цій функції можна переміщувати об'єкт по прямій (чи заданій кривій), змінювати його розміри, повер тати, змінювати його колір і ступінь прозорості тощо. На жаль, у функції tween є не тільки зручні можливості, а й деякі обмеження. По-перше (і це дуже важливо пам'ятати), m otion tween працює тільки із символами. Символ - це фрагмент анімації в бібліотеці, який у будь-який момент можна звідти дістати і використати у фільмі. Другий суттєвий аспект motion tween полягає в тому, що для цієї функції надзви чайно велике значення має опорна т о ч к а (anchor point - «якірна то чка»), навколо якої буде обертатися об'єкт. Під час роботи з motion tween треба пам'ятати, що для кожного без ви н ятку символу ця функція повинна м іс т и т и с ь на окремому ш арі (layer). У шарі з motion tween не може міститись більш е нічого, крім одного символу, до якого застосову ється ця функція. Перш ніж приступити до перших практичних занять, потрібно розібратися у са мому програмному середовищі, яке використовується для розробки. На малюнках, наведених нижче, використано приклад найостаннішої версії Adobe Flash CS4. Але, якщо ви плануєте застосовувати більш ранні програми - жодних проблем з цим у вас виникнути не повинно. Основні елементи у всіх однакові.

243

ВЕБ-ДИЗАЙН « е ш б щ * 1 0 »2 .0 0

Ш 0

•

getPrcperty

• •

on anC*£v«rt

гемоv**MaCfc>

в в •

*■ 1

Ш » M M O k O rtrd

Поїм введення для Action Script

coerty rtertOreg «opfreg

•

target?**

<4>dot•M tm t'rert

Ш З

TtM fcw Catrci

6 ) » o w r^ tw o rtt v ------------r r r n -----------

Рис. 17.1S

Ifw lc * l.C d l

Рис. 17.16

Всі елементи, які застосовуються flash-програмістами, умовно розбиті на шість основних блоків: ■ панель керування; ■ інструменти; ■ часова шкала (timeline);

я вікно для редагування Action Script; ■ основне меню; ■ і, звісно,- робочий стіл (сцена) (main stage) (рис. 17.15). Інтерф ейс Flash 1. Робочий стіл (сцена) (Main Stage). Великий білий чотирикутник, позначений на малюнку цифрою «1», - це робочий стіл. Саме він у процесі роботи перетвориться на мультфільм, банер чи навіть флешгру. Все, що буде розміщено в рамках цього чотирикутника, - після публікації потра пить у кліп. Можна змінити колір, розмір, а також інші опції сцени в панелі керування.

2. Меню. Всі загальні опції програми Flash розташовані саме тут. Наприклад, у меню «Ф ай л» можна створити новий чи зберегти наявний файл, імпортувати чи експор тувати готові зображення, кліпи та навіть звукові файли.

3. Панель керування. Сюди входять панелі опцій ваших інструментів, а також бібліотека тих елементів, які будуть використовуватися під час розробки. Наприклад, якщо треба використати у кліпі вже готове зображення або звуковий файл, - можна експортувати його в бі бліотеку. Після цього цей файл стане доступним для користування у програмі Flash. Увімкнути «бібліотеку» можна, натиснувши «гарячу клавішу» F1 1 або обравши відповідний пункт у підменю M enu -> W indow . Так само можна повністю налашту вати вигляд панелі управління, обравши тільки найпотрібніші елементи.

4. Вікно редагування Action Script. Редагування Action Script - це функція, притаманна лише програмі Flash (тоді як попередні три елементи інтерфейсу є типовими для більшості графічних редакто рів) (рис. 17.16).

244

■

ВЕБ-ДИЗАЙН

L ayer 1

шш Кадри (Frames)

ь ъ И

т ы

Рис. 17.17

5. Панель інструментів. Це ще один типовий для більш ості графічних редакторів елемент інтерфейсу. Якщо раніше вам доводилося працювати з Photoshop, ви відчуєте дежа-вю! Як і у випадку з панеллю управління, ви можете повністю налаштувати панель інструмен тів під свої потреби, перейшовши в меню Edit -> Customize Tools Panel. Найважливішими і водночас найбільш часто застосовуваними інструментами є Sélection Tools (Інструменти вибору). Саме з їх допомогою можна вибирати об'єкти та розміщувати їх на робочому столі (сцені).

6. Часова шкала (timeline). Цей блок є чи не найважливішим у програмі Flash. Адже саме з його допомогою можна повністю контролювати перебіг подій в анімації. Шкала поділена на кадри

(frames) і шари (layers). За замовчуванням на ній розміщено лише один шар, але можна легко додати їх стільки, скільки буде потрібно. Кожен шар - це по суті рядок кадрів. Можна конвертувати кадри у Key frames (Ключові кадри) чи Blank key frames (Порожні ключові кадри). Всі інші кадри є звичайними. Звичайний кадр містить ту саму інформацію, як і ключовий кадр, що йому передує. Часова шкала (Tim eline) (рис. 17.25).

ПРАКТИЧНА РОБОТА 17.2 Оволодіння прийомами створення кліпу анімації Перш ніж приступити до створення кліпу нам потрібно підготувати необхідний графічний матеріал. Симпатичний чоловічок, що крокує, у чотирьох позах ідеально підходить для створення анімації (рис. 17.18). 1. 2.

Ми навчимо цього чоловічка ходити! Відкрийте Flash і створіть новий Flash File (рис. 17.19). Налаш туйте сцену. Для цього відразу після відкриття Flash праворуч у ко лонці панелі управління встановіть розмір сцени відповідно до розміру підготовлених графічних файлів (у наш ому випадку - 84 х 102). О скільки ка дрів у наш ому випадку буде лиш е чотири, ш видкість відтворення (FPS, або

Frames per second) буде достатньо низькою , наприклад, ш ість кадрів на се кунду (рис. 17.20).

245

Імпортуйте

необхідні

графічні

^ m o ra m a

файли в бібліотеку. Перейдіть у

APS: SJ3Q

меню File -> -> Import -> Import

to Library, виберіть необхідні

Sfee: 84 х 102рх

файли (можна одразу чотири) і

Stage; 1

натисність «ОК».

1 IH I

Натисніть F11 і перейдіть на за

кладку бібліотеки, в якій вже відображаються

всі

Рис. 17.20

необхідні

файли (рис. 17.21). 5.

Переконайтесь, що в інструмен тах у вас вибрано Selection Tool, і перетягніть перший файл з бі бліотеки на сцену так, щоб кадр точно збігся зі сценою.

Розмістіть курсор на другому кадрі шкали часу (timeline) і, натиснувши клавіш у F7 (того са мого можна досягнути клікнувши правою клавішою миші на порожньому кадрі і вибравши опцію Insert blank keyframe, створіть там порожній ключо

Рис. 17.21

вий кадр (рис. 17.22). 7.

Перетягніть на сцену наступний файл з бібліотеки.

Повторюйте кроки 4 і 5 поки всі

ттаи с

і і*.-» і /

чотири зображення не будуть розміщені на сцені. В результаті у вас утвориться чотири кадри з одним зображенням на кожно му (рис. 17.23).

246

ill -i 9

[ ___ П орожній кадр

1♦¥ '<b% t-3 t Рис. 17.22

ВЕБ-ДИЗАЙН

9. Тепер можете зберегти і опублікувати файл. У меню File -> Save As ви може те зберегти вихідний файл у форматі

*.fla (цей формат відкривається Flash). Для того щоб створити файл для про гравання, виберіть меню File -> Export -> Export Movie і бажаний формат. Стандартним програвача його

форматом

для

флеш-

вваж ається *.swf. Саме

найзручніш е

використовувати

у web. Більш ість флеш-банерів також мають цей формат. Нарешті, обравши у меню опцію Publish, ви створите не лише файл *.swf, а й html-код для роз

Рис. 17.23

міщення на сайті. 10. Натисніть комбінацію клавіш Ctrl + Enter або виберіть в меню Contol -> Test

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

(bitmap) та векторною (vector) графікою, а також

про те, що програма Flash на

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

лінія (line), прямо кутник (rectangle), овал (oval) тощо. Малювати будемо пляжний м'ячик. П Р А К Т И Ч Н А Р О Б О Т А 17.3

Оволодіння засобами малювання у анімаційному редакторі 1.

Перше, що нам знадобиться, це інструмент

овал (oval tool), який

потрібно ви

брати у панелі інструментів. 2.

Виберіть колір ліній (контур кола, яке ми будемо створювати) та колір залив ки (колір, який буде наповнювати наше коло). Як видно з малюнка, наведеного нижче, вибрано червоний та блакитний кольори відповідно (рис. 17.24).

3. Тепер, затиснувши клавішу SHIFT, намалюйте на сцені коло, приблизно таке, як на рис. 17.25. Зверніть увагу, що якщ о ви не затиснете клавішу SHIFT, то у вас вийде овал. А за тискання цієї клавіші автоматично приведе до того, що малюються «правильні» об'єкти, такі як коло. 4.

Виберіть на панелі інструментів

лінію (line tool) і намалюйте

пряму, яка пере

тинатиме ваше коло близько до центра.

247

ВЕБ-ДИЗАЙН

Рис. 17.25

Рис. 17.24 5.

Зверніть увагу на те, що коли ви наближаєте курсор близько до контуру кола, він начебто автоматично «приклеюється» до нього. Ця опція нам на руку, оскіль ки вона малює більш точно (рис. 17.26).

Скориставш ись

інструментом вибору (selection tool), ухопіть

приблизно за

середину щойно намальованої лінії і перетягніть її трішки праворуч, щоб утво рилася дуга (рис. 17.27). 7.

відповідному значку на 8.

новий шар (new layer) клацнувши шкалі часу (timeline).

Тепер починається найцікавіше. Створіть

на

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

Як описано у 5-му кроці, перетягніть другу лінію так, щоб утворилася ще одна дуга (рис. 17.29).

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

248

ВЕБ-ДИЗАЙН

Рис. 17.28 клацнувши по ній

Рис. 17.29

інструментом вибору (selection tool), і скопіюйте у «буфер»

стандартною комбінацією клавіш Ctrl + С. Після цього другий (допоміжний) шар можна видалити. Вставляємо дугу в перший шар комбінацією клавіш Ctrl + V і стрілочками на клавіатурі переміщуємо її у потрібне місце. 11. Тепер весь шар із лініями функціонує як єдиний об'єкт. Ми можемо залити від повідні його елементи іншим кольором. Виберемо цей колір у опції

fill color

(там, де раніше у нас був блакитний). Тут обрано жовтий (рис. 17.30). 12. Насамкінець, вибравш и в панелі інструментів

tool)

відро заливки (paint bucket

клацніть усередині тих елементів, колір яких хочете змінити. В ре

зультаті вийде такий пляжний м 'яч у кольорах національного прапора (рис. 17.31). Звісно, до творів видатних художників Відродження цьому малюнку ще дуже далеко. Але для використання у мультфільмах та іграх, зроблених у технології Flash, він цілком придатний. Ця практична робота допоможе зрозуміти основні принци пи векторного малювання у Flash. У чистому вигляді покадрова анімація сьогодні фактично не застосовується. Всі переваги технологій, що використовуються програмою Flash, полягають у вико-

Рис. 17.30

Рис. 17.31

249

ВЕБ-ДИЗАЙН

Рис. 17.32

Рис. 17.33

ристанні більш складних і водночас більш автоматизованих способів анімації, таких як

анімація із автоматичним заповненням кадрів (tweening). Проте, перш ніж навчитися працювати з цим доволі складним, але дуже цікавим

інструментом, необхідно засвоїти принципи роботи з символами. Автоматичне за повнення кадрів працює тільки у випадку використання символів. Щ о таке сим во л у Flash? Символом у Flash називається графічне зображення, кнопка або ф рагм ент філь му, збережений у внутріш ньом у ф о р м а ті Flash. Символи є ключовими елементами, які дають змогу повною мірою використовувати ефективність та інтерактивні мож ливості програми Flash. Але найбільша його користь для аніматора полягає у мож ливості багатократного використання: відразу після створення символ потрапляє в бібліотеку поточного фільму і надає можливість створювати кілька своїх копій

(ек

земплярів, або instances) на робочій області. Використання символів не лише допомагає суттєво зменшити розмір кінцевого файла, а й зекономити чимало часу та сил дизайнера. Адже створені один раз сим воли потім можуть використовуватися у багатьох роботах аніматора. Поступово збільшуючи вантаж своїх знань і портфоліо, ви одночасно збільшуватимете і біблі отеку своїх символів. Під час маніпуляцій над ними, змінюється не сам символ, а його конкретне вті лення (екземпляр). У одного символу може бути безліч екземплярів, і під час ви користання у кліпі їх можна редагувати, роблячи відмінними від основного сим волу та один від одного формою, кольором, розмірами та функціями. Програма Flash зберігає у бібліотеці оригінальний символ, а для кожного екземпляра записує тільки параметри змін. Тому кількість екземплярів, які використовую ться у кліпі, практично не впливає на обсяг кінцевого файла. Водночас редагування кожного конкретного екземпляра не впливає на всі інші. Натомість, якщ о взятись за редагування оригінального сим волу - це вплине на всі його екзем пляри. Це може звучати трохи складно, тому давайте візуально подивимося, що м ається на увазі (рис. 17.32). На малю нку наведено символ та три його екзем пляри. Перший з них розтягнутий по вертикалі; другий - розтяг нутий по діагоналі і затемнений, а третій - розтягнутий по горизонталі та зм іне ний за кольором. На рис. 17.33 використовуються точнісінько ті самі екземпляри. Але основний символ змінено (домальовано кілька ліній та змінено колір). Як бачите, всі три ек земпляри також відповідно змінилися.

250

ВЕБ-ДИЗАЙН Три типи символів у Flash Перетворюючи будь-яке зображення або набір елементів на символ, ми може мо вибрати одну з трьох опцій: ■ графіка (Graphic);

а кнопка (Button); а фрагмент фільму (Movie Clip) (рис. 17.34). Кожен символ мас унікальну шкалу часу (timeline) та шари (layers).

Графіка (Graphic) і

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

Кнопка (Button) Кнопки використовую ть для створення інтерактивних ділянок сцени, які «відгукую ться» на кліки миші, наведення курсору та інші дії. Ш кала часу у кнопки складається всього з чотирьох кадрів, кожен з яких відповідає за дії користува ча (рис. 17.35):

■ Up - вигляд кнопки в стані спокою; ■ Over - вигляд кнопки при наведеному курсорі; ■ Down - вигляд кнопки в момент клацання мишею; ■ Hit - активна зона кнопки (де має бути миша, щоб кнопка реагувала) Фрагмент фільму (Movie Clip) Фрагмент фільму використовується для створення анімованого елемента, який буде використовуватися багатократно. Символи

Movie Clip мають

власну багато-

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

Button (Кнопка), і створювати так анімовані кнопки.

Фрагментові фільму можна надати параметри - змінні та значення - і створити «інтелектуальний» фрагмент. Крім того у фрагмент фільму можна ввести дії та сце нарії, створювати в ньому елементи інтерфейсу (типу вимикачів та меню, що випа дають), які будуть відгукуватися на кліки миші та інші події.

Положення кнопок Рис. 17.35

251

ВЕБ-ДИЗАЙН Як створити символ

Створити символ можна з виділених на сцені об'єктів або в режимі редагування символу імпортувати певний вміст у порожній символ. Послідовність створення нового символа з виділених елементів така: 1.

Виділіть один або декілька елементів на Сцені, клацніть по них правою клаві-

У діалоговому вікні виберіть необхідний вам тип символу: Graphic (Графіка),

шою і виберіть опцію Convert to Symbol.

Button (Кнопка) або Movie Clip (Фрагмент фільму) і натисніть Ок. Створений символ автоматично додається в бібліотеку. Виділені на Сцені еле менти стають екземпляром символу. Після цього редагувати символ безпосеред ньо на сцені більш е не можна. Для цього необхідно відкрити його в режимі редагу вання символу.

Другий спосіб створення символу Ви вже знаєте, що створити символ можна у режимі редагування. 1.

Виберіть у меню Insert -> New Symbol (або натисніть Ctrl + F8), виберіть тип не обхідного символу, введіть його назву і натисніть «Ок». Ви потрапите в режим редагування символу.

Намалюйте або

U n tM e d -2 * х

J __

Scene 1

symbol

імпортуйте будь-яке

Рис. 17.36

необхідне зображення, яке хочете зро бити символом, і натисніть на напис Scene 1 у лівому верхньому кутку сцени (рис. 17.36). 3.

Після цього символ з'явиться в бібліотеці і у будь-який зручний момент ви змо жете перетягнути його на сцену.

П Р А К Т И Ч Н А Р О Б О Т А 17.4

Оволодіння прийомами створення анімації руху 1. 2.

Створіть новий проект. Помістіть будь-яку векторну фігуру в перший ключовий кадр (наприклад, коло або овал) (рис. 17.37).

Виділіть фігуру повністю (можна зробити це за допо могою інструмента Selection Tool) і перетворіть її на символ (клацніть правою клавішою по об'єкту і вибе

ріть Convert to Symbol). 4. Виділіть на шкалі часу (timeline) будь-який «віддале ний кадр» (наприклад, #25) і натисніть F6, створивши так другий ключовий кадр. Проміжок між двома клю човими кадрами автоматично заповниться послідов ністю проміжних кадрів (кожен з яких за вмістом буде повторювати перший ключовий кадр).

Рис. 17.37

ВЕБ-ДИЗАЙН 5.

В останньому (другому) ключовому кадрі пере містіть фігуру в нове положення. Паралель но ви можете змінити деякі інші її характе ристики: колір (за до помогою опцій в панелі управління), розмір

Рис. 17.38

(за допомогою Free Transform Tool) та обертання (за допомо гою опцїї Rotate або того ж Free Transform Tool). 6.

Клацніть правою клавішею по будь-якому з проміжних кадрів

Рис. 17.39

(між двома вставленими вами ключовими кадрами) і виберіть у меню, що ви 7.

падає, опцію Create Classic Tween (рис. 17.38). Якщо ви все зробите правильно, то проміжні кадри з сірих перетворяться на фі олетові і їх перетне стрілка, яка вказуватиме в напрямку від першого ключового кадра до останнього (рис. 17.39).

Використайте пункт меню Control -> Test Movie (або комбінацію клавіш Ctrl + Enter) для попереднього перегляду фільму. Після цього можете зберегти файл або навіть опублікувати його для розміщення у w eb-просторі (сайті). У нашій практичній роботі змінюється відразу декілька опцій символу: рух по прямій, збільшення, змінення кольору та обертання. Автоматичну анімацію символів особливо широко використовують у найрізно манітніших видах кліпів та банерів, а також ігор, що реалізані у програмі Flash.

Інструмент Перо (Pen) Для роботи з кривими Без'є у програмі виділено відразу два інструменти: перо (pen), а також ін с т р у м е н т ч а с тк о в о го вибору (subselection tool). Якщо раніше вам ніколи не до водилося задавати складну кри визну лінії, то, можливо, на почат

і <■

ку роботи ці інструменти вам не

« *

знадобляться. Але рано чи пізно

(а особливо, коли ви перейдете до

Ін стр ум е н т S u b se le c tio n to o l

Ін стр ум е н т П е р о (Pen)

малювання складних контурів для анімації) вас зацікавить створення кривих саме з допомогою цих ін

Рис. 17.40

струментів (рис. 17.40).

Як же працюють криві Без'е? Щоб не записувати абсолютні координати кожної точки кривої лінії, у векторній графіці позначають координати «керівних» точок лінії, а також напрямок лінії і ве-

253

ВЕБ-ДИЗАЙН личину кривизни у кожній з подібних ор напрямку

р е з у л ьтат м ал ю в ан н я

точок. Для цього використовують спеціальний математичний апарат, вперше використаний Без'є. У графічних програмах обидва ці параметри

зазвичай

відображають

за допомогою вектора. Напрям цього вектора вказує на напрям кривої, а довжина визначає ступінь кривизни. Рис. 17.41

На практиці це означає, що на будь-якій кривій лінії обов'язково є

кілька таких «керівних» точок, які ще називають вузлами. Клацнувши по будь-якій з них з допомогою інструмента часткового вибору

(subselection tool), ми побачимо два вектори, що виходять з цієї точки. Кожен із них визначає кривизну лінії зі свого боку від вузла. Перетягуючи мишею кінець кожно го з цих векторів за допомогою інструмента часткового вибору, можна змінювати кривизну основної лінії (рис.17.41). Пояснити «роботу» кривих Без'є доволі складно, а на словах - майже неможливо. Тому найкращим уроком буде власна практика. Потрібно запам'ятати тільки дві речі: додаткові вузли на лінії додаються інструментом

перо (pen), а модифікація самих век

торів здійснюється з допомогою інструмента часткового вибору (subselection tool).

лінія (line перо (pen tool), додайте посередині лінії ву

Спробуйте створити пряму з допомогою звичайного інструмента

tool). Потім, з допомогою

інструмента

зол. Для цього клацніть двічі (перше клацання вибере лінію, а друге додасть у вка заному місці вузол). Зверніть увагу, що при додаванні вузла біля пера з'являється вказівник «плюс». Нарешті, клацніть утретє по щойно створеному вузлу інструмен

перо. Але не відпускайте ліву

том

клавішу миші, а потягніть за вузол. Ви побачите,

що з вузла з'являється два спрямованих вектори. Після того як вектори створено, можна вибрати

інструмент часткового вибору (subselection tool) і спробувати

погратися з векторами (переміщувати їх у довільних напрямках). У вас вийде щось схоже на попередній малюнок.

Автоматична анімація форми (shape tween) у Flash Ще один різновид автоматичної анімації, який надає можливість не лише ру хати, змінювати колір та інші характеристики об'єкта, а й фактично повністю мо дифікувати сам малюнок на сцені -

автоматична анімація форми, або, як її ще

називають, «морфіні» (shape tween).

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

254

ВЕБ-ДИЗАЙН торному редакторі, - це математично прораховані лінії між такими точками. Саме тому векторні малюнки можна збільш увати як завгодно без втрати якості (на від міну від растрових). Навіщо все це потрібно знати? Тому, що

функція shape tween працює

саме з

такими точками. І для того, щоб вдало її застосовувати, варто розуміти, як саме вона діє. На відміну від

motion tween, яка оперує лише символами, shape tween навпа

ки - може працювати тільки з елементарною векторною графікою (намальованими внутрішніми засобами програми Flash об'єктами, не перетвореними на символи), і

Ця функція зміню є форму об'єкта: не просто збільш ує, зменш ує чи повертає його, а здійснює саме ф ормоперетворення, за що й отримала свою назву. Вона, наприклад, здатна перетворити круг на квадрат (по суті, будь-який об'єкт на будь-який інший), завдяки переміщ енню точок об'єкта в перш ому кадрі таким чином, щоб вийш ов об'єкт в останньом у кадрі. При цьому вона н а м а га ється пе р е м іс т и т и т о ч к и по найбільш о п ти м ал ьн ій (ко р о ткій ) т р а є к т о р ії. А оскільки всі точки об'єкта для функції рівнозначні, анімація іноді ви явл яється не такою, як хотілося б. Функція shape tween також може додати або видалити частину точок у про цесі анімації, якщо об'єкти в першому та останньому кадрах мають різну їх кіль-

(

кість. З одного боку, це зручно (адже процес повністю автоматизований), а з друго

додасть додаткові точки (чи прибере зайві) і який вигляд у кінці розробки матиме

го - функція стає менш передбачуваною: аніматорові важко вирахувати, де вона анімація. Функція

автоматичної анімаціїформи (shape tween) працює тим краще, чим

менше точок в об'єкті (найкраще, якщо їх 4-5) і чим менша різниця між першим та останнім кадрами. В а р то п а м 'я т а т и і про інш і обмеження, пов'язані з shape tween: ■ як і у випадку з

motion tween об'єкт перебуває на окремому шарі (layer):

ш об'єкт повинен бути забарвлений в один колір чи градієнт, але не може скла датися з кількох різнокольорових елементів; ■ об'єкт має бути намальований або «пензлем»

(brush tool), (pencil tool), але не обома інструментами одночасно.

або «олівцем»

ПРАКТИЧНА РОБОТА 17.5 Оволодіння прийомами створення кліпів з використанням анімації форми Для того щоб закріпити матеріал, спробуємо створити простий кліп з викорис танням функції shape tween: 1. 2.

Спочатку створіть новий проект у програмі Flash. Розмістіть будь-яку векторну фігуру (наприклад круг) у першому ключовому кадрі ваш ої шкали часу (timeline). Найлегше його намалювати, скориставш ись вбудованим інструментом

Oval Tool (рис. 17.42).

Виділіть на шкалі часу віддалений кадр (наприклад, #25) і натисніть

F6, тим са

мим створивш и другий ключовий кадр. Проміжок між двома ключовими кадра-

255

ВЕБ-ДИЗАЙН • • □

1 5

■ * " — 1—

Shape tween пі »введено успішно Рис. 17.42

Рис. 17.43

Рис. 17.44

ми автоматично заповниться послідовністю проміжних кадрів (які повторюва тимуть ваш перший ключовий кадр). 4.

У другому ключовому кадрі намалюйте будь-яку іншу векторну фігуру (на приклад, квадрат). Скористайтесь для цього інструментом Rectangle Tool

(рис. 17.43). Клацніть правою клавішею миші по першому ключовому кадрі (або в будь-якому місці між двома ключовими кадрами) і виберіть пункт Create Shape Tween. Якщо ви помилитесь і виберете пункт Create motion tween, то програма по передить вас, що не може здійснити це перетворення оскільки зображення не є символами, і запропонує перетворити їх на символи. Якщо ви зробили все правильно і обрали автоматичну анімацію форми (shape tween), то між двома ключовими кадрами на шкалі часу з'явиться стрілка на зе леному тлі (рис. 17.44).

простих об'єктів, які не дуже сильно відрізняються одне від одного.

ТВОРЧІ ЗАВД АН НЯ

для закріплення навчального матеріалу теми заняття Практичне завдання Давайте спробуємо ускладнити задачу, змусивши трансформувати віддалені об'єкти. Для цього використайте дві цифри «1» і «2», намальовані від руки пензлем у Flash (наразі не варто перейматися якістю, головне - ілю страція того, як це працює) (рис. 17.45). Рис. 17.45

КОНТРОЛЬНІ ЗАПИТАННЯ

для перевірки власних навчальних досягнень за темою заняття 1.

Що таке анімація і для чого її використовують у веб-сайтах?

Чим розрізняю ться flash- і gif-банер?

ВЕБ-ДИЗАЙН

Що таке анімація руху і за допомогою яких функцій створити анімацію руху?

Як створити анімацію форми?

Для чого використовують символи в анімації?

Як працювати з символами у анімації?

Як обрати оптимальну кількість анімованих об'єктів при створенні власного веб-проекту?

СВІТ ПРОФЕСІЙ Художник-постановник, митець тла, розробник персонажів, розкадровник.

ПЕРЕЛІК ОСНОВНИХ ПОНЯТЬ ТА ТЕРМІНІВ У н авчал ьн о м у м а т е р іа л і параграф а: анімоване зображення; G IF-анімація (ImageReady); анімація руху; оптимизация в Image Ready; FLASH-анімація; редактор MacromediaFlash; анімація у творчому проектуванні; покадрова (класична) аніма ція; автоматична (tweened) анімація; анімація на основі сценаріїв вбудованої мови програмування (Action Script); інтерфейс Flash; символ у Flash; фрагмент фільму (Movie Clip); криві Без'є, автоматична анімація форми (shape tw een) у Flash. У словнику-довіднику: анімація; банер; 2гі-анімація,

§ 18. Технологія створення веб-сайтів в інформаційному середовищі Інтернету

/. Файлова стуктуро сайта - зайва робота с файлами сайту або необхідність? 2. Як можна використати автономну версію сайта, якщо його не розташ увати на сторінках глобальної мережі? 3. Де найкраще розташ увати свій сайт і як це зробити?

Ф ай л о ва стр уктур а сайта. Якщо ваш сайт складається всього з п'яти сторінок і ви не передбачаєте його надалі розвивати, то думати про те, як називати і роз міщувати файли на сайті, не обов'язково. Але якщо сайт чималий за обсягом, то ви, напевно, вже зіткнулися з тим, що керувати розташованою на ньому інформацією стає дедалі складніше. Вже ніхто не пам'ятає, що розташ овується на сторінці з на звою page54a.htm і де ілюстрації до торіш ньої презентації. Чи можна уникнути такої ситуації? Так, цілком. Особливо, якщ о ви спочатку роз раховували на те, що сайт розвиватиметься, і зробили ряд підготовчих кроків. Як нам не заплутатися в сотнях файлів, з яких складається будь-який сайт? Для цього їх потрібно, по-перше, розбити за функціональністю, а, по-друге, за типами. Інколи результати цих дій можуть збігатися. Найпростіший спосіб розподілу файлів - це розподіл за виконуваними функція ми. У простому статичному сайті ми можемо виокремити декілька чітких груп файлів: ■ сторінки сайта, які є Htm l-файлами;

257

ВЕБ-ДИЗАЙН ■ звукові файли; ■ графічні файли, що використовуються в дизайні сайта; ■ відеофайли. Це цілком звичайний набір, що використовується у більш ості статичних сайтів. Як неважко помітити, виходить досить великий список усіляких категорій фай лів. А тепер уявіть, що всі ці файли зібрано докупи в одному каталозі. Поглянемо, як можна виправити ситуацію з пошуком необхідних файлів. Найпростіший вихід, що напрошується, - зробити для кожної описаної вище групи файлів свій каталог (папку). Тоді відразу стане зрозуміло, де і що лежить. Наприклад: /

- кореневий каталог сайта;

/pages/

- звичайні Htm l-сторінки;

/images/

- ілюструюча графіка;

/ріс/

- графічні файли, що використовую ться в дизайні сайту;

/gallery/

- фотографії, якщо на сайті передбачена фотогалерея;

/banners/

- банери.

Грамотна і продумана організація файлової структури сайта надасть можли вість заощадити час на його подальшу підтримку і супровід. Крім того, вона допо може легко орієнтуватися у великій кількості файлів, з яких складається веб-сайт. Особливо це важливо при роботі з великими за обсягом сайтами або тоді, коли сайт недуже великий, але ви плануєте його подальший розвиток і додавання нових розділів. Приклад файлової стуктури сайта наведемо такий: ■ Перша (стартова) сторінка сайта отримує, як правило, ім'я: index.html. ■ Останні файли іменуються довільно, але рекомендується робити це відповід но до призначення документа або його вмісту, наприклад aboutm e. html і mycat.html. Давайте папкам і файлам осмислені назви (не слід давати імена на зразок 12345.html). ■ Іменування каталогів і файлів допускається лише в основному англійському кодуванні. ■ Картинки краще розміщувати в окремий каталог (/pictures/ або /images/). Якщо графіки багато, то всередині цього каталогу створіть підкаталоги.

Сайти в Інтернеті. Розташування сайтів в Інтернеті. Завантаження файлів на сервер. Редагування сторінок Web-сайта на сервері Коли розроблена автономна версія сайта, і її треба виставити на сторінки гло бальної мережі Інтернет, по-перше треба зареєструвати доменне ім'я. Є два основні кроки до отримання домену: реєстрація нового домену або купів ля вже наявного. Доменне ім'я складається з адреси вашого сайта і може закінчуватися на .иа, .com.ua, .ги, .com, .net, .org, .info, .biz, .tv та ін. Як тільки ви закінчите з вибором домену, ви приступите до вибору хостингпровайдера, проте це вже наступний крок. Спершу, давайте зосередимося на відборі кращого доменного імя для вашого сайта.

258

ВЕБ-ДИЗАЙН Як вибрати найкраще доменне ім'я? Для того щоб у головних пошукачах (Google, Yandex і т. ін.) займати якомога вищу позицію в результатах пошуку, надзвичайно важливо реєструвати ім'я, яке містить головні ключові слова теми сайта і/або назву компанії. Але, як завжди, є винятки. Якщо сайт створю ється тільки для престижу, наявність ключових слів у назві домена не так і важлива. Це тому, що клієнти дізнаватимуться за назвою фірми або торгової марки, але зовсім не з вигляду продукту.

Підказки для вибору кращого доменного імені: 1. Не реєструйте доменні імена, які дуже довгі та містять дуже багато складів. Можна зареєструвати імена довжиною в 256 знаків, але це не означає, що треба використовувати всі знаки. 2. Створіть домен, який легко запам'ятовується. 3. Дефіси доречно використовувати, якщо ім'я складається більш ніж з трьох слів. 4. Захистіть ім'я, зареєструвавш и його в різних зонах (.net, .org, і т. ін.). Це утри мує інших від копіювання імені.

Як зареєструвати доменне ім'я? Зареєструвати доменне імя легко і просто. Більшість користувачів звертаються до своїх інтернет-провайдерів або до потужних компаній, у яких ціни завищені у декілька разів. Чому це відбувається? Страх перед маленькими компаніями або брак інформації? Не має жодного значення, через кого відбувається реєстрація. М ожлива тільки істотна економія на реєстрації та обслуговуванні домену. Після того як обрано і зареєстровано доменне ім'я, треба вибрати хостингпровайдера. Дуже часто хостинг-провайдер і реєстратор домену - одна і та сама особа, про те іноді домен реєструється в однієї компанії, а хостинг купується зовсім в іншої. Хостинг-провайдер забезпечує дисковий простір на своєму сервері для розмі щення сайтів, інструменти управління сайтом і підтримку. Від виду сайта, який розміщуватиметься, залежить вибір тарифного плану. Голо вний параметр тарифних планів - розмір дискового простору, що надасться для роз міщення сайта. Можна застосувати просту формулу: помножити розмір сайта на 2 і підібрати відповідний тарифний план за цією цифрою. Але є і безкоштовні хостинги. Отже, хостинг - це виділення місця на сервері провайдера для розміщ ення веб сайта, який має цілодобовий вихід в Інтернет. Іншими словами, хостинг - це послуга розміщення вашого сайта в мережі Інтернет. До послуг хостингу належать: ■ певний дисковий простір на сервері; ■ ім'я віртуального сервера; ■ засоби доступу і адміністрування сервера; ■ засоби налаштування та конфігурації сервера; ■ можливо, поштові скриньки. Залежно від того, наскільки багато інформації має зберігатись на сайті, наскіль ки він має бути великим та ресурсомістким, вибирають розмір дискового простору для розміщення сайта.

259

|\ І

ВЕБ-Д И ЗАЙ Н ТВОРЧЕ ЗАВД АННЯ

для закріплення навчального матеріалу теми заняття Оберіть безкоштовний хостинг в Інтернеті та виставте свій сайт на сторінки гло бальної світової мережі.

КОНТРОЛЬНІ ЗАПИТАННЯ

\Іг-

для перевірки власних навчальних досягнень за темою заняття

Що таке файлова структура сайта?

Якми мають бути імена файлів сайту, щоб їх можна було виставити в Інтернеті?

Що таке хостинг?

Як зареєструвати себе на хостингу?

Як зареєструвати доменне ім'я?

Як вибрати найкраще доменне Ім 'я?

Як виставити та редагувати файли свого сайта в Інтернеті?

* *

СВ ІТ П Р О Ф Е С ІЙ

Сайт-промоутер.

П ЕР Е Л ІК О С Н О В Н И Х П О Н Я Т Ь ТА Т Е Р М ІН ІВ

У н а вча л ьн о м у м а т е р іа л і параграф а: файлова структура сайта; сайти в Інтер неті; розташування сайтів в Інтернеті; завантаження файлів на сервер; редагування сторінок веб-сайта на сервері; доменне ім'я.

У словнику-довіднику: хостинг, домен.

СВ ІТ П Р О Ф Е С ІЙ Контент-менеджер Характер роботи. Вдосконалення веб-сайта в процесі поєднання нової і ціка вої інформації.

Місце роботи: у компаніях і організаціях, робота яких пов'язана з діяльністю в мережі Інтернет.

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

Перспективи. Кар'єрне зростання: менеджер проекту, редактор веб-видання, веб-редактор внутріш ньокорпоратівного веб-сайта, літературний редактор вірту альної газети.

260

ВЕБ-ДИЗАЙН

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

науково-виробничими

Контент-менеджер має бути користувачем

темами.

впевненим

ПК. О бов'язковим

є зна

ння HTML і графічних редакторів, таких як Photoshop.

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

Менеджер інтернет-проектів Характер роботи. З того часу, як Інтернет став невід'ємною частиною бізне су, а створення веб-сайтів набрало виробничих масштабів, виникла необхідність в інтернет-фахівцях. Минула пора веб-майстрів - одинаків. Тепер над створенням сайтів працює ціла група розробників: веб-програмісти, веб-дизайнери, № тІверстальники. Очолює їх менеджер інтернет-проекта. Такі спеціалісти зараз по трібні на ринку праці, у них є можливість виявити відповідальність і самостійність, набути досвіду в організаційній і управлінській сферах, набути знань у найрізнома нітніших сферах діяльності: планування і бюджетування проекту, виріш ення кадро вих питань, веб-маркетинг,

юзабіліті реклама тощо.

Місце роботи: в інтернет-компаніях і організаціях, що мають спеціальний від діл зі створення та підтримки сайтів.

Особисті якості: люди, що працюють на цій посаді, - універсальні фахівці. Час то їм доводиться вирішувати найрізноманітніші маркетингові та технічні питання. Тому вони мають бути широко ерудованими, постійно вчитися і поповнювати зна ння. Не зашкодить і здоровий професійний скептицизм. Часто потрібно шукати

261

ВЕБ-ДИЗАЙН шляхи поліпшення того, що, на перший погляд і так чудово. Потрібно не боятися брати на себе відповідальність і вміти обстоювати власну думку.

Основні обов'язки. Керує створенням сайта від моменту появи ідеї до її втілен ня в Інтернеті. Формулю є концепцію майбутнього сайта, розробляє його структуру, продумує інформаційну складову (контент). Підраховує терміни виконання і ви трати всіх ресурсів. І тут важливо зуміти спрогнозувати розвиток подій на декілька кроків вперед. Адже на практиці трапляється багато несподіванок: люди хворіють або виходить з ладу устаткування. Крім того, менеджер інтернет-проекту пише тех нічне завдання для розробників, дизайнерів і програмістів, стежить за процесом виконання робіт. Вн має володіти знаннями в найрізноманітніших сферах: з одного боку, знати класичний та інтернет-маркетинг, специфіку реклами в Інтернеті і прин ципи побудови веб-сайтів, з іншого - розумітися на інтернет-технологіях (мовах, протоколах апаратній частині). Наприклад, уже під час обговорення майбутнього проекту із замовником він повинен оцінити, чи можна і як реалізувати технічно ту або іншу ідею.

Редактор сайта Характер роботи. Редакторові сайта необхідно: володіти різними літературни ми стилями, бути вмілим користувачем ПК, мати початкові уявлення про веб-дизайн, володіти англійською мовою, уміти пра цювати з базами даних, знати спеціальні програми (Quark Xpress, Indesign та ін.) і основи html, розуміти принципи «розкру чування» сайта і пош укової оптимізації.

Особисті якості: мобільність, стресостійкість, а для успіш ної співпраці з ав торами матеріалів, рекламодавцями і респондентами - контактність і товариськість. Часто виникає необхідність пізно увечері або у вихідний день терміново опублікувати якусь новину - і в такому разі редактор «виходить у мережі» з будинку або інтернет-кафе.

Основні обов'язки. Редактори електронних ЗМІ займаються пошуком і розмі щенням інформації, взаємодіють з авторами, редагують тексти журналістів, розмі щують рекламу і відстежують її ефективність, працюють з фотографіями, спілкують ся на форумах з відвідувачами сайта.

Веб-дизайнер Характер роботи. Веб-дизайнер володіє навичками планування і проекту вання, втілює результати свого проектування, використовуючи знання технологій форматування (структуризації) і презентації інформації в гіпертекстовому (HTTP) середовищі. До таких технологій належать XHTML - структуризація інформації (контента), CSS — презентація (візуальна) інформації; використовуючи Javascript,

262

ВЕБ-ДИЗАЙН

web-дизайнер може регулювати (вплива ти на або реагувати) деякі дії користувача w eb-сторінки.

Основні завдання: створю вати ма кет сайта, розподіляти інформацію по розділах сайта, розробляти навігацію, макетувати сайт з урахуванням ерго номіки (web-usability),

створю вати ілю

страції для web, створю вати анімаційні елементи і банери, розробляти динам іч ні елементи, оцінювати і тестувати сайт, виставляти

готовий сайт на сторінки

всесвітньої мережі Інтернет.

Чим займається web-програміст? Робота w eb-програміста безпосередньо пов'язана з глобальною мережею Інтернет. Такий фахівець створює програми, здатні функціонувати в її межах. Без його участі не може почати працювати жоден інтернет-проект. Наприклад, на основі побажань замовника дизайнер створює гра фічну концепцію майбутнього сайту, а завдання w eb-програміста - втілити ці ідеї технічно, примусити сайт «ожити». Іншими словами web-програмісти створюють динамічні сторінки, пишуть інтерфейси до баз даних, складають технічні завдання проектів.

Специфіка професії web-програміста Переваги професії.

я Затребуваність на ринку праці. ■ Творча робота, оскільки кожне завдання є унікальним, і для його вирішення є кілька способів. ■ Можна поєднувати з навчанням. ■ Не завжди потрібно диплом. ■ М ожливість стати фахівцем у молодому віці. ■ Свобода в прийнятті ріш ень (як саме вирішувати те чи інше завдання, вирі шує сам w eb-програміст). ■ М ожливість віддаленої роботи. Недоліки професії: я У маленьких проектах w eb-програміст поєднує функції декількох фахівців. ■ Часті переклю чення з одніго завдання на інше. ■ Іноді поставлені завдання доводиться вирішувати не тільки в будні, а й у ви хідні. ■ Постійна робота за комп'ютером позначається на здоров'ї, особливо сильно страждають очі.

Де працює web-програміст. ■ w eb-студїі, інтернет-компанії; ■ організації, діяльність яких пов'язана з Інтернетом; ■ компанії, структура організації яких передбачає такого фахівця.

ВЕБ-ДИЗАЙН

Особисті якості Для web-програміста важлива посидючість, особливо на початкових стадіях кар'єри. На жаль і в цій роботі доводиться багато часу приділяти поточним справам. Якщо раніше розробники сайтів практично ніколи до них не зверталися, то сьогодні технології зміни лися. Готовому сайту постійно потрібні обслуговування, оновлення і зміни. Створення w eb-сайта - це процес роботи декількох фахівців. Тому ще однією хорошою якістю для w eb-програміста є уміння працювати в команді.

Веб-майстер Характер роботи. Для того щоб створити сайт, що коректно працює, необхідні зусилля як мінімум трьох фахівців: w eb-програміста (що поєднує написання програмінгу з адміні струванням сайту), w eb-дизайнера і контентредактора. Щоб їх дітище не «захиріло» і «роз кручувалося» у Всесвітній павутині, потрібний також менеджер з маркетингу і реклами. Всі ці обов'язки сьогодні об'єднує w eb-майстер. Але така вузька спеціалізація можлива лише в

потужних

дизайн-студіях.

основному

w eb-майстер повинен поєднувати в собі не поєднуване: бути одночасно математиком і митцем, уміти спілкуватися з клієнтом, формулювати технічне завдання, програму вати і володіти складними графічними пакетами.

Основні завдання: виявити в розмові з замовником архітектуру і логіку май бутнього сайта, врахувати побажання, що стосуються дизайну, і сформулювати тех нічне завдання; програмувати на C/C++, Perl і Java/javascript (рідше - РНР і ASP); працювати з базами даних (SQL, Postgres і так далі); розробити стиль фірми (або підтримувати той, що вже існує); працювати з графічними пакетами (Photoshop, Il lustrator, Flash і тому подібне); розміщувати та оптимізувати графіку; верстати сто рінки в html; відлагодити сайт для роботи в будь-якому браузері, забезпечивш и су місність кодів; встановити і відбудувати відповідний веб-сервер і поштовий сервер, забезпечити їх захист і стабільну роботу (для цього необхідне знання Nt+iis і Unix (FREEBSD, Linux...) + Apache); проводити рекламні кампанії в Інтернеті, уміти працю вати з основними банерними мережами спілкуватися з рекламними агентствами і рекламодавцями, домовлятися з адміністраторами інших сайтів про взаємний об мін банерами і посиланнями.

Ш тІ-верстальник Характер роботи. М ожливість самостійного опанування професії, високий попит на ринку праці, необхідність постійного оновлення знань, розмиті межі між веб-дизайнером, веб-програмістом і банер-мейкером дають можливість працювати в суміжних сферах.

264

ВЕБ-ДИЗАЙН

Основні завдання. До завдань Ж тІ-верстальника належить

реалізація

дізайнером)

проекту

вигляді

усіх особливостей

(розробленого

Ш тІ-код у

стилю

веб-

урахуванням

і графічного оформлення.

Створений код має однаково адекватно відображатися в усіх популярних браузерах, за різного розрішення монітора і різної кількості кольорів.

Специфіка професії НТМІ.-верстальника: Переваги професії-. ■ М ожливість

самостійного

опанування

професії. ■ Високий попит на ринку праці. ■ Необхідність постійного оновлення знань. ■ Розмиті межі між веб-дизайнером, вебпрограмістом та банер-мейкером дають можливість

працювати

суміжних

областях. Недоліки професії: ■ Мало простору для вдосконалення. ■ Рутинна робота. ■ Постійна

робота

монітором

згубно

позначається на загальному самопочутті.

Де працює ІПтІ-верстальник: ■ Інтернет-компанії, дизайн-студії. ■ Компанії, які у структурі мають інтернет-відділи.

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

Веб-програміст Характер роботи. Велика потреба на ринку праці; творча робота, оскільки кожне завдання унікальне і для його вирішення є декілька способів; можна поєднувати з навчанням; можливість стати фахівцем у молодому віці, свобода в ухваленні рішень (як вирішувати те або інше завдання вирішує сам и/еЬ-программіст); можливість віддаленої роботи. Місце р обо ти. Web-стyдiï, інтернет-компанії, організації, діяльність яких пов'язана з Інтернетом, компанії, структура організації яких передбачає такого фахівця. О собисті яко сті: для и/еЬ-програміста важлива посидючість, особливо на початкових стадіях кар'єри. На жаль, і в цій роботі доводиться багато часу надавати поточним справам. Якщо раніше розробники сайтів практично ніколи до них не поверталися, то сьогодні технології змінилися. Готовому сайту постійно потрібні обслуговування, оновлення і зміни. Створення \л/еЬ-сайта - це процес роботи декількох фахівців. Тому ще однією хорошою якістю для \теЬ-програміста буде уміння працювати в команді.

265

ВЕБ-ДИЗАЙН Основні завдання. Робота w eb-програміста безпосередньо пов'язана з глобальною мережею Інтернет. Такий фахівець створює програми, здатні функціонувати в її межах. Без його участі не

може

почати

працювати

жоден

інтернет-

проект. Наприклад, на основі побажань замовника дизайнер створює графічну концепцію майбутнього сайта, завдання w eb-програміста втілити ці ідеї технічно, змусити сайт «ожити». Іншими словами, w eb-програмісти створюють динамічні сторінки, пишуть

інтерфейси

технічні

завдання

володіти

специфічними

програмування,

до

баз

даних,

проектів.

такими

для як

складають

Йому Інтернету Javascript,

потрібно мовами Vbscript,

Perl, PHP, Java, C++, базами даних, знати основне середовище розробки і протоколи.

Адміністратор сайта Характер роботи. М ожливість самостійного опанування професії, робота в режимі віддаленого доступу,

інколи

можливість

поєднувати

навчанням або іншою діяльністю.

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

виконувати

обов'язки

контент-

менеждера, стежачи за своєчасним оновленням інформації.

Специфіка професії адміністратора сайта: Переваги професії-. я М ожливість самостійного опанування професії. ■ Робота в режимі віддаленого доступу. ■ Іноді є можливість поєднувати з навчанням чи іншою діяльністю. Недоліки професії: я Постійна боротьба з хакерами. ■ Нерідко бувають позаштатні ситуації, ліквідувати які необхідно в найкоротші терміни.

Де працює адміністратор сайта У веб-студіях, Інтернет-компаніях, в телекомунікаційних компаніях, в компаніях, де є свій інтернет-відділ.

266

ВЕБ-ДИЗАЙН

Особисті якості Так само як і будь-якому адміністраторові, адміністраторові и/еЬ-сайта доводить ся вирішувати безліч різноманітних питань і проблем, тому головною його якістю ма ють бути спокій і витримка. Крім того, \л/еЬ-адміністраторами повинні бути серйозні, практичні люди, яким притаманна логіка і які віддають перевагу ладу в роботі.

Комп'ютерний дизайнер Характер роботи. Для того щоб створити сайт, що коректно працює, необхідні зусилля як мінімум трьох фа хівців: \л/еЬ-програміста (що поєднує написання програмінгу з адмініструван ням сайта), \«еЬ-дизайнера і контентредактора. Одним з них є фахівець з комп'ютерного дизайну, а у напрямі розробки \л/еЬ-сайтів - \л/еЬ-дизайнер. Дизайнер - традиційно найдорожчий співробітник, бо його робота передба чає авторський знак і копірайт, особливо, якщо дизайнер "з нуля" створює стиль фірми. Тоді вся подальша рекламна і поліграфічна продукція буде «зав'язана» на стилі сайта, який створив дизайнер.

Основні завдання. Розробити стиль фірми (або підтримувати той, що вже іс нує); працювати з графічними пакетами (АсІоЬеРЬоТозИор, АсІоЬеІІІизиаіог, АсіоЬеРІа5Ь і тому подібне); розміщувати та оптимізувати графіку.

П'єр Етьєн Без'є Місце проживання: Франція. Галузь наукових інтересів: математика. Навчався у Вищій національній школі мис тецтв та ремесел, Вищій школі електрики. Французький інженер і винахідник кри вих Без'є і поверхонь Без'є, які нині викорис товую ть у системах автоматизації проекту вання і комп'ютерної графіки. Народжений у Парижі, Без'є отримав диплом інженера з машинобудування у Національній вищій П 'ср Етьсн Без'є

школі мистецтв і ремесел в 1930 р. Він здобув

(Pierre Etienne Bizier) (1 вересня 1910-25 листопада 1999)

другий диплом з електротехніки в 1931 р. у Вищий школі електрики та отримав доктор ську ступінь з математики в Університеті Па рижа в 1977 р.

ВЕБ-ДИЗАЙН Працював

автомобільній

компанії

«Рено» у 1933-1975 рр, де розробляв систе му САПР-САМ и М Б Ш Р . У 1968-1979 рр. був професором з ви робництва у Національній школі мистецтв і ремесел. У 1985 р. П'ера Без'є Асоціація об числю вальної техніки (АСМ) та нагородила премією Стівена Кунса за довічний внесок у комп’ютерну графіку і діалогові методи. Сорбонна - Університет Парижа, в яко му П'ср Етьен без'є в 1977р.отримав докторську ступінь з м атем атики

Науково-технічна інформація для дослідників теорії комп'ютерної графіки і

-о-

М атематичну основу векторних

-о

зображень утворюю ть криві Без'є, названі так за ім'ям П. Без'є. В 70-х роках

Без'є

застосував

поліноми

третього порядку для управління різальними автоматами з числовим керуванням для розкрою автомо більних кузовів на заводах «Рено». Саме криві Без'є стали стандартом для опису векторної графіки, хоч дотепер використовують деякі інші кривіь. Криву Без'є задають дві пари точок або два вектори, кожен з яких виходить з опорної точки і закінчується в керуючій точці. Опорні точки визначаю ть початок Р0(*о-Уо)' кінець Р,(х}<у,) кривої, а керуючі Р,(х ,, у,) і Р р (} , у ) - її форму. Звичайно за стандартом, визначеним фірмою АсІоЬе, криву Без'є задають у па раметричній формі:

х(0 =охі, +ЬхХ1 +сіл +х^у(0 =оуі, +Ьуі2+суі + у0; 0М >1. Коефіцієнти визначаю ть у такий спосіб. При 1 = 0 матимемо х =

у = у0. Отже

крива проходить через точку Р0(х0,у 0). При 1 = 1 крива пройде через Р,(х ,, у 3), тобто х,= ох + Ьх + сх + х0; у = оу + Ьу + су + у0. Керуючі точки визначаю ть у такий спосіб: х, = х0+ сх / 3;

х2= х, + (сх + Ьх) / З

та У, = У0 + су / 3; уг =у,+ (су + Ьу)/3 .

268

Графічні роботи, що створено за допомогою кривих Без'є і

Головним при виборі керуючих точок є їх зв'язок з похідними в початковій і кінцевій опорних точках. Неважко пересвідчитися, що _ d y_ _ _ У ,- У „ . dxim0 = * Г * о '

у ,- у }

dx,_,= * r * з'

Значення коефіцієнтів можна обчислити за формулами сх = 3 (х, -х^) Ьх = 3 (хг -х,) - схах = х, -х0- сх - Ьх су = •

з(у, - у 0) by = 3 (уг - у ,) - су о у= у, - у0- су- by

Канонічне рівняння кривої Без'є набуде такого вигляду: P it) = Р0(1 - t)J + P,t(1 - t)J + Р} І г(1 - 1) + Pjt3; (O st s i) . Для побудови зображень криві Без'є можна з'єднувати одна з одною, будуючи як завгодно складні контури, найчастіш е замкнені. Кожному контуру приписується декілька колірних характеристик: товщина і колір лінії, колір частини площини, що обмежується даним контуром. У випадку незамкненого контуру його початкова та кінцеві точки з'єднуються умовною лінією.

С Л О В Н И К -Д О В ІД Н И К 2сІ-анімація - дуже місткий термін. У принципі, і миготливі банери на w eb-

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

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

Анімація - динамічна картинка або текст. Привертає більш у увагу, ніж ста тична картинка. У w eb -дизайні, анімовані картинки або тексти варто використо вувати акуратно. Велика кількість анімації на одній сторінці, утрудняє сприйняття інформації.

Аудит сайта - сукупність заходів, націлених на здобуття об'єктивної і достовір ної інформації про стан сайта за декількома параметрами на певний момент.

ВЕБ-ДИЗАЙН Банер (banner) - прямокутної форми рекламний графічний блок пов'язаний гіперпосиланням із сайтом рекламодавця. Банери є трьох найбільш поширених роз мірів: 468 х 60,400 х 50,88 х 31. Це не всі можливі розміри, але лише найпоширеніші.

Браузер (Browser) - програмне забезпечення, що надає користувачу мережі Інтернет інтерфейс для інтерактивного пошуку, перегляду та оброблення гіпертекстових документів, програма-клієнт для роботи у Всесвітній павутині (W W W ). Дає можливість користувачеві проглядати зміст веб-сторінок. Браузер звертається до сервера, “читає" документ, що створений засобами HTML, інтерпретує отриману інформацію і відображає зміст документа. Таке відображення документа назива ється веб-сторінкою. Браузер дає можливість переглядати каталоги інформаційних ресурсів w eb-сайтів і здійснювати переходи на вибрані веб-сторінки. На сьогодні є низка програм для навігації в Інтернеті. Приклади браузерів: Internet Explorer, Opera, Mozilla, Mosaic, Netscape Navigator.

Вбудований шрифт (internal font) - шрифт, який зберігається в постійному запам'ятовувальному пристрої.

Веб (Web) - Всесвітня павутина (W orld W ide W eb), нині компонент мережі Інтер нет, що найбільш бурхливо прогресує. Д озволяє одержувати доступ до інформації з заданої теми незалежно від місця її розміщення. Користувачі автоматично пере ходять від однієї бази даних (сайта) до іншої за допомогою "гіперпосилань". W W W найбільше сховище інформації в електронному вигляді, мільйони пов'язаних між собою документів, що розташовані на комп'ютерах, розміщених на всій земній кулі.

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

Веб-сторінка (Web-page) - складова веб-сайта, файл HTML-формату. Може містити гіпертекст, зображення, JA V A -аплети і інші веб-елементи. Сторінка може бути статичною або генерована динамічно.

Веб-хостинг (Web Hosting) - розміщ ення веб-сайта на спеціально налаштова ному і під'єднаному до Інтернету комп'ютері. Організації, що надають послуги вебхостингу, називаються хостинг-провайдерами.

Відвідуваність - кількість відвідувачів веб-сайта за певну одиницю часу. Є ключовою характеристикою при визначенні рейтингу сайта для участі в банерних мережах та інших проектах з просування сайта. Дотепер єдиних підходів вимірю вання відвідуваності не вироблено. Для оцінки числа "унікальних відвідувачів* за звичай використовую ть аналіз IP-адрес або функцію Cookie.

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

270

ВЕБ-ДИЗАЙН

мультимедіа-документи з усього світу і встановлюють легкодоступні та незалежні від фізичного розміщ ення документів універсальні інформаційні зв'язки між ними.

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

Глобальна мережа (WAN - Wide Area Network ) - мережа, що забезпечує передання інформації на значні відстані з використанням комутованих і виділених ліній або спеціальних каналів зв'язку.

Дизайн (Web Design) - оформлення веб-сторінок. Він відіграє таку саму роль для сайта, як поліграфічний дизайн і верстка для паперового видання. Часто під веб-дизайном розуміють не лише створення графічних елементів для сайта, а й проектування його структури, навігації й іноді навіть програмної частини, що по трібна для роботи сайта, тобто створення сайта цілком. Дизайн у розумінні ефек тивної роботи сайта є значно важливішим, ніж «гарна картинка».

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

Домен - адреса вашого веб-сайта в мережі Інтернет. Це ім'я, що використовується для адресації комп'ютерів і ресурсів в Інтернеті за допомогою звернення до глобаль ної системи доменних імен. Наприклад: www.name.com.ua, де name - це і є доменне ім'я, а com.ua - це зона домену. Це літерне позначення вашого сайта. Всі комп'ютери в Інтернеті насправді позначаються цифрами, наприклад 213.180.194.129, проте пе ресічному користувачу Інтернету дуже складно запам'ятати такий набір цифр. Тому була вибрана альтернатива - літерні адреси, домени. Цифри як позначення серверів залишаються, проте їм відповідають певні літерні назви. Доменні імена записують латинськими літерами. Для перегляду вашого сайта користувачі вписують у вікно браузера літерну адресу, після чого відбувається під’єднання до сервера, на якому розміщується сайт, і сторінки сайта стають доступними для перегляду.

Електронна пошта (E-mail) - сервіс мережі Інтернет, що дає можливість об мінюватися повідомленнями в електронній формі за допомогою комп'ютерних ме реж, програмне забезпечення для передання текстових повідомлень за допомо гою комп'ютерної мережі. Електронний аналог листів, що пересилаються поштою. Найпоширеніший спосіб спілкування в Інтернеті. Нині електронною поштою можна пересилати не лише текст, а й усі інші види даних, що прикріплюються до листів. Самі листи в змозі підтримувати всі операції з шрифтами, містити фон, таблиці та ілюстрації. Кожен абонент електронної пошти має особисту поштову адресу, що складається з імені користувача в системі і назви комп'ютера, на якому запущений поштовий сервер, розділених символом @. З погляду користувача, електронна пошта є програмою, що дає змогу відправляти повідомлення, прямо складаючи їх на комп'ютері, і одержувати листи, відправлені іншими. Зручність використан ня та ш видкість доставлення повідомлення - основні характеристики, за якими електронна пошта переважає звичайну ‘'паперову". Найбільш поширеними по штовими програмами є: Microsoft Outlook Express, Microsoft Internet Mail, Netscape Messenger із пакета Netscape Comm unicator, Eudora, TheBat та ін.

271

ВЕБ-ДИЗАЙН

Завантаження, або показ, - перегляд будь-якої сторінки сайта, зареєстрова ний лічильником відвідувань.

Індексація сторінок сайта - аналіз і розпізнавання текстової інформації на сторінках сайта пошуковими роботами.

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

Інформаційне середовіще (Inform ation environm ent) - сукупність технічних і програмних засобів зберігання, оброблення і передання інформації.

Key animators - розкадровники на базі сторі-бордів, що роблять розкадровування {layout), яке визначає розмір сцени, положення камери, положення героїв і вигляд тла.

Клік - активація (найчастіш е лівою кнопкою миші) гіперпосилання (текстового або графічного) з метою переходу на сторінку або запуску якого-небудь процесу.

Корпоративний сайт - сайт, що представляє в Інтернеті підприємство або ор ганізацію будь-якого профілю, масштабу і організаційно-правової форми.

Лінк (Link) - у звичайному вжитку посилання в мережі Інтернет (виділений елемент гіпертексту), що дозволяє переміщення до іншої частини документа, а та кож процедура з'єднання з комп'ютерними системами, що зберігають гіпертекстові документи на серверах мережі Інтернет, розміщених по всій території земного шару. В індустрії комп'ютерного програмування лінком називають створення гото вої до виконання програми шляхом об'єднання (компонування) окремо скомпільо ваних об'єктних програмних модулів. У деяких файлових системах - альтернатив не ім'я файла. Наприклад, у системі UNIX із файлом може бути пов'язано декілька імен. В галузі телекомунікацій іноді термін вживаю ть у значенні ланки зв'язку - за собу зв'язку між суміжними вузлами мережі.

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

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

Матеріали для сайта - тексти, зображення, таблиці, списки, текстові, звукові, відеофайли, призначені для включення в сайт.

272

ВЕБ-ДИЗАЙН Модуль (програмнний модуль) - компонент CMS, що поєднує зберігання пев ного контенту сайта і його відображення, модифікацію в інтерфейсі CMS. Модульна система дає можливість постійно розвивати та удосконалювати систему, а в разі ви никнення нових завдань - оперативно виріш увати їх шляхом конфігурації системи необхідними модулями.

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

Портал (Web Portal) - інтернет-сайт, що надає максимально широкий спектр послуг, які відповідають потребам пересічного користувача М ережі. До переліку сервісів, що надаються, як правило, входять пошук інформації, безкош товна елек тронна пошта, стрічка новин, прогноз погоди, відомості про курси валют, перелік посилань на мережеві ресурси та ін. У більшості випадків у порталів є також значне власне змістове наповнення. Мета порталів - створення місця в М ережі, з якого ве лике число користувачів регулярно починає свою роботу в Інтернеті. Тому порта ли є привабливим місцем для розміщення реклами. Порталами можуть вважатися сайти, що мають стабільно високу відвідуваність. Більш ість порталів сформовано навколо пошукових машин і довідників інтернет-ресурсів. Крім універсальних пор талів, розрахованих на всіх користувачів без обмеження, є галузеві (тематичні) пор тали, чітко орієнтовані на потребі певної групи користувачів: Yahoo.com, Bigmir. net, Uaportal.com, Gala.net, Яндекс.ги та ін.

Розділ сайта - елемент структури сайта, призначений для тематичної організа ції інформаційного наповнення, поіменована сторінка або група сторінок сайта, де ім'я відображає тему (тематику) цієї сторінки або групи сторінок сайта.

Сайт (W eb Site) - сукупність логічно пов'язаних web-сторінок, розміщених, як правило, на одному комп'ютері. М істить початковий файл - домашню сторінку, та інші, які називають сторінками. Передивитися сайт можна на своєму комп'ютері, використовуючи спеціальну програму web-браузер.

Сайт - сукупність сторінок, розташованих в єдиному адресному просторі (до мені), що містять текстову і графічну інформацію (а також будь-яку іншу інформа цію, яку можна представити в електронному вигляді) і мають певні функціональні можливості. Робота з сайтом можлива за наявності таких програм (браузерів), як Internet Explorer, Mozilla Firefox Safari та ін.

Сервер мережі Інтернет - комплекс технічних і програмних засобів, що за безпечую ть функціонування будь-яких необхідних сервісів Інтернету: http-сервіс (сайт), E-mail (електронна пошта), конференції, ftp і т. ін. Для розміщення сайта в Інтернеті необхідний інтернет-сервер, що підтримує як мінімум сервіс http.

Сесія - перегляд користувачем декількох сторінок сайта. Система управління сайт# (CMS - Content M anagem ent System ) - програмне забезпечення, що дає можливість управляти вмістом і структурою сайта.

Сторінка сайта (синонім: веб-сторінка) - 1) (на логічному рівні) поіменова на сторінка сайта, ім'я якої відображає тему (тематику) певної сторінки сайта; 2) (на фізичному рівні) файл на веб-сервері, що однозначно визначається адресою (URL). Сторінки сайта переглядають за допомогою браузера.

273

ВЕБ-ДИЗАЙН Структура сайта - сукупність його елементів і стійких зв'язків між ними, сукуп ність логічної і фізичної структури сайта. Ter (Tag - мітка) - оператор мови розмітки гіпертексту. Теги вміщені в кутові дужки і зазвичай застосовуються в парах, тобто мають мітку, що відкривають і за кривають, які позначають, відповідно, початок і кінець області д ії Починаються із символу «<» і заверш уються символом « > ».

Ter (Tag) - позначки в HTML-файлі (або в тексті, що відформатований в іншому форматі, наприклад, Am igaguide), що визначаю ть межі елементу. Це елемент HTML, є текстом, обмеженим кутовими дужкками о , активний елемент, що змінює пред ставлення наступної за ним інформації. Може мати певні атрибути. Зазвичай є два теги - що відкриває і закриває. Наприклад

Ь-

ці теги описують текст між ними як

напівжирний.

Фізична структура сайта - модель сайта, сукупність директорій, файлів і до менів сайта, що відображає.

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

Хіт - факт запиту браузером завантаження сторінки, за винятками перезаван таження.

Хост - унікальна ІР-адреса клієнта. Один користувач може мати декілька ІРадрес, якщо виходить у мережу через модем, а також декілька користувачів можуть мати одну ІР-адресу, коли з'єднання декількох комп'ютерів здійснюється через ви ділену лінію.

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

Цільова аудиторія - група користувачів мережі, які зацікавлені в інформації, наданій на певному сайті.

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

Ядро аудитори - число користувачів, які регулярно протягом певного терміну відвідують веб-сайт.

Animation Supervisor - контролер анімації. Art boards («художні картки») - готуються художником-постановщиком для митців тла.

274

ВЕБ-ДИЗАЙН

Art Director - художник-постановник, що створює «сюжетні картки») (im age boards), малює деталізовані комплекти ескізів (m odel pack) для розкадровників і «художні картки») для розробників тла анімації.

BG artists - митці тла. Character Designer - розробник персонажів, їх зовніш нього вигляду і костюмів. HTML (Hypertext Markup Language) - мова розмітки гіпертекстових документів, основний спосіб зберігання і передавання документів у мережі Інтернет. Є звичай ним текстовим файлом, в якому те, що ми зазвичай бачимо на сторінках, перемеж овується невидимим для перегляду з браузера кодом. Цей код і є мовою розмітки HTML. Як елементи форматування використовують так звані теги (tag). Мова розмітки гіпертексту дає можливість за допомогою міток (тегів) визначати структуру і зовніш ній вигляд HTML-документа (веб-сторінки) при відображенні в браузері, а також ство рювати посилання на інші файли. Головною особливістю HTML є здатність викорис товувати гіперзв'язки (links), завдяки яким можливі посилання на інші документи, як локальні, так і ті, що перебувають на іншому кінці земної кулі, а також впровадження в документи зображень, звуку, відео і т. ін. HTML застосовують для надання певного вигляду тому або іншому елементу, чи то таблиця, текст або картинки.

Image boards («сюжетні картки») - ілюструють основні моменти сюжету, а та кож визначаю ть постановку, розфарбовування і інші деталі.

Inbetweeners (фазовщики) - художники, які за допомогою ключових кадрів як основу створюють проміжні кадри заповнюючи проміжки між ключовими.

Inbetweening - розбиття на фази, тобто промальовування проміжних фаз ані мації між ключовими кадрами.

JAVA - міжплатформена мова програмування. Програми, написані на JAVA, за пускаються на стороні клієнта з використанням так званої віртуальної машини (VM) Java. Застосовується для створення динамічних сторінок, організації'доступу до баз даних за допомогою Інтернету тощо. Javascript - мова програмування, що Грунтується на об'єктному представлен ні браузера. Текст програми вбудований безпосередньо в HTML-документ і інтер претується самим браузером. JAVAScript застосовується для додавання інтерфейсу сторінки більш ої інтерактивності порівняно з HTML: наприклад, меню, що сплива ють, біжучий рядок, малюнки, що змінюють вигляд при підведенні курсора, і т. ін.

Motion Tweening - анімація руху і масштабування. Onion skinning - функція анімаційних програм, яка дає можливість напівпро зорого перегляду попереднього/наступного малюнка на одному кадрі. Виконує роль кальки.

Perl - мова програмування. Програми, написані на Perl, запускаються на сто роні сервера. В основному застосовується на UNIX-орієнтованих веб-серверах. Використовується для забезпечення доступу до баз даних, створення динамічних сторінок і т. ін.

PHP (Personal Home Page) - засіб створення інтерактивних веб-сторінок, го ловною перевагою якого є можливість формування сторінок за допомогою інтер активної взаємодії «клієнт - сервер». Включає CGI-Інтерфейс, інтерпретатор мови і набір функцій для доступу до баз даних і різних об'єктів Всесвітньої павутини.

275

ВЕБ-ДИЗАЙН PNG (Portable Network Graphic) - новий графічний формат (читається: пінг), вве

дений для заміни формату GIF після того, як з останнім виникли патентні пробле ми. Оскільки формат новий, то підтримується дуже невеликою кількістю браузерів і лише деякими видами програмного забезпечення. Практично не поширений у W EB. На відміну від GIF, дає можливість зберігати зображення, що мають глибину кольору до 64 бітів на піксель, підтримує окремий альфа-канал, дещо покращене стиснення.

SEO (Search Engine Optim ization) - оптимізація та просування сайта в пошуко вих системах з метою підвищення його позиції в результатах пошуку за тематични ми запитами, щоб привабити більш у кількість цільових відвідувачів з пошукових систем.

Shape Tweening - анімація форми. Storyboards (сторі-борди) - ряд послідовних малюнків, що показують основні моменти майбутнього анімаційного фільму (сценарій у малюнках). Time sheet, exposure sheet, xsheet - часовий аркуш, експозиційний аркуш ви конується розкадровниками і визначає час епізоду. Tweening - анімація, повторення, автоматичне розбиття на фази, що викону ється комп'ютером за ключовими кадрами.

URL (Uniform Resource Locator) - інтернет-адреса, присвоєна кожній вебсторінці. Кожен URL в Інтернеті унікальний і однозначно визначає документ в ме режі Інтернет. URL - універсальна адреса ресурсу, унікальне ім'я, що однозначно визначає документ в мережі Інтернет. Найширше використовується у W EB. Коли ви хочете послатися на будь-який документ у М ережі, то користуєтеся стандартною угодою з написання URL, наприклад: http://www.microsoft.com/index.htm

WYSIWYG (W hat You See Is W hat You Get) стосовно CMS - редагування контенту, за якого відображення в редакторі CMS збігається з відображенням на сайті.

РЕКО М ЕНД О ВАН А ЛІТЕРАТУРА Усенко Д. Уроки W eb-мастера. - М.: БИНОМ: Лаборатория знаний, 2003. - 507 с.

276

РЕЗЕРВ ЧАСУ

r І

§ 19. Прийоми роботи з графічним редактором Adobe Photoshop. Інтерфейс програми Adobe Photoshop Головне меню програми містить дев'ять пунктів: File (Файл), Edit (Редактирова ние), Image (Изображение), Layer (Слой), Select (Выделение), Filter (Фильтр), View (Вид), W indow (Окно), Help (Помощь). Ліворуч від робочого поля розміщена панель інструмен тів, праворуч - панелі (палітри), що спливають (рис 19.1 -19.4) Увімкнути та вимкнути всі елементи, розташовані на робочому полі, можна за допомогою меню View (Вид).

[я ж І Д

Рис. 19.1. Панель інструм ентів

Рис 19.3. Панель налаш тувань для інструм ента Bum

Рис. 19.4. Панель налаш тувань для інструм ента Paint Bucket

Інструменти програми Всі інструменти у програмі Photoshop містяться на спе ціальній панелі (див. рис. 19.1). Деякі інструменти позначе ні маленьким трикутником. Якщо натиснути на піктограму і зачекати кілька секунд, розкриється палітра, що спливає, де можна обрати інструмент, що входить до тієї самої групи. Для вибору інструмента з набору слід перемістити на нього курсор миші і клацнути по ньому. При наведенні курсора на інструмент висвічується підказка, якщо увімкнута опцію Show Tool Tip (Подсказки по инструментам) діалогового ві кна Preferences (Установки), що відкривається командою File->Preferences->General (Файл->Установки->Основные). Дуже зручно викликати інструменти за допомогою кла віатури (запам'ятайте букви, призначені для кожного ін струмента). Якщо ви забули клавішну комбінацію, наведіть Мал. 192. Панель інструм ентів. Приклад р озкр иття набору інструм ентів, що м істяться на кноп ці з маленьким тр и кутником

278

курсор на піктограму інструмента, затримайте на кілька секунд, і підказка, що спливає, нагадає її вам (див. рис. 19.2). Для кожного інструмента задаються власні параметри (наприклад, режим змішування, значення непрозорості) на панелі налаштувань, розташованій вгорі екрана. Склад налаштувань на панелі змінюється залежно від того, який інструмент активний (рис. 19.3).

РЕЗЕРВ ЧАСУ інструменти виділення До інструментів виділення належать Rectangular (Область) O L Elliptical (О валь ная область) о . Single Row (Горизонтальная строка) H Single Column (Вертикаль ная строка) і „ Lasso (Лассо) їй , Polygon Lasso (М ногоугольное лассо) Й , M agnetic Lasso (Магнитное лассо) Й та Magic W and (Волш ебная палочка) \ l Інструмент Rectangular (Область)

виділяє прямокутні області, Elliptical (О валь

ная область) а -еліптичні, Single Row (Горизонтальная строка) S та Single Column (Вертикальная строка) L - відповідно горизонтальні та вертикальні смуги товщ и ною 1 піксель. Інструмент Lasso (Лассо) Р , дає змогу виділяти області неправиль ної форми, намальовані на екрані курсором, Polygon Lasso (М ногоугольное лассо) Й - області у формі багатокутників, вузли яких утворюю ться натисканням мишею (для заверш ення вводу слід клацнути двічі), інструмент M agnetic Lasso (Магнитное лассо) Й дає можливість виділяти області на основі розмежовування кольорів, ін струмент M agic W and (Волшебная палочка) ® виділяє області на основі подібності кольорів. Близький за змістом інструмент Crop (Рамка) Ч застосовують для обрізання країв зображення, a M ove (Перемещение)

використовують для пересування ви

браних областей. Практично в усіх режимах роботи (за винятком Hand 3 ) пере сування здійснюється за затисненої клавіші Ctrl, за Ctrl + Alt переміщення здійсню ється з клонуванням, і при Ctrl + Alt + Shift маршрут переміщення відбуватиметься строго під кутом 90°.

Інструменти редагування До інструментів редагування належать Clone Stam p (Штамп) lid, Pattern Stam p (Текстура) A., Sm udge (Палец) К , Blur (Размытие) (Осветлитель)

Sharpen (Резкость) A* Dodge

Burn (Затемнитель) та Sponge (Губка) • „

Clone Stam p (Штамп) A. - інструмент для клонування: ним обирають деяку ді лянку зображення (затиснувши клавішу Alt клацають на потрібному місці, потім від пускають) і копіюють її в інше місце. Інструмент Pattern Stam p (Текстура) Ж клонує наперед обрану текстуру. Інструмент Sm udge (Палец)

розмазує" кольори, ство

рюючи ефект малювання аквареллю. Інструмент Blur (Размытие) А. розмиває різкі краї (зменшує чіткість), a Sharpen (Резкость) А, - навпаки, виявляє на зображенні всі подробиці. Інструменти Dodge (Осветлитель)

та Burn (Затемнитель) Cl відповід

но освітлюють або затемнюють ділянки зображення, a Sponge (Губка) •. збільшує або зменшує інтенсивність кольорів.

Виділення Якщо виділити якусь область зображення, то редагувати можна буде тільки її, всі інші пікселі зображення будуть захищені. Після того, як створено виділення, на екрані відобразиться рухома рамка, що є межею виділення. Якщо за допомогою інструмента M ove (Переместить)

зрушити виділену область, то ділянка, яка за

лиш иться після того, як ви забрали частину зображення, буде автоматично залита

279

РЕЗЕРВ ЧАСУ

фоновим кольором. З іншого боку, якщ о за допомогою цього самого інструмента перемістити виділену область, розташовану на шарі, то ця область стане прозорою.

Виділення простої форми За виділення прямокутної та еліптичної області відповідають інструменти Rectangular M arquee (Прямоугольная область) О або Elliptical Marquee (Овальная область) Ш , "гаряча" клавіша - М. Для інструментів Rectangular Marquee (Прямоугольная область) або Elliptical Marquee (Овальная область) можна встановити точні розміри майбутньої виділе ної області, для цього потрібно з меню, що спливає, Style (Стиль), розташованого на панелі параметрів, вибрати пункт Fixed Size (Фиксированный размер) та ввести значення ширини й висоти (рис. 19.5).

Рис. 19.5. Панель фіксованого розміру прямокутного виділення

Створення складної виділеної області довільної форми. Інструмент Lasso (Лассо) Ш ("гаряча" клавіша L) дає змогу обводити фігури, що мають складну форму. На панелі параметрів

інструмента

введіть значення

параметра

Feather

(Растуш евывание), щоб згладити границі виділеної області. Щоб розпочати виділення, затисніть ліву кнопку миші та тягніть курсор навко ло потрібного об'єкта, коли відпустите - кінці незамкнутої границі автоматично бу дуть з'єднані найкоротшим відрізком. Якщо вам потрібно побудувати відрізок прямої при роботі з інструментом Lasso, то, не відпускаючи кнопку миші, натисніть клавішу Alt і клацайте мишею, щоб створювати кути, /'"*')

. )

відпустіть клавішу, щоб продовжити створення

довільно виділеної області.

ч, ;

(

,У \

Інструмент Polygon Lasso (Полигональное \

\ .......4 . J /' /

лассо) ® ("гаряча" клавіша L) дає змогу створювати виділення ламаними у формі багатокутни-

ків. Для того щоб розпочати виділення, клацніть

\ і

у потрібному місці на зображенні, так ви задасте першу опорну крапку для нового контуру виділення. Не натискаючи кнопки миші, пере містіть курсор в інше місце, за ним потягнеться

Рис. 19.6. Приклади створення

відрізок, якщо знову клацнути на зображенні,

складноївиділеноїобласті довільноїформи інструментом Лассо

то можна визначити ще одну опорну крапку буде створено перший відрізок контуру.

РЕЗЕРВ ЧАСУ

Рис. 19.8. Резул ьтат застосування інструм ента M agic Wand до чорної області космосу

Рис. 19.7. Приклади створення складної виділеноїобласті довільноїформи інстру ментом Полігональне Лассо

Якщо ви натиснете ще раз на зображення, буде створено новий відрізок, по вторюючи цю операцію, можна створювати різні ламані. Затиснувши клавішу Alt, можна в процесі побудови виділення тимчасово ак тивізувати інструмент Lasso. Щоб відновити дію інструмента Polygon Lasso, досить відпустити клавішу. Затиснувши клавішу Shift, можна створити прямолінійні ділянки виділення під кутом, кратним 45°. Натисніть клавішу Delete, щоб видалити останній створений кут.

Виділення пікселів залежно від їхнього кольору За допомогою інструмента Magic Wand (Волшебная палочка) S I “гаряча' клавіша якого W, можна виділяти суміжні пікселі одного відтінку або одного рівня прозорості. Щоб у виділену область увійшли тільки пікселі, суміжні з пікселем, по якому ви клацнете, потрібно на панелі параметрів поставити галочку Contiguous (Смежные). Якщо зняти галочку, то будуть виділені пікселі по всьому зображенню (ті, що “схожі" на той колір, по якому ви клацнули). Панель параметрів інструмента M agic Wand: *

IjB lG l© ®

Т«4»г«пеі: 4

[□

A n U - tlw d

Q C o n tig u o u f

□ U*** A l Uytrf

Щоб створити виділення, потрібно клацнути на будь-якому відтінку (пікселю) у вікні зображення.

Інструмент M agnetic Lasso Інструмент M agnetic Lasso (Магнитное лассо) QB, “гаряча” клавіша якого L, може значно полегшити процес виділення фігур неправильної форми й фігур, що мають

281

РЕЗЕРВ ЧАСУ

розмиті, змазані або складні границі. Цей інструмент не виріш ує всіх проблем, але значно полегшує роботу. Панель параметрів інструмента M agnetic Lasso: і

iH lS iC l)

P W U tt>

Faatbar

J Edpa Centrait:

tp x

Opx

~| 0 A n * -a *â ~ d

Frequency:

104

B Par P r e u v e

Трансформування виділеної області Для трансформування виділеної області використовують команди контекстно го підменю Edit ->Transform (Редактирование->Трансформирование): Scale (Масш табирование), що дає змогу змінити розміри виділення (якщо утримувати клавішу Shift, то зі збереженням пропорцій), Rotate (Поворот) - повернути, Skew (Наклон) нахилити, Distort (Искажение) - розтягнути в різних напрямках, Perspective (Пер спектива) - додати перспективу. Задати точні параметри трансформування можна у відповідних полях на панелі параметрів: I

VA ♦

§ § jj Х : \ Ж А р к

H: 0.0

Д Y: 240,0 px

> V: fojO

И W ttO O jO K

✓

H: І00 Д Ч

Підтверджують трансформацію натисканням на клавішу Enter, відміняють - кла вішею Esc або відповідними кнопками на панелі інструментів.

Створення нового шару Щоб створити повністю прозорий шар у режимі Normal (Нормальный), клацніть по кнопці Create New Layer (Создать новый слой), що міститься внизу палітри Layers (Слои) (рис. 19.9). Якщо потрібно при створенні шара задати його властивості, виберіть у меню палітри Layers (Слои) команду New Layer (Новый слой) (рис. 19.10).

« [“ » 3

ЬщЛииіяут...

• И *| г *| э

^ г

І Ц

. - •- а

iHMtt Z'tkit «tddtr, і

О.

Ч _» 1 Bfendhg Options... Merge Down

ИндеMM*

Рис. 19.10

282

MwrUywS*... ' lack ACi nrttxîr V*

Н -*

Ц и * ,,

0 / 4

“

k ___________________ OOeOy: 10 0*2$ ./ Oodl to РО Ю Wei

РЕЗЕРВ ЧАСУ

Також, щоб задати параметри шару, можна, натис нувши клавішу Alt, клацнути по кнопці Create New Layer унизу палітри Layers. Створити шар можна і вибравши в головному меню Layer -> New -> Layer (Слой -> Новый-> Слой) (комбінація клавіш Ctrl + Shift + N), після чого має з'явитися вікно, в якому можна задати деякі параметри шара. У полях Mode (Режим смешивания) і Opacity (Непро зрачность) можна вибрати режим накладання (змішуван ня) шарів, пізніше ці характеристики можуть бути змінені. Новий шар з'явиться безпосередньо над шаром, що до того був активним. Розмір іконки, що показує зображення шару в палітрі Layers, можна змінити (краще вибрати найлегший варіант, щоб робота з Photoshop була швидшою, оскіль ки буде займати менше оперативної пам'яті). Для цього потрібно з меню палітри Layers (Слои) вибрати Palette Options (Опции палитры), і у вікні, що з'явилося, ви брати потрібний варіант.

Ефекти шарів До шару можна застосувати такі спеціальні ефекти: Drop Shadow (Отбро сить тень), Inner Shadow (Внутренняя тень), Outer Glow (Внешнее свечение), Inner Glow (Внутреннее свечение), Bevel and Emboss (Скос и рельеф), Satin (Атлас), Color Overlay (Наложение цвета), Gradient Overlay (Наложение градиента, Pattern Overlay (Наложение узора) і Stroke (Кайма). Ефекти шарів можна застосовувати до будьякого шару, навіть до текстового, що редагується, і в будь-який момент їх можна увімкнути або вимкнути. Ефект шару автоматично впливає на всі непрозорі крапки шарів й оновлю ється при додаванні, зміні чи видаленні пікселів з шару. Параметри ефектів задаються в пікселях. Це означає, що ефекти з тими сами ми параметрами будуть мати неоднаковий вигляд на зображеннях з різним роз мірами. Комплект ефектів з певними параметрами програма вважає стилем. Photoshop містить непогану бібліотеку стилів, яку можна доповнювати власними зразками. Всі ефекти застосовують і редагують за допомогою діалогового вікна Layer -> Layer Style (Слой -> Стиль слоя) (рис. 19.14-19.17). Щоб побачити список ефектів, які були застосовані до шару, клацніть по стрілці поруч із значком, котрий показує, що до цього шару були застосовані ефекти. Для редагування наявного ефекту шару (чи для додавання ще одного) клацніть (двічі) по імені ефекту в списку. Можна також вибрати ефект з меню, що спливає, Add layer style (Добавить стиль слоя), розташованого внизу палітри Layers (Слои), чи вибрати з меню Layer->Layer Style. За допомогою програми Photoshop можна копіювати ефекти з одного шару в інший. Щоб це зробити, виберіть шар, що містить ефект, далі скористайтеся коман дою Layer -> Layer Style -> Copy Layer Style (Слой -> Стиль слоя-> Копировать стиль

РЕЗЕРВ ЧАСУ

Рис. 19.13

Рис. 19.12

Рис. 19.14

Рис. 19.15

слоя), потім виберіть інший шар і виконайте команду Layer -> Layer Style -> Paste Layer Style (Слой > Стиль слоя > Вставить стиль слоя). Можна також відкрити список ефектів шару і перетягнути ім'я окремого ефекту на ім'я іншого шару чи на панель Effects (Еффекты) іншого шару. Застосований ефект можна тимчасово приховати, але всі параметри збере жуться, для цього розгорніть список застосованих до даного шару ефектів, потім клацніть по значку у вигляді ока (клацніть по ньому ще раз, щоб знову відобразити ефект) (рис. 19.13).

Заливання кольором чи візерунком Для однотонного заливання основним чи фоновим кольором використову ють команду Edit -> Fill (Правка->3алить) чи натисніть комбінацію клавіш Shift + Backspace, з'явиться наступне вікно (рис. 19.17). Якщо не хочете заливати прозорі області шару, на палітрі Layers (Слои), постав те галочку Lock transparent pixels (Блокировать прозрачные точки). 3 меню, що спливає, Use (Используя) виберіть, чим ви хочете залити виділену область чи шар: Foreground Color (Основной цвет), Background Color (Фоновый цвет), Black (Черный), 50% Gray (50% серый) чи W hite (Белый). Якщо виберете ва-

284

РЕЗЕРВ ЧАСУ

ріант Pattern (Узор), клацніть по стрілці поля Custom Pattern (Узор по выбору пользователя) і на панелі, що спливає, вкаж іть зразок. Виберіть режим накладання (зміш ування) в полі Mode (Режим) і непрозорість у полі Opacity (Непрозрачность). Якщо на палітрі Layers (Слои) ви забули поставити прапорець Lock transparent pixels (Блокировать прозрачные точки), то замість цього можна тут поставити галочку Preserve Рис. 19.16

Transparency (Сохранять прозрачность). Якщо ви хочете створити власний повто рюваний візерунок, щоб залити ним зображен ня, то за допомогою інструмента Rectangular M arquee (Прямоугольная область) виділіть об ласть шару, яка буде повторюватися (у жодному разі не пом'якш уйте краі). Виберіть команду Edit -> Define Pattern (Правка -> Определить узор), введіть ім'я та на тисніть Ок. Після того як візерунок створено, зніміть виділення командою Deselect (Снять выделение) чи натисніть комбінацію клавіш Ctrl + D. Далі відкрийте діалогове вікно Fill (За лить) і виберіть зі списку Use -> Pattern (Узор).

Клацніть по мініатюрі Custom pattern (Узор по выбору пользователя), випаде наступ ний список, в якому ви можете знайти новостворений зразок візерунка (рис. 19.19).

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

Т Е Я Ccntanfe

CudomPanvn

Р * Ш т\

«..'і

і. »а». J

□□□□ □ □ Owe*

□ □ E IL H ili r m

Рис. 19.18

)

Рис. 19.19

285

РЕЗЕРВ ЧАСУ

iMh. Curve*. Coter М е т е * Ш

ф п т К о гь ш

M K t M Coter О чггЖ М м г « •

'U l

к/ l

І Invert Я м * «* .. Portera*...

• •

Рис. 19.20

I S ty *:

S '« * * Sty*

fr vj

L IM

«4 * ( T )

hl L «. J l Cy nl ,J

Rad«

<»

1 C««> I

« W Sdui *TQk S U *

Dumcrd J Am t »

n t i* »

0 A » p iw *h k y « r

Рис. 19.22

Рис. 19.21

Створити шар заливання градієнтом можна декількома способами. На палітрі Layers натисніть по кнопці Create new fill or adjustm ent layer (Создать новый слой заливки или корректи рующий слой) €>., що розташована внизу палітри, і зі списку, що випав виберіть Gradient (Градиент) (рис. 19.20). Після цього має з'явитися вікно, в якому ви можете ви брати потрібний зразок градієнта, тип заливання, кут і т. ін. Рис. 19.23

Щоб вибрати зразок градієнта, клацніть по стрілці у полі Gradient (Градиент), розташованій вгорі діалогового вікна, та

виберіть градієнт (рис. 19.21). Якщо клацнути по зображенню градієнта в полі Gradient, то відкриється вікно Gradient Editor (Правка градиента), за допомогою якого можна налаштувати сам зразок градієнта (рис. 19.22). Поле Style (Стиль) відповідає за стиль градієнта, виберіть потрібний з пя'ти до ступних: Linear (Линейный), Radial (Радиальный), Reflected (Отраженный), Angular (Угловой) чи Diamond (Ромбовидный).

Робота з текстом Оскільки текст у програмі Photoshop є векторним, він має тверді та чіткі межі, тому, щоб забезпечити це, програма використовує у разі зміни та створення тексту

286

РЕЗЕРВ ЧАСУ

Рис. 19.25. Текст у режимі Smooth

Рис. 19.24. Текст у режимі None

Рис. 19.26. Вигляд палітри Character/Paragrap

векторний контур. Однак доданий у зображення текст раструється, це очевидно при збільшенні зображення до великих розмірів. Крім того, за масштабування та інших трансформацій контури символів розра ховуються заново. Це дає можливість при друці одержати векторний текст з макси мальною роздільною здатністю. Але і це ще не все, також можна надавати кожній букві власні атрибути (напри клад, шрифт, кегль), причому не тільки під час набору тексту, а й після. Далі йтиметься про всі ці можливості та багато інших.

Створення тексту Основним засобом роботи з текстом в Adobe Photoshop є інструмент Туре (Текст) т „ що викликається натисканням клавіші Т і який можна вибрати на панелі інструментів: Для створення простого тексту клацніть у потрібному місці на зображенні, піс ля чого введіть бажаний текст. Клацніть по кнопці Palettes (Палитры) о , щоб відкрити палітри Character (Шрифт) і Paragraph (Абзац).

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

Деформація тексту за допомогою команди Warp Text Дуже часто дизайнерам потрібно зробити текст нестандартної форми, тому в програмі Photoshop 7 є певний набір функцій W arp Text (Деформировать текст), які

287

РЕЗЕРВ ЧАСУ дають можливість це зробити, а саме зги нати габаритну рамку й текст. Деформова ний текст після цього можна редагувати. Діалогове вікно W arp Text (Деформи ровать текст) можна відкрити, вибравши в меню Layer->Type->Warp Text (Слои>Текст->Деформировать текст) або на тиснути на кнопку W arp Text А і на панелі параметрів інструмента Туре (Текст). У вікні, що з'явилося, потрібно зі спис

ЙПЧ

ку Style (Стиль) вибрати потрібний стиль

O f»

тексту (рис. 19.27).

0 Ям

Потім за допомогою повзунків варто змі нити відповідні параметри обраного стиля.

КЯ F « * y *

О ИМ» О seam В

Після того як до тексту було застосова но певний стиль, мініатюра шару змінить

Tw «l

Рис. 19.27

ся, показуючи цим, що до тексту була за стосована операція деформації.

КОНТРОЛЬНІ ЗАПИТАННЯ

для перевірки власних навчальних досягнень за темою заняття

Де розташоване головне меню?

Де розташоване налаштування інструментів?

Як створити новий документ?

Що робити, якщо зображення не редагується?

Як відкрити панель ш арів?

Як створити новий шар?

Як скопіювати шар?

Як зробити шар невидимим?

Як змінити прозорість, шаруючи?

10. Як об'єднати шари? 11. Як виділити зображення? 12. Як зняти виділення? 13. Як провести рівну лінію? 14. Як розфарбувати малюнок? 15. Як застосувати трансформацію? 16. Як змінити розрішення малюнків? 17. Навіщо потрібні маски ш арів?

288

Р Е З Е Р В 4A C V r -Г/

П Р А К Т И Ч Н А Р О Б О Т А 19.1

/ \

Оволодіння прийомами використання шарів. Застосування умінь роботи з інструментами виділення та трансформації

Послідовність виконання роботи: Завдання 1. Створити відкинуту тінь 1.

Відкрийте зображення.

Виставте основний колір - чорний, а фоновий - білий.

Відокремте об'єкт від фону, який буде відкидати тінь. Для цього виділіть об'єкт

Скопіюйте виділений об'єкт.

будь-яким інструментом виділення. 5.

Вставте виділений об'єкт у той самий документ. На палітрі Layers мають утвори тися два шари.

Виділіть ваш об'єкт, оскільки він міститься на новому шарові, його можна виді лити клацнувши в палітрі Layers на ньому при затиснутій клавіші Ctrl.

Створіть новий шар, натиснувши Ctrl + Shift + N чи вибравш и в меню Layer ->

Залийте виділення чорним кольором, для цього натисніть Alt + Backspace (пе

Звузьте виділення Select -> M odify -> Contract з параметром 2.

New -> Layer. ресвідчивш ись, що основний колір - чорний). 10. Застосуйте функцію Select -> Feather (Ctrl+Alt+D) з параметром 2-3. 11. Select -> Inverse (BCtrl+Shift+l). 12. Видаліть непотрібну частину, натиснувши Del. 13. Зніміть виділення: Ctrl + D чи Select Deselect. 14. Пересуньте Layer, який ви створили, нижче вашого об'єкта. Для цього натисніть Ctrl + [ чи виберіть у меню Layer -> Arrange -> Send Backward 15. Перейдіть у режим редагування Scew: Edit -> Transform -> Distort 16. Встановіть курсор, як показано на рисунку. 17. Затисніть ліву кнопку миші і тягніть уліво чи вправо, дивлячись, куди буде об'єктом відкинута тінь. Наприклад, ваш об'єкт відкидатиме тінь вліво 18. Якщо все добре, натисніть Enter, якщо ні - Esc і повторіть процедуру спочатку. ------------- - О 1 Layers V a r n a *

1v]

Normal Lock :

□

V h s

*f*

N tsto ry

O p a city:

С \

fiööx Г|

ПІ: ;iOOxJ»J

Layer І

m — —

6 .

-J

€>.

Рис. 19.27

1 Рис. 19.28

289

РЕЗЕРВ ЧАСУ

Рис. 19.29

Рис. 19.32 19.

Рис. 19.30

Рис. 19.31

Рис. 19.33

Якщо тінь надто груба, то зменшіть її прозорість. Для цього на палітрі Layers у поле O pacity введіть 75 % .

Завдання 2. За вибором.

П Р А К Т И Ч Н А Р О Б О Т А 19.2

Оволодіння прийомами використання фільтрів. Послідовність виконання роботи: Завдання 1. Додати дощ до зображення. 1.

Відкрийте зображення, в якому будете створювати ефект дощу.

Створіть новий шар: натисніть Ctrl + Shift + N або вибиріть у меню Layer -> New

-> Layer. Установіть основний колір чорний, а фоновий білий - D.

Залийте зображення білим кольором. Для цього натисніть Ctrl + Backspace, щоб залити фоновим кольором зображення.

Застосуйте фільтр Filter-> Noise->Add Noise з параметрами: Amount-100.

Переклю чіться в Gaussian та вклю чіть Monochromatic.

290

РЕЗЕРВ 4ACV

Рис. 19.34 7.

Фільтр Filter-> Blur -> M otion Blur з па раметрами: Angle-70, Distance-10.

Виберіть режим накладання шарів. Для цього потрібно в палітрі Layers зі списку вибрати Overlay чи Soft Light (на рисунку обрано саме цей варіант).

Для експерименту спробуйте інвер тувати зображення - в деяких випад ках виходить кращий результат. Для цього натисніть Ctrl + 1. Рис. 19.36

Завдання 2 .За вибором.*

*4“

П Р А К Т И Ч Н А Р О Б О Т А 19.3

Оволодіння прийомами заливання кольором та роботи с градієнтами Послідовність виконання роботи: Завдання 1. Залийте простір нового зображення розмірами 500рх - 400рх: Contents - W hite. 1. Створіть новий шар, натиснувши Ctrl + Shift + N чи вибравши Layer-New -> Layer. 2.

Виберіть як основний колір #00В4ЕЕ та фоновий - білий.

Виберіть інструмент Gradient Tool

на панелі інструментів:

Г И G ra d ie n t T o o l B u c ke t Tool

<ї <3

Натисніть Shift + G, поки не буде вибраний потрібний інструмент.

Виберіть градієнт, яким будете заливати зображення. Для цього натисніть на стрілочці справа від градієнта на панелі параметрів:

291

РЕЗЕРВ ЧАСУ

Рис. 19.37

Рис. 19.38

Рис. 19.40

Рис. 19.39 6.

У віконці, що з'явилося, виберіть градієнт з тих кольорів, які задані. У нашому випадку - це:

Якщо такого немає, то натисніть праву кнопку миші на будь-якому градієнті і в списку, що випав, виберіть New Gradient.

292

РЕЗЕРВ ЧАСУ 8.

Клацніть два рази на градієнті. Клацніть у центрі градієнта на панелі параметрів, щоб відредагувати градієнт: ш

Виберіть кольори, натиснувши на елемент, який показаний на рис. 19.37.

10. Виберіть колір, натиснувши зліва в центрі слова "C o lo r'(рис. 19.38). 11. Виберіть колір - #00В4ЕЕ. 12. Таку саму процедуру проробіть і для іншого кольору - білого. 13. Натисніть Ок - градієнт готовий (рис. 19.39). Увага! Пересвідчіться, що дані на панелі параметрів зазначені правильно: Ш

M od *: jN o rm *!

Г ~

Opodty: 100*

□ O K h «'

7 v |

□ Tr*m p*r*ney

14. Залийте градієнтом ваше виділення. Щоб залити градієнтом, потрібно тиснути ліву кнопку миші, розмістив мишку у верху вашого зображення, і, не відпускаю чи, тягніть вниз, поки не дійдете до кінця зображення, потім відпустіть. 15. Зніміть виділення Ctrl + D або в меню Select -> Deselect. 16. Застосуйте фільтр Filter -> Distort->Wave з параметрами (рис. 19.40). Результат зображено на рис. 19.41. 17. Застосуйте фільтр Filter -> Distort -> Polar Coordinates, переключивш ись у режим Rectangular to Polar (рис. 19.42).

Завдання 2. За вибором.

РЕЗЕРВ ЧАСУ гЛ

П Р А К Т И Ч Н А Р О Б О Т А 19.4

/ \

Оволодіння прийомами роботи з текстом, текстовими шарами, фільтрами та налаштуванням зображення за допомогою пунктів меню. Зображення (IMAGE)

Завдання 1. Створення нового зображення кам'яного тексту розмірами 400-200рх: Contents - W hite, Mode - RGD. 1. 2.

Виберіть колір: чорний - як основний, а як фоновий - білий, натиснувши D. Виберіть інструмент для створення тексту Horizontal Type Tool (Т) Т і

Щоб отримати гарний ефект, розмір тексту має бути великим. Тому виставте розмір 60-70 pt.

Якщо створюєте текст з потрібним написом чорного кольору, то змініть чорний і білий колір місцями, натиснувши X.

Застосуйте фільтр Filter ->Texturize -> Stained Glass (на запитання у вікні, що з'явилося, натисніть Ок) з параметрами: Cell Size-7, Border thickness-6, Light lntensity-0.

6. 7.

Виділіть чорну частину тексту. Для цього відкрийте діалогове вікно Select -> Color Range, з меню Select вибираємо Shadows та в поле вводіть значення 40-50. Перейдіть у палітру Channels, натиснувши на кнопці створення нового каналу, та залийте виділення білим кольором Ctrl + Shift.

Зніміть виділення, натиснувши Ctrl + D (Select -> Deselect).

Застосуйте фільтр Filter -> Blur -> Gaussian Blur з параметром 1-1,5.

10. Відкрийте діалогове вікно Image -> Adjustments -> Levels (Ctrl + L) та виставте потрібні параметри. 11. Зробіть виділення, клацнувши в палітрі Channels на новоствореному каналі за натиснутої клавіші Ctrl. 12. Застосуйте фільтр Filter -> Blur -> Gaussian Blur тільки вже з параметром 3,5-4,5. 13. Перейдіть назад у палітру Layers, виділивши шар з написом, клацнувши на ко шику внизу. 14. Створіть новий шар, натиснувши Ctrl + Shift + N (Layer -> New -> Layer) та залий те виділення чорним кольором Ctrl + Shift. ••

УКРАЇНА

*• 1 Г

V 'V

/ і

• *

1 » ''Г

Рис. 19.44

Рис. 19.43

V tr у

•ь.'

Рис. 19.45

294

Рис. 19.46

'■

РЕЗЕРВ ЧАСУ

**> V

Г >

Чч

Ч ! }

А*

v *"* *»»~* А Ї Н A U ь. 1 «, V . «.

. %

M i« t к

А к

Рис. 19.47 15. Застосуйте фільтр Filter -> Render -> Lighting Effects, потрібні параметри можна взяти з рисунку. 16. Застосуйте фільтр Filter -> Noise -> Add Noise з параметрами: Amount: 35-40, переклю чіться в Uniform та

Рис. 19.48

поставте галочку Monochrom atic. 17. За

допомогою

вікна

Image

Adjustm ents -> Brightness/Contrast можна

підправити

значення

Brightness і отримаєте текст потріб ного вигляду в електронному ва ріанті. Для цього використовуйте сканування.

Завдання 2. За вибором.

Рис. 19.49

§ 20. Психологічні основи дизайн-діяльності. Професійна спрямованість особистості Д іяльність - це реалізація особистісних властивостей людини, динамічна струк тура, яка здійснює перетворення інформації і енергії. Працююча людина має трудо ву мету, тобто суб'єктивну модель стану предмета праці, в який необхідно привести цей предмет з початкового стану за допомогою трудових - інформаційних і енерге тичних дій. Ці дії людина може спрямовувати безпосередньо на предмет праці або через проміжний пристрій - знаряддя праці. Сприйнята і актуалізована в пам'яті інформація може бути: прямою (закріпле ною асоціативним зв'язком, автоматизованою дією); репродуктивно-мисленнєвою (поетапним перетворенням інформації за відомими правилами), продуктивною (творчою). За допомогою цих перетворень формується прогнозований результат трудової дії і програма (план, стратегія) дій для його досягнення. Діяльність, спрямована на об'єкти зовніш нього світу, називають наочною, або екстеріоризованою, а спрямована на перетворення і формування власних енграм (уявлень, образів, понять, планів) - інтеріоризованою.

295

РЕЗЕРВ ЧАСУ З основними напрямами професійної діяльності пов'язані відповідні види ди зайну (проектно-художньої діяльності) (табл. 20.1). Таблиця 20.1 Види дизайну і середовища професійної д іял ьн о сті людини Види дизайну

Ландшафтний дизайн (екстер'єрів) Дизайн середовища (інтер'єрів) Промисловий (індустріальний) Дизайн костюмів Графічний дизайн (веб-дизайн)

Типи професій

Людина - природа (Л-П) Людина-художні образи (Л-Х) Людина - техніка (Л-Т) Людина - людина (Л-Л) Людина - знакові системи (Л-3)

У другій половині XX ст. видатний учений Роджер Сперрі отримав Нобелівську премію за відкриття функціональної асиметрії правої і лівої півкуль головного моз ку. Учений використав апаратурні методи діагностики. Завдяки спеціальним шоло мам у студентів фіксувалися електромагнітні хвилі, індуковані мозком у процесі різ них видів діяльності: прослуховувалася музика, робилися математичні розрахунки, читалися поетичні та прозові твори, розглядалися графічні зображення, створю ва лися умови для занурення у світ мрій тощо. Виявилося, що одні види діяльності зумовлюються лівим мозком, а інші правим. Причому в момент активності однієї півкулі інша «відпочиває». Завдяки відкриттю явища функціональної асиметрії у діяльності півкуль мозку людини стало зрозу міло, що працівників можна поділити за трьома основними типами: «художникиглядачі», «мислителі-слухачі», «майстри-діячі». Л іви м м озком зумовлюються: 1.Тактильні рухи правої руки. 2. Усне мовлення. 3. Письмо. 4. Рахунок. 5. Проекція правого зорового поля. У працівників із активнішою лівою півкулею мозку переважає логічно-понятійне мислення над художньо-образною уявою. Тому цей тип людей, здатних більш е за ін ших до абстрактного мислення, сприймання, перетворення і збереження аудіальновербальної інформації, можна умовно назвати «мислителями-слухачами». Вони об даровані природними здібностями до наукової творчості. П равим м озком зумовлюються: 1.Тактильні рухи лівої руки. 2. Сприймання простору. 3. Несловесне формування понять-образів (уявлень, міміки, пантоміми). 4. Проекція лівого зорового поля. Працівники з активнішою правою півкулею мозку характеризуються високим рівнем розвитку художньо-образної уяви і менше схильні до логічно-понятійного мислення. Завдяки розвиненій художньо-образній уяві у них переважає сприйман ня, перетворення і збереження візуально-сенсорної інформації. Тому умовно їх

296

РЕЗЕРВ ЧАСУ

можна назвати «художниками-глядачами». Вони обдаровані природними здібнос тями до художньої творчості. Учені вказую ть на наявність проміжного типу особистості - «майстра-діяча». У нього обидві півкулі мозку достатньо розвинені і взаємодіють між собою. Є підстави вважати, що у майстрів-діячів активнішою є зона «міжпівкулля». На користь біоло гічної бази високого інтелекту можна навести результати досліджень корейських учених з національного університету в Сеулі, які заявляю ть, що виявили ділянку мозку, яка відповідає за обдарованість. «Геніальне місце» знаходиться в області кори великих півкуль головного мозку між верньою тім'яною і задньою частиною мозку. Дослідники на чолі з професором Лі Кун-хо за допомогою магніторезонансного томографа спостеріагали за активністю мозку у підлітків (25 обдарованих шко лярів і стільки ж із середніми розумовими здібностями у віці 16-18 років). їм пропо нували завдання, що вимагають уміння міркувати. З'ясувалось, що в обдарованих учнів активність в області тім'яної ділянки кори великих півкуль головного мозку 1

виявилась значно сильнішою. Обдарованість

зумовлю ється

природним

середовищем

предметно-

перетворювальною діяльністю в ньому. У другій половині XX ст. канадський учений Уайлдер Пенфілд зробив надзвичайне відкриття. З допомогою крихітних електро>

дів він вивчав відкритий мозок людей, зумовлюючи дію на конкретні клітини або

мозку викликається реакція у різних частинах і органах тіла. За результатами екс

групи мозкових клітин. Він звернув увагу, що дотиком електрода до певної ділянки перименту учений склав карту всієї поверхні кори головного мозку, позначивш и на ній ті ділянки, які відповідають за ту чи іншу частину тіла. Найбільша ділянка мозку активізується долонями рук, предметно-перетворювальними діями, вдвічі менша ділянка - підошвами ніг, і приблизно стільки ж - порожниною рота. Отже смаки, за пахи, дотики - це найважливіша структурна інформація для мозку. Фізик-атомник Р. Бек, досліджуючи хвилі головного мозку екстрасенсів під час сеансів дистанційної дГЇ, встановив, що вони нагадують хвилі Шумана. У середині минулого століття Шуман - професор Мюнхенського технічного університету встановив, що Земля та її іоносфера утворюю ть велетенський резонатор, в якому поширюються хвилі наднизьких частот (хвилі Шумана), які без проблем можуть ба гаторазово окутувати Землю, утворюю чи стоячі х ви л і. Хвилі лівої і правої півкуль головного мозку у такі моменти рівні за частотою і протилежні за амплітудою, що призводить до утворення стоячих хвиль, харак терною особливістю яких є перетворення у них одного виду енергії в інший. Ви мовлене слово має три складові: звук - пружні хвилі, що поширюються в повітрі; думка - інформаційна складова слова у вигляді образу; емоція - енергія (кількісна міра матерії), вкладена в слово або думку. Іншими словами, це хвилі альфа - думка (слово), бета - справа, гамма - емоція бажання. Стоячі хвилі головного мозку мають здатність вступати у взаємодію з хвилями Шумана. Завдяки резонансу хвиль Шумана і стоячих хвиль головного мозку екс трасенси отримують доступ до колосальної природної енергії, за допомогою якої спричиняю ть дію, в тому числі на матеріальні об'єкти. Результатом такого резонан су є перетворення енергії слова і думки у конкретні події - у справу.

297

РЕЗЕРВ ЧАСУ І

* -

ТВОРЧЕ ЗА ВД АН Н Я

«Пізнай себе»

Яка творчість для тебе є пріоритетною: наукова, художня чи технічна? 1. Переплети пальці обох рук, утвори «замок». Лівий палець згори - це ознака кращого розвитку уяви, фантазії (правої півкулі мозку). Правий палець згори - це ознака кращого розвитку логічно-поняттєвого мислення (лівої півкулі мозку). До чого у тебе природні здібності: до мислення-міркування чи до уяви-фантазії? По знач провідний палець буквою П або Л. 2. Склади обидві руки на грудях. Утвори «позу Наполеона». Ліва долоня на пра вому лікті - це ознака кращого розвитку уяви, фантазії (правої півкулі мозку). Права долоня на лівому лікті - це ознака кращого розвитку логічно-понятійного мислен ня (лівої півкулі мозку). До чого у тебе природні здібності: до мислення-міркування чи до уяви-фантазії? Познач провідну руку буквою П або Л. 3. Провідне око. Зроби ручкою дірку в аркуші. Наведи дірку на ціль обома роз плющеними очима. Заплющ праве око і розплющ. Заплющ ліве око і розплющ. Про відне око фіксує ціль у дірці. У тебе провідним є праве чи ліве око? Ліве провідне око пов'язане з уявою-фантазією, праве провідне око - з мисленням-міркуванням. Познач провідне око букою П або Л. 4. Аплодування. Покажи, як ти аплодуєш. У тебе активніша (рухоміша) права чи ліва долоня? А згори яка долоня: права чи ліва? Ліва долоня пов'язана з правим художньо-

Рис.20.3. Поза Наполеона

298

РЕЗЕРВ ЧАСУ

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

Тест «Три дороги» Прочитай казковий епізод про «три дороги»: A) «ліворуч підеш - сам будеш голодним, а кінь твій буде ситим»; Б) «праворуч підеш - сам будеш ситим, а кінь твій буде голодним»;

B ) «прямо підеш - і коня втратиш, і себе погубиш». Яку з трьох доріг ти обереш ? Чому? К л ю ч д о тесту:

A) психологічна установка «глядача-художника» (домінанта правої художньообразної півкулі мозку, домінуючий профіль соціально-художніх здібностей, артис тичний інтелект); Б) психологічна установка «слухача-мислителя» (домінанта лівої логічно-понятійної

півкулі мозку, домінуючий профіль навчальних здібностей, вербальний інтелект); B ) психологічна установка «діяча-майстра» (взаємодоповнюваність правої художньо-образної і лівої логічно-понятійної півкуль мозку, домінуючий профіль підприємницьких здібностей, реалістичний інтелект).

Тест «Тридев'яте царство» Тридев'яте царство - це назва твого розуму. Саме так: у словнику української мови є поняття «розум» і «ум», а в українських приказках говориться: «ум за розум заходить», «сім царів у голові», «сім разів відміряй, а один раз відріж». З допомогою поданого нижче тесту ти з'ясуєш, що в тебе не один і навіть не сім, а дев'ять незалеж них інтелектів (профілів здібностей). А якими профілями здібностей ти обдарований найбільше? Хто ти: «мислитель-слухач», «художник-глядач» чи «майстер-діяч»? Все є в усьому, а тому, пізнавши себе, ти пізнаєш світ. Обведи кружальцем обране тобою бажання (число і букву). Можна обводити і одне, і два, і три, і більше бажаних видів діяльності. Лиш би вони були «твоїми», запозиченими із власного досвіду. Працюючи з тестом, думай: «У тридев'ятому царстві я зможу...» 1а. - проводити свій час на природі, в ту ристичному поході. 1б. - проводити час на самоті, робити ме дитацію, відпочивати чи роздумувати над важливими життєвими питаннями. 1в. - співати, бо маю приємний і мелодій ний голос.

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

РЕЗЕРВ ЧАСУ

За. - піклуватися про тварин, у мене багато тварин є вдома. 36. - реагувати на невдачі з особливою витримкою. Зв. - слухати музику по радіо, у записах тощо.

4а. - працювати в саду, виконувати інші дії у природі, наприклад доглядати птахів. 46. - домогтися до себе поваги інших, бо маю особливе хобі або інтерес. 4в. - грати на музичному інструменті.

5а. - охороняти природу, я хочу записатися (записався) на курси у центр, пов'язаний з природою. 56. - реалістично оцінювати свої сильні і слабкі сторони. 5в. - підносити настрій завдяки музиці, бо без неї моє життя було б менш цікавим.

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

7а. - читати книги, журнали, дивитися теле передачі, фільми про природу. 76. - вважати себе вольовою і незалежною людиною. 7в. - зіграти уривок якоїсь мелодії на при мітивному ударному інструменті або від творити потрібний ритм голосом.

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

9а. - гуляти на свіжому повітрі протягом тривалого часу, відвідувати зоопарки, ак вапарки тощо. 96. - розраховувати лише на себе самого. 9в. - виконувати пісенні або музичні твори, бо я , почувши один-два рази музичний уривок, можу точно його відтворювати.

10а. - з великим задоволенням працювати У саду. 106. - працювати на себе, замислююсь над відкриттям власного бізнесу. 10в. - наспівувати під час роботи, навчан ня, вивчення чогось нового, іти по життю з піснею.

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

12а. - побільше рухатися, бо мені важко усидіти на одному місці. 126. - займатися груповими видами спорту, такими як бадмінтон, волейбол чи футбол, але не плаванням чи спортивною ходьбою. 12в. - поглиблено опановувати математи кою, бо вона - мій улюблений предмет.

13а. - брати участь в іграх на свіжому пові трі, займатися спортом. 136. - співпрацювати з іншими у складі малих груп, бо коли маю проблему, мені кортить поділитися нею з кимось, а не тримати у собі. 13в. - влаштовувати маленькі експерименти типу: «Що буде, якщо.. Наприклад що буде, якщо чорнобривці висіяти на зиму у кімнаті

14а. - спілкуватися невербально (напри клад, мовою жестів, пантомімою і мімікою). 146. - мати не менше ніж трьох, а то й біль ше близьких друзів. 14в. - не мати жодних справ з неорганізо ваними людьми, бо мій розум вимагає системності, порядку, правильності, послі довності у всьому і всіх.

300

РЕЗЕРВ ЧАСУ

15а,- займатися фізичною діяльністю, бо найкращі ідеї у мене виникають під час руху. 156. - брати участь у колективних іграх, бо мені подобаються соціальні ігри типу «монополія», «бридж», але не відеоігри, а реальні. 15в. - легко здійснювати підрахунки в дум ках, без ручки і калькулятора.

16а. - якомога частіше прогулюватися на свіжому повітрі. 166. - насолоджуватися нагодою повчити інших людей, бо це я дуже добре умію ро бити. 16в. - розв'язувати головоломки, які ви магають з’ясування причин, логічного мис лення.

17а. - займатися експериментальними до слідженнями, бо я найкраще пізнаю пред мет завдяки безпосередньому дотику до нього. 176. - бути завжди «командним гравцем», бо я сам вважаю себе або інші вважають мене лідером. 17в. - мислити чіткими, абстрактними, без словесними поняттями.

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

19а. - робити швидше щось практично самому, ніж читати про таку роботу чи па сивно дивитися на чиїсь практичні дії. 196. - проводити вечір у веселому товари стві, аніж сидіти вдома самому. 19в. - завжди почуватися впевненим, коли все на своєму місці, все перебуває у звич ному порядку.

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

21а - помічати кольори, бо я маю до них підвищену чутливість. 216 - обговорювати різні життєві питання, зокрема, про сенс життя. 21 в - робити нотатки, бо я легко «прокру чую» слова в умі, перед тим, як їх говорити або писати

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

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

24а. - залюбки складати різноманітні пазли. 246. - споглядати твори мистецтва, розуміти їх взаємозв'язок, розуміти вислов лювання: «Все є в усьому», «Пізнай себе і ти пізнаєш світ». 24в. - розважатися самому чи з гуртом дру зів анекдотами, каламбурами, скоромовка ми, віршиками.

301

РЕЗЕРВ ЧАСУ

25а. - уночі бачити яскраві, чіткі сни. 256. - робити вправи на релаксацію та ме дитацію. 25в. - вести щоденник, записувати туди власні твори, якими я сам пишаюся і які схвалюють інші.

26а. - подорожувати, бо я, як правило, за вжди відшукую шлях у незнайомій місце вості. 266. - відвідувати місця, де я можу відпочи ти, відволіктися від реальності буття. 26в. - розгадувати кросворди, бо я отримую задоволення від ігор типу «анаграми», «плу танина слів», «пасворди» тощо.

27а. - частіше малювати чи підсвідомо ро бити мазки або відбитки кольорових плям на площині. 276. - читати стародавніх та сучасних філософів, бачити перспективу розвитку завдяки вивченню історії та стародавньої культури 27в. - писати із задоволенням, пояснювати на прохання інших людей значення слів, які я вживаю в усному чи писемному мов ленні.

28а. - користуватися знаннями з геометрії, бо у школі геометрія давалася мені легше, ніж алгебра. 286. - оволодівати знаннями міфології, ро зуміючи їх цінність для культури. 28в. - вивчати залюбки іноземні мови: ан глійську, німецьку, французьку, бо я легко ними оволодіваю.

29а. - згадувати зображення предметів або легко уявляти предмети з висоти пташино го польоту. 296. - дізнатися, чи є розумні створіння у Всесвіті. 29в. - вивчати рідну мову, гуманітарні на уки, історію, бо вони даються мені легше, ніж математика чи природничі дисципліни.

30а. - надавати перевагу читанню малоілюстрованого матеріалу. 306. - молитися, відвідувати храми. ЗОв. - користуватися цитатами, бо в моєму мовленні часто трапляються висловлюван ня, які десь прочитані або почуті.

О б р о б к а р е з у л ь т а т ів д іагн о сти ки М а й с т р и -д ія ч і: ( Іа - Ю а )

(11 а—20а)

(21а-30а)

Натуралістичний інтелект (природничий)

Тілесно-кінестетичний інтелект (руховий)

Просторовий інтелект (формотворчий)

Х у д о ж н и к и -г л я д а ч і: (216-306)

(116-206)

(16-106)

Екзістенціональний інтелект (надособистісний)

Міжособистісний інтелект (соціальний)

Внутрішньо-особистісний інтелект (фігуротворчий)

М и с л и т е л і-с л у х а ч і (11в-20в)

( Ів - Ю в )

(21в-30в)

Музичний інтелект (звуковидобувний, пісенний)

Лінгвістичний Логіко-математичний інтелект (буквений, мовлен інтелект (цифровий, розра хунковий) нєвий)

302

РЕЗЕРВ ЧАСУ

Побудуй власну «інтелектуальну кардіограму» за поданим зразком

Натуралістичний 50

Порівняйте результати всіх тестів у розділі. Якою інформацією ти обдарований найбільше і найменше: вербальною зумовленою слуховим сприйманням; сенсор ною, зумовленою зоровим сприйманням; структурною, зумовленою кінестетичним (смако-запахо-дотиковим) сприйманням особистісно-ціннісних конструктів до вкілля?

НАВЧАЛЬНЕ ВИДАННЯ

ОСНОВИ ДИЗАЙНУ П ідручник для 10 класу загальноосвітніх навчальних закладів (проф ільний р івень)

В д о в ч е н к о Віктор Володим ирович Б о ж к о Тетяна О лександрівна С ім о н ік Анатолій Степанович Ш в е д о в а Ю лія Борисівна В д о в ч е н к о Златослава Вікторівна Т и м е н к о Володимир П етрович

Н ауковий редактор - В. В. Вдовченко Літературний редактор - С. В. Б а р т о ш Верстка та дизайн - О. М. Ром анчук

В и д а н о д ер ж авн и м кош том . П р о д аж за б о р о н е н о

Підписано до д руку 13.12.2010. Ф ор м ат 70х 100 1/16. Гарнітура M yriad. Д рук офсетний. Папір офсетний. Ум. друк. арк. 24,5. Обл.-вид. арк. 19. Наклад 15 000 прим. Зам. 10-403. Видавництво «Педагогічна думка» 04053, м. Київ, вул. Артема, 52-а, корп. 2 тел./факс: (044) 484-30-71

Свідоцтво про внесення суб'єкта видавничої справи до Державного реєстру видавців, виготівників і розповсюджувачів видавничої продукції від 28.08.2009 р. Серія ДК N*3563 Видруковано у ВАТ «Поліграфкнига» корпоративне підприємство ДАК «Укрвидавполіграфія» 03680, м. Київ, вул. О. Довженка, 3. Свідоцтво про внесення суб'єкта видавничої справи до Державного реєстру видавців, виготівників, і розповсюджувачів видавничої продукції. Серія ДК № 3089 від 23.01.2008 р.