В веб-дизайне использование текстур в качестве фона – верный шаг к успеху. Текстура представляет собой простой и эффективный способ придать глубину сайту. С помощью одного такого фона можно управлять путешествием пользователя по контенту и такое увидеть можно в интернете гораздо чаще, чем всем нам кажется. Но текстуру, в отличие от обычного фона, сложнее использовать, да и создавать/редактировать тоже.
В прошлом материале мы рассматривали тему фонов в веб-дизайне и некоторые способы того, как создать самый простой текстурированный фон. Фоны могут быть и градиентными, и цветными, видео/фото, а могут иметь и рисунок. Вот о рисунках и поговорим сегодня детальнее и посмотрим, как можно поработать над имеющимися кусочками текстуры таким образом, чтобы преобразовать их в более качественный, современный и технологический вид. Особенно, если появилось желание самостоятельно создать уникальный фон для своего сайта с использованием смартфона. Не без помощи 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 же способен помочь в преобразовании качества изображений и совершенно неважно какая у вас версия. Все инструменты доступны во всех версиях, поэтому сложностей возникать не должно.
Но это еще не последний материал про текстуры для веб-дизайна. Есть и еще более детальные вопросы, связанные с их использованием. Важные и зачастую такие необычные, что дизайнеры либо о них забывают, либо не обращают внимания.