Як зробити фон без швів

Фонові зображення на 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>

*

*