Як зробити фон без швів, або комар носа не підточить, Різне, Інтернет-технології, статті

Фонові зображення на WEB-станицях – один з тих дизайнерських прийомів, які до цих пір викликають суперечки. Одні стверджують, що можливість вистилати фон сторінки повторюваними копіями зображення створила новий жанр комп’ютерного мистецтва, тоді як інші вважають, що такий фон тільки відволікає від сприйняття вмісту і тому шкідливий. Тут я не стану відстоювати якусь із цих точок зору – ясно, що перешкодити вам зробити неприємний, ріжучий очі фон може тільки ваш власний смак, а не чиїсь поради та міркування. Замість цього ми поговоримо про одну суто технічну проблему: як зробити безшовне фонове зображення – таке, у якого були б непомітні стики між сусідніми копіями “кахельної плитки”.


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


Складаємо кутами всередину


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


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


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


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


Таку перестановку чвертей неважко зробити в будь-якому графічному редакторі за допомогою вирізання та вставки через буфер обміну. Однак деякі програми дозволяють зробити це ще простіше, за один крок. Наприклад, в ADOBE PHOTOSHOP достатньо вибрати команду FILTER / OTHER / OFFSET (при цьому на зображенні нічого не повинно бути виділено), в діалоговому вікні ввести половину ширини вашого зображення в поле HORIZONTAL і половину висоти в поле VERTICAL, перемикач UNDEFINED AREAS встановити в положення WRAP AROUND і натиснути OK.


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


З крайності в крайність


Навряд чи хтось буде сперечатися з тим, що FRACTAL DESIGN PAINTER – найкраща в світі програма створення растрової графіки. Неймовірне багатство художніх матеріалів і натуральних інструментів, оригінальний і привабливий інтерфейс роблять PAINTER, мабуть, найбільш надихаючим інструментом творчої роботи з усіх, які коли-небудь існували у вигляді програм для комп’ютерів. Цілком природно, що цей графічний редактор ідеально пристосований і для створення вражаючих фонових зображень. А що особливо цікаво, PAINTER (починаючи з версії 3.0) володіє одним унікальним, хоча і досить простим властивістю, сильно полегшує створення безшовних фонів.


Вибравши команду TOOLS / PATTERNS / DEFINE PATTERN, ви переведете програму в особливий режим, в якому всі інструменти малювання набувають чарівну здатність безперешкодно перетинати кордони вашого зображення. Скажімо, виводячи кисть або олівець за правий край картинки, ви в момент перетину кордону раптом опиняєтеся в протилежній точці лівого краю, і ваш штрих (або мазок), перестрибнувши вліво на ширину зображення, як ні в чому не бувало продовжується в колишньому напрямку. Точно так само, вивівши інструмент за верхній край, ви опинитеся в самому низу зображення. Таким чином, в цьому режимі просто неможливо створити зображення, яке не мало б властивістю безшовної стикування. (На жаль, ця властивість, зване WRAP AROUND COLOR, поширюється тільки на ті інструменти, які управляються рухами миші; більшість обирають з меню ефектів, таких як LIGHTING або SURFACE TEXTURE, працюють як завжди.)


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


Автоматичне зварювання заподлицо


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


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


Якщо ширина смужок-клапанів дорівнює X пікселів, то рівно за X пікселів до стику між двома сусідніми копіями зображення починається плавний перехід однієї копії в іншу. На самому стику, де формально закінчується одна копія і починається наступна, фактично видно суміш 50% від однієї копії та 50% від сусідньої. Після переходу на сусідній елемент видимість виступаючого “клапана” попереднього елемента поступово зменшується, поки не сходить нанівець – також на відстані X пикселов від стику (але в іншу сторону). Очевидно, що для застосовності цього методу потрібно, щоб по краях області, яку ви хочете перетворити в елемент фону, залишалося достатньо місця, щоб можна було викроїти клапани для склеювання (як правило, їх ширина складає близько 20% від розміру виділення). Цей метод дає добрі результати для нерізких, розмитих текстур, не містять чітких деталей і контрастних переходів. Багато фонові зображення цілком задовольняють цим умовам. Однак якщо ваше зображення містить текст або псевдотрехмерной рельєф, результати будуть, швидше за все, незадовільними, оскільки в цьому випадку накладення однієї копії зображення на іншу стає занадто очевидним.


На даний момент існують дві реалізації описаного алгоритму. Перша – це фільтр під назвою SEAMLESS WELDER (“Безшовний зварювальник”), що входить в набір підключаються фільтрів KAI “S POWER TOOLS (версії 2.0 і вище). Скористатися цим фільтром можна з графічного редактора, який здатний працювати з підключаються фільтрами стандарту ADOBE (наприклад, ADOBE PHOTOSHOP або той же FRACTAL DESIGN PAINTER). Друга реалізація – це фільтр, вбудований в SHAREWARE-додаток PAINT SHOP PRO (версії 4.0 і вище); там для його виклику потрібно вибрати команду IMAGE / SPECIAL EFFECTS / CREATE SEAMLESS PATTERN.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*