Популярність Текстурних Фонов У Веб-дизайні І Лайфхак фототекстури У Photoshop

1. загадковість текстур
2. білий простір
3. Брендування
4. Типографіка в структурах
5. Текстурний фон вищої якості
6. Якісні текстури своїми руками в Photoshop
7. светотональной
8. виправлення спотворень
9. вирівнювання текстури
10. висновок

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

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

загадковість текстур

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

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

білий простір

Само по собі біле простір не є чимось особливим у веб-дизайні. Але якщо клієнт суто проти звичайного світлого фону, то якою б чудовою вам не здавалася ваша сторінка, краще її переробити. Варіант псевдо-текстури підійде найкраще. Іншими словами, використовуйте невеликі вставки тоном темніше і розташуйте їх хаотично. Наприклад, сайт weaintplastic використовує фон з двох кольорів, але оскільки всі частини темного і світлого розташовуються не чергуючись в строгому порядку, то створюється відчуття використання і присутності саме текстури.

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

Брендування

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

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

Або зверніть увагу на поєднання тематики ресторану з деревної меблями і дизайну сайту на poogansporch , Або логотипу з вороном і знову ж ресторанний сайт barrelandcrow . Текстури імітують дерево, пір'я.

Типографіка в структурах

Типографіка повинна бути розбірливою. Одну річ щодо поєднання текстури і тексту потрібно пам'ятати завжди - текст повинні бути читабельним, оскільки він основний спосіб передачі повідомлення або можливості здійснення продажу. Відповідно, колір, розмір, шрифт повинні бути підібрані з розумом і мати чіткий контраст з текстурою. Спробуйте зупинитися на Impact, Georgia, Verdana, Tahoma, Lucida, Arial, але ні в якому разі не намагайтеся використовувати сімейство Comic Sans.

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

Також чудово створена типографіка і на проекті revelationconcept , Хоча напис має ледь прозорий колір. Проте, контраст тонів дозволяє все прочитати і розібрати.

Текстурний фон вищої якості

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

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

Великий інтерес представляє і lemonadela , Де брудно-синя текстура штукатурки також використовується на всьому сайті та навіть поєднується з фотографіями, ілюстраціями. Але сама по собі вона єдина і не створена за допомогою розмноження частинок. Така текстура не відповідає бренду на 100%, але додає дизайну в цілому уточнений вид та викликає емоції.

Якісні текстури своїми руками в Photoshop

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

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

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

светотональной

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

Відкриваємо нашу фотографію і створюємо дві копії шару. Переходимо на Шар 1 і застосовуємо Фільтр -> Розумієте -> Середньо.

Вибираємо шар-копію (верхній самий) і застосовуємо Фільтр -> Інше -> Колірний контраст і встановимо повзунок на 250 px.

Для цього шару виберемо Режим накладення Лінійне світло. Можливо, результат вийде дуже яскравим, тому просто зменшимо значення непрозорості для даного шару таким чином, щоб по світлотіні він майже відповідав оригіналу. У нашому випадку це трохи більше 60%.

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

виправлення спотворень

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

Знову використовуємо нашу фотографію і переходимо в Фільтр -> Корекція лінз. Відкриється окреме вікно налаштувань. Існує певна кількість готових пресетів для більшості моделей камер. Хоча нашої в них не виявилося.

Якщо у вас навпаки, то ви можете вибрати відповідний або запустити Adobe Lens Profile Creator і підібрати потрібний. В іншому випадку доведеться відправитися на вкладку Рекомендована і в ручну відрегулювати параметри «геометричне спотворення», видалення перспективи та інші.

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

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

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

вирівнювання текстури

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

Можна швидше і простіше. І знову беремо нашу фотографію. Вибираємо інструмент Лінійка на панелі інструментів Photoshop. Це там же де і Пипетка. І, що не затискаючи Shift, намалюємо в будь-якому місці фотографії горизонтальну (у нашому випадку) лінію. Виберіть деяку лінію або направлення на зображенні, яке явно передає спотворення і по ній проведіть лінійкою лінію.

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

Це ж дію можна виконати, якщо на вірніше панелі управління Лінійки натиснути впустила шар. Але в разі використання Меню - більш наочно виходить.

Білі краю доведеться видалити, тому вибираємо інструмент кадрування і обрізаємо зображенням. Трохи менше зображення стане, але зате рівне.

Порівняємо результат з ісходником. Таке вирівнювання текстури дасть можливість використовувати більш якісний варіант. Адже досить рідко можна бачити криві текстури на сайтах.

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

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

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

висновок

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

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

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