Здравствуйте, уважаемые читатели wmbn.ru! В сегодняшней публикации хотелось бы поговорить о том, как можно создать текстуры для сайта и какие способы для этого подойдут. Большинство сайтов, которые можно встретить на просторах интернета, используют для  своего сайта различные текстуры, которые отлично его украшают. Так же текстура в Веб-дизайне является чуть ли не основной его частью. Сами посудите, что такое дизайн — это прежде всего создание чего-то красивого, уникального, которое может на довольно долгое время засесть в памяти. Как можно достичь такого эффекта — добавить красок к предмету, блоку на сайте или его фону. И последняя цепочка — те самые краски, добиться их яркости и контраста можно с помощью CSS хитростей, или использовать созданные текстуры, причем второй вариант встречается довольно чаще.

Создание текстуры для сайта

Понятно, что если не использовать текстуры на сайте, то все градиенты, выделения, орнаменты придется оформлять в CSS, которые не всегда дружит с некоторыми браузерами, в особенности версия CSS 3, которая имеет просто огромное количество возможностей. Ну вот, получается чтобы избежать проблем с кросс браузерностью, лучше всего использовать готовые текстуры, которые можно создать самому с помощью онлайн сервисов или программных продуктов, типа Photoshop или Gimp.

Создание текстуры сайта в редакторе изображений

Ну что же, приступим и попробуем создать свою первую текстуру в автономной программе с поддержкой фильтров, кистей и прочих дополнений. Самые популярные в интернете программы для редактирования изображений — это конечно платный Photoshop и бесплатный Gimp. Различий в них прямо таки колоссальных нет, да и оба поддерживают большинство форматов изображений и паков (кистей, текстур и прочих дополнений).

Плюс использования программ в том, что они почти не вешают рамок в плане функционала. Можно набросать буквально любую кляксу или загрузить готовое изображение, наложить некоторые фильтры и все — вот вам и готовая текстура для сайта. Ее можно использовать как на отдельные блоки, играя с цветом и выделяя их, а так же установить в качестве фона, добавив лишь одну строкy кода в файл style.css.

Немного отвлечемся и поговорим более детально о текстурах и как они используются. К примеру возьмем индустрию игр — текстура там нужна для того, чтобы сделать объект выделяемым на фоне других. Так же используются для того, что бы приблизить игровой мир к реальному, иногда получается даже красивее, чем в реальной жизни. Она не обязательно должна быть сплошным изображением, можно сделать и часть, а затем ее размножить — тут дело вкуса.

Первый шаг создания текстуры

Продолжим и пошагово создадим первую простую текстуру, которую можно будет использовать на сайте в качестве фона. Делаться будет небольшой квадрат, размерами 200Х200 пикселей с залитым фоном. В качестве основного цвета стоит выбрать тот, который меньше всего напрягает глаза — все же нужно, чтобы посетителю было комфортно. Будем ориентироваться на цветах админки WordPress и выберем что-то между серым и светло голубым (d4d8ff).

Рамка вокруг текстуры для фона сайта

Как бы самый простой вариант изображения для фона сайта готов, однако хотелось бы чего-то большего, следовательно добавим пару эффектов. Самый простой вариант, который смог придумать — слегка обесцветить края нашей текстуры.

Белая рамка вокруг текстуры

Ну а можно и добить и полностью обесцветить края, сделав их белыми, но при этом добавить эффект перехода. Но это уже для знатаков обработки изображений, а мы остановимся на простом белом выделении.

Вот и немного по сложнее текстура в виде мягкой плитки готова — для фонового изображения как раз подойдет. Осталось ее добавить на фон сайта, для этого открываем файл style.css (для тех, кто не знаком с этим файлом, советую прочитать данную запись). После открытия нужно в найти селектор body и в его свойстве background изменить оригинальный путь на путь до файла, предварительно скопировав его в папку с изображениями шаблона.

body {
	background: url(/zoonews/services/helps/sozdanie-tekstur-fona-dlya-sajta-programmy-i-servisy-interneta/images/1.png);
}

Такой подход можно было использовать и в шаблонах для Drupal, однако там все настраивается из админки, но есть есть желание, то принцип тот же. В WordPress фон сайта так же можно поменять на вкладке Внешний вид — Фон (если вдруг фон отказывается меняться, или изменяется лишь его часть, то придется редактировать файл стилей style.css).

Пример использования текстуры на сайте

Получаем вот такую красивую текстуру в виде плиток в ванной — смотрится красиво и учтено то, что все элементы изображения состыковываются между собой. А это является важной часть при создании дизайна для сайта и не только.

Создание текстуры с применением авто — фильтров

Останавливаться на этом не будем и создадим на основе готовой (созданной) текстуру с некоторыми эффектами. Хотя дополню первую тему и вручную добавим эффект к изображению. Многие любят, когда на сайте используется что-то вроде черно белого эффекта — создадим тоже самое и для нашей текстуры. Для этого ее достаточно обесцветить и придать некоторые цветовые тона, но при этом стоит учесть, чтобы белая рамка так и осталась белой, ну или минимально серой градации. Тут не обязательно использовать фильтры, достаточно сделать старое выделение и снова залить фон нужным цветом.

Пример использования серой текстуры для сайта

Получился такой вариант, довольно приятный глазу — не режет и не бросается, хотя при долгом просмотре все же чувствуется дискомфорт. Перейдем к фильтрам — очень удобная штука, которой пользуются многие дизайнеры, так как один фильтр экономит часы работы, во всяком случае у меня.

Говорить как ими пользоваться нету смысла — зашел в галерею фильтров и выбрал понравившийся. Я же предоставлю список, которыми пользуюсь сам (брал из редактора Gimp):

  • Бесшовное размывание — отличный фильтр, который размывает края (границы) частей созданного изображения;
  • Гауссово размывание — расширенный вариант первого, имеет свои настройки. Получалось создавать текстуру заднего плана для сайта, создавая при этом эффект фокуса или стека — смотрится очень красиво и в большинстве случаев текст остается читабельным и без подложек;
  • Пикселизация — фанатам 8 битных консолей понравится, создает на границах текстуры размытость, в виде пикселей со слабым цветовым переходом. На сайте смотрится как будто побывал в фан клубе Dendy или еще старее консолей;
  • Иногда использую фильтр Волны, который делает эффект на воде после падания капли. Он довольно сложный, так как не всегда получается подобрать состыковку;
  • Для отдельного участка использовал фильтр Лист бумаги, который помечал затем ссылкой;
  • Мозаика — мой любимый фильтр, который создает из простой текстуры элементы мозаики, что довольно красиво смотрится на сайте. Однако его использовать нужно с умом, так как можно создать нагрузку на глаза и состыковка не всегда происходит;
  • Для отдельного блока можно так же использовать Луч или Вспышку, но только для одного объекта, так как в качестве текстуры для фона она портит всю картину;

Комментариев: 2

  1. Вячеслав

    Здраствуйте,я столкнулся с проблемай порт 80,денвер уставлевается но не работает,у хамрр не запускается апач что делать ума не приложу оключил все программы толку нету вазможнали запустить программу WordPress както иначе?

    1. writer

      Проверьте настройки брандмауэра, а так же антивируса. Альтернативное решение — установить WP на бесплатный хостинг и уже точно знать, как он будет работать в сети

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>