Як зробити фон без швів, або комар носа не підточить
Фонові зображення на WEB-станицях - один з тих дизайнерських прийомів, які до сих пір викликають суперечки. Одні стверджують, що можливість вистилати фон сторінки повторюваними копіями зображення створила новий жанр комп'ютерного мистецтва, тоді як інші вважають, що такий фон тільки відволікає від сприйняття вмісту і тому шкідливий. Тут я не стану відстоювати якусь із цих точок зору - ясно, що перешкодити вам зробити неприємний, ріжучий очі фон може тільки ваш власний смак, а не чиїсь поради і міркування. Замість цього ми поговоримо про одну суто технічну проблему: як зробити безшовне фонове зображення - таке, у якого були б непомітні стики між сусідніми копіями "кахельної плитки".
Якщо ви маєте хоч який-небудь досвід занять комп'ютерною графікою, я думаю, для вас не складе великих труднощів вирішити, який саме фон вам потрібен. Багатство програм обробки графіки, фрактальних та "натуральних" (NATURAL MEDIA) графічних інструментів, доступних сьогодні комп'ютерному художнику, майже гарантує, що, серйозно зайнявшись пошуками, ви обов'язково набредете на ідею оригінального (або, принаймні, пристойно виглядає) фонового зображення для своєї сторінки. У той же час проблема стикування країв нового фону нерідко стає серйозною перешкодою для початківця WEB-дизайнера. У цій статті я спробував зібрати відомості про всі відомі мені способи створення безшовних фонів.
Складаємо кутами всередину
Якщо ви вже підступалися до задачі створення безшовного фону (і якщо вам не пощастило наштовхнутися на якийсь із описаних нижче методів), то вам, ймовірно, доводилося довго і болісно перефарбовувати розташовані біля краю картинки пікселі, домагаючись їх відповідності пикселам протилежного краю. І, на жаль, успіху на цьому шляху досягти дуже важко - скільки б ви не билися, лінії стику все одно будуть кидатися в очі.
Людське сприйняття натренована виловлювати ознаки порядку в уявній хаосі, і тому, якими б незначними не були дефекти стику, вишикувавшись в регулярну прямокутну сітку, вони стають знущально помітними. Можливо, вам навіть приходила в голову ідея спробувати запам'ятати розташування цих дефектів, які добре видно, коли зображення розмножено на площині, щоб потім спробувати по пам'яті виправити їх в одиночній копії елемента фону. Мабуть, більш невдячне заняття важко навіть уявити.
Але уявіть собі, що у вас раптом з'явилася можливість редагувати фонове зображення прямо на площині, де воно знаходиться в оточенні своїх копій, - причому так, що будь-які зміни, що вносяться відображаються одночасно у всіх копіях розмноженого зображення. Якщо при цьому графічні інструменти, якими ви користуєтеся, зможуть з легкістю перетинати шви між "плитками" і ви відразу ж будете бачити кінцевий результат своїх дій - залиту цим фоном площину, - то, очевидно, загладжування і шпаклівка стиків вручну стануть цілком реальною справою навіть без використання яких би то ні було нестандартних інструментів.
Виявляється, домогтися описаного вище ефекту зовсім нескладно - для цього навіть не потрібно користуватися чимось на кшталт створення "клонів" зображення. Досить лише розділити прямокутник вашої "плитки" на чотири чверті і поміняти їх місцями. Після цього змінене зображення буде, по суті, являти собою фрагмент площині, заповненої копіями вихідного, - причому фрагмент цей обраний так, що на ньому видно кути чотирьох сусідніх копій "плитки". Зрозуміло, повторення цього нового варіанту фону дасть вам абсолютно той же результат, що і повторення вихідного (з точністю до зсуву на половину горизонтального і вертикального розміру). Однак тепер, на відміну від вихідного зображення, краю вже не вимагають ніякої доведення, так як вони були тільки що створені заново розрізанням "по живому", - а всі стики, які потрібно замазати, тепер, навпаки, знаходяться всередині.
З усіх методів виробництва безшовних фонів цей - самий гнучкий і зручний, так як він дозволяє користуватися для знищення слідів стику абсолютно будь-якими інструментами малювання, розмиванням, растушевкой і т. П. Єдине, про що слід пам'ятати, - це те, що ви повинні працювати дуже акуратно в тих областях, де оброблювані стики підходять впритул до кордонів зображення. Справа в тому, що тут ви можете з необережності ввести нові дефекти, які, знову-таки, стануть помітні тільки після розмноження фону на площині. Не виключено навіть, що, порушивши герметичність в цих областях, ви будете змушені повторити всю процедуру перестановки чвертей і заліковування стиків заново.
З крайності в крайність
Вибравши команду TOOLS | PATTERNS | DEFINE PATTERN, ви перекладете програму в особливий режим, в якому всі інструменти малювання набувають чарівну здатність безперешкодно перетинати кордони вашого зображення. Скажімо, виводячи кисть або олівець за правий край картинки, ви в момент перетину кордону раптом опиняєтеся в протилежній точці лівого краю, і ваш штрих (або мазок), перестрибнувши вліво на ширину зображення, як ні в чому не бувало триває в колишньому напрямі. Точно так же, вивівши інструмент за верхній край, ви опинитеся в самому низу зображення. Таким чином, в цьому режимі просто неможливо створити зображення, яке не володіло б властивістю безшовної стикування. (На жаль, це властивість, зване WRAP AROUND COLOR, поширюється тільки на ті інструменти, які управляються рухами миші; більшість обирають з меню ефектів, таких як LIGHTING або SURFACE TEXTURE, працюють як зазвичай.)
Звичайно, це властивість програми має лише обмежене застосування для тих випадків, коли у вас вже є готове зображення, яке потрібно зробити безшовним. У той же час ви можете користуватися будь-яким з величезної кількості екзотичних інструментів програми, щоб дуже швидко створити цим методом який-небудь цікавий або оригінальний фон.
Автоматичне зварювання урівень
Існує і ще один підхід до створення безшовних фонів - цього разу за допомогою спеціальної алгоритмічної процедури, сплавляли разом протилежні краю готового зображення. Як і в багатьох інших випадках, коли щось можна зробити або вручну, або автоматично, порівняння показує, що автоматичний метод дозволяє швидше і з меншими витратами праці отримувати більше стійкі, хоча в цілому менш задовільні (але часто все ж цілком прийнятні) результати .
Щоб зробити стик непомітним, цей метод користується накладенням один на одного копій зображення і часткової, плавно змінюється прозорістю. Уявіть, що вздовж зовнішніх чотирьох країв прямокутного виділення, яке належить перетворити в безшовний фоновий елемент, вирізані чотири смужки певної ширини. Потім кожна з цих смужок перенесена до внутрішнього краю протилежної сторони і там накладена поверх старого зображення, причому так, що прозорість цієї смужки дорівнює 50% на самому краю і поступово збільшується аж до повної невидимості у напрямку до центру прямокутника. Прозорість ж того фрагмента зображення, який опинився під смужкою, навпаки, зменшується від 50% до нуля (т. Е. До стовідсотковій видимості). Якщо ви подумки покриєте площину копіями такого зображення, то побачите, як сусідні прямокутники склеюються один з одним внахлест за допомогою цих виступаючих "клапанів".
Якщо ширина смужок-клапанів дорівнює X пікселів, то рівно за X пікселів до стику між двома сусідніми копіями зображення починається плавний перехід однієї копії в іншу. На самому стику, де формально закінчується одна копія і починається наступна, фактично видно суміш 50% від однієї копії і 50% від сусідньої. Після переходу на сусідній елемент видимість виступаючого "клапана" попереднього елемента поступово зменшується, поки не сходить нанівець - також на відстані X пікселів від стику (але в іншу сторону). Очевидно, що для застосування цього методу потрібно, щоб по краях області, яку ви хочете перетворити в елемент фону, залишалося досить місця, щоб можна було викроїти клапани для склеювання (як правило, їх ширина складає близько 20% від розміру виділення). Цей метод дає хороші результати для нерізких, розмитих текстур, що не містять чітких деталей і контрастних переходів. Багато фонові зображення цілком задовольняють цим умовам. Однак якщо ваше зображення містить текст або псевдотривимірного рельєф, результати будуть, швидше за все, незадовільними, так як в цьому випадку накладення однієї копії зображення на іншу стає занадто очевидним.