88889.ru

Отделка плиткой и ремонт
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Текстурирование. Первые шаги в Adobe Photoshop

Текстурирование. Первые шаги в Adobe Photoshop

Здравствуйте, меня зовут Евгений Булатов, я работаю художником в студии Extreme Developers.

Я расскажу вам о том, как просто и качественно делать сходящиеся (т.е. повторяющиеся без швов) текстуры. Зачастую, необходимо, что бы текстура повторялась, образовывая сплошное покрытие, это удобно к тому же сильно экономит память. Особенно интенсивно такие текстуры используются в геймдеве. Там где нужно экономить каждый байт, художники должны отлично владеть методами создания красивых но экономичных текстур.

Сходящиеся текстуры еще называют Тайловыми от английского слова Tile – плитка. Создание текстуры начинается с фотографии. Вы можете сфотографировать поверхность сами, или воспользоваться готовыми коллекциями. Есть замечательный банк фототекстур в высоком разрешении по адресу http://cgtextures.com/ До 15 mb в день бесплатно, плюс, он постоянно обновляется.

Интересно так же фотографировать текстуры самому. Вот несколько рекомендаций. Поверхность должна быть равномерно освещена рассеянным светом. Для этого подойдет пасмурная погода, или тень. Желательно что бы поверхность занимала всю площадь кадра и была под прямым углом к объективу. Переключите баланс белого фотоаппарата на облачно или пасмурно, в зависимости от ваших условий. Ну и конечно тщательно сортируйте фотографии, иначе спустя год вы ничего не найдете в своей коллекции.

Итак, фотография найдена…

Часть I

Ниже, я покажу один из способов создания сходящейся текстуры. Но сначала, сделайте простую вещь. Запустите Photoshop и нажмите Ctrl+K

В окне настроек на вкладке Performans в поле History States поставьте 100. Photoshop будет запоминать последние 100 операций которые вы сможете отменить в палитре истории. Вот теперь можно работать.

Для примера я выбрал фотографию кирпичной стены. Создадим из нее квадратную текстуру в разрешении 512 x 512.

Открываем снимок в Photoshop. И инструментом Crop (Обрезка ) вырезаем нужный участок. При вырезании зажмите Shift что бы наша область была квадратной. Перед отсечением вы можете повернуть рамку, добейтесь того, что бы ряд кирпичей был параллелен одной из сторон рамки. (для поворота переместите курсор за ее границы, он изменится на двойную изогнутую стрелку, теперь можно вращать).

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

Для этого, дважды щелкните по слою Background и в появившемся окне нажмите ОК (вы разблокировали слой). Затем, с помощью свободной трансформации выровняйте ряды кирпичей. Или более гибким инструментом для точной подгонки Edit –

Transform – Warp (Редактирование – Трансформация – Деформация)

При использовании свободной трансформации нажмите Ctrl так вы будете двигать каждый узелок независимо. Отпустите Ctrl и вы будете перемещать всю сторону.

Вот что у вас должно получиться:

(обратите внимание как ряды кирпичей примыкают к нижней и верхней кромкам)

После того, как вы выровняли картинку, вновь обрежьте ее что бы удалить пиксели зашедшие за края. Иначе, при следующем шаге вы рискуете получить странный результат. (при трансформации пиксели могут попасть за границы документа).

Затем воспользуйтесь фильтром Offset.

Filter – Other – Offset (Фильтр – Другие – Смещение)

Этот фильтр сдвигает изображение по горизонтали и вертикали. Сначала, сдвиньте текстуру по вертикали на половину.

(Если у вас текстура 512, смещайте на +256) Можете сдвигать и приблизительно, на глаз. После применения фильтра, вы сразу увидите, как стыкуются ряды кирпичей. Если что то вам не нравится вернитесь назад и вновь подправьте изображение.

Читайте так же:
Гост кирпича глиняного обыкновенного

После того как с вертикальной сходимостью закончено, сдвиньте текстуру влево (фильтром Offset). Здесь придется поработать штампом (инструмент Clone Stamp ). В зависимости от текстуры, я выбираю штамп или лечащую кисть (Healing Brush).

Штамп, как и лечащая кисть, копирует участки изображения с одного места на другое. Что бы указать редактору откуда брать фрагмент нажмите Alt и кликните мышкой. Затем рисуйте штампом там, где вы хотите убрать шов. (отличие лечащей кисти заключается в том что она подбирает яркость на исправленном участке. Пользуйтесь тем или иным инструментом в зависимости от ситуации). Кирпич за кирпичом аккуратно «заклонируйте» шов.

После того как швы убраны, осталось только подогнать текстуру под нужный размер. Примените команду Image – Image Size и поставьте нужное значение высоты и ширины в пикселях (в этом примере 512 х 512). Текстура готова!

Часть II

Но зачастую, после наложения такой текстуры заметно, что она повторяется. Небольшие перепады яркости, какие-то пятна, и мы сразу улавливаем ритм.

Можно проверить, как повторяется текстура, не выходя из редактора. В меню Edit, выберете Define Pattern. Появится окно для добавления текстуры в коллекцию пресетов. Нажмите ОК. Затем создайте новый документ в несколько раз больший чем ваша текстура, например в 5 раз. И нажмите Shist+F5, что равносильно команде заливка

Выберете тип заливки — текстура (паттерн). Выберете ваш паттерн, он будет последним. Нажмите ОК, и вы увидите как ваша текстура повторяясь заполнила изображение.

Если повторения слишком заметны, текстуру можно доработать. Убрать какие-то неоднородные детали, или перепады по яркости. Долгое время я исправлял текстуры вручную, пока не догадался, что перепад по яркости можно выровнять автоматически.

Рядом с фильтром Offset, в Photoshop, есть фильтр High Pass (высокий проход).

Если углубиться в теорию то выясниться, что это фильтр низкой частоты. Что это значит на практике? На практике это означает, что он сглаживает большие по площади колебания яркости, оставляя не тронутыми колебания которые имеют мелкую фактуру.

Поясню с другой стороны. Всем известный фильтр Gaussian Blur (Размытие по Гауссу), можно рассматривать как фильтр высокой частоты. Он сглаживает высокочастотные колебания, оставляя нетронутыми плавные изменения яркости. Таким образом, можно например, избавить фотографию от мелкого, случайного, цифрового шума. Конечно, при этом фотография потеряет в четкости, но большинство контуров останется. Фильтр High Pass действует противоположным образом, оставляя мелкую фактуру, он убирает общие пятна. А это именно то, что нужно для выравнивания текстур!

Вот небольшая иллюстрация действия этих фильтров на изображение:

Посмотрите, как меняется текстура в первом и втором случае. Радиус действия фильтров одинаков, и все становиться очевидно!

После применения фильтра High Pass фактура кирпичей, швы, трещины остались, а большие темные пятна внизу исчезли.

После фильтра Gaussian Blur, исчезли все мелкие детали, и проявились те пятна которые убрал High Pass! Примечательно что если объединить эти два слоя в в режиме Overlay, мы получим исходное изображение.

Из за того, что High Pass действует сразу во всех каналах, цвета искажаются. Но это не страшно. Этим фильтром очень удобно выравнивать яркостную составляющую текстуры, и в большинстве случаев это работает, делая повторения текстуры не такими заметным.

На этом с теорией закончим, на практике все очень просто:

Читайте так же:
Кирпич клиновый 230х114х65х45 тех характеристики

1. Скопируйте слой с текстурой

2. Обесцветьте его

3. Смените режим смешивания этого слоя на Luminosity (Яркость)

4. Примените фильтр Hight Pass (Высокий проход) с подходящим радиусом.

Для текстуры из урока подойдет радиус в пределах 15-30 пкс.

Если текстура кажется вам слишком плоской, увеличьте радиус в настройках фильтра, так же можно уменьшить степень непрозрачности слоя.

Когда, результат вам понравится, можете откинутся на спинку кресла и насладится плодами своих трудов. Вы сделали качественную текстуру. А главное узнали способ создавать их в неограниченном количестве. Для этого, вам всего лишь, потребуется побродить с фотоаппаратом)

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

В заключении хочу поблагодарить Яшу известного как Snork, Елену aka Porcelana и Евгения ksi2 за помощь в создании урока. Конечно, это были самые начала в создании текстур. Надеюсь, с вашей помощью, я продолжу этот рассказ.

Текстуры для фотошопа pat — Рейтинг сайтов по тематике

На нашем портале, вы сможете скачать все самое новое для фотошопа, и также заказать бесплатную графику для фотошопа, еще вы сможете скачать все сборки фотошопа, стоки для фотошопа, psd баннеры скачать бесплатно, скачать бесплатно photoshop

Google PageRank: 0 из 10

Скачать бесплатно всё для вашего Фотошопа CS3 CS5 CS6+. Только лучшее и качественное. Просмотр и описание. Ссылки прямые, без СМС-регистрации!

Google PageRank: 0 из 10 Яндекс ТИЦ: 70

Вашему вниманию представлено всё новое для Фотошопа. Готовые шаблоны, фоны, кисти, текстуры, стили и многое другое.

Рейтинг Alexa: #1,136,689 Google PageRank: 2 из 10

Все для графического дизайна: кисти для фотошопа, текстуры, растровые и векторные клипарты, рамки для фото, psd исходники

дизайн , графика , фото , фотошоп , photoshop

Рейтинг Alexa: #10,664,983 Google PageRank: 0 из 10 Яндекс ТИЦ: 10

PHOTOSHOPIX.RU — Фотошоп,шаблоны фотошоп скачать,рамки,шаблоны для фотошопа скачать бесплатно,детские рамки,фоторамки для фотошопа,шаблоны для фотомонтажа,шаблоны для детей,рамки для фотошопа,уроки фотошопа,рамки для фото,photoshop,psd

Рейтинг Alexa: #1,441,896 Google PageRank: 0 из 10

Кисти для фотошопа, векторные изображения, картинки, рисунки, стили, текстуры, PSD, EPS, AI

картинки , рисунки , стили , текстуры , psd

Рейтинг Alexa: #805,631 Google PageRank: 0 из 10

Текстуры высокого разрешения для дизайна. Textures From Designers

Рейтинг Alexa: #664,930 Google PageRank: 2 из 10

На нашем сайте вы найдёте уроки photoshop (фотошоп) и видеоуроки photoshop (фотошоп), статьи о дизайне и фото, а также кисти, шрифты, текстуры для photoshop и

Рейтинг Alexa: #1,847,093 Google PageRank: 0 из 10 Яндекс ТИЦ: 40

Все, что необходимо для изучения и работы с программой Photoshop — уроки, описание программ, кисти, текстуры, шаблоны, графика для сайтов, полезные ссылки и пр.

уроки , кисти , текстуры , шаблоны , шрифты

Рейтинг Alexa: #2,998,203 Google PageRank: 0 из 10 Яндекс ТИЦ: 0

Рейтинг Alexa: #15,320,239

All For Photoshop — Всё для Фотошопа. Кисточки,градиенты,PSD,шрифты,уроки,учебники,макросы,иконки,стили,текстуры

градиенты , psd , шрифты , уроки , учебники

Рейтинг Alexa: #2,099,468 Google PageRank: 3 из 10

У нас вы можете скачать photoshp версий cs3, cs4, portable. Кроме софта есть отличные подборки шаблонов, текстур и шрифтов для Фотошопа.

скачать , фотошоп , шаблоны , текстуры , дидлы

Рейтинг Alexa: #7,108,649 Google PageRank: 0 из 10

Динамика популярности — Текстуры для фотошопа pat

Google Тренды это диаграмма для отслеживания сезонности ключевых слов. Этот график позволяет лучше понять сезонное изменение полулярности запросов по определенной тематике.

Читайте так же:
Двойной щелевой кирпич гжель

Значения приведены относительно максимума, который принят за 100. Чтобы увидеть более подробную информацию о количестве запросов в определенный момент времени, наведите указатель на график.

Набросок карандашом по фото — бесплатный Photoshop Action

Набросок карандашом по фото - бесплатный̆ Photoshop Action

Ищите способ преобразовать фото в карандашный рисунок? Тогда вы по адресу. Бесплатный Photoshop Action поможет легко и быстро создать набросок карандашом по фотографии человека, животного, здания или статуи. Он справится в любом случае, а мои советы помогут сделать результат еще более реалистичным.

Описание Action

Я уже рассказывала о том, как с помощью графического планшета самостоятельно нарисовать рисунок по фотографии . Пришло время автоматизировать этот процесс. Считаю, что карандашный рисунок должен быть похож на рисунок, а не на суперреалистичное изображение, которое не отличишь от фото. Иначе зачем весь сыр бор?!

Поэтому я предлагаю вам изучить Pencil Sketch Photoshop Action от actions4photoshop.com.

Данный Action бесплатен для персонального использования и предлагает 4 способа настройки:

  • Черно-белый карандашный набросок
  • Цветной рисунок карандашом
  • Монохромный (один цвет)
  • И с ретро стилизацией.
ЧИТАЙТЕ ТАКЖЕ
Идеальная кожа в Photoshop – ретушь с частотны разложением Идеальная кожа в Photoshop – ретушь с частотны разложением. Избавьтесь от недостатков на коже прежде чем сделать карандашный рисунок — это поможет избежать лишней детализации!

Для обработки выбирайте фотографии разрешением не менее 1920 пикселей. Избегайте большого количества мелких частей и детализации.

Слои, получаемые после использования Action являются редактируемыми и это важно! Все фотографии разные по качеству и для достижения большей реалистичности, настройки некоторых слоев придется изменить. Как это сделать, я покажу на следующих примерах.

Инструкция

А для начала выполните простое условие для правильной работы «действия» — загрузите текстуру sketch-patterns, поставляемую вместе с Action. Для этого:

  1. Выберите инструмент Заливка на панели инструментов слева.
  2. На панели свойств вверху в качестве источника заливки выберите Узор
  3. Откройте список с узорами и выберите значок Настройки – откроется выпадающее меню, в котором нажмите на «Загрузить узоры».
  4. Найдите sketch-patterns.pat в папке с Action и он появится в списке доступных узоров.

Набросок карандашом по фото - бесплатный̆ Photoshop Action

Теперь откройте фото, которое хотите превратить в карандашный набросок.

Набросок карандашом по фото - бесплатный̆ Photoshop Action

Загрузите Pencil Sketch Photoshop Action в окне Операции и примените действие Sketch Unicolorиз папки с Action.

Набросок карандашом по фото - бесплатный̆ Photoshop Action

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

Текстуры в Фотошопе

Текстуры (patterns) часто используются в качестве узоров для компьютерных экранов, наполнения Web-сайтов; для оформления дипломов с логотипами фирмы; в 3D-графике для текстурирования поверхностей. Таким образом, везде они нужны, но пока создание текстур — это Photoshop.

Текстуры в Фотошопе

Что такое текстура?

Текстура (pattern) — это образец материала, который без швов заполняет любую указанную вами область. Текстуры сохраняются в библиотеках, их можно загружать как служебные файлы. В Photoshop вы уже использовали их, выполняя команду Edit | Fill (Редактирование | Выполнить заливку), в слоевых эффектах, в профессиональных демонстрационных стилях.
Итак, рассмотрим способы создания и сохранения текстур.

Текстуры в виде логотипа

Текстура Longines
Давайте получим такую же текстуру, как на Web-сайте (страница сервисного обслуживания) фирмы Longines, производящей недешевые часы.
Задание текстуры
Выполните следующие действия:
1. Выполните команду главного меню Edit | Define Pattern (Редактирование | Определить узор).

Читайте так же:
Кирпич полнотелый с пустотами применение

2. В появившемся окне задайте имя «Longines».

Применение текстуры

Чтобы проверить, как будет смотреться заданный образец, создадим новый документ 1024х768 пикселов и, выполнив команду Edit | Fill (Редактирование | Выполнить заливку), зальем всю область документа. Напоминаю, что в диалоговом окне Fill (Заполнить) можно выбрать заливку текстурой.


В результате создан фон для сайта с логотипами фирмы.

Данный метод очень прост, т. к. логотипы располагаются строго по столбцам. Сложнее расположить их в шахматном порядке.

Текстура с логотипом, расположенным в шахматном порядке

1. Создайте квадратное изображение, предположим 200 200 пикселов (далее будет удобно считать), в модели RGB.
2. Выполнив команду File | Place (Файл | Поместить), поместите в него логотип Adobe из файла ТекстурыЛоготипыAdobe.ai.
3. В диалоговом окне Place PDF (Пометить PDF) нажмите кнопку OK. В изображение помещен логотип в габаритном контейнере. С помощью габаритного контейнера пропорционально уменьшите логотип.
4. Выполните двойной щелчок внутри контейнера, применив трансформацию. Обратите внимание на новый слой с названием Adobe. Из ранее пройденного материала вы, надеюсь, помните, что создан Smart Object (о чем свидетельствует пиктограмма в палитре Layers (Слои)). Выполните команду контекстного меню слоя Rasterize Layer (Растрировать слой), переводящую Smart Object в растровый слой.
5. Скопируйте слой Adobe. У вас теперь три слоя.
6. Примените к слою-дублю фильтр, выполнив команду Filter | Other | Offset (Фильтр | Другое | Сдвиг) и введя половинные значения ширины и высоты изображения в качестве смещений по горизонтали и по вертикали. У фильтра включена опция Wrap Around (Вставить отсеченные фрагменты). В результате ваш «порезанный» логотип будет «разбросан» по углам изображения.
7. Сведите все слои командой Flatten Image (Выполнить сведение) меню палитры Layers (Слои).
8. Задайте текстуру командой Edit | Define Pattern (Редактирование | Определить узор).
9. Залейте новый документ получившимся образцом.

Создание рельефного логотипа

Вернитесь к пункту 7 предыдущего алгоритма. У вас есть слой с логотипами, расположенными в шахматном порядке. Создадим рельефное изображение на основе этого логотипа, в черно-белом варианте.
1. Выполните команду Image | Mode | Grayscale (Изображение | Модель | Градации серого). Ваше изображение станет черно-белым.
2. Выберите команду Filter | Stylize | Emboss (Фильтр | Стилизация | Тиснение), чтобы придать логотипу рельеф.
3. Если вы хотите использовать «плитку» у себя на Web-странице, целесообразно осветлить ее с помощью команды Image | Adjustments | Brightness/Contrast (Изобра-
жение | Коррекция | Яркость/Контрастность).


4. Задайте текстуру командой Edit | Define Pattern (Редактирование | Определить узор).
5. Залейте новый документ 1024 768 пикселов получившимся образцом.

Текстура из фотоизображения

Текстуры из камня, кирпичей, травы и других предметов растительного и животного происхождения требуются как в полиграфии, так и для 3D-графики.
1. Откройте два файла — Было.tif и Стало.tif из папки Ракушки. Сравните два образца текстуры (одна проработанная, другая — нет).

2. Задайте текстуры из одного и другого изображения. Создайте новый документ 1024×768 пикселов и залейте сначала одной текстурой, а потом другой.

3. Сравните получившиеся результаты.

Одна из текстур со швами. Алгоритм заключается в том, чтобы изображение — будущую текстуру — обработать таким образом, чтобы не было швов при заливке образцом.
4. Откройте файл Start.psd из той же папки. Для создания текстуры изображение слишком большое, поэтому требуется вырезать только его часть.
5. Инструментом Rectangular Marquee (Прямоугольная область) ограничьте часть изображения.

6. Выполните команду Image | Crop (Изображение | Кадрировать), и изображение будет обрезано по границе выделенной области. Снимите выделение.
7. Если из этого образца сейчас определить текстуру, она будет со швами. Выполните команду Filter | Other | Offset (Фильтр | Другое | Сдвиг), введя значения ширины и высоты изображения в качестве смешений по горизонтали и по вертикали. У фильтра должна быть включена опция Wrap Around (Вставить отсеченные фрагменты).
8. Необходимо так отретушировать образец, чтобы не было швов. Используйте в работе инструмент Clone Stamp (Штамп). Результат ретуши представлен в файле Стало.tif. Если задать текстуру из этого файла, швов не будет.

Читайте так же:
Как восстановить кирпич leeco le max 2

Библиотеки текстур

В Photoshop существует место для хранения всех наборов или библиотек. Это Preset Manager (Управление наборами). Вызовите команду Edit | Presets | Preset Manager (Редактирование | Наборы | Управление наборами). В раскрывающемся списке Preset Type (Тип набора) выберите значение Patterns (Узоры).

Как вы заметили, все результаты нашей работы по созданию образцов надежно сохранены программой. Щелчком по кнопке Load (Загрузить) вы можете загружать служебные файлы с наборами (расширение у текстур — pat).

Оберточная бумага. Алгоритм единичной плитки

Создание текстуры
Данный алгоритм подходит в качестве рисунка для оберточной бумаги. Посмотрите, что будет в результате:
1. Откройте файл Пример.tif из папки Урок_19_ТекстурыОберточная бумага.

2. Задайте текстуру из файла командой Edit | Define Pattern (Редактирование | Определить узор).
3. Залейте большой документ данной текстурой. Вот вам и пример рисунка для оберточной бумаги в магазине морских сувениров.

Как сделать так, чтобы предметы располагались по отдельности, но вместе соблюдалось условие «бесшовности»?
Для получения данной текстуры есть специальный алгоритм. В его основе лежит задание единичной плитки исходного размера. Этот размер будет использоваться почти во всех действиях и сохранится в итоговой текстуре.
1. Откройте файл 1.jpg.

2. Важным моментом в данном алгоритме является размер стартового документа. Например, документ размером 200 200 пикселов с белым фоном, где размещена морская звезда — первый объект.
3. Задайте текстуру из файла командой Edit | Define Pattern (Редактирование | Определить узор).
4. Залейте большой документ (например, 1024×768 пикселов) данной текстурой.

5. Откройте файл 2.jpg. Выделите объект. Перетащите выделенный объект в большой файл с уже залитой текстурой. Расположите объект на свободном месте.

6. Создайте прямоугольное выделение размером со стартовый файл. Для этого установите в полях параметров высоту и ширину по 200 пикселов.

7. Создайте выделение зафиксированного нами размера в большом документе так, чтобы в рамку выделения помещался второй объект.

8. Задайте новый образец текстуры из выделенной области документа.

9. Снимите выделение в большом документе, залейте весь документ новым вторым образцом.

Выбор второго образца для заливки файла

Заполнение большого документа второй текстурой
Дальше выполняются аналогичные действия с добавлением других объектов.
1. Откройте файл 3.jpg . Выделите объект. Перетащите выделенный объект в большой файл с уже залитой текстурой. Расположите объект на свободном месте.

2. Повторите действия п. 7—9. Таким образом, большой документ будет содержать уже три объекта с последовательно залитыми текстурами.

Сохранение образца

Для сохранения итогового и промежуточных образцов существует много способов. Один из них — использование команды Preset Manager (Управление наборами ). Вызовите команду Edit | Presets | Preset Manager (Редактирование | Наборы | Управление наборами). В поле Preset Type (Тип набора) выберите значение Patterns (Узоры). Сохраните образец.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector