И инструкция по их применению в Photoshop
Текстуры — часть реального мира и опыта человека. Каждая передает что-то свое — прохладу мрамора, тепло дерева, мягкость шерсти. Даже на экране они способны вызвать эмоцию и ассоциироваться с уютом, чистотой, роскошью или простотой.
Поэтому текстуры уместны в любом проекте — от плаката и лендинга до сложной сцены в 3D или интерьера. Они добавляют изображению глубину и осязаемость, превращая плоский цвет в материал, который хочется «потрогать» глазами.
Собрали подборку бесплатных ресурсов и показали, как применять текстуры в виде картинок на коллаже в Photoshop.
| Окружающий мир — для создания реалистичного и детализированного графического проекта | Freepik |
| Отделочные материалы — для архитектурных, интерьерных проектов и 3D-визуала | Architextures |
| Текстуры для Figma — легко изменять внутри сервиса и экспортировать в векторном формате | Texture examples |
| Цифровые текстуры — для ретро-проектов и трендового дизайна | Textures4Photoshop |
Сайт: freepik.com/free-photos-vectors/texture
Как скачать. Навести на изображение и кликнуть на значок со стрелкой вниз в правом верхнем углу картинки.
Формат файлов. PSD, JPEG.
Что можно найти. Абстрактные фоны с мягким градиентом, шумом и цветными точками, полосками. Крашеную стену, мятую фольгу, ткань, целлофановый пакет.
В чем фишка. На этом фотостоке есть разделы с файлами в формате PSD — такую текстуру без фона можно сразу наложить поверх любого изображения. Некоторые файлы можно скачать как мокапы и сразу в них добавить свою картинку.
Сайт: resourceboy.com/textures
Как скачать. Кликнуть на нужный набор и нажать красную кнопку справа.
Формат файлов. JPG, PNG.
Что можно найти. На этом сайте 50+ наборов, в каждом из которых десятки и сотни текстур — картон, джинсы, подтеки краски, следы губ и ступней, гранит, золото, паутина, облака. Внутри исходники с разными оттенками, ракурсом съемки и другими деталями материалов.
В чем фишка. Почти все наборы дизайнер выпустил в высоком качестве 4К и 8К. Некоторые текстуры, например снег и скотч, продублированы в формате кистей для Photoshop — их можно скачать на этом же сайте в разделе Brushes.
Сайт: architextures.org
Как скачать. Кликнуть на изображение и затем кнопку «Download» в левой части экрана.
Формат файлов. JPEG.
Что можно найти. Текстуры для архитекторов и дизайнеров интерьера — фактуры и цвета стен, потолка и пола. Например, дерево, акрил, мрамор. Многие изображения бесшовные.
В чем фишка. Изображения на сайте можно не только скачать, но и отредактировать — изменить масштаб, наложить поверх паттерн плитки, кирпичной стены, паркета. Возможно, они пригодятся для отрисовки игровых локаций или для дизайна интерьера.
Сайт: unsplash.com/s/photos/textures
Как скачать. Навести на фото и нажать стрелку вниз в правом нижнем углу.
Формат файлов. JPEG.
Что можно найти. На популярном фотостоке 78 000 снимков с текстурами и 1500 детализированных иллюстраций. Здесь можно скачать мятую фольгу и бумагу, окрашенную стену, спил и кору дерева, разводы на воде, стекло, акварельные и шумованные паттерны.
В чем фишка. Все изображения на Unsplash публикуются с открытой лицензией на коммерческое использование. Многие можно скачать в высоком качестве — 6000 пикселей по одной из сторон.
Сайт: txtrs.ru
Как скачать. Выбрать раздел, кликнуть на картинку правой кнопкой мыши и нажать «Сохранить как».
Формат файлов. JPEG.
Что можно найти. Бесшовные текстуры многих архитектурных и отделочных материалов, которые встречаются в реальной жизни — дорога, галька, ЛДСП, песок, ротанг, щебень.
В чем фишка. Сайт публикует текстуры, которые подходят для работы с 3Ds Max, Blender и Cinema 4D. Поэтому помимо основной картинки можно скачать дополнительные карты — и получить объем при наложении.
Сайт: figma.com/community/shapes-colors/texture
Как скачать. Выбрать подборку, кликнуть по ней и нажать Open in Figma. Затем указать нужный проект в сервисе и экспортировать его, если планируете работать в Photoshop.
Формат файлов. JPEG, PNG, SVG.
Что можно найти. Абстрактные векторные текстуры, градиенты, линии, пластик, стекло, бумага, скотч.
В чем фишка. Все текстуры работают не только для Photoshop, но и сразу внутри Figma — можно комбинировать их с базовыми инструментами, например заливкой или шумом. А также сразу интегрировать в свои проекты — прототипы сайтов, векторные иллюстрации.
Сайт: figma.com/community/file/1261896381010987953
Как скачать. Кликнуть на синюю кнопку Open in Figma. Для работы в Photoshop — выбрать понравившиеся текстуры и нажать кнопку экспорта.
Формат файлов. JPEG, PNG, SVG.
Что можно найти. 50 шумованных меш-градиентов с плавным переходом цветов и абстрактные фигуры.
В чем фишка. Отдельная коллекция, каждый элемент которой собран внутри Figma — можно управлять оттенком и положением градиента, изменить толщину и заливку линии.
Сайт: textures4photoshop.com
Как скачать. Кликнуть на картинку, нажать зеленую кнопку в правом верхнем углу, пройти капчу и еще раз нажать зеленую кнопку — уже слева.
Формат файлов. JPEG.
Что можно найти. Текстуры под разворот комикса, гранж, мозаика, узорные и фактурные обои на стене, пиксельный Minecraft. Есть даже имитация кратеров на Марсе.
В чем фишка. На сайте всего 5 страниц, но здесь собраны текстуры для проектов в стиле ретро — с кричащими оттенками цвета и искусственными тенями от объектов.
Работать с текстурами можно в разных направлениях. В интерьере они помогают подчеркнуть материал мебели и стен, в графическом дизайне — передать настроение и акценты, а в веб-дизайне или 3D-моделировании — создать реалистичную сцену.
Для обложек статей в блоге Awwwake дизайнер создает коллаж из разных элементов — реалистичных, пиксельных, веб- и добавляет текстуры. Например, рваную бумагу, градиенты, шум, неон. Это одновременно связывает все детали и создает глубину — такой коллаж хочется разглядывать и искать отсылки к тексту статьи.
Конечно, правила всегда можно нарушать. Например, Т—Ж использует для обложки статьи объемные фигуры и текстуры, чтобы показать опыт перепланировки — это отсылка к интерьерному дизайну, смесь уюта и технологичности.
Попробуем собрать простой коллаж с текстурами в Photoshop — заодно разберемся с масками, прозрачностью, фильтрами и режимами наложения. За основу возьмем слово «Рассинхрон».
Начнем с заливки одинаковых букв — в слове «рассинхрон» это «с» и «н». Загружаем текстуру глитча на картинку и поставим непрозрачность слоя 50% — чтобы выбрать расположение для будущей маски.
С помощью инструмента «Прямоугольная область» выделяем букву, затем зажимаем Shift и выделим еще одну — вокруг них появится контур. После чего кликаем по значку «Маска» (прямоугольник с кружком внутри) или выбираем ее на панели слоев.
На этом этапе у нас получились два прямоугольника поверх букв «н» — это обычные маски. Теперь перейдем в слои и проверим, что прямоугольники стоят поверх текстового слоя. Затем кликнем правой кнопкой мыши на наш глитч и выберем «Создать обтравочную маску». Вернем непрозрачность на 100%.
Буквы «н» заполнились глитчем — он как бы просвечивает через них. Затем проделаем те же действия с другой текстурой — применим на обе буквы «с». На панели слоев вместо «обычные» можно задать режим наложения — тогда текстура будет проявляться ярче или наоборот, бледнее.
Сейчас картинка никак не управляет вниманием — взгляд цепляется за глитч и остается на слове. А эффект глубины рождается из сочетания нескольких текстур — именно так мы видим обычные, многомерные предметы в реальной жизни.
Попробуем добавить акцент — текстуру стекла поверх правой части картинки. Для этого загрузим подходящее изображение, выставим непрозрачность около 50% и расположим так, чтобы стекло закрыло часть букв.
Так как текстура — это обычное изображение, а не готовый мокап, размытие букв под ней нужно создать вручную. Для этого текстовый слой и две маски с глитчем нужно объединить в группы, затем создать ее дубликат.
Кликнем по миниатюре слоя со стеклом правой кнопкой мыши и выберем «Выделить пикселы». Теперь мы можем создать маску из всего, что находится внутри ее контура — в нашем случае буквы «хрон».
Пока выделение активно, кликнем по одной из групп и нажмем на значок маски. Теперь к этой группе относятся те части слова «рассинхрон», которые стоят под стеклом. На панели слоев эта область выделена белым цветом, а остальная часть картинки — черным.
Снова проделаем эту же последовательность и, когда выделение будет активно, нажмем на значок «Инвертировать выделенную область». Дальше также применим маску. Это важное действие, так как если его пропустить, под размытием останется четкий контур слова.
Группу, которая находится под слоем со стеклом, нужно преобразовать в смарт-объект — для этого кликнем по ней правой кнопкой мыши и применим это действие. Тогда мы сможем сохранить редактируемость слоев, но при этом наложим фильтр с размытием.
Теперь контур слоя проходит по буквам. На последнем этапе перейдем в меню «Фильтры» и выберем «Размытие по рамке». Затем зададим радиус около 20 — этого достаточно, чтобы буквы выглядели нечеткими из-за стекла, но были все еще читабельны.
Ещё несколько полезных статей о дизайне — в «Конверте»:
Как работает цветовое кодирование
Как сделать вайрфрейм сайта или приложения
Стилизация в дизайне: как упростить форму и не потерять идею
Как работать с фигурами в Figma
10 лучших курсов графического дизайна
Читайте только в Конверте
У нас ЧП! Email-рассылки почти бесплатно!
Главное, не забудьте активировать промокод BF25K при покупке тарифа (первый месяц «Лайт» или «Стандарт»).
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно)
