Где найти бесплатные текстуры для фона: 15 отличных ресурсов
Ниже приводится список ресурсов, на которых вы сможете найти отличные бесшовные фоны для сайта. После этого вы сможете начать экспериментировать и создавать свою личную коллекцию.
01. Lost and Taken
Lost and Taken — это один из моих любимых сайтов. На нем представлено множество категорий текстур, и можно скачать отдельные текстуры по одной или загрузить их в виде архива. Если вы ищете текстуры в стиле старинных фильмов, старых шероховатых страниц из блокнота, или что-то еще столь же интересное и интригующее, то вам сюда.
02. Graphic River
Graphic River — это еще одна платформа, созданная, чтобы удовлетворить потребность в бесплатных фоновых текстурах. Представленная здесь библиотека текстур впечатляет, и она довольно проста в использовании. Вы также найдете здесь другие графические ресурсы.
03. Wegraphics
Wegraphics предлагает на выбор бесплатный бесшовный фон для сайта различных тематик, которые могут быть использованы в конкретном контексте.
04. Texture King
Texture King предлагает высококачественные бесплатные текстуры, такие как, например, дерево, бетон или древесная кора. С помощью этих текстур перед вами открываются практически неограниченные возможности.
05. Subtle Patterns
Subtle Patterns предлагает текстуры, которые можно использовать в веб-проектах. Отличный источник изящных фоновых текстур для веб-дизайнеров.
06. Free textures for layers
В этом альбоме вы сможете скачать бесшовные фоны для сайта в высоком разрешении, которые можно использовать в соответствии с лицензией Creative Commons.
07. Blog Spoon Graphics
Превосходный ресурс для дизайнеров, предлагающий широкий спектр различных графических материалов. В том числе большую коллекцию изысканных фоновых текстур, оптимизированных под использование в Photoshop, чтобы их можно было применять и редактировать в качестве слоев.
08. Digital Camera World
Здесь доступно около 100 красивых и креативных бесплатных текстур, оптимизированных под Photoshop.
09. Texture Gen
Texture Gen — одно из самых больших хранилищ бесшовных фонов для сайта, с широким спектром категорий и простым интерфейсом.
10. FBrushes
FBrushes предлагает большой выбор изображений на тему времен года. Доступные здесь бесплатные фоновые текстуры оптимизированы под Photoshop, Illustrator и другие популярные программные продукты.
11. Graphicmania
Еще один прекрасный ресурс, предоставляющий большой выбор оригинальных бесплатных фоновых текстур. В том числе и осенних бесшовных фонов для сайта.
12. Shizoo
Shizoo является отличным сайтом для различных графических ресурсов, он содержит красивую и яркую библиотеку бесплатных фоновых текстур.
13. Texture Palace
Texture Palace представляет собой платформу для ресурсов, которая позволяет обмениваться фоновыми текстурами.
14. Mayang
Mayang содержит более 4350 бесплатных фоновых текстур в высоком разрешении. В том числе изображения ткани, металла, дерева, камня, бесшовные фоны для сайта осень и многое другое.
15. Creative Bloq
Здесь вы найдете великолепную коллекцию из 40 бесплатных текстур!
Данная публикация представляет собой перевод статьи «Where to find free background textures 15 great resources» , подготовленной дружной командой проекта Интернет-технологии.ру
Бесшовные текстуры и фоны абстракции
Абстракции – привлекательный фон для любого графика, баннеров или рекламы. Правильная текстура, выполненная в форме абстрактного искусства, делает всё произведение более интересным. Картинка с данным фоновым изображением способна преобразить вашу работу, придавая ей необычные грани.
Абстракции используют в качестве заливки на рекламных объявлениях. Здесь применяется коллекция с лёгким фоном, с точками фокусировки. Для дизайнера этот формат также пригоден – это прекрасный background для сообщений или подписей. Для общего фона сайта и рабочего стола набор текстур из абстракций – бесценный актив.
Предлагаем приятные абстрактные фоны для фотошопа, которые можно скачать для усовершенствования своей техники и продвижения творчества. Формат jpg задает высокое качество всех картинок, с возможным их использованием для личных и коммерческих целей. Также наши текстуры будут красивыми шаблонами в проектировании бесшовных изображений в Adobe Photoshop и Adobe Illustrator.
Абстракции – бесшовные текстуры и фоны, набор паттернов:
- Размытые графические узоры разной цветовой гаммы, с градиентом и без него;
- Геометрические фоновые рисунки в нескольких тонах;
- Геометрические цветные фигуры с красивой палитрой оттенков;
- Сложные геометрические шаблоны;
- Пиксельные шаблоны;
- Векторные фигуры для разработки сложного геометрического рисунка;
- Бесшовные трехмерные геометрические шаблоны;
- Сетки, в том числе и гексагональные;
- Текстильный абстрактный дизайн;
- Бесшовные шаблоны «фигура в фигуре»;
- Рельефные рисунки;
- Сложные фоновые узоры с использованием эффекта перекрытия копии и прозрачности;
- «Плетёные» бесшовные шаблоны;
- Вертикальные, горизонтальные и диагональные абстракции;
- Абстрактные текстуры «под плитку»;
- Фоновые размытые фоны;
- Постеры с эффектом калейдоскопа;
- Космические сцены;
- Светящиеся волны и градиенты;
- Ретро-графика;
- Люминесцентные линии;
- Цветочные картинки с разноцветной гаммой и другие фоны для заливки.
Коллекция текстур разделена не только по тематическому, но и цветовому признаку. Цвет указывается в окне поиска, и автоматически воспроизводится список фонов, где присутствует желаемый цвет. Это удобно для дизайнера, ищущего текстуры определенного тона в компиляции проекта.
Какие цвета предлагаются:
- Бежевый;
- Белый;
- Голубой;
- Графитовый;
- Желтый;
- Зеленый;
- Золотой;
- Коричневый;
- Красный;
- Оранжевый;
- Розовый;
- Серый;
- Синий;
- Смешанный;
- Фиолетовый;
- Черный.
Абстрактная текстура обеспечивает HD-качество визуализации, которая проектируется в 3Ds MAX и других редакторах с применением объемной графики.
У нас можно скачать такие модели, не тратя время на создание текстурных фонов вручную. Даже если вы не являетесь энтузиастом PS, вам обязательно захочется взглянуть на наши предложения! Ведь рано или поздно они вам пригодятся, в частности, для оформления сайта, открыток или других аппликаций. У нас представлены бесшовные текстуры-абстракции в размере от 995 пикселей, делающие создаваемый объект насыщенным и результативным.
Высококачественные паттерны и текстуры для дизайнера
Привет, друзья. Сегодня я представляю Вам подборку множества самых разнообразных паттернов для Photoshop и множество бесплатных и качественных текстур. В этой полной подборке Вы сможете скачать всё что Вам нужно для создания Вашего проекта. Тем более тут собраны только качественные исходники, так что смело добавляйте данную подборку в закладки.
Спасибо http://designrfix.com и рекомендую:
Деревянные паттерны
Скачать
Бесплатные кожаные паттерны
Скачать
Паттерны ржавого железа
Скачать
Тканевые паттерны для Фотошопа
Скачать
Несколько бумажных паттернов на сайт
Скачать
Бесплатные джинсовые паттерны
Скачать
Гранжевые паттерны с кругами
Скачать
Бесплатный карбоновый паттерн
Скачать
Полосатый паттерн для тёмных сайтов
Скачать
Паттерн в виде телевизионного шума
Скачать
12 бесплатных веб паттернов в минималистическом стиле
Скачать
Деревянный паттерн на сайт
Скачать
Паркет на фон сайта
Карбоновый фон для сайта в PSD
Скачать
Ещё один карбоновый паттерн
Скачать
Бесплатный фон для тёмных сайтов
Скачать
Тёмный пиксельный фон
Скачать
Серый фон на сайт — Vaio
Скачать
Полосатый паттерн
Скачать
Фон светлой кожи
Скачать
Фон с треугольниками
Скачать
Бумажный и светлый фон
Скачать
Полосатый серый паттерн
Скачать
Гранжевые текстуры
Скачать
Текстуры старой и грязной бумаги
Скачать
Ещё 6 текстур старой бумаги
Скачать
Бесплатная гранжевая текстура с красным кругом
Скачать
Текстура мятой бумаги
Скачать
Старая тёмная бумага
Скачать
Несколько винтажных текстур
Скачать
Текстура с каплями
Скачать
Ещё классная текстура с каплями воды
Скачать
6 качественных текстур разнообразного дерева
Скачать
Текстуры деревянного ламината
Скачать
Текстуры гладкого дерева
Скачать
Текстуры стен и бетона
Скачать
Как создать текстуры для сайта с помощью сервисов
Что же еще можно разместить на фоне сайта, кроме фоновых изображений. Возможно, у Вас такая ситуация, что Вы не можете найти качественное фоновое изображение. Тогда для Вас будет отличным выходом из этой ситуации — использование текстуры для сайта. Текстура — это, если очень грубо, маленькая картинка, которая повторяется по вертикали и по горизонтали. В статье Вы найдете 8 сервисов, где можно создать свою уникальную текстуру для сайта.
Также рекомендую почитать
Ну что, давайте посмотрим что это за сервисы и что они могут при создании текстуры для сайта.
1. Patternify
Patternify позволяет создавать текстуры и небольшие иконки рисуя буквально каждый пиксель. Вы можете выбрать произвольный цвет или оставить пиксель прозрачным. Созданное изображение можно сохранить в формате PNG, а также сервис генерирует код в формате Base64, для того чтобы вставить код изображения прямо в CSS файл, что бывает очень удобно.
2. Gerstnerizer
С помощью сервиса Gerstnerizer Вы можете генерировать бесцветные текстуры и делает он это с помощью линий. Слева, на панели инструментов, можно задать толщину линий, прозрачность и кривизну. Немного ниже можно выбрать одну из уже готовых фигур: треугольник, квадрат или шестиугольник. Справа находится окно предпросмотра созданной текстуры. Что является интересной особенностью данного сервиса, он позволяет сохранять созданные текстуры для сайта в формате SVG.
3. Tartanmaker
Если Вам нравятся текстуры формата крест-накрест, тогда этот сервис для Вас. Выберите 3 цвета, ориентацию (диагональ или вертикальную), а затем нажмите «Make it!» и Вы увидите шаблон, который Вы создали. Также выше есть ссылка на галерею текстур, которые созданы другими пользователями. Данные текстуры Вы также можете скачать и использовать в своих целях.
4. Stripe Generator
Замечательный сервис для создания текстур состоящих из полос. Вы можете выбрать столько цветов, сколько захотите. Также есть возможность настроить размер полосы, интервал, ориентацию и тени. Также, как и в прошлом сервисе, есть галерея текстур, созданных другими пользователями сервиса.
5. Colour Lovers Seamless
Сервис Colour Lovers позволяет создавать текстуры для сайта с помощью готовых фигур и линий. Выберите фигуру или линию из левой колонки и перетащите ее в правое окно предпросмотра. Сервис автоматически сгенерирует текстуру. Вы можете применять простые операции к этим элементам, такие как изменять размер фигуры, вращать фигуру и задать количество фигур на текстуре.
6. Patternizer
Patternizer это еще один сервис создания текстуры для сайта, который очень прост в использовании. Выберите цвет, угол поворота, прозрачность, ширину и смещение, чтобы создать свою собственную текстуру. Вы получаете готовую код, который необходимо вставить на свой сайт. Но там нужно подключить скрипт этого сервиса, чтобы использовать данные текстуры. Как его подключить и использовать сгенерированные текстуры для сайта читайте здесь.
7. GeoPattern
GeoPattern генерирует текстуру автоматически при вводе текста. Просто посетить этот сервис и начните вводить какой-нибудь текст и Вы увидите как на фоне начинает генерироваться произвольная текстура состоящая из произвольных фигур.
8. Transparent Textures
Transparent Textures это сервис, который позволяет выбрать текстуру для сайта из уже готовой коллекции. Слева Вы можете выбрать из цветовой палитры цвет, который у Вас будет использоваться на фоне под текстурой. Затем кликайте на любую текстуру и Вы увидите как на фон сайта сразу применяется выбранная текстура. Следующим шагом Вам необходимо скопировать код из левого окошка (пункт 3 на сайте «Grab the CSS») и вставить в свой файл стилей.
Бонусный сервис. CSS Gradient Animator
В качестве бонуса к данной статье я хочу рассказать Вам еще об одном сервисе, который позволяет генерировать не текстуры, а анимированный фон. Сервисом очень просто пользоваться. Вам необходимо выбрать угол, скорость изменения цвета, а затем добавить несколько цветов, которые Вы хотите видеть анимированными на фоне. Сразу на фоне сайта Вы можете видеть готовый пример, который Вы создали. А справа в окне генерируется код, который Вы можете вставить в свой файл стилей и эффект будет красоваться на Вашем сайте.
Сервис создает анимацию с помощью ключевых кадров. Поэтому рекомендую прочитать сначала вот эту статью — CSS3 анимация для начинающих, чтобы понимать куда вставить этот код.
Вывод
Ну что, Вам понравились данные сервисы? Я думаю сейчас у Вас не должно возникнуть вопросов «А что поставить на фон?», потому как здесь 8 сервисов (а еще и бонусный), с помощью которых можно создать свою уникальную текстуру для сайта.
Успехов!
С Уважением, Юрий Немец
30 крутых и бесплатных паттернов от популярных дизайнеров
Друзья, предлагаю сегодня Вашему вниманию бесплатные паттерны и бесшовные фоны от самых талантливых дизайнеров мира. На эти паттерны действительно стоит обратить внимание, так как некоторые из них очень сильно удивляют своей идеей и исполнением.
На заметку хочу сказать, что ссылка на скачивание находится вверху слева 🙂 Наслаждайтесь.
И конечно же рекомендую:
Красивый паттерн на сайт с чёрными рисунками
Скачать
Красивый бесшовный фон с иллюстрациями
Скачать
Замечательный паттерн в стиле Полигон
Скачать
Паттерн из треугольников
Скачать
Бесшовный фон с флагами
Скачать
Паттерн с серыми велосипедами
Скачать
Оранжевый фон для сайта
Скачать
Дизайнерский бесшовный фон
Скачать
Крутой тёмный паттерн с большими буквами
Скачать
Бесшовный фон для съедобных сайтов 🙂
Скачать
Современный и пиксельный паттерн
Скачать
Паттерн для тёмных сайтов
Скачать
Стильный фон с цветками
Скачать
Крутой и геометрический паттерн
Скачать
Потертый бесшовный фон
Скачать
Необыкновенный и очень красивый зелёный паттерн для сайта
Скачать
Ещё один вкусный бесшовный фон
Скачать
Красный паттерн
Скачать
Паттерн с хот догами
Скачать
Паттерн с бетонными домами
Скачать
Апельсиновый бесшовный фон
Скачать
Фон с большими пикселями
Скачать
Паттерн с кошками
Скачать
Весёлый бесшовный фон с киви
Скачать
Необычный и разноцветный фон на сайт
Скачать
Чёрно белый паттерн
Скачать
Осенний паттерн
Скачать
Бесшовный фон — nyc-candy
Скачать
Паттерн с волнами
Скачать
Тёмный паттерн в стиле Полигон
Скачать
Множество совершенно бесплатных векторных фонов для Вашего сайта
Приветствую Вас, дорогие читатели блога. В этот день я спешу представить Вам очень полезную и удивительную подборку векторных фонов для Вашего сайта, которые Вы совершенно бесплатно сможете скачать.
Так же данные фоны Вы можете использовать не только для сайта, а например, где угодно. В визитках, брошюрах, разных печатных изданиях и т.д. Другими словами, я думаю, что данная подборка будет очень полезна Вам.
Векторные фоны хороши тем, что их возможности безграничны. Данные фоны Вы сможете отредактировать по своему вкусу, а так же изменить размер, что в свою очередь является немаловажным аспектом.
В общем наслаждайтесь, друзья, и качайте 🙂
Ещё Вам обязательно интересны будут следующие подборки:
Серый векторный фон для сайта
Скачать
Тёмно голубой и абстрактный векторный фон на сайт
Скачать
Красивый и цветной фон на сайт
Скачать
Абстрактный и светлый векторный фон
Скачать
Цветной и закруглённый векторный фон
Скачать
Необычный векторный фон с птицами и клетками
Скачать
Абстрактный и красивый фон на Ваш сайт
Скачать
Фон с голубыми прямоугольниками
Скачать
Красивый флоральный векторный фон
Скачать
Тёмный векторный фон с разнообразными кругами
Скачать
Векторные фоны для Ваших баннеров
Скачать
Классный фон с кривыми разноцветными полосами
Скачать
Несколько красивых и голубых векторных фонов
Скачать
Абстрактный и очень красивый векторный фон
Скачать
Зелёно-голубой векторный фон
Скачать
Классный зимний векторный фон
Скачать
Красивый фон с разноцветными квадратами
Скачать
Красивый векторный фон с красными сердцами
Скачать
Голубой векторный фон с разными линиями
Скачать
Векторный абстрактный тёмно красный фон на сайт
Скачать
Векторный фон ко дню Святого Валентина
Скачать
Очень красивый тёмно голубой фон
Скачать
Приятный зелёный фон для сайта
Скачать
Новогодний векторный фон для сайта с Санта Клаусом
Скачать
Рождественский векторный фон с ёлками
Скачать
Подборка разнообразных абстрактных векторных фонов для сайта Часть 1
Скачать
Подборка разнообразных абстрактных векторных фонов для сайта Часть 2
Скачать
Подборка разнообразных абстрактных векторных фонов для сайта Часть 3
Скачать
Популярность Текстурных Фонов В Веб-Дизайне И Лайфхаки Фототекстур В Photoshop / WAYUP
В веб-дизайне использование текстур в качестве фона – верный шаг к успеху. Текстура представляет собой простой и эффективный способ придать глубину сайту. С помощью одного такого фона можно управлять путешествием пользователя по контенту и такое увидеть можно в интернете гораздо чаще, чем всем нам кажется. Но текстуру, в отличие от обычного фона, сложнее использовать, да и создавать/редактировать тоже.
В прошлом материале мы рассматривали тему фонов в веб-дизайне и некоторые способы того, как создать самый простой текстурированный фон. Фоны могут быть и градиентными, и цветными, видео/фото, а могут иметь и рисунок. Вот о рисунках и поговорим сегодня детальнее и посмотрим, как можно поработать над имеющимися кусочками текстуры таким образом, чтобы преобразовать их в более качественный, современный и технологический вид. Особенно, если появилось желание самостоятельно создать уникальный фон для своего сайта с использованием смартфона. Не без помощи 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 же способен помочь в преобразовании качества изображений и совершенно неважно какая у вас версия. Все инструменты доступны во всех версиях, поэтому сложностей возникать не должно.
Но это еще не последний материал про текстуры для веб-дизайна. Есть и еще более детальные вопросы, связанные с их использованием. Важные и зачастую такие необычные, что дизайнеры либо о них забывают, либо не обращают внимания.