Конечный результат Что мы будем создавать
Предыдущие уроки
- Создаем Фоновые Узоры (Часть 1: Основы Узора)
- Создаем Фоновые Узоры (Часть 2: Узоры с Шумом)
- Создаем Фоновые Узоры (Часть 3: Углеродное Волокно)
- Создаем Фоновые Узоры (Часть 4: Синтетическое Волокно)
Сегодняшние узоры
Сегодня третий урок из цикла — но стоит заметить, что все эти уроки не зависимы друг от друга, то есть прямо сейчас вы сможете приступить к третьему, пропустив при этом первые два.
В этом уроке мы научимся делать текстуру с углеродным волокном всего лишь в 4 этапа:
- Шаг 1: Базовая Текстура С Углеродным Волокном
- Шаг 2: Модифицируем Базовую Текстуру С Углеродным Волокном
- Шаг 3: Диагональное Углеродное Волокно
- Шаг 4: Продвинутое Диагональное волокно
Готовы? Так давайте же приступим!
Шаг 1
Текстуру с углеродным волокном очень легко сделать. В интернете можно найти кучу разных уроков по созданию этой текстуры, поэтому ничего особо нового вы здесь не найдете. Самое важное на первом шаге понять базовые принципы работы, которые в будущем мы будем применять. Вот основные приемы:
- Работайте с документами маленького размера.
- Используйте темные градиенты, чтобы создать убедительный и мягкий источник света.
- Не будьте слишком изощренными.
Создайте новый документ 4х4 пикселя:
Теперь сделайте выделение с помощью Rectangular Marquee Tool 
размером 2х4 пикселя (как на картинке ниже) и создайте из этого новый слой (Ctrl+J).
На новом слое добавим простой градиент в панели Стили Слоя (двойной клик на слой или правый клик и выбрать Стили Слоя). Градиент будет идти снизу вверх, от черного (#000000) к темно-серому (#4f4f4f).
На выделении 2х4 пикселя добавьте градиент, идущий снизу вверх, от черного (#000000) к темно-серому (#4f4f4f).
Этот градиент будет основной углеродного волокна… поэтому вы всегда сможете вернуться к этому шагу, чтобы поменять исходный результат.
Сейчас сделайте выделение 1х4 пикселя слоя с градиентом и создайте новый (Правый клик > Layer via Cut).
Поставьте прозрачность второго слоя на 92%.
Зачем? Чтобы в конечном результате, при применении узора, казалось, что этот узор имеет глубину.
Поставьте прозрачность слоя 92%.
Соедините слои в один (Ctrl+E).
Сделайте выделение 2х2 пикселя сверху слоя.
Сделайте выделение 2х2 пикселя сверху и создайте из этого новый слой.
Проделайте то же самое с нижним квадратом 2х2.
Переместите квадратики сниху вверх и наоборот.
Переместите каждый квадрат в противоположный угол.
Наш узор готов! Сохраните его в библиотеке: Edit > Define Pattern. Назовите его по вашему усмотрению и чтобы использовать его, идите сюда: Layer Styles > Pattern Overlay.
Выберите «Define Patter» из меню «Edit» в верхей панели.
Теперь вы можете применить узор в панели Стили Слоя в «Pattern Overlay».
Вот и все! Мы закончили первый узор… давайте приступим к следующему шагу, где мы немного подкорректируем идею.
Шаг 2: Модифицируем Базовую Текстуру С Углеродным Волокном
Этой текстурой давольно-таки легко манипулировать. Сейчас мы будем использовать те же самые приемы, чтобы создать более крупную текстуру.
Заметка: Я намеренно буду пропускать некоторые скриншоты, которые уже присутствовали в предыдущем шаге. Здесь я буду выделять только новые приемы.
На этот раз создайте документ размером 8х8 пикселей.
В первом узоре мы создали градиент на всю левую сторону документа. Это сработало, потому что он был всего лишь 4х4 пикселя, и мы не могли справиться с другими деталями.
Однако, на этот раз мы будем более тщательно работать с нашей формой. Итак, добавьте квадрат 4х4 пикселя:
Добавьте еще один квадрат 4х4 вниз документа (я расскрасил квадраты, чтобы вы могли лучше их видеть):
Теперь нужно добавите градиент к нижнему квадрату. Помните, что левая нижняя часть темная, почти черная, поэтому мы использовали темный градиент:
Добавьте градиент (от черного к #333333) к нижнему квадрату. Немного подкорректируйте угол наклона.
Примените градиент и к другому квадрату, но на этот раз это будет светлый градиент:
Проделайте то же самое с верхним квадратом, но градиент будет светлым: #434343 -> #737373
Скопируйте оба квадрата и переместите копии в противоположные углы.
Теперь у нас есть базовый узор с углеродным волокном, но давайте подкорректируем его, добавляя корректирующий слой уровней (Levels Adjustment layer). Сделать это можно в меню (Layer > New Adjustment Layer > Levels).
Добавьте Levels Adjustment layer поверх всех слоев, чтобы изменить контраст узора перед тем, как сохранить его.
Этот корректирующий слой позволит нам поиграть с яркостью и контрастом узора. Когда все готово, идите сюда: Edit > Define Pattern. Это определит ваш документ как узор. Вот как будет выглядить конечный результат:
Заметка: Когда вы определяете документ как узор, убедитесь, что вы не выбрали корректирующий слой. По каким-то причинам Photoshop не позволит вам сделать это.
Теперь у нас получился второй узор с углеродным волокном! Вы можете использовать те же приемы, чтобы создавать различные узоры. Пробуйте разные размеры, цвета, контраст градиентов и все остальное, что позволит создать уникальныe эффекты.
Шаг 3: Диагональное Углеродное Волокно
Сейчас мы научимся делать диагональное углеродное волокно, используя те же самые приемы, что и раньше.
Начните с документа 30х30 пикселей. Как только вы закончите, сможете повторить процесс, используя другой размер.
Мы будем работать с секциями в 5 пикселей. Создайте прямоугольник 5 пикселей в высоту и 15 в длину.
Добавьте к этой форме градиент.
Добавьте градиент к этой форме. Заметьте, что мы изменили угол наклона. #434343 -> #6a6a6a
Теперь добавьте квадрат 5х5 пикселей цвета #191919 рядом с прямоугольником.
Совет: Используйте Convert Point Tool 
, чтобы изменить размер фигур.
Добавьте квадрат 5х5 пикселей рядом с прямоугольником. Мы вязли темный цвет — #191919.
Таким образом, мы создали основной узор, который мы повторим несколько раз, поэтому конвертируйте эти две фигуры в Smart Object.
Выберите два слоя, правый клик, чтобы открыть контекстное меню и нажмите на «Convert to Smart Object».
Заметка: Вы всегда сможете вернуться и подкорректировать Smart Object, нажав на правую кнопку мыши и выбрав «Edit Contents». Это исправит каждый этап Smart Object, что делает редактирование быстрым и легким.
Теперь мы должны скопировать Smart Object и передвинуть его на 5 пикселей вниз и на 5 пикселей влево.
Скопируйте Smart Object (Ctrl+ О) и передвиньте его на 5 пикселей вниз и на 5 пикселей влево.
Повторите этот процесс (Копирование и Перемещение) снова и снова, пока квадраты не заполнят весь документ. Если вы запутались, смотрите на скриншот, однако должно присутствовать расстояние в 5 пикселей между главными частями.
Повторите этот этап снова и снова… Каждый отсек занимает пространство в 5х5 пикселей.
Сейчас давайте добавим фоновый слой. Я использовал обычный прямоугольник цвета #1e1e1e:
Добавьте новый фоновый слой (простой прямоугольник подойдет), цвет — #1e1e1e — или что-нибудь такое же темное.
И наконец, чтобы быть спокойнее, добавьте корректирующий уровни слой. Это для того, чтобы мы могли поэспериментировать со светом и контрастом.
Добавьте корректирующий уровни слой, чтобы поиграть с контрастом.
Вот мы и закончили! Теперь вы можете определить документ как узор и использовать его в будущем дизайне:
Шаг 4: Переходим На Новый Уровень: Продвинутое Диагональное волокно
Для этого последнего этапа мы снова будем использовать основные принципы, но кроме того мы повернем все детали на 45 градусов, чтобы создать новый уникальный эффект углеродного волокна.
Этот узор очень легко сделать всем: не только профессионалам, но и новичкам. Так что если вы прошли предыдущие этапы, то этот будет для вас раз плюнуть.
Начните с документа 8х8 пикселей и добавьте черный цвет на фон. Мы можете использовать любой темный цвет, но главное, чтобы он был одинаков с цветом в следующем этапе.
Добавьте прямоугольник размера 4х8 пикселей.
Сейчас для вас все должно быть знакомо: добавьте градиент — последний цвет должен совпадать с фоновым цветом (я взял от #555555 до #000000). Заметьте, что я поставил угол наклона 135 градусов (либо 45, зависит от того, что вы хотите).
Мы опять добавляем градиент. Убедитесь, что последний цвет совпадает с фоновым и поставьте угол наклона 135 градусов.
Поверните слой с градиентом на 45 градусов (удерживайте Shift для точности поворота) так, чтобы он полностью остался внутри документа.
Бинго! Мы закончили наш последний узор. Мы можете поменять размер документа и цвета градиента, чтобы создать уникальный эффект.
…а вот и сам узор:
