Конечный Результат Что мы будем создавать
Предыдущие уроки
- Создаем Фоновые Узоры (Часть 1: Основы Узора)
- Создаем Фоновые Узоры (Часть 2: Узоры с Шумом)
- Создаем Фоновые Узоры (Часть 3: Углеродное Волокно)
- Создаем Фоновые Узоры (Часть 4: Синтетическое Волокно)
Детали Туториала:
- Программа: Adobe Photoshop
- Версия: CS5+
- Время выполнения: 45 минут
Вступление
Всем привет! Сегодня мы продолжаем цикл уроков по созданию фоновых узоров, которые множено использовать для веб-дизайна. Мы рассмотри как сделать правдоподобные узоры, а затем, испольщкя те же принципы, создадим более сложные версии.
Наша цель проста: Научить каждого создавать узоры для веб-дизайна. Все советы, которые будут в этом уроке, можно применять как в Photoshop, так и в Fireworks.
Сегодняшние Узоры
Сегодня четвертый день нашего цикла, но стоит заметить, что все уроки не зависимы друг от друга, то есть вы можете сразу приступить к Части 4, даже пропустив предыдущие.
Узор, который мы будем сегодня рассматривать, – это синтетическое фабричное волокно. Наш урок пройдет в четыре шага:
- Шаг 01: Основная Текстура Волокна
- Шаг 02: Основная Текстура Холста
- Шаг 03: Джинсовая Текстура Среднего Уровня
- Шаг 04: Продвинутая Джинсовая Текстура В Полоску
Давайте же приступим!
Шаг 01: Основная Текстура Волокна
Эту вступительную текстуру очень легко сделать, но она может быть использована в профессиональном дизайне, если ее правильно применить.
Кстати посмотрите на текстуру в футере темы ‘qop‘ на WordPress:
Не так уж и плохо, правда? Мы начнем с черного квадрата. Поставьте размер документа 400 x 400, но это только на сейчас. Вы сможете изменить размер потом, но не следует делать документ слишком маленьким, потому что нам потребуется немного пространства для работы с краями.
Создайте новый слой и заполните его Черным цветом.
Назовите слой «Black Layer».
Теперь мы должны применить «быстрый» фильтр. Идите в Filters > Sketch > Water Paper.
Вы можете установить настройки по вашему желанию, но я поставил следующие:
- Fiber Length: 15
- Brightness: 42
- Contrast: 43
Поставьте режим смешивания слоя «Black layer» на Screen, чтобы были видны только белые линии. На данный момент вы можете добавить прямоугольник любого цвета как фон вагей текстуры. Вы сможете изменить цвет в любое время в течение всего процесса.
Сейчас мы видим ничего кроме белого цвета… поэтому давайте добавим цветной прямоугольник и назовем его «Background Color». Я использовал цвет #242d34, но вы можете а ничего любой по вашему вкусу.
Вот так гораздо лучше! Теперь мы можем видеть нашу текстуру. Она немного плоская, поэтому давайте сделаем ее немного более глубокой. Создайте новый слой и заполните его черным цветом. Назовите его “White” (вы узнаете, почему мы так назвали слой, через несколько мгновений).
Теперь мы опять добавим эффект Filters > Sketch > Water Paper, но на этот раз мы добавим еще больше Яркости и Контраста (Brightness and Contrast):
- Fiber Length: 15
- Brightness: 63
- Contrast: 66
Теперь просто инвертируйте цвета слоя (Image > Adjustments > Invert) и поставьте режим смешивания Multiply. Уменьшите прозрачность слоя до 90%, чтобы улучшить эффект.
А теперь нужно обрезать края узора. Обрежьте где-то 50 пикселей от края, используя инструмент Crop.
Зачем мы обрезали края? Это поможет избавиться от видимых стыков при использовании текстуры в будущем.
И наконец поменяйте фоновый цвет на любой, какой хотите и идите в (Edit > Define Pattern). Вот и все!
Конечный результат будем выгладить вот так:
Шаг 02: Основная Текстура Холста
Эта текстура, на мой взгляд, самая простая из всех четырех. Тут всего три простых шага:
Во-первых, создайте новый документ (400 x 400) и нарисуйте синий прямоугольник. Мы будем использовать этот слой для изменения цвета конечной текстуры.
Теперь создайте новый слой, заполните его черным цветом и добавьте фильтр: Filter > Texture > Texturizer. Используйте следующие настройки:
- Texture: Canvas
- Scaling: 50%
- Relief: 3
- Light: Top Left
Поставьте режим смешивания Screen.
Создайте еще один слой и заполните его белым цветом. Примените тот же фильтр: Filter > Texture > Texturizer. Используйте следующие настройки:
- Texture: Canvas
- Scaling: 50%
- Relief: 3
- Light: Top Left
Поставьте режим смешивания слоя Color Burn, чтобы вы могли видеть фоновый цвет.
Наконец, поменяем цвет фона на что-нибудь более нежное.
Вот и конечный результат:
Вы можете создать узор здесь:(Edit > Define Pattern), а кроме того поэкспериментировать с фоновым цветом, прозрачностью слоев и обрезкой до тех пор, пока вам не понравится результат.
Шаг 03: Джинсовая Текстура Среднего Уровня
Начните с нового документа (400 x 400) и нарисуйте синий прямоугольник (#2b4891). Вы можете выбрать любой цвет, но так как у нас джинсовая текстура, то мы выбираем именно этот цвет.
Далее создайте новый слой и заполните его серым цветом (используйте шорткат Shift + Backspace/Delete). Назовите слой «Horizontal Layer».
Поставьте цвета переднего и заднего плана по умолчанию (нажмите D). Нужно сделать основу для джинсовой текстуры. На сером слое примените фильтр: Filter > Sketch > Halftone Pattern.
Используйте следующие настройки:
- Size: 1
- Contrast: 0
- Pattern Type: Line
Это сделайте базовый узор с линиями… но обычно деним «рыхлый», поэтому мы применим еще один фильтр: Filter > Pixelate > Mezzotint. Выберите тип Fine Dots.
Продублируйте слой, нажав (Ctrl/Cmd + J) и назовите его “Vertical Layer”.
Используйте Free Transform Tool (Ctrl/Cmd + T), чтобы развернуть объект на 45 градусов И измените его размер так, чтобы он заходил за углы документа. Я увеличил его до 145%.
Добавьте немного размытия (Filter > Gaussian Blur поставьте 0.3) на оба слоя: этот и предыдущий.
Поставьте режим смешивания диагонального слоя Multiple с прозрачностью 70% — и поставьте режим смешивания слоя с горизонтальными полосками Soft Light с прозрачностью 60%.
Вот и все! Вы можете изменить фоновый цвет и назначить документ узором (Edit > Define Pattern).
Заметка: если вы увидите какие-то стыки на вашем узоре, значит нужно что-то вырезать.
Если вы помните наш первый урок, то знаете, что основная идея заключалась в том, чтобы пиксели правого нижнего угла соединялись с пикселями левого верхнего.
Шаг 04: Продвинутая Джинсовая Текстура В Полоску
Мы подошли к нашей последней текстуре дня. На данный момент мы рассмотрели несколько хороших приемов, и этот последний шаг будет казаться довольно-таки простым.
Создайте документ 200 x 240. Перетащите три слоя с предыдущего шага в новый только что созданный документ (два слоя texture + the background color).
Сгруппируйте слои (Ctrl + G) и поставьте маску слоя в 50px. Если вы не создавали одобные маски раньше, то это не сложно: используйте Rectangular Marquee выделение, чтобы нарисовать выделение в 50 пикселей, чтобы оно покрывало весь документ, сверху донизу (посмотрите на панель Info, чтобы проверить размеры). Теперь просто нажмите кнопку “Add Vector Mask” внизу панели слоев:
Почему 50 пикселей? Потому что размер документа – 200 пикселей, а мы будем использовать 4 полосы по 50 пикселей.
Продублируйте группу и переместите ее вправо от первой группы, а затем (по желанию) переверните ее по вертикали.
Чтобы добавить контраста полоскам, просто поменяйте цвет фона (нежные цвета подходят лучше всего) на что-нибудь более яркое или более темное.
Наконец, скопируйте ОБЕ группы с полосками и переместите их в правую сторону.
Мы еще не совсем закончили – отвяжите маски от слоев и переместите 3 слоя с денимом на 100 пикселей.
Поздравляю! Выберите Edit > Define Pattern и начните использовать узор в своих собственных проектах.
Заключение
Вот и все! Итак, вы должны были усвоить основное понимание создания Искуственных Волокон. Эскпериментируйте с уровнями, цветами, размерами документа и другими параметрами, чтобы создать уникальный эффект.
В следующий раз мы рассмотрим, как создать узор на основе фотографий!
