Дизайн Мания » Текстуры

Использование текстур в веб-дизайне

Tod — Wed, 26 Oct 2011 13:11:42 +0000

Какой самый простой, правильный, а иногда и единственно возможный способ создать иллюзию рельефа того или иного элемента (объекта) в веб-дизайне (а так же в 2D в целом, и естественно 3D)? Правильно — использовать текстуру! Будучи «материалом» универсальным, текстуры широко используются в веб-дизайне и является объектом бесконечных экспериментов. Текстуры на сайтах можно встретить как простые, которые лишь подчеркивает те или иные элементы проекта, так и гораздо более сложные реализации. Вдохновившись этой публикацией предлагаю рассмотреть несколько вариантов использования текстур:

«Тонкое» использование текстуры

Хотите разнообразить простой однотонный или градиентный фон — добавьте «легкую» текстуру, которая не будет бросаться в глаза и резко контрастировать, но вместе с тем, усложнит и облагородит фон. Также это позволит немного выделить те или иные объекты, привлекая к ним внимание пользователя.

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

Обратите внимание на еле различимую текстуру в верхней части сайта (там где находится логотип и верхняя навигация). Отличный образец умелой работы с текстурами! Это помогает сделать переход между оттенками фона более заметным и “интересным”.

Другой пример — сайт W+K Studio. Здесь текстура используется вместе с эффектом градиента для фона.

Причем в данном случае «легкая» и весьма простая текстура добавляет глубины и «богатства» этому самому градиентному фону.

Текстура как «грубая сила»

В противовес «тонким» деликатным текстурам, которые ненавязчиво добавляют детализации, иногда хорошо работают яркие контрастные текстуры, задающие основной тон и настроение композиции. Чаще всего подобные текстуры в веб-дизайне используются для выделения заголовков или добавления контраста между разными колонками контента на сайте. Нужно достаточно аккуратно относится к «тяжелым» текстурам, так как они могут отвлекать пользователя от наполнения страницы и переманивать на себя все внимание, что не есть хорошо.

Яркий пример второго варианта использования текстур — сайт Church on the Rock, где «сильные» текстуры применяются достаточно широко.

По сути, весь дизайн (особенно в его верхней части) Church on the Rock «замешан» на контрастных текстурах и их взаимодействии: отдельные области сайта выделяются разными текстурами, при прокрутке вниз используется обычный одноцветный фон.

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

При прокрутке вниз текстура через плавное размытие переходит к белому цвету – хороший прием смены насыщенной шапки на совершенно “минималистичное продолжение” внизу веб-страницы.

В общем, если говорить о текстура в веб-дизайне, то это очень интересный и полезный элемент, с его помощью можно добиться весьма примечательных результатов. Лично я очень люблю добавлять различного рода текстуры для блогов, так как это помогает шаблону смотреться более емко, эффектно и выделяет основное содержимое сайта. Кстати, советую глянуть статью про оригинальные генераторы бэкграундов (background) – найдете парочку полезных онлайн сервисов, с помощью которых можно создать красивые текстуры для фона веб-страницы. Вообще используя текстуры можно добиться самого разного результата. В конечном счете все определяет та цель которую вы преследуете, а подходящая текстура найдется всегда!

P.S. На сайте Шпаргалка Блоггера вы можете найти статью о том как установить фон для сайта на html и многие другие публикации о дизайне, верстке в помощь начинающим пользователям.
Приобрели новый модный и дорогой девайс? Сразу же советуем вам купить чехол для ipad 2 или другого вашего планшета, что буквально поможет продолжить его срок эксплуатации.
Сломалась стиральная машина? – лучше заказать профессиональный ремонт стиральных машин у тех, кто разбирается в этом дабы не получить в скором будущем новые поломки.

Теги: веб-дизайн, дизайнеру, советы и рекомендации, текстуры, уроки веб дизайна, эффективный дизайн

Интересные статьи по теме

Галерея узоров CSS3 для фона

Tod — Sun, 08 May 2011 11:53:25 +0000

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

Развивать подобные навыки всегда помогал разбор практических примеров. Хотите разобраться как создаются сложные бесшовные узоры? Нет проблем! В этом вам окажет неоценимую помощь проект CSS3 Patterns Gallery.

Галерея узоров CSS3 Patterns предлагает вашему вниманию 18 примеров виртуозного использования каскадных таблиц стилей. Глядя на некоторые из них сложно поверить, что они были созданы исключительно средствами CSS, тем не менее, так оно и есть. Здесь есть фоны в стиле карбон, кирпичной стены и шахматной доски, а также со звездочками, сердечками и различного рода полоски и клеточки. И что самое интересное – эти и другие изображения через CSS будут доступны даже с выключенными картинами в браузере.

Что вы можете с этим добром сделать? В простейшем варианте, просто позаимствовать понравившийся узор для того чтобы использовать его в каком-то собственном проекте. Но, если вы пойдете дальше и уделите время на то, чтобы разобраться в том каким образом каждый узор создан, то много чему научитесь!

Небольшой технический комментарий о совместимости: в целом узоры хорошо отображаться на IE 10, Firefox 3.6+, Opera 11.10 и других современных браузерах, тем не менее, некоторые детали местами могут отображаться не корректно. На более старых браузерах (например, Firefox 3.6 и младше) вероятность проблем чуть выше.

Кстати, вы можете выслать администратору сайта свой узор и если он будет действительно интересным, то обязательно будет опубликован. Изучайте новые возможности CSS и хвастайте своими достижениями!

P.S. Если вы опытный сеошник, то наверняка кроме обновлений PR, отслеживаете и другие показатели – точные апдейты яндекса тут причем с сохраненной историей их изменений.
Каждый геймер всегда безудержно следит за играми и читает свежие игровые новости по своим любимым компьютерным играм или анонсы новых проектов.

Теги: css3, верстка, примеры кода, узоры, фон для сайта

Интересные статьи по теме

Оригинальные бесплатные текстуры Funkies Patterns

Tod — Mon, 18 Apr 2011 17:17:56 +0000

Большинство дизайнеров и разработчиков предпочитают использовать традиционные и надежные решения. Это касается и текстур в том числе – выбирай что-то общепринятое и привычное, не ошибешься, как например мы недавно показывали простые узоры или полосатые текстуры для фотошопа. Но иногда дизайн (стилистика) сайта подразумевает использование чего-то необычного, оригинального и особого. В этом случае подходящие текстуры найти сложнее. Тем не менее, такие “необычные” наборы существуют. Один из примеров – Funkies Pattern!

Скачать (1,5 Mb) // Источник

Коллекция «Funkies Pattern» была разработана специально для портала Web Designer Depot дизайнером из Вирджинии Кендрой Гейнз (Kendra Gainez). Набор «Funkies Pattern» включает в себя 10 удивительных текстур для Adobe Photoshop. Стилистически комплект не однородный. Какие-то текстуры можно назвать психоделическими, какие-то выглядят как ретро, классика и так далее.

Архив не велик, всего 1,5 mb. Внутри вы найдете непосредственно сами текстуры (файлы с расширением «.pat») и их jpeg-превьюшки. Имеется версия для Windows и MacOS. Лицензия допускает бесплатное использование «Funkies Pattern» как в личных, так и для коммерческих целях (читай readme)!

P.S. Для авторов интересных блогов есть возможность добавить проект в каталог блогов с подробным описанием и разбиением по тематика – пишите на почту stod84@gmail.com.
Если вы хотите чтобы ваш интернет бизнес приносил прибыль, заказывайте продвижение сайта в поисковиках, а возможно даже и контекстную рекламу.

Теги: бесплатные текстуры, скачать для photoshop, скачать текстуры, текстуры

Интересные статьи по теме

Простые бесшовные узоры для Photoshop

Tod — Mon, 31 Jan 2011 19:33:01 +0000

Повторяющиеся (бесшовные) узоры — непременный атрибут современного веб-дизайна. Они используются повсеместно. Особо широкое применения нашли узоры на базе простых геометрических фигур – точек или линий, и из них шаблонов. Такие узоры не имеют стилистической окраски, они «нейтральны», поэтому их можно смело использовать буквально любом дизайне без опасения его испортить!

В данной подборке вашему вниманию предлагается коллекция из 12 бесшовных узоров (диагональные линии, клетка, точки и зигзаги) на основе указанных простейших элементов для Adobe Photoshop:

Скачать ~ 1.4 Kb// Источник

Я немного уменьшил превью узоров для Photoshop чтобы они поместились на странице, но по увеличенным частям изображения можете видеть, например, что нижнее левой изображение это не сплошная заливка. Вообще лично меня поражает простота и легкость, с которой, казалось бы, обычные пиксельные узоры создают настолько цельную и приятную картинку. Многие из них можно смело использовать для фона или других графических элементов дизайна. Вот, кстати, на сайте источнике можно и увидеть как данные геометрические формы органично вплетаются во внешний вид проекта.

Не зря говорят, что все гениальное просто.

Как пользоваться данными узорами? Для начала их следует скачать, если требуется, распаковать и скопировать в папку с узорами в каталоге Adobe Photoshop (например, путь может быть следующим – C: Program Files/Adobe/Adobe Photoshop/ CS3Presets/Patterns(узоры)).

Другой вариант – добавить (загрузить) узоры из соответствующей палитры непосредственно в Photoshop в процессе работы (например, используя инструмент заливки (Fill) вы можете выбирать заливку узором и на месте загрузить новые узоры (Load Patterns)).

Последующие инструкции, думаю, вам не понадобятся, креативного вам настроя!

P.S. Заинтересовались рынком Forex, но не знаете с чего начать? – заходите в Рейтинг форекс брокеров где найдете много полезной информации по заработку на форексе.
Также можете глянуть на отличные игры онлайн и флеш игры бесплатно и быстро.
Интернет магазин Линзмастер предлагает разные контактные линзы по доступным ценам и с доставкой по Украине.

Теги: бесплатные текстуры, скачать для photoshop, скачать текстуры, узоры

Интересные статьи по теме

Коллекция полосатых текстур для Photosop

Tod — Sat, 30 Oct 2010 21:46:01 +0000

Полосатые текстуры (в нашем случае фон в полоску) – это бессмертная классика. Подобный дизайн актуален и популярен всегда, потому что простые формы не устаревают. Вообще очень часто сайты и блоги сделаны на однородном фоне, который вполне можно слегка разнообразить – иногда уместным будет использовать узоры, в других случаях хорошо подойдут полосатые текстуры. Поэтому сегодня я решил собрать для вас не очень большую, но абсолютно полноценную подборку текстур “в полоску”.

Photoshop Stripe patterns 2

Скачать

В архиве Photoshop Stripe patterns 2 находится 20 текстур, в том числе шаблоны в формате .pat для Adobe Photosop. Полоски, как видите, попадаются в разных цветовых решения – от спокойных практически однотонных до весьма смелых сочетаний.

Остальные 4 набора взяты с сайта Webtreats, где кроме полосатых текстур можно найти очень много интересных файлов для дизайнера.

Flat Grungy Summer Stripes Seamless Patterns

Скачать (14,2 Мб)

Набор текстур Flat Grungy Summer Stripes Seamless Patterns в разрешении 740х740 px. Гранжево-полосатые текстуры представлены в .jpg и фотошоповском формате текструр .pat.

Grungy Stripes Photoshop Patterns

Скачать (11 Мб)

Grungy Stripes Photoshop Patterns – текстуры родственные предыдущем. Поэтому, собственно, исходные данные примерно те же самые: разрешение – 740х740 px; формат .pat. Текстуры также бесшовные, ключевое отличие в том что на сей раз горизонтальные полоски не однородные по ширине, что создает весьма интересный и необычный эффект.

Grungy Stripes Photoshop Patterns Part 2

Скачать (12 Мб)

Еще немного полосатых текстур Grungy Stripes Photoshop Patterns Part 2, но на этот раз уже вертикальные. Опять выполнены в стиле гранж, характеристики те же.

Grunge Stripes Photoshop Patterns

Скачать (16 Мб)

Набор Grunge Stripes Photoshop Patterns содержит 12 текстур в высоком качестве. Разрешение от 512×512 до 1024×1024 пикселей. На этот раз нам предлагаются PAT текстуры, по сути это различные цветовые вариации одной темы. Правда они настолько разные по цветовой гамме и восприятию, что схожесть в конечном варианте дизайна вряд ли кто-то заметит. Полосы, как и в первом случае, идут по диагонали.

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

Теги: photoshop, бесплатное, дизайнеру, скачать для photoshop, скачать текстуры, текстуры

Интересные статьи по теме

Гранж (grunge) текстуры для сайта и дизайна

Tod — Tue, 17 Aug 2010 11:38:05 +0000

Стиль гранж (grunge) у веб-мастеров в моде уже достаточно давно. Гранж пришел на смену конфетному, геометрически правильному и стерильному Web 2.0, и во многом является его антагонистом. Хаос (в определенных рамках) вместо порядка (опять же относительного), приглушенные грязные цвета вместо ярких и чистых, неряшливые текстуры — вот основные отличительные черты гранжа.

Считается что стиль гранж в веб-дизайне (так же как в дизайне в целом, одежде и пр.) является частью субкультуры в которую вдохнули жизнь музыкальные коллективы – Nirvana, Pearl Jam и предшествующие Stooges или King Crimson. Веб-дизайн сложно как-то ассоциировать с музыкой или одеждой (поношенная, затертая одежа из секондхенда), но основа одна — показная неряшливость и небрежность (которая видимо символизирует анархизм?).

Это совсем не означает отталкивающий неприятный дизайн. При умелом использование стиля, веб-сайты в стиле гранж выглядят отменно. Потому что смысл гранжа не попытка смоделировать на страницах вашего сайта помойку (это скорее эстетика панка), а создание живого, хорошо организованного и даже где-то приятного «беспорядка».

Впрочем, чтобы разобраться что такое «правильный гранж», лучше посмотреть несколько примеров:

Ну, а теперь, обратимся к тому, ради чего этот пост собственно и затевался. Хороший дизайн в стиле гранж не мыслим без гранжевых текстур. Это неотъемлемый элемент стиля. Часто дизайнеры даже разработку дизайна начинают с того что играются в фотошопе смешиванием различных текстур (например, разных слоев с текстурами с разными режимами наложения). Чтобы у вас тоже было чего смешивать, или безо всякого смешивания использовать в качестве фона ваших гранжевых дизайнов, предлагаю вам небольшую подборку гранжевых текстур:

Grunge Package

Скачать (зеркало) ~ 19 Мб // Источник

Grunge Package — четыре высококачественных текстуры, разрешение 2304х3072, «вес» – 19 MB. Вполне могут подойти для фона какого-либо гранжевого сайта без предварительной обработки.

Colorful Grunge

Скачать (зеркало) ~ 55 Мб // Источник

Colorful Grunge — еще пять текстур в высоком разрешение с deviantart. Каждая текстура с цветным оттенком. Тоже смотрятся весьма здорово и сразу готовы для использования для ваших дизайнов.

Autumn Grunge

Скачать (зеркало) ~ 15 Мб // Источник

Autumn Grunge — «осенний» пакет гранжевых текстур, отлично подойдут для создания «осеннего» настроения, правда, с немного мрачным акцентом.

8 Subtle Grunge Textures

Скачать (зеркало) ~ 39 Мб // Источник

8 Subtle Grunge Textures — набор разноплановых гранжевых текстур. Собственно, это и является главным достоинством «пакета». Все текстуры высокого качества, не очень “грязные”, доступны как светлые изображения, так и весьма темные.

24 High-Res Grunge Texture Pics

150 Мб // Источник

Набор 24 High-Res Grunge Texture Pics содержит 24 яркие и интересные бесплатные текстуры. И хотя весят они немало, думаю, профессиональным дизайнерам, работающим в стиле гранж, могут пригодиться.

Вообще, конечно, в интернете полно гранжевых текстур на любой вкус, это лишь малая их часть, но, тем не менее, надеюсь эти текстуры как следует простимулируют ваш креатив и помогут в работе! Удачных вам экспериментов!

P.S. Постовой. Предлагаю посетить весьма полезный сайт QuickTUTS где найдете уроки photoshop в большом количестве и на русском языке.
Лучший комфорт! Только лучшие гостиницы Киева! Добро пожаловать в гостиницу «Украина».
Если вам понадобилась порошковая покраска в Москве – обращайтесь в компанию Высокие технологии.

Теги: бесплатные картинки, гранж, дизайнеру, для сайта, скачать для photoshop, скачать текстуры

Интересные статьи по теме

Классические узоры и текстуры для сайта

Tod — Thu, 01 Jul 2010 07:18:20 +0000

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

Чтобы вам не копаться и не искать такие классические узоры и текстуры когда они вам потребуется, я решил сегодня приготовил небольшую подборку. Вообще, классическими их, конечно, называть не совсем правильно. Это слишком грубое определение, потому что среди представленных ниже узоров есть и баррочные, и античные, и готические. Несмотря на то, что это разные стили, я решил что их вполне можно объединить в одну группу. Кстати, для простоты и удобства я объединил все текстуры из поста в один архив, который можете скачать здесь (зеркало) ~ 2,4 Mb.

Итак, классические узоры и текстуры для сайта:

Hand-Drawn Scrolls

Antique Engraved

Charcoal Demask

Sample Damask

Grim Lady Patterns

Grim Lady Patterns
(в наборе идет 4 разных узора)

Применение этих узоров думаю большого труда для вас не составит. Часть из представленных паттернов имеет в архиве, как “слитый” в .png узор, так и “исходник” (обычно векторный eps), поэтому у вас есть возможность даже что-то поправить или переделать в файле (если позволяют умения и есть желание). Использовать данные классические текстуры и узоры можно как для персональных, личных так и для коммерческих проектов.

P.S. Постовой. Сайт Карьера в Украине — быстрое решение проблем трудоустройства.
Статья по психологии отношений – научиться любить себя – о самооценке и самокритике.

Теги: бесплатное, дизайнеру, классический стиль, скачать текстуры, фон для сайта

Интересные статьи по теме

Зимние текстуры: лед, снег и мороз

Tod — Tue, 05 Jan 2010 22:17:46 +0000

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

Белые гранжевые текстуры и снег

Скачать (зеркало) // Источник ~ 2,8 Mb

В архиве найдете 10 текстур 1024х768 часть из которые это снег в различных его обличиях и приближениях, а также имеются гранжевые текстуры белого цвета, которые не то чтобы смахивают на снег, но могут пригодиться для похожих целей.

Текстуры лед и мороз

Скачать (зеркало) // источник1, источник2 ~ 6,2 Mb

Как и прошлый набор текстур, этот состоит из двух частей. В первой вы найдете 5 изображений морозных (в какой-то степени гранжорвых) поверхностей, где превалируют темные цвета и тона. Во второй же – лед и ледяные узоры, цвета очень светлые и ясные, узоры красивые. Так их хочется применить где-то эти текстуры.

Я сохранял в архивы только размеры изображений 1024х768, но если вы пройдете по ссылкам-источникам, то найдете картинки в несколько раз больше. Текстуры найдены на одном замечательном сайте bittbox.com, который в какой-то степени посвящен веб-дизайну, ну и вообще есть в нем всякие штуки из интернета, как например раздел по wordpress, софт, ось для mac ну и т.п.

P.S. Постовой. Вот, кстати, по теме – екслюзивні новорічні іконки, можно скачать.
Отличный блог сеошника на заметку.
Качественный учет ведение кадрового делопроизводства – наша работа.

Теги: бесплатное, зима, зимние фотографии, скачать текстуры, снег, текстуры

Интересные статьи по теме

94 бесплатные текстуры (фона)

Tod — Tue, 07 Oct 2008 12:28:54 +0000

Предлагаю скачать набор из 94 текстур разных цветов и дизайнов в формате .png размером 4167×4167 пикселей. Можете использовать изображения полностью или обрезать как будет угодно для собственных целей. Текстуры идеально подходят для разного рода презентаций, создания сайтов, тем wordpress и т.п.

Вот небольшое превью имеющихся в архиве файлов:

Скачиваем архив с Depositfiles или Rapidshare. Размер – 62Mb

Источник: DragonArtz Designs

P.S. Читаем обзор файловых хранилищ. часть 4.

На правах рекламы:

Теги: скачать картинки, текстуры, фон