Конечный результат Что мы будем создавать
Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Предыдущие уроки

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Сегодняшние узоры
Сегодня третий урок из цикла — но стоит заметить, что все эти уроки не зависимы друг от друга, то есть прямо сейчас вы сможете приступить к третьему, пропустив при этом первые два.
В этом уроке мы научимся делать текстуру с углеродным волокном всего лишь в 4 этапа:

  • Шаг 1: Базовая Текстура С Углеродным Волокном
  • Шаг 2: Модифицируем Базовую Текстуру С Углеродным Волокном
  • Шаг 3: Диагональное Углеродное Волокно
  • Шаг 4: Продвинутое Диагональное волокно

Готовы? Так давайте же приступим!

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

  • Работайте с документами маленького размера.
  • Используйте темные градиенты, чтобы создать убедительный и мягкий источник света.
  • Не будьте слишком изощренными.

Создайте новый документ 4х4 пикселя:

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Теперь сделайте выделение с помощью Rectangular Marquee Tool rectangular_marquee.gif размером 2х4 пикселя (как на картинке ниже) и создайте из этого новый слой (Ctrl+J).

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

На новом слое добавим простой градиент в панели Стили Слоя (двойной клик на слой или правый клик и выбрать Стили Слоя). Градиент будет идти снизу вверх, от черного (#000000) к темно-серому (#4f4f4f).

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
На выделении 2х4 пикселя добавьте градиент, идущий снизу вверх, от черного (#000000) к темно-серому (#4f4f4f).

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Этот градиент будет основной углеродного волокна… поэтому вы всегда сможете вернуться к этому шагу, чтобы поменять исходный результат.
Сейчас сделайте выделение 1х4 пикселя слоя с градиентом и создайте новый (Правый клик > Layer via Cut).

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Поставьте прозрачность второго слоя на 92%.
Зачем? Чтобы в конечном результате, при применении узора, казалось, что этот узор имеет глубину.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Поставьте прозрачность слоя 92%.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Соедините слои в один (Ctrl+E).

Сделайте выделение 2х2 пикселя сверху слоя.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Сделайте выделение 2х2 пикселя сверху и создайте из этого новый слой.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Проделайте то же самое с нижним квадратом 2х2.

Переместите квадратики сниху вверх и наоборот.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Переместите каждый квадрат в противоположный угол.

Наш узор готов! Сохраните его в библиотеке: Edit > Define Pattern. Назовите его по вашему усмотрению и чтобы использовать его, идите сюда: Layer Styles > Pattern Overlay.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Выберите «Define Patter» из меню «Edit» в верхей панели.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Теперь вы можете применить узор в панели Стили Слоя в «Pattern Overlay».

Вот и все! Мы закончили первый узор… давайте приступим к следующему шагу, где мы немного подкорректируем идею.

Шаг 2: Модифицируем Базовую Текстуру С Углеродным Волокном
Этой текстурой давольно-таки легко манипулировать. Сейчас мы будем использовать те же самые приемы, чтобы создать более крупную текстуру.
Заметка: Я намеренно буду пропускать некоторые скриншоты, которые уже присутствовали в предыдущем шаге. Здесь я буду выделять только новые приемы.
На этот раз создайте документ размером 8х8 пикселей.
В первом узоре мы создали градиент на всю левую сторону документа. Это сработало, потому что он был всего лишь 4х4 пикселя, и мы не могли справиться с другими деталями.
Однако, на этот раз мы будем более тщательно работать с нашей формой. Итак, добавьте квадрат 4х4 пикселя:

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Добавьте еще один квадрат 4х4 вниз документа (я расскрасил квадраты, чтобы вы могли лучше их видеть):

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

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

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Добавьте градиент (от черного к #333333) к нижнему квадрату. Немного подкорректируйте угол наклона.

Примените градиент и к другому квадрату, но на этот раз это будет светлый градиент:

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Проделайте то же самое с верхним квадратом, но градиент будет светлым: #434343 -> #737373

Скопируйте оба квадрата и переместите копии в противоположные углы.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Теперь у нас есть базовый узор с углеродным волокном, но давайте подкорректируем его, добавляя корректирующий слой уровней (Levels Adjustment layer). Сделать это можно в меню (Layer > New Adjustment Layer > Levels).

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Добавьте Levels Adjustment layer поверх всех слоев, чтобы изменить контраст узора перед тем, как сохранить его.

Этот корректирующий слой позволит нам поиграть с яркостью и контрастом узора. Когда все готово, идите сюда: Edit > Define Pattern. Это определит ваш документ как узор. Вот как будет выглядить конечный результат:

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Заметка: Когда вы определяете документ как узор, убедитесь, что вы не выбрали корректирующий слой. По каким-то причинам Photoshop не позволит вам сделать это.

Теперь у нас получился второй узор с углеродным волокном! Вы можете использовать те же приемы, чтобы создавать различные узоры. Пробуйте разные размеры, цвета, контраст градиентов и все остальное, что позволит создать уникальныe эффекты.

Шаг 3: Диагональное Углеродное Волокно
Сейчас мы научимся делать диагональное углеродное волокно, используя те же самые приемы, что и раньше.
Начните с документа 30х30 пикселей. Как только вы закончите, сможете повторить процесс, используя другой размер.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Мы будем работать с секциями в 5 пикселей. Создайте прямоугольник 5 пикселей в высоту и 15 в длину.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Добавьте к этой форме градиент.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Добавьте градиент к этой форме. Заметьте, что мы изменили угол наклона. #434343 -> #6a6a6a

Теперь добавьте квадрат 5х5 пикселей цвета #191919 рядом с прямоугольником.
Совет: Используйте Convert Point Tool convert_point.gif, чтобы изменить размер фигур.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Добавьте квадрат 5х5 пикселей рядом с прямоугольником. Мы вязли темный цвет — #191919.

Таким образом, мы создали основной узор, который мы повторим несколько раз, поэтому конвертируйте эти две фигуры в Smart Object.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Выберите два слоя, правый клик, чтобы открыть контекстное меню и нажмите на «Convert to Smart Object».

Заметка: Вы всегда сможете вернуться и подкорректировать Smart Object, нажав на правую кнопку мыши и выбрав «Edit Contents». Это исправит каждый этап Smart Object, что делает редактирование быстрым и легким.
Теперь мы должны скопировать Smart Object и передвинуть его на 5 пикселей вниз и на 5 пикселей влево.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Скопируйте Smart Object (Ctrl+ О) и передвиньте его на 5 пикселей вниз и на 5 пикселей влево.

Повторите этот процесс (Копирование и Перемещение) снова и снова, пока квадраты не заполнят весь документ. Если вы запутались, смотрите на скриншот, однако должно присутствовать расстояние в 5 пикселей между главными частями.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Повторите этот этап снова и снова… Каждый отсек занимает пространство в 5х5 пикселей.

Сейчас давайте добавим фоновый слой. Я использовал обычный прямоугольник цвета #1e1e1e:

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Добавьте новый фоновый слой (простой прямоугольник подойдет), цвет — #1e1e1e — или что-нибудь такое же темное.

И наконец, чтобы быть спокойнее, добавьте корректирующий уровни слой. Это для того, чтобы мы могли поэспериментировать со светом и контрастом.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Добавьте корректирующий уровни слой, чтобы поиграть с контрастом.

Вот мы и закончили! Теперь вы можете определить документ как узор и использовать его в будущем дизайне:

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Шаг 4: Переходим На Новый Уровень: Продвинутое Диагональное волокно
Для этого последнего этапа мы снова будем использовать основные принципы, но кроме того мы повернем все детали на 45 градусов, чтобы создать новый уникальный эффект углеродного волокна.
Этот узор очень легко сделать всем: не только профессионалам, но и новичкам. Так что если вы прошли предыдущие этапы, то этот будет для вас раз плюнуть.
Начните с документа 8х8 пикселей и добавьте черный цвет на фон. Мы можете использовать любой темный цвет, но главное, чтобы он был одинаков с цветом в следующем этапе.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Добавьте прямоугольник размера 4х8 пикселей.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

Сейчас для вас все должно быть знакомо: добавьте градиент — последний цвет должен совпадать с фоновым цветом (я взял от #555555 до #000000). Заметьте, что я поставил угол наклона 135 градусов (либо 45, зависит от того, что вы хотите).

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Мы опять добавляем градиент. Убедитесь, что последний цвет совпадает с фоновым и поставьте угол наклона 135 градусов.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *
Поверните слой с градиентом на 45 градусов (удерживайте Shift для точности поворота) так, чтобы он полностью остался внутри документа.

Бинго! Мы закончили наш последний узор. Мы можете поменять размер документа и цвета градиента, чтобы создать уникальный эффект.

Создаем фоновые узоры(Часть 3: Углеродное волокно) *

…а вот и сам узор:

Создаем фоновые узоры(Часть 3: Углеродное волокно) *