|
|
| ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК | |
 Один на один с FreeBSD |
|
|
HTML Digest 04
Засоби створенняСкажіть мені, добрі люди, що змушує творців комп'ютерних програм називати їх іменами тваринок?... Наприклад, Кажан (Thе Bat!), Годзіла (Go!Zilla), Лис-Професіонал (FoxPro), канапка "Гаряча собака" (Hot Dog Webmaster Suite), Павук і Його Павутиння (моя улюблена програма для сворення HTML-сторінок у текстовому режимі Arachnophilia)... Невже не можна було вигадати щось таке ж безлике і незрозуміле за назвою, як FrontPage?... Але ні - фантазія і дивним чином згенерована асоціативність створюють не менш вражаючі назви. Ось, наприклад, як ви думаєте, що робить програма Reptile? Зокрема, мої особисті асоціації спрацювали досить незвично, закликавши з глибин пам'яті дитячу, ще дозастійну пісеньку: "По улице ходила большая крокодила, во рту она держала кусочек одеяла...". І виявилось, що моя підсвідомість дуже правильно співвіднесла цей шматочок ковдри з результуючим продуктом, що цією програмою виготовляється. Хоча лаври язикатої Розі О'Доннел не дають мені спати спокійно, але не буду більше вас заплутувати та інтригувати грою слів та понять. Зі словами радше гралися автори цієї програми - з одного боку, слово tile (що означає квадратик керамічної плитки, з якої колись викладалися, наприклад, такі гарячі і гарні Львівські п'єци, а зараз швидше це слово використовується для визначення картинки, переважно абстрактної, якою безшовно викладається веб-сторінка), а з іншого - reptile (що означає земноводне страхіттячко, яке найчастіше характеризується вигадливим візерунком шкіри - і тому часто падає насмерть жертвою моди на аксесуари і взуття). Отже, програма генерує безшовні фрагментики для фону веб-сторінок. Варто трохи поговорити про ці самі безшовні картинки ще до того, як ви зберетеся їх генерувати і встановлювати на сторінки наліво і направо. "Папужистий" фон - це перша ознака непрофесіоналізму, як вважає пан Кірсанов, автор всесвітньо відомого у вузькому колі веб-дизайнерів бестселера із очевидною назвою "Веб-дизайн". По-перше, настирна повторюваність, що дратує людське око, а по-друге, труднощі із підбором кольору тексту, - це дві основні причини того, щоб не вживати цю річ в дизайні взагалі. АЛЕ: ці два проблемні фактори можна одним легким способом знівелювати, вклавши текст на сторінці в блоки клітинок таблиці із непрозорим фоном. По-перше, переб'ється мотив повторюваності фону, а по-друге, так легше підібрати більш читабельний колір тексту. Це власне ноу-хау я застосувала на своїй персональній сторіночці http://www.spline.lviv.ua/tetyana/. Ще один вихід - робити фонові плитки досить великими - щоб, знову ж, мотив повторюваності радше переростав в хаотичну, набагато цікавішу, асиметрію. Можна сторінку викладати навіть не квадратиками, а горизонтальними полосками з градієнтом по лівому або правому краю, наприклад. І це вихід. Особливо тоді, коли сторінка містить великі масиви безкартинкового тексту. Ну добре, де і як використовувати безшовні фони, ми розібралися. Але де їх брати? Тут виникає багато варіантів, з яких один відпадає одразу ж - це колекції безкоштовної графіки, яка лежить в сітці на кожному куті. Забудьте назавжди про цеглинки, мармур, дикту, і все, що тим чи іншим способом співвідноситься з текстурами реального світу - це виглядає, як дешева підробка як цератова плівка "під дерево" на стінах замість справжніх дубових панелей... А щоб робити сторінки відверто кітчеві або стилізовані (наприклад, під 70-ті роки або старовинні версії Квейку) нам, гадаю, ще рости і рости. Наступний варіант: намалювати такий фон самому. Чому ні? Методи відомі - і в цьому вам допоможе та ж книжка Дмитра Кірсанова (на всякий випадок зазначу відповідний URL - http://www.kirsanov.com/web.design/). Можна базову картинку, яку ви будете переробляти на елемент безшовного фону, намалювати в Фотошопі, але є варіант більш цікавий - це створити її вручну (олівчики, пензлики, фломастери...). Найзнаменитіші і наразі майже неперевершені зразки такої tile-творчості продемонстрував відомий американський художник Дон Барнетт - особливо вражають плитки, створені за мотивами відомого іспанського архітектора Гауді. Та й "жаб'ячі розкиданки" - веселі, легкі, безвідповідальні - ідеально пасуватимуть до чиєїсь гумористичної персональної сторіночки. Це все тут: http://www.donbarnett.com/tiles/tile.htm. Взагалі кажучи, на цю сторінку варто заходити з титулки: http://www.donbarnett.com/ (кажу вам, такого ви ще не бачили - виявляється, можна бути дизайнером і без Корел Дро і Фотошопу - і саме вміння малювати руками колись врятує наш світ від гладкості, стереотипності, безликості комп'ютерної графіки)... Може допомогти у створенні безшовних плиток програма imagoWEB (http://fabrizio.jth.it), але, боюсь, на цьому цікаві і корисні її властивості закінчуються - надто багато багів має цей черговий переглядач картинок (один мій знайомий такі програмні продукти називає не інакше, як "глюк на Дельфі"). Тим не менш - приклад роботи цієї програми маємо на картинці. Ще одна безкоштовна програма, яка носить просту назву Buttonz&Tiles 1.0 і має розмір десь в 3 Мб (можна знайти на http://www.nonags.com), також, кажуть, досить вдало творить безшовні фони і, в додаток до цього, кнопочки. На жаль, програма відмовилась від мого WINDOWS-а 95-го в якості системного середовища, тому протестувати її не вдалося. Якщо хтось зможе оглянути цю програму самостійно і в стані написати звіт про цей огляд - то ласкаво просимо до нашої рубрики! Та все ж повернемося до Рептилії. Програма, що нею я зараз користуюсь, має версію 2.01 і розмір інсталяційного файлу 1.65 Мб, звідки я її викачала - вже не пам'ятаю, але маємо сайт виробника цієї програми - Sausage Software (яка, здається, створила той самий "хотдогівський" HTML-редактор) - http://www.sausage.com/. "Сосисочна" тема починається вже з заставки, але трошки йде врізнобій з темою "крокодилячою" - залишимо це на совісті творців програми, адже весь несмак автора зосередився лише у назві - власне програма цілісна, проста, симпатична. Окрім того, хоча програма абсолютно безкоштовна, але не запуститься, поки ви не пройдете онлайнової реєстрації і не отримаєте електронною поштою всі ключики і паролики. Особисто я дуже була горда, що на моєму комп'ютері накінець з'явилась хоча б одна легально зареєстрована копія програмного забезпечення... Приступимо. Запускаємо перший раз - бачимо купу віконечок, стрічечок, слайдерів. Ще незрозуміло, що робить ця програма і як працює. А ви натисніть кнопочку Generate... Ну як, почалося кіно?... Ух ти! - такою була моя перша реакція на те, що пульсувало, видозмінювалося, рухалося у віконечку справа. Ану, натисніть ще... Ще раз... Іще раз... Можна дивитися без кінця на те, як оживають міріади форм і кольорів... Потрібно постійно тримати пальчик над клавішою <ESCAPE>, для того, щоб вчасно зупиняти цю безперервну стрічку кадрів і ловити саме ту одну неповторну текстуру, якої вимагає ваша багата дизайнерська уява. ЇЇ потім можна зберегти у форматі JPEG або GIF (кнопка Save Current Image), попередньо підібравши кольори для тексту і лінків (закладка Text Settings). Вважаючи, що перші практичні навики роботи з програмою ви вже отримали, я зупинюся і трошки викладу нудних теоретичних відомостей (а ви тим часом тисніть, тисніть на кнопочки, совайте двигунцями та тикайте паличкою в різні відрізки кольорової вертикальної стрічечки...). Як ви вже, мабуть, здогадалися, програма використовує певну математичну формулу для того, щоб згенерувати первинну структуру. Як тільки її створено, програма швиденько вирощує із старої структури нову. Текстури створюються серіями, рекурсивно, тобто кожна текстура впливає на те, як буде виглядати наступна. В цьому методі багато спільного з вирощуванням фракталів (про це також якось поговоримо). В самому низу є щось на зразок відео-магнітофону - треба поставити галочку в дірочці біля Record Every та вказати, з якою частотою йтиме запис росту текстури - і тоді можна буде прокручувати цей "відеокліп" скільки завгодно, відшукуючи найцікавіші кадри. Крім того, Рептилія може експортувати серії бітмап для використання їх в анімації (наприклад, можна створювати анімований фон для браузерів, починаючи з 4-ї версії, але завжди враховуйте розміри такого фону в байтах!...), а також здійснювати експорт в формат .AVI (кнопка Export Recording). Зазначу, що для цього вже треба мати попередньо записану текстуру. А щоб анімація "дихала" (тобто прокручувалася вперед і назад), варто задіяти опцію "Ping-Pong", хоча це значно збільшує кількість кадрів для експортування. Процедура запису прямо в .AVI-файл виглядає наступним чином: File --> Set File Record Options --> віконечко Record to File --> Record Directly to AVI-file --> вибираємо назву файлу та шлях до нього --> Close. Ще трохи перейдемося по інтерфейсу. У списку Presets перераховані види текстур, які може вирощувати Рептилія (ще одне кумедне поєднання понять - одразу уявляється крокодил, що підливає зелений горошок на грядці). Можна створити власні установки (наприклад, попередньо використавши якусь картинку в якості стартової) і записати їх (кнопка з іконкою дискетки поруч з Presets). Щоб пришвидшити ріст текстури, можна зняти прапорець у віконечку біля Animate. В цьому ж секторі інтерфейсу є ще прапорець та випадаючий список - поекспериментуйте з ними - результати експериментування не будуть приховані від вашого ока. Як переглянути безшовну текстуру на усьому екрані? Два рази клік на віконечку, де виросла текстура, з'явиться просте віконечко WINDOWS - розкрийте його на весь екран. Можна почати новий перерахунок текстури з кожного із 10-ти маленьких кадрів-віконечок внизу. Для цього просто треба по ньому клікнути. Загалом, основними важелями, що керують ростом текстур, є фактори А, В і число ітерацій (це та кількість разів, коли ваша структура буде змінюватись). Фактори А і В можна встановити в межах від 0 до 1000, аналогічно для ітерацій. Всі текстури починаються з хаосу випадкових чисел, і в процесі "старіння" в них починають народжуватися форми. Текстури також можуть "помирати" - це відбувається тоді, коли всі точки структури отримують однаковий колір. Тут нічого не поробиш - треба вирощувати принципово нову структуру. Щоб трошечки видозмінити стартову текстуру, треба натиснути на кнопочку з гральними кубиками - так, фактично, працює генератор випадкових чисел, яким можете бути і ви самі (шляхом ручного внесення будь-якого числа в поле поруч із цією кнопкою). Текстури можна створювати будь-якого розміру (по замовчуванню використовується розмір 100 на 100 пікселів). Боксики Height та Width повинні містити мінімум 2 піксели, максисальне ж їх значення обмежується лише розмірами пам'яті і вільним дисковим простором комп'ютера. Автори програми зазначають, що в зв'язку з тим, як працює математичний механізм даної програми, не можна отримати ідентичні текстури різних розмірів починаючи з тої ж стартової, оскільки текстура 100 на 100 використовує в якості початкових 1000 випадкових чисел, а текстура 200 на 200 - 4000. Тому вже через декілька ітерацій генеровані структури будуть значно відрізнятися одна від одної. Наостанок трошки про встановлення параметрів кольору. На градієнтній полосці, яка відображає розподіл кольорової гами даної текстури, є 2 трикутнички-вказівники: один на самому вершечку, а другий унизу. Клікнемо по верхньому, йдемо на ширшу полоску з палітрою зліва - з'являється патичок-вказівник. Можна просто клікнути в потрібному місці палітри, а можна прокрутити її всю - натиснемо ліву кнопку миші і посоваємо по палітрі вверх-вниз (колір у віконечку внизу також буде мінятися). Аналогічно - для нижнього трикутничка-вказівника. Щоб додати до кольорової гами нові акценти, клікнемо 2 рази лівою кнопкою мишки на стрічці кольорової гами - з'явиться новий трикутничок-вказівник, який ми можемо совати вверх і вниз - спробуйте і подивіться, що у вас виходить. Щоб додати до розмальовки текстури випадкові кольори, треба клікнути правою кнопкою миші, тримаючи натиснутою <SHIFT>, на цій самій стрічці. Тобто, до випадковості форми ми маємо можливість додати випадковість кольору. З Gradient Settings та ще деякими тонкими установками програми розберетеся самі - про основні можливості Рептилії я розповіла достатньо. І знайте, що генеровані малюнки можна сміливо використовувати не лише як фони, а й як елементи більш складних дизайнерських композицій. Гарантую, що тепер вам буде чим зайнятися наступного місяця. Тим не менш - до зустрічі через тиждень на цьому ж місці газетної шпальти...
|
|
|||||||||||||
| |||||||||||||||
|
Ідея проекту, програмування, HTML, CSS, дизайн,
редагування та переклад текстів - Дідок Олександр. | |||||||||||||||
Пісня "Не..."+mp3