Создание Фото Границы С Карты Смещения В Photoshop

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

что я имею в виду, когда говорю, что мы будем использовать другие фотографии в качестве карт смещения? Ну, во-первых, не позволяйте термину «карта перемещения» отпугнуть вас, если вы никогда не использовали его раньше. Карта смещения — это не что иное, как черно-белая фотография или изображение, которое Photoshop использует для перемещения, искажения и изменения формы пикселей в другом изображении. Мы уже рассматривали карты смещения в предыдущем уроке, где мы использовали их для создания фото реалистичные падения тени. Любую фотографию можно использовать в качестве карты смещения, но если вы используете их для создания границ фотографий, как мы будем делать здесь, вы захотите выбрать фотографии, которые имеют много деталей. Чем больше деталей, тем интереснее конечный результат. На самом деле, лучше всего избегать использования традиционных типов фотографий и попробовать использовать «текстурные» фотографии. Под «текстурной» фотографией я имею в виду фотографии таких вещей, как камни, камни, дерево, ржавчина, кирпич, ткани-все, что имеет интересное поверхность к нему.

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

вот фотография, которую я буду использовать в качестве основной фотографии в этом уроке (другими словами, фотография, к которой я буду применять границу):

оригинальное фото.

и вот как это будет выглядеть, когда мы закончим:

окончательный» фото границы » эффект.

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

этот учебник из нашего Эффекты. Давайте приступим к работе!

Шаг 1: Дублировать Фоновый Слой

Как всегда, начнем с дублирование фонового слоя, чтобы мы не работали непосредственно с исходной информацией об изображении. Чтобы сделать это, подойдите к слойная в верхней части экрана, выберите новая и выберите слой через Copy, или используйте сочетание клавиш Ctrl+J (Win)/Command+J (Mac):

Перейдите к Layer > New > Layer через Copy.

Если мы посмотрим сейчас в нашей палитре слоев, мы можем увидеть исходный фоновый слой на внизу и копия фонового слоя, который Photoshop автоматически назвал «Layer 1», над ним:

Палитра слоев в Photoshop теперь показывает исходный фоновый слой и копию над ним. Шаг 2: Добавить Новый Пустой Слой Между Двумя Существующими Слоями

нам нужно добавить новый пустой слой между двумя существующими слоями. В настоящее время в палитре слоев выбран» слой 1 » (текущий выбранный слой выделен в синий.) Обычно Photoshop добавляет новый слой непосредственно выше слой, который в настоящее время выбран, но нам нужно, чтобы наш новый слой появился ниже «слой 1», не выше. Чтобы сообщить Photoshop о добавлении нового слоя под «Layer 1», мы просто удерживаем клавишу Ctrl (Win)/команда ключ (Mac) на клавиатуре и нажмите на кнопку Новый Слой значок в нижней части палитры слоев:

Удерживайте нажатой клавишу «Ctrl» (Win) / Клавиша» Command «(Mac) и нажмите на иконку» новый слой».

Если мы снова посмотрим на палитру слоев, то увидим, что теперь у нас есть новый пустой слой, который Photoshop назвал «слой 2», между «слоем 1» и фоновым слоем:

Появляется новый пустой слой между фоновым слоем и «слоем 1». Шаг 3: Залить Новый Слой Белым

несмотря на то, что в конце этого урока я буду делать что-то более интересное, для время от времени давайте использовать белый как наш цвет границы. Для этого нам нужно заполнить наш новый пустой слой белым цветом. Поднимитесь на Edit в верхней части экрана и выберите Fill, или используйте сочетание клавиш Shift+F5:

Выберите правка > заливка.

в любом случае вызывает Photoshop Fill окне. В содержание в верхней части диалогового окна, выберите Белый от поле выбора. Затем, в смешивание раздел внизу, убедитесь, что режим установлено значение нормальный и прозрачность установлено значение 100%:

Используйте команду «заполнить», чтобы заполнить новый слой белым цветом.

нажмите OK в правом верхнем углу, когда вы закончите, чтобы выйти из диалогового окна и Photoshop заполнил новый слой белым. Ничего не произошло и это потому что «слой 1» находится над нашим новым слоем и блокирует его из вида, но если мы посмотрим на эскиз для «слоя 2» в палитре слоев мы видим, что миниатюра теперь заполнена сплошным белым, что говорит нам о том, что сам слой теперь заполнен белым:

Миниатюры предварительного просмотра для «слоя 2» теперь показывает нам, что слой заполнен белым. Шаг 4: Выберите «Слой 1»

нажмите на «слой 1» в палитре слоев чтобы выбрать его:

Выберите «Слой 1». Шаг 5: Выберите Инструмент Прямоугольная Область

возьмите Прямоугольник Инструмент из палитры инструментов:

Выберите инструмент Прямоугольная область. Шаг 6: Перетащите Выделение Внутри Изображения

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

Перетащите прямоугольное выделение туда, где должна отображаться граница фотографии. Шаг 7: Добавить Маску Слоя

когда вы счастливы с вашим выбором, убеждайтесь что вы все еще имеет» слой 1 » Выбранный, тогда щелкает дальше Маска Слоя в внизу палитры слоев:

Нажмите на иконку «Маска слоя».

Это добавляет маску слоя в» Layer 1″, и так как у нас была активная выборка, когда мы добавили маску слоя, Photoshop использует выборку, чтобы определить, какие части слоя должны оставаться видимыми, а какие части должны быть скрыты от просмотра. Все области слоя, которые находились внутри выделения, остаются видимыми, а области за пределами выделения будут скрыты. Если мы посмотрим на палитру слоев опять же, мы видим, что теперь у нас есть миниатюра маски слоя справа от миниатюры предварительного просмотра на «слое 1», и если мы внимательно посмотрим на миниатюру, мы увидим большую прямоугольную область в центре, которая заполнена белым. Это область, которая была внутри нашего выбора (область, которая остается видимой). Все вокруг белой прямоугольной области-это область, которая была вне нашего выделения (область, которая теперь будет скрыта), и мы видим, что она заполнена черный:

Эскиз маски слоя, показывающий белую (видимую) и черную (скрытую) области слоя.

Если мы посмотрим в наше окно документа, мы увидим, что теперь у нас есть белая граница, показывающая по краям изображения. Белая граница на самом деле является» слоем 2″, который мы заполнили белым на Шаге 3, достигнув уровня 1. Единственная часть» слоя 1″, которая все еще видна, — это область, которая была внутри нашего выбора. Все остальное на слой, который был вне выделения, теперь скрыт благодаря маске слоя:

Сплошной белый цвет из «Layer 2» теперь появляется в качестве границы вокруг изображения на «Layer 1» после добавления маски слоя. Шаг 8: Откройте Изображение, Которое Вы Хотите Использовать В Качестве Карты Смещения

пока все, что мы имеем-это простой просмотр белую рамку вокруг фото. Давайте изменим нашу границу во что-то гораздо более интересное, используя карту смещения и Photoshop вытеснять. Прежде чем мы сможем использовать карту перемещения, нам сначала нужно создать ее, поэтому откройте фотографию, которую вы хотите использовать в качестве карты перемещения. Как я уже упоминал в начале этого урока, лучше всего использовать «текстурную» фотографию, то есть крупный план чего-то с интересной поверхностью, и самый простой способ получить текстурные фотографии-это захватить вашу цифровую камеру, выйти на улицу и сделать несколько снимков! Например, вот фотография щепы, которую я сделал которые были разбросаны по земле вдоль пешеходной дорожки через лес возле моего дома:

Фотография нескольких щепок, разбросанных по тропинке через лес.

эта фотография должна хорошо работать как карта смещения.

Шаг 9: Обесцветить Изображение

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

Выберите изображение > настройки > обесцвечивать.

вы также можете использовать сочетание клавиш Shift + Ctrl+U (Win)/Shift + Command+U (Mac). В любом случае мгновенно удалит все цвета с фотографии, оставив нам черно-белое изображение:

Изображение теперь появляется в черно-белом после обесцвечивания цветов. Шаг 10: увеличение контрастности фотографии с уровнями

Далее нам нужно увеличить контраст в нашем изображении, делая самые темные области чисто черными, а самые яркие области чисто белыми. Для этого мы используем Photoshop уровень. Поднимитесь на Image в верхней части экрана еще раз, выберите корректировка и выберите уровень, или используйте сочетание клавиш для быстрого доступа к команде уровней, Ctrl+L (Win)/Command+L (Mac):

Выберите изображение > настройки > уровни.

в любом случае вызывает диалоговое окно уровни. В центре диалогового окна вы увидите изображение гистограмма (большой черный график), а под гистограммой три маленьких ползунка — a черный один слева, a белый одно справа, и серый один в середине. Чтобы сделать самые темные части изображения чисто черными, нажмите на черный слайдер на крайнем левом и перетащите его вправо. При перетаскивании вы увидите, что темные области на изображении становятся все темнее и темнее. Обычно, при редактировании и ретушировании изображений, мы просто хотим перетащить черный ползунок в точку, где начинается левая часть гистограммы, но в этом случае, так как мы делаем это, чтобы дать нашей карте смещения больше контраста, это хорошо, чтобы перетащить ползунок за эту точку. Мы потеряем некоторые детали в самых темных областях изображения, но это нормально для того, что мы здесь делаем.

затем, чтобы сделать самые яркие области изображения чисто белыми, нажмите на белый ползунок справа и перетащите его влево. При перетаскивании вы увидите, что самые светлые области на фотографии становятся чисто белыми. Как и в случае с черным слайдером, если бы мы ретушировали изображение, мы бы просто перетащили белый слайдер в точку где начинается правая сторона гистограммы, но в этом случае, что нам нужно больше всего для нашей карты смещения-это большая контрастность изображения, поэтому перетащите белый ползунок за эту точку, пока у вас не будет много ярких областей на изображении. Опять же, мы будем терять некоторые детали изображения в самых ярких областях фотографии, но это нормально:

Увеличьте контрастность изображения, перетащив черный ползунок вправо, а белый ползунок вправо. влево.

Нажмите кнопку ОК, чтобы выйти из диалогового окна. Ваше изображение должно теперь иметь много контраста с ним, как мы можем видеть здесь с моим изображением:

Изображение теперь появляется с гораздо более сильным контрастом между светлыми и темными областями. Шаг 11: Применить Фильтр Размытия Гаусса

последняя вещь, которую мы должны сделать с нашим изображением, чтобы подготовить его к использованию в качестве карты смещения, — это применить к нему небольшое размытие, просто чтобы удалить любые чрезмерные жесткие края. Для этого мы используем Photoshop Размытие По Гауссу. Поднимитесь на фильтр в верхней части экрана, выберите размытие и выберите Размытие По Гауссу:

Выберите Фильтр > Размытие > Размытие Гаусса.

когда появится диалоговое окно Размытие по Гауссу, установите радиус значение в нижней части вокруг 1 пиксель. Опять же, мы просто добавляем небольшое количество размытие:

Установите значение «радиус» в диалоговом окне «размытие Гаусса» равным примерно 1 пикселю.

нажмите OK, чтобы выйти из диалогового окна и применить размытие к изображению.

Шаг 12: Сохранить Изображение В Photoshop .PSD-файл

мы закончили подготовку изображения для использования в качестве карты смещения. Все, что нам нужно сделать сейчас, это сохранить его, и мы должны сохранить его как Photoshop .PSD file, так как это единственные типы файлов, которые Фотошоп позволит нам использовать в качестве карты смещения. Вы захотите сохранить файл где-нибудь, где вы сможете легко найти его, так как мы будем использовать его в данный момент. Я бы рекомендовал либо сохранить его непосредственно на рабочем столе, либо создать папку на рабочем столе и сохранить все изображения карты смещения в папке. У меня есть папка на рабочем столе с именем «карты смещения», и я собираюсь сохранить свой файл в этой папке.

чтобы сохранить файл, используйте сочетание клавиш Ctrl+S (Win)/Command+S (Mac), что является быстрым и простым способом доступа к команде «сохранить» Photoshop. Так как это первый раз, когда мы сохраняем файл, Photoshop фактически вызовет Сохранить Как диалоговое окно, так что мы можем сказать ему, что имя файла, где его сохранить, и какой формат файла, чтобы сохранить его как. Я собираюсь назвать свой файл «древесной стружкой» (вы, вероятно, захотите назвать свой файл чем-то другим, если вы также не используете фотографию щепки) и я сохраню его как Photoshop .PSD файл, выбрав эту опцию из выбор:

Используйте диалоговое окно «Сохранить как», чтобы дать файлу имя и выберите «Photoshop».PSD » тип файла.

опять же, я собираюсь сохранить мой файл в папке на моем рабочем столе, который я назвал «карты смещения». Убедитесь, что вы сохранили файл в месте, где вы можете легко получить к нему доступ. Нажмите кнопку ОК, чтобы сохранить файл и выйти из диалогового окна боксируй, когда закончишь.

вы можете закрыть окна документа изображения в этот момент, так как мы больше не нужно его открывать.

Шаг 13: Подготовьте И Сохраните Второе Изображение Как Карту Смещения (Необязательно)

Если вы действительно хотите создать несколько интересных и уникальных границ фотографий, попробуйте использовать несколько разных изображений в качестве карт смещения вместо одного. Это необязательно конечно, но я собираюсь открыть второе изображение для использования в качестве карты смещения. Я используйте эту фотографию, которую я взял из какой-то коры дерева:

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

повторите шаги 9-11 со вторым изображением (при условии, что вы его используете), чтобы подготовить его в виде карты смещения. Когда вы закончите, изображение должно быть черно-белым с сильным контрастом, и оно должно иметь небольшое размытие, чтобы сгладить любые резкие края. Вот мое изображение После подготовки его к использованию в качестве смещения карта:

Второе изображение после выполнения шагов, чтобы подготовить его в виде карты смещения.

Я сохраню это изображение в том же месте, что и мое предыдущее изображение, нажав Ctrl+S (Win)/Command+S (Mac). Опять же, так как это первый раз, когда я сохраняю изображение, Photoshop появится Сохранить Как окне. Я собираюсь назвать это изображение «древесной корой», и мне нужно сохранить это как Photoshop .PSD как ну:

Назовите второе изображение и сохраните его как Photoshop .PSD файл в том же месте, что и предыдущее изображение.

нажмите OK, чтобы сохранить изображение и выйти из диалогового окна, затем закройте окно документа изображения.

Шаг 14: Убедитесь, Что Выбрана Маска Слоя На » Layer 1

на данный момент, все, что вам нужно открыть на экране, это оригинальная фотография (та, к которой мы добавляем эффект границы). Убедитесь, что на «слое 1″выбрана маска слоя. Вы можете определить, выбрана маска слоя или нет, посмотрев на «слой 1» в палитре слоев. Вокруг миниатюры маски слоя должно появиться белое поле выделения, указывающее, что она выбрана. Если вместо этого вы видите поле выделения вокруг миниатюры предварительного просмотра слева, щелкните по миниатюре маски слоя, чтобы выбрать ее:

Убедитесь, что маска слоя выбрана на «Layer 1».

мы собираемся создать нашу границу фото эффект следующий!

Шаг 15: Применить Фильтр «Смещение» К Маске Слоя

теперь, когда мы создали одну или две карты смещения, мы можем создать эффект границы фотографии с помощью фильтра «смещение» Photoshop. Выбрав маску слоя, перейдите к фильтр в верхней части экрана, выберите коверкать и выберите вытеснять:

Выберите фильтр > искажение > перемещение.

«смещение» Photoshop» фильтр фактически разбивается на два отдельных диалоговых окна. Первое, что позволяет нам установить некоторые опции для того, как карта смещения будет влиять на наш имидж. Вверху вы увидите два варианта -Горизонтальный Масштаб и Вертикальный Масштаб. Эти параметры определяют степень влияния карты смещения. По умолчанию для обоих параметров установлено значение 10. Вы можете попробовать значения по умолчанию, но я собираюсь увеличить оба этих значения 20. Разные значения могут работать лучше для вас в зависимости от эффекта вы пытаетесь достичь, а также от размера вашего фото. Убедитесь, что у вас есть Растянуть По Размеру и Обернуть Вокруг параметры, выбранные в диалоговом окне, а также:

Увеличение параметров горизонтального и вертикального масштаба с увеличением влияния карты смещения на изображение.

Нажмите кнопку ОК, когда вы закончите, чтобы выйти из этого первого диалогового окна, и Photoshop появится второе диалоговое окно для выбора изображения, которое вы хотите использовать в качестве карты смещения. Я собираюсь выбрать первое фото, которое я сохранил, мои «щепки».psd » файл:

Во втором диалоговом окне перейдите к местоположению изображений, сохраненных для использования в качестве карты смещения.

клик открыть для выхода из диалогового окна и Photoshop будет использовать карту смещения, чтобы изменить вашу фотографию границы! Если я посмотрю на свое изображение в окно документа теперь, я вижу, что Моя граница теперь выглядит намного интереснее, чем это было мгновение назад:

Граница фотографии теперь кажется более интересной благодаря карте смещения. Шаг 16: Снова Примените Фильтр» Смещение», Используя Вторую Карту Смещения (Необязательно)

Если вы подготовили второе изображение для использования в качестве карты смещения, как я сделал, мы можем использовать его, чтобы добавить еще больший интерес к нашей фото границе. Так как фильтр смещения был последний фильтр, который мы использовали, мы можем быстро вызвать его снова с помощью комбинации клавиш Ctrl + Alt+F (Win)/Command+Option+F (Mac). Нажмите кнопку ОК, когда появится первое диалоговое окно фильтра смещения, чтобы принять те же настройки, которые мы использовали в прошлый раз, и когда появится второе диалоговое окно, выберите второе сохраненное изображение. Здесь я выбираю свою «древесную кору».psd » изображение:

Выберите вторую созданную карту смещения.

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

Теперь, после объединения второй карты смещения с первой, граница фотографии выглядит еще интереснее.

вы даже можете попробовать объединить третью карту перемещения, если хотите, но я доволен тем, как выглядит Моя граница в этот момент.

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

шаг 17: Удалить Сплошной Белый Слой («Слой 2»)

чтобы наше изображение выглядело немного интереснее, давайте сначала удалим наш сплошной белый слой. Нажмите на «Layer 2» в палитре слоев и перетащите его вниз на корзина в самом низу из палитры:

Перетащите «слой 2» в корзину в нижней части палитры слоев.

в палитре слоев останется только два слоя, а фоновый слой будет выбран:

Палитра слоев теперь показывает только исходный фоновый слой и «слой 1».

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

Шаг 18: Выберите Инструмент «Пипетка»

мы собираемся попробовать цвет из изображения. Для этого нам понадобится Инструмент «Пипетка», поэтому выберите его из палитры инструментов:

Выберите инструмент Пипетка на палитре инструменты. шаг 19: Выборка Цвета Из Изображения

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

Нажмите на изображение, чтобы выбрать цвет, который будет хорошо работать в качестве цвета границы.

вы увидите цвет, который вы выбрали появляются в образец цвета переднего плана в нижней части палитры инструментов:

Выбранный цвет отображается в образце цветов переднего плана на палитре «инструменты». шаг 20: Добавить Корректирующий Слой» Оттенок/Насыщенность»

с фоном слой, выбранный в палитре слоев, нажмите на Новый корректирующий слой значок в нижней части палитры:

Щелкните по значку «Новый корректирующий слой».

выберите Цветовой Тон/Насыщенность из списка корректирующих слоев, которая появляется:

Выберите «оттенок / насыщенность» из списка.

когда появится диалоговое окно оттенок/насыщенность, выберите окрашивание в правом нижнем углу. Эта воля раскрасьте границу вокруг изображения, используя цвет, выбранный минуту назад. Я собираюсь затемнить мою границу, а также путем снижения легкость значение в диалоговом окне примерно -60. Наконец, я собираюсь немного уменьшить насыщенность цвета границы, уменьшив насыщенность стоимостью около 20:

Измените параметры в диалоговом окне» оттенок/насыщенность», обведенном кружком выше.

нажмите OK, когда вы должны принять изменения и выйти из диалогового окна. Если мы посмотрим на нашу палитру слоев сейчас, мы увидим, что наш корректирующий слой оттенка/насыщенности находится между фоновым слоем и «слоем 1»:

Палитра Layers, показывая корректирующий слой между двумя другими слоями.

и вот что мой окончательный эффект границы теперь выглядит после раскрашивания и затемнения моей границы:

Окончательный результат границы фотографии.

и там мы держи! Вот как создавать интересные границы фотографий, используя карты смещения в Photoshop! Посетите наш Эффекты Раздел для более Photoshop эффектов учебники!

---

Похожие записи

Инструменты Photoshop для редактирования изображений карт смещения/карты высот 3D ландшафта

В данной статье (уроке) мы рассмотрим более мягкие способы осветления изображения карты высот, нежели инструменты Photoshop Автотон (Auto Tone) и Автоконтраст (Auto Contrast). Рассмотренные здесь инструменты Photoshop для работы с изображениями Экспозиция «Exposure», Осветитель «Dodge Tool», настройки уровней изображения «Levels», кривые «Curves», HDR тонирования «HDR toning» способны проявить/осветлить любое изображение карты высот, даже изменить его до неузнаваемости, существенно повлиять на конечный ландшафт в Unity3d, созданный из изображения карты высот.

Недостатки «осветленного» изображения карты высот и «сжатого» ландшафта в Unity 3D.

Итак, в предыдущих частях статьи мы создали террейн в Unity3D и экспортировали карту высот в формате 16 bit Windows. Далее мы импортировали данную карту высот в редактор изображений Фотошоп. После этого мы «осветлили» изображение карты высот при помощи Авто контраста/Автотона и сохранили получившееся изображение карты высот в формате RAW 16 bit Windows (PC). И, наконец, мы импортировали получившуюся карту высот в Unity 3D, создав на ее базе новый ландшафт.

Чтобы получившийся из доработанной карты высот ландшафт не был похож на сосульку и не представлял собой набор высоченных пиков, нам пришлось значительно уменьшить максимальную высоту ландшафта с «дефолтных» 600 метров/условных единиц Unity до 12 метров. Недостатком такого резкого снижения высоты террейна чревато тем, что если теперь мы захотим создать возвышенность/гору высотой, скажем, в 500 метров, то у нас ничего не получится. Мы теперь ограничены этими самыми 12 метрами.

Чтобы это продемонстрировать, я воспользуемся нативным/встроенным инструментом повышения и понижения уровня ландшафта в Юнити «Raise/Lower Terrain».

Выберем самую простую круглую кисть, установим ей максимальный размер, выставим максимальное нажатие и поводим выбранной кистью где-нибудь в центре ландшафта подольше, чтобы создать высокую-высокую гору. О том, как создать свою кисть и с её помощью создавать уровни в Unity3D, было рассказано в статье-уроке Ландшафт в Unity 3D. Часть Вводная – для затравки. Создание лабиринтов и подземелий в Unity3D. Создание кисти для ландшафта в Adobe Photoshop.

На рисунке показаны настройки кисти для создания горы в Unity 3D и созданное плато вместо горы.

Хмммм… Не получается у меня создать высокую гору. Получилось лишь создать плато, ограниченное максимальной высотой террейна «Terrain Height» в разделе «Resolution» компонента Transform Unity3D. Как мы увидели из предыдущей части статьи, изменение данного параметра для существующей карты высот приводит лишь к вытягиванию террейна по высоте, но не позволяет увеличить максимальную высоту террейна с сохранением текущего уровня созданного террейна.

Еще одним недостатком созданного террейна из осветленной карты высот инструментами Авто контраст (Auto Contrast) и Авто тон (Auto Tone) является «зарезание» верхушки террейна. Такой результат возник на террейне в связи со слишком сильным, максимальным, осветлением более светлых участков карты высот до белого цвета. Как известно из предыдущих уроков, абсолютно белый цвет интерпретируется движком Unity 3D (и другими программами для создания 3D моделей, игровыми движками, приложениями для создания ландшафтов и т.д.), как максимально возможная высота террейн (точка поверхности террейна).

Способы осветления изображений в Photoshop

Инструмент для решения упомянутых выше проблем с террейнов и картой высот находится в том же Фотошопе, точнее таких инструментов — несколько.

Первый из них из них можно найти в меню изображения «Image» главного меню во вкладке «Adjustment» и называется «Exposure» или по-русски — Экспозиция.

Вторым инструментом является «Dodge Tool» и активируется путем нажатия горячей клавиши ‘O’, иконка которого расположена в панели инструментов (по умолчанию расположенной в левой части экрана, но которая может быть перенесена в любую часть окна Фотошопа).

Третьим инструментом являются Кривые «Curves», изменение формы которых, также способно вытянуть изображение карты высот в более светлый диапазон.

Четвертым инструментов являются уровни «Levels», также способным осветлить карту высот.

Пятый инструмент «HDR Toning…» является самым интересным и обладает настолько широкими настройками для осветления изображения, насколько это возможно.

Еще одним способом осветления изображения в Photoshop является инструмент коррекции света и тени «Shadows/Highlights…» (Image -> Adjustments -> Shadows/Highlights… ).
Но данный инструмент достаточно груб для нашего случая и больше похож на результат использования Авто тона или Авто контраста, даже при значении в 1% для теней.

Итак, давайте посмотрим, что же можно сделать при помощи данных инструментов.

Осветление изображения карты высот при помощи инструмента экспозиции «Exposition».

Загрузите в Фотошоп самую первую экспортированную из Unity 3D карту высот (не модифицированную в Фотошопе, а оригинальную карту высот — тот самый черный квадрат), как было описано в одной из предыдущих статей Ландшафт в Unity3D. Часть 2. Импорт карты высот в Photoshop с редактированием и сохранением в формате RAW. Импорт карты высот в Unity 3D для изменения террейна.

Как и прежде мы видим черный цвет на месте предполагаемой текстуры карты высот. Выберите «Image» в главном меню, чтобы открыть меню инструментов для работы с изображением, в котором выберите вкладку настроек/коррекции изображения «Adjustments», в котором, в свою очередь, выберите вкладку «Exposure». Попробуйте поменять значения для параметров экспозиции «Exposure» и коррекции гаммы «Gamma Correction».

В моем случае достаточными для «проявления» будущих холмов и гор значениями стали «+1.8» и «1.3» для параметров экспозиции и коррекции гаммы соответственно.

На рисунке показаны настройки инструмента экспозиции Exposure в Photoshop для осветления изображения карты высот.

Теперь необходимо сохранить и импортировать данную карту высот в Unity 3D, назначив ее соответствующей заготовке террейна, как было описано в статье Ландшафт в Unity3D. Часть 2. Импорт карты высот в Photoshop с редактированием и сохранением в формате RAW. Импорт карты высот в Unity 3D для изменения террейна. Настройки для импортируемой карты высот мы выберем, как и в самом первом нашем эксперименте по созданию террейна в Unity3D из карты высот: высота ландшафта — 600 метров/условных единиц, разрешение/размер карты высот — 257, режим изображения — 16 бит и порядок байтов Byte Order — PC/Windows.

На рисунке показан созданный ландшафт в Unity3D из карты высот, осветленной в Фотошопе.

Если вы обратили внимание, инструмент Экспозиции содержит еще один настраиваемый параметр. Я ничего не сказал про параметр смещения «Offset», чтобы не смазывать общую картину созданного террейна в Unity3D. Данный параметр позволяет поднять, так называемый, базовый уровень ландшафта. Вы можете поднять базовый уровень террейна, чтобы уже в редакторе Unity3D создавать впадины под водоем, типа пруда, озера, океана, либо вырыть окопы, создать вмятины под подвал дома, или просто вырыть ямы в земле, имитирующие воронки от взрывов. В отличие от нулевого уровня террейна (нулевая точка/точка отсчета высоты ландшафта, 3D модели, 3D объекта, системы частиц и т.д.), который определяет самую низкую/самую глубокую точку вашего террейна/ландшафта в Юнити 3Д, например, дна ямы или оврага или дна пруда, океана, озера, речки, лужи и т.д., базовый уровень определяет основную высоту поверхности, на которой наиболее часто будет находиться персонаж игрока. Базовый уровень представляет собой золотую середину между максимально и минимально допустимыми координатами по вертикальной оси ландшафта. Совсем не обязательно, чтобы этот уровень, RGB (127, 127, 127) или RGB (128, 128, 128) находился ровно посередине между максимальной и минимальной координатой ландшафта по оси Y. Золотая середина — на то и «золотая середина», и определяется тем, насколько глубоки ямы в ландшафте и насколько высоки горы на ландшафте. Если глубина ваших ям составляет 100 метров, а высота гор 300 метров, то базовый уровень ландшафта стоит расположить между координатами, равными 100 и 300 по оси Y ландшафта.

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

Для чистоты эксперимента я воспользуюсь неизмененной/оригинальной картой высот и установлю следующие параметры для инструмента Экспозиции: собственно экспозиция — 7, Offset — 0.215, а значение параметра Gamma Correction оставлю без изменений, т.е. равным 1.

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

Импортированный террейн, созданный из карты высот, с цветом фона RGB (128, 128, 128).

Используем инструмент Осветлитель «Dodge Tool» на карте высот для того, чтобы показать часть «невидимого» ландшафта

Теперь давайте рассмотрим принцип работы инструмента Photoshop «Dodge Tool», который позволяет выборочно осветлять слишком темные участки изображения. Загрузите еще раз оригинальное изображение карты высот в Фотошоп или отмените применение инструмента «Expose», нажав несколько раз сочетание клавиш Ctrl+Alt+Z, в зависимости от того, какое количество последних действий/операций вы хотите отменить. Чтобы отменить последнее действие в Фотошопе (Undo), вы можете использовать стандартное для многих Windows-приложений сочетание клавиш Ctrl+Z, однако повторное нажатие данного сочетания клавиш в Фотошопе вернет состояние рисунка на шаг вперед, т.е. произойдет не Undo, а Redo, т.е. отменится действие, вызванное предыдущим нажатием сочетаний клавиш Ctrl+Z. Итак, вернувшись к черной текстуре карты высот, нажмите на иконку инструмента «Dodge Tool» в панели инструментов слева, чтобы выбрать инструмент Осветлитель. Выставьте в верхней части экрана значение для экспозиции «Exposure» (да, да, и здесь — экспозиция), например, равным 40%, выберите желаемый паттерн/форму кисти, установите клавишами «{» и «}» требуемый размер (который также может быть задан в «Brush Preset picker» и проведите один или несколько раз кистью по холсту (вашему черному квадрату).

На рисунке показана частично осветленная карта высот через инструменты Photoshop dodge tool.

Я специально побольше «засветил» карту высот лишь с одной стороны, чтобы наглядно показать полезность данного инструмента. Сравните ее с изображениями предыдущих карт высот, что у вас получились после применения инструментов Авто тон/Авто контраст и «Expose» в уроке Ландшафт в Unity3D. Часть 2. Импорт карты высот в Photoshop с редактированием и сохранением в формате RAW. Импорт карты высот в Unity 3D для изменения террейна.

На рсиунке показаны две карты высот: слева — оригинальная, справа — карта высот после применения инструмента Осветлитель.

«Искривляем» яркость изображения карты высот инструментом Photoshop Кривые («Curves»)

Кривые «Curves» (Image -> Adjustments -> Curves), как и предыдущие два инструмента способны осветлить изображение карты высот. Чтобы вызвать инструмент Кривые в Фотошопе для осветления изображения карты высот, вы можете нажать одно из сочетания горячих клавиш Фотошопа, а именно Ctrl+M. Для каждого изображения карты высот форма кривой подбирается индивидуально. Конечно, в зависимости от формы кривой будет зависеть и конечный результат.

На рисунке показана кривая в окне инструментов «Curves», «вытянувшая» карту высот из темной зоны, т.е. осветлить изображение карты высот.

Осветление изображения карты высот ландшафта через Уровни (Levels)

Инструмент «Levels» (Image -> Adjustment -> Levels) также позволяет осветлить карту высот для ландшафта Unity3d. В настройках окна инструмента Кривые Фотошопе достаточно передвинуть ползунки-регуляторы оттенков поближе к пику в левой части диаграммы интенсивности цветов, чтобы получить желаемый результат.
Параметр «Output levels»
определяет цвет фона/базового уровня террейна позволяет регулировать цвет базового уровня террейна (в данном случае, в оттенках серого), по схожему принципу воздействия на изображение параметра «Offset» инструмента экспозиции «Exposure».

На рисунке показано окно инструмента настройки уровней изображения «Levels»

Мощный инструмент коррекции изображения «HDR toning…»

Одним из самых мощных инструментов редактирования изображения по праву можно считать инструмент HDR-тонирования «HDR» toning.. Данный инструмент включает огромное количество параметров, способных изменить изображение карты высот ландшафта до неузнаваемости как в лучшую, так и в худшую сторону.
Для достижения желаемого результата в качестве метода обработки изображения нам подойдет метод «Local Adaptation», который уже установлен в качестве метода по умолчанию в окне настроек инструмента «HDR Toning…»
При помощи значений параметров «Radius» и «Strength» раздела «Edge Glow» вы можете настроить резкость переходов между светлыми и темными областями изображения карты высот, тем самым сделав края ландшафта более крутыми. Или сделать более пологими области, вокруг ям, оврагов и т.д.
Изменяя значения параметра «Gamma» в разделе «Tone and Detail» и параметра «Shadow» в разделе «Advanced» окна настроек «HDR toning…» можно легко настроить цвет фона изображения карты высот, соответственно подняв базовый уровень террейна в Unity3d.
Раздел «Toning Curve and Histogram», в котором отображаются гистограмма и кривая настройки тона изображения, позволяет более аккуратно настроить карту высот для будущего террейна в Unity 3D.

На рисунке показано окно настроек инструмента HDR Toning…

На этом данный урок закончен. В одном из следующих уроков мы научимся понижать террейн путем затемнения изображения карты высот в Фотошопе.

Автор Максим Голдобин (Maxim Goldobin aka MANMANA)

Post Views: 14 029

Рисуем море в Photoshop

Часть первая: создание карты смещения

С помощью карты смещения мы можем управлять неровностью поверхности. Светлые участки «поднимают» рельеф, темные опускают, а размер самой карты задаёт величину и форму волны. Чем крупнее размер карты, тем меньше волны.
Итак, приступим. Создаём новый документ в режиме RGB размером 1000 пикселей в ширину и 2000 пикселей в высоту.
Идём по вкладке Фильтр —> Шум —> Добавить шум (Filter —> Noise —> Add Noise). Задаём следующие параметры:
Эффект (Amount): 400%
Распределение (Distribution): По Гауссу
И поставить галку у Монохроматический
Нажимаем OK
Переходим в Фильтр —> Размытие —>Размытие по Гауссу (Filter —> Blur —> Gaussian Blur). Выбираем радиус 2,0 пикселей и жмём ОК.
Должна получиться такая поверхность, привожу изображение части рисунка в масштабе отображения 100%:

Далее будем работать с каналами. Если кто не знает, открывают панель каналов через вкладку главного меню Окно —> Каналы (Window —> Channels).
Открываем эту панель и выбираем в ней красный канал. Применяем Фильтр —> Стилизация —> Тиснение (Filter —> Stylize—> Emboss) и вводим следующие настройки:
Угол (Angle): 180°
Высота (Height): 1 пиксель
Эффект (Amount): 500%
Жмём OK
Переходим на зелёный канал и применяем эти же настройки, только параметр Угол задаём 90° вместо 180°.
Документ должен иметь такой вид при с включенной видимости всех каналов, приведена изображение части рисунка в масштабе отображения 100%:

Теперь создадим перспективное уменьшение морских волн. Для этого растянем нижний край изображения в 36 раз. Это значение оптимально для большинства изображений. Разблокируем фоновый слой (двойной клик по замочку в панели слоёв). Уменьшим масштаб отображения документа в окне Фотошопа (зажать Alt и прокручивать колёсико мыши). Переходим к вкладке Редактирование —> Трансформирование —> Перспектива (Edit —> Transform —> Perspective). Перетаскиваем один из нижних углов, чтобы значение ширины стало 600%.

Таким образом, мы растянули нижний край изображения в шесть раз. Чтобы растянуть его в тридцать шесть раз, надо растянуть край полученного документа ещё в шесть раз, для этого нажимаем комбинацию клавиш Ctrl + Shift + T. И, прошу обратить внимание на важный момент, т.к. документ у нас растянут за края отображаемой в окне рамки, нам следует обрезать документ по видимым краям с помощью инструмента Рамка (Crop) .
После этого уменьшаем высоту изображения с помощью Изображение —> Размер изображения (Image —> Image Size) до 1000 пикселей, не забываем снять галку с пункта «Сохранить пропорции» (Constain Proportions). В результате у нас получилось квадратное изображение 1000 на 1000 пикселей. Так оно должно выглядеть в масштабе 30%:

В результате у нас получилось, что горизонтальные искажения уменьшается к горизонту, а вертикальное искажение этого не делает. Чтобы компенсировать это, используем размытие верха документа.
Переключаемся на красный канал. Нажмите Q, чтобы перейти в режим быстрой маски. Выберем инструмент Градиент (Gradient tool) , сам градиент выбираем чёрно-белый, тип — линейный, и проводим линию снизу вверх по изображению, как указывает стрелка, чтобы создать маску градиента.

Нажмите клавишу Q, чтобы выйти из быстрой маски и вернуться в стандартный режим. Теперь мы имеем выделение градиента. Залейте его серым цветом #808080. После заливки рисунок примет такой вид (масштаб 30%):

Снимаем выделение, нажав Ctrl+D.
Выбираем зелёный канал, переходим в режим быстрой маски, проводим вертикальный градиент, чтобы выбрать узкую часть около горизонта, где волны слишком большие, как показано на рисунке (масштаб 30%):

Повторяем действия предыдущего этапа, нажимаем Q, заливаем цветом #808080, снимаем выделение.
Переходим в каналы и отключаем синий канал. Если Вы всё сделали правильно, то рисунок у Вас должен выглядеть следующим образом (масштаб 30%):

Теперь сохраняем документ как файл PSD. С картой всё!

Теперь займёмся непосредственно созданием поверхности моря.

Карты градиента в Photoshop — Создание и использование

Мы часто воспринимаем цвета на цифровых фотографиях как «правильные», когда нейтральные тона – если они существуют – действительно нейтральны. Но в реальном мире свет всегда имеет тот или иной цветовой оттенок, который влияет на освещаемые области. Каждый художник старается редактировать фотографии так, чтобы они отражали его собственное видение. Карты градиента (Gradient maps) могут либо корректировать цвет, либо использовать его в вашу пользу.

Вы можете использовать карты градиента для драматических черно-белых преобразований или создавать различные монохромные эффекты, но в этой статье основное внимание мы уделим картам цветового градиента, чтобы:

• использовать их для тонкого улучшения фотографий;
• разделять элементы в своих композициях с помощью цветового контраста;
• выделять предметы.

Изначально изображение было черно-белое.

Что делает карта градиента?

Карта градиента в простейшем виде – это плавный переход от одного цвета (или тона) к  другому. Допустим, у вас есть карта градиента от зеленого к оранжевому. Когда вы примените его к изображению, тени будут иметь зеленый оттенок, а подсветка – оранжевый. Средние тона обычно меньше всего страдают, за исключением более сложных многоцветных карт.

На данном примере черно-белый градиент занимает нижнюю половину изображения. Выше представлена ​​карта цветового градиента, а над ней – эффект, который создается при наложении среднего на нижний, при использовании режима наложения Перекрытие (Overlay) или Мягкий свет (Soft ligh).

У вас может возникнуть вопрос: зачем искажать цвет фотографии и придавать существующим оттенкам и цветам новые тоны? В конце концов, это практически противоположность коррекции баланса белого.

Одна из причин использования Карты градиенты (Gradient map)– обогатить цвета, которые уже есть на фотографии.

 

Например, в этом варианте мы подчеркнули красный кирпич и синее небо.

Еще одна веская причина использовать карты градиентов – использовать силу дополнительных или оригинальных цветов и создавать более привлекательные изображения. Иногда ощущение фотографии и сказочности важнее правды, которая изначально существует.

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

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

Создание градиентных карт

Самый простой способ создать карту градиента в Photoshop – перейти на панель инструментов и установить цвета фона и переднего плана на те, которые вам нужны на любом конце градиента. Затем, когда вы открываете карту градиента, цвета уже на месте.

Если вы хотите использовать точные цвета в вашей карте градиента – возможно, даже и дополнительные цвета, которые вы нашли в Интернете – можно ввести шестнадцатеричные числа в панель выбора цвета вместо случайной выборки.

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

Вы можете использовать «Adobe Color», чтобы найти идеальный дополнительный цвет для выбранного вами на круге. Соответственно создать карту градиента из предложенных цветов.

Способ 1

Более индивидуальный способ создания карты градиента выглядит следующим образом:

1. Откройте ваше изображение в Photoshop.
2. Откройте корректирующий слой карты градиента.
3. Установите режим наложения на Мягкий свет (Soft ligh) или Перекрытие (Overlay).
4. Щелкните градиент, чтобы открыть редактор градиента.
5. Щелкните левый ограничитель цвета (квадратный ползунок в нижнем левом углу), затем щелкните в активированном цветовом окне.
6. На этом этапе вы можете настроить цвет тени и увидеть ее эффект в реальном времени на фотографии, перемещая палитру цветов.
7. Сделайте то же самое с правой кнопкой цвета выделения.

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

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

Оригинал Добавление градиента Настройка цветов Работа с маской слоя

Карты градиента против цветных LUT

Альтернативой градиентным картам являются цветные LUT. Это таблица входных и выходных значений для цветов RGB. Она применяется для быстрой цветокоррекции. Вместо того чтобы применять цвет в соответствии с тоном изображения, как это делает карта градиента, LUT смещает оттенки численно.

Последнее часто вызывает радикальное изменение средне тональных объектов, таких как небо и деревья, тогда как более простые градиенты, как правило, оставляют эт

Как использовать карты смещения в Photoshop — SkillsUp

Итак, как работать в фотошопе с Displacement Maps и для чего это вообще нужно?

Предположим, вам нужно наложить одно изображение на другое, но не просто так, чтобы в итоге у накладываемого изображения была текстура фонового. В этом нам очень поможет использование Displacement Maps. Давайте рассмотрим приём на небольшой рассмотрим пример.

Посмотрите на это фото, на бейсболке мы видим изображение, которое будто бы «напечатано» на ткани и на первый взгляд ничто не выдаёт, что это сделано с помощью какого-либо графического редактора.Данная техника будет особенно полезна тем, кто любит коллажирование — с её помощью можно создать довольно интересные эффекты. В любом случае эта техника очень полезна в арсенале любого человека, изучающего работу в Photoshop.

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

Нажмите Ctrl / Cmd + T для того, чтобы масштабировать изображение, после чего кликните на нём правой кнопкой мыши и в выпадающем меню выбора опции Warp :

… после этого попробуйте придать накладываемому изображению такую ​​форму, чтобы оно органически вписывалось в композицию и не выглядело «инородным» телом:

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

Нам нужно выбрать тот канал, в котором изображение будет наиболее контрастным.Покликайте по всем и убедитесь, что вы выбрали тот канал, в котором чёрный выбрали и белый цвет наиболее контрастны. В нашем случае это Синий (синий) канал:

После того, как вы определились наиболее контрастным каналом, кликните на нём правой кнопкой мыши и выберите Duplicate Channel . Совершенно неважно как вы его наёте, но создайте для канала отдельный документ:

Таким образом вы получите новый файлик с альфа каналом в новом окне, чтобы сохранить ( Сохранить как ) через меню Файл или попросту нажмите Ctrl + Shift + S .Сохранилища? Давайте вернемся к оригинальному изображению. Вернитесь во вкладку Каналы и снова активируйте все три канала, а после этого перейдите на вкладку Слои .

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

Для того, чтобы исправить ситуацию, нажмите на пункт меню Filter и выберите опцию Distort , а в выпадающем окне — Displace .

Вы увидите следующее окно, на Горизонтальная шкала и Вертикальная шкала 900 нужно будет снизить до 10 . Остальные параметры оставьте как показано на картинке:

Жмите Ок , после чего во всплывающем окне предварительно сохранённый psd файлик с альфа каналом и откройте его. Вуаля, края картинки начали повторять текстуру бэкграунда. До того как вся картинка тоже будет повторять текстуру ткани осталось всего пару шагов.

Теперь нам предстоит немного поработать с режимами наложения. Выбирайте на свой вкус и немного поэкспериментируйте. Разные комбинации дают разный эффект, в нашем случае особенно хорошо смотрится Наложение со 100% -ным Непрозрачность :

И вот что мы получим после манипуляций с режимами наложения:

Готово! Техника поразительно проста в применении и в принципе можно применять где угодно, когда перед вами стоят похожие на данный случай задачи.

Получи доступ к мастер-классам топовых спикеров и базе материалов

.

Урок по созданию карты нормалей (карта нормалей), карты с территории (карта смещения), карты затенения / освещения (карта внешней окклюзии), самоовещенной карты нормалей и карты отражений / блеска (зеркальная карта) из текстуры или карты высот (карта высот) для игровых движков на примере Unity3D. Часть 5. Обзор приложений для создания различных карт

В предыдущей части статьи было рассказано про Теорию карт нормалей.

Данная часть статьи посвящена мини-обзорам программ и плагинам для генерации карт, включая карты нормалей, карты с ущербом, самоосвещенной карты нормалей, карты освещения / затенения и карты отражений из текстуры и карты высот.В данной части статьи, помимо уже упомянутых в одной из предыдущих частей Normalmap Online, обозначаются такие программы и плагины, как Normalmap Online, NVIDIA Texture Tools для Adobe Photoshop (NVIDIA Normal Map Filter), SSBump Generator, xNormal, плагин карты нормалей GIMP и SmartNormal, CrazyBump и Awesome Bump.

Вы поддержать автора проекта, пожертвовав ему сумму (сколько посчитаете нужным и возможным) на развитие сайта.

Получая пожертвования автор сайта уделяет меньше времени на сон и больше — на написание уроков и статей :).Спасибо!

NVIDIA Texture Tools для Adobe Photoshop

Разговор зашел о картах нормалей, не могу сказать еще об одном удивительном инструменте NVIDIA Texture Tools для Adobe Photoshop, который позволяет:

— работать с сжатыми текстурой (в частности открывать .dds файлы Direct Draw Surface и проявлять их в формате RGB в сжатом и несжатом размером;

— генерировать карт нормалей из карт высот и, как было сказано выше, походящих текстур, посредством NVIDIA Normal Map Filter , входящим в состав данного набора утилит;

— создавать мип-мапы ​​ ( мип-карты , Mip карт ), т.е. текстуры копии с разной детализацией разного размера, позволяющие при текстурировании выбирать изображение с наиболее подходящим размером;

— создать кубические карты / кубические текстуры Кубические карты (пришедшие на смену Сферическая карта s ), в частности, использующиеся для создания окружения / неба, состоящие из шести квадратных текстур, являющихся гранями куба, окружающего игровой объект.

Более подробно с использованием данного набора инструментов вы можете ознакомиться на сайте Nvidia, либо в pdf-файлах NVJavaScript. pdf , PhotoshopDDSPlugin. pdf и PhotoshopNormalMapFilter. pdf , которые находятся в папке « \\ Program Files \ NVIDIA Corporation \ » или в « \\ Program Files ( x86) \ NVIDIA Corporation \ «после установки пакета.

Для того, чтобы запустить плагин, активируйте слой, на котором хотите применить фильтр, затем вкладку Filter в главном меню, в котором выберите NVIDIA Tools , а в ней — NormalMapFilter .

Карты нормалей, создаваемые в NVIDIA Texture Tools для Adobe Photoshop в режиме по умолчанию, как и 3ds Max, имеют инвертированный зеленый канал, следовательно, чтобы они правильно работали в Unity3D, необходимо инвертировать ось Y ( Invert Y) ) при создании карты нормалей из текстуры или карты высот.

На рисунке показаны созданные карты нормалей из.

Как видно из рисунка, NVIDIA Normal Map Filter не просто позволяет создавать карты нормалей из изображений (в центре), используя большое количество настроек (окна настроек показаны созданными картами нормалей), но и инвертированные карты нормалей (справа), как если бы цвета первоначального были бы инвертированы.

Также в данном плагине существует возможность предпросмотра карты нормалей на 3D модели (плоскости), что присутствует и в плагине для Фотошопа xNormal , который является частью автономной версии xNormal.

16-битный фильтр для плагина от nVidia доступен по ссылке NormalMapFilter16.zip, который позволяет работать с 16-битными изображениями в градациях серого, в которые экспортируют изображения ZBrush .

Генератор SSBump

Еще одним представителем семейства генераторов карт нормалей и карт высот является SSbump Generator 5.3 w / CUDA , который позиционируется, как должно быть понятно из названия, как генератор ssbump карт нормалей ( Self- Shadowed Bump Maps ). Карты нормалей ssbump являются частью системы самозатенения (хранения карты затенений вместе с картой нормалей), реализована в движке Источник от Valve Corporation . На данном движке был реализован известный Half- Life 2 , а также переиздана первая часть данной игры, получившая название Half- Life: Source , которая была издана в 2004 году, и включающая ряд графических нововведений и дополненная изменениями в игровом процессе.

На рисунке показан интерфейс программы SSbump Generator 5.3 с CUDA, а также пример создания самозатененной карты нормалей (Self-Shadowed Bump Maps) для движка Source, разработанного компанией Valve.

Помимо ssbump текстур (самозатененных и не самозатененных) SSbump Generator способен генерировать простые карты нормалей, карты высот, а также дополнительные карты затенения (ambient occlusion) к изображению. Интерфейс не совсем интуитивно понятный.

Кстати карты нормалей ssbump также можно запечь и в xNormal .

x Нормальный

xNormal представляет собой приложение для запекания различных карт с высокополигональной 3D модели на низкополигональную, включая закпекание карт нормалей, карт высот, диффузных текстур (Альбедо), карт затенения / освещения (Окклюзия окружающей среды), изогнутая карта нормалей (карты нормалей с самозатенением), PRTpn, карта выпуклости, карта толщины, карта близости, карта полости, каркас и сбой лучей, карта направления (карта смещения вектора), карта нормалей радиосити (карта нормалей с запеченным освещением), цвета вершин хайполи модели, карта кривизны, карты прозрачности (полупрозрачность) карта), производная карта (карты нормалей в визу объекта).

На рисунке показано меню настроек запекания в xNormal.

Имеется предпросмотр модели в трехмерном изображении в выбранном разрашении, причем как ее версия highpoly, так и lowpoly с наложения карты нормалей, текстуры, карты затенений, карты отражений (отражать текстуру), текстуры блеска / глянцевости (текстура глянца), карты свечения ( эмиссионная текстура), карты отражений (Reflect texture) и карты глобального освещения (DiffuseGI texture).

Кстати, xNormal поддерживает контроллер Xbox360 для навигации по сцене в окне предпросмотра, достаточно лишь включить его в настройках предпросмотра.

На рисунке показано окно настройки предпросмотра 3D модели в приложении xNormal.

Хватает и настроек в самом окне просмотра.

На рисунке показано окно визуализации загруженной в xNormal 3D-модели и варианты ее отображения в окне 3D-просмотра: с отображением направления нормалей, карты нормалей, сетки и т.д.

В программе также имеется возможность вращения 3D модели и источника света.

На рисунке 3D из игры Diablo3, созданная Самуэль Аршлевон для конкурса Blizzard 2006.

Помимо работы с 3D моделями приложение xNormal включает в себя набор утилит для работы с изображениями / текстурами. Набор утилит (вкладка Tools в меню справа), входящий в состав xNormal позволяет превратить высотную карту в карту нормалей (чтобы загрузить высотную карту, перетащите в левое окно карту высот и щелкните Правой Кнопкой Мыши на окне, после чего в выпадающем меню выберите вкладку « Generate» ), карту нормалей в карту полости, фото — в карту нормалей, карты высот — в карты окклюзии, карту высот — в карту конуса, сгенерировать карту затенений / освещений, включая карту окружающего куба, а также включает конвертер 3D моделей из одного формата в другой, включая сетку.xNormal также включает в себя Конвертер касательного пространства объекта (нужна лоуполи модель для преобразования тангенциальных карт нормалей в карты нормалей в объекте и обратно, для чего вам понадобится 3D модель), а также включает калькулятор расстояния луча.

На рисунке показан набор инструментов / утилит xNormal.

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

Некоторые утилиты xNormal доступны в плагине для Фотошопа , например, создание карт затенений и карт нормалей из карты высот . Плагин позволяет нормализовывать карты нормалей и создавать Cavitymaps (Размещать для имитации грязи в углублениях) из карты нормалей.

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

Есть и фильтр для расширения краев изображений / текстур « Dilation » (Filter-> xNormal-> Dilation), по сути являющийся аналогом Margin в Blender’е (выставляется в параметрах запекания карт « Bake») .

Помните Dilate Many из набора AlphaUtility. атн. zip для создания альфа канала для листьев, работа с описанием в статье «Как импортировать альфа-текстуры?» руководства пользователя?

На рисунке показан результат работы фильтра Расширение из набора xNormal для Photoshop.

Плагин normalmap для GIMP

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

Плагин normalmap после загрузки репозитория Google доступен в GIMP во вкладке главного меню Filters-> Map-> NormalMap (Фильтры-> Карта-> NormalMap).

Как и его плагин обладает необходимыми настройками для качественных карт нормалей.

На рисунке показан плагин normapmap для GIMP.

Как и описанный выше плагин NVIDIA Texture Tools, данный плагин по умолчанию карту нормалей с инвертированным зеленым каналом, а, следовательно, его необходимо инвертировать для импорта в Unity3D.

Данный плагин также предлагает пристойный предпросмотр создаваемой карты нормалей в 3D-модели на одной из пяти 3D-моделей-примитивов: плоскости, кубе, сфере, торе и знаменитом «максовском» чайнике Юта / Ньюэлла (хотя, если честно, я ожидал увидеть здесь Blender ‘) овскую Сюзанну).

На рисунке показан затекстурированный чайник Юта / Ньюэлла в окне 3D предпросмотра созданной карты.

Smartnormal

Заканчивая обзор Покупаю утилит, плагинов и приложений для создания карт нормалей (и не только), хотелось бы рассказать еще об одном онлайн приложении. Smartnormal представлен в двух версиях — более поздней Smartnormal 2.0 и Smartnormal 1.0 .

Основным отличием Smart Нормальный 1.0 от второй версии является возможностью выбора фильтра, который будет использован для создания карты нормалей: упомянутый выше Собель и Сжатый . Судя по приложениям разработчиков от февраля 2009 года, данный генератор карт нормалей был (или и сейчас) доступен в виде плагина для After Effects и Photoshop , но требует предустановленного плагина Pixel Bender.

На рисунке текстура и карта нормалей, сгенерированная для нее в онлайн генераторе карт нормалей Smart Normal (Умная Норма).

В данной версии приложения карты нормалей по умолчанию с инвертированым Красным ( R) каналом (как в Normalmap Online , описанном выше), так что не забудьте его «обратить» в веру Unity3D. Количество настроек — минимально: Сила ( Bias ), Размытие ( Blur ), возможность инвертирования исходного изображения ( Invert source ) и возможность инвертирования Зеленого ( G) / или Красного ( Р) каналов.

В SmartNormal версии 2.0 инвертировать каналы уже не нужно, но можно, если очень хочется, например, если вы хотите использовать новую карту нормалей в 3 dsMax . Отличительной особенностью данной версии является поддержка изображений размером 8192 * 8192 пикселей, сохранение результата без компрессии изображения (в несжатом виде). Реализация на WebGL с поддержкой вычислений на GPU .

На рисунке показано окно онлайн приложения SmartNormal версии 2.0 для создания карты нормалей из карты высот / текстур.

CrazyBump

Приложение CrazyBump отличается создать карты нормалей, карты отражения, карты затенения, карты с размером с расширенными настройками для каждой из карт. Данное приложение относится к удобным для пользователя приложениям, поскольку позволяет использовать и мощным интерфейсом, а также позволяет сохранить / экспортировать все созданные карты одним кликом мыши (конечно существует возможность сохранить каждую карту по отдельности).По умолчанию CrazyBump создает карту нормалей с инвертированной осью Y (в приложении — « Y- axis Down »), однако в меню настроек вы легко сможете это исправить, изменив параметр « Normal map y- ось »со значением« Вниз »на значения« Вверх ». Приложение также умеет работать с альфа каналом, сохраняя смещение в альфа-канале карты нормалей. И, что очень важно, особенно для создания ландшафта, которому посвящена отдельная серия статей, CrazyBump умеет карту с нарушением с 16-битной точностью .Но карта высот с 16-битной точностью может быть сохранена лишь в формате TIFF , в то время как с отсутствием точности в 16 бит вам становится доступно более 30 форматов , включая JPEG и PNG , включая формат Фотошопа PSD , RAW , TIFF64 и даже GIF и ICO . А еще CrazyBump умеет изображения в градациях серого, выбирать качество и глубину цвета (битность) сохраняемого изображения, и много чего еще.

На рисунке показан основной интерфейс программы CrazyBump с созданными картами исходной текстуры, а также показано меню настроек, окно 3D-просмотр и меню параметров сохранения.

Помимо своих основных функций по превращению карт высот и изображений в карты отражений, с ущербом, нормалей и карты затенений, приложение CrazyBump обладает функционалом конвертера изображений. Вы всегда можете загрузить в него свое изображение, чтобы на выходе получить изображение в практически любом существующем формате.Помимо сохранения в файле, данное приложение обладает возможностью сохранения из выбранных карт в буфер обмена, как если бы вы использовали «Snip» от Microsoft (в Snipe , вам еще нужно выполнить интересующую область копирования или щелкнуть мышью на активном окне программы. , чтобы сделать скриншот).

В данном приложении также существует возможность использовать как вспомогательные примитивы (шар, колонну, ролик, ящик), так и загрузить свою 3 D модель .

Настоящее приложение — платное, но ценовая политика — крайне гибкая, поскольку для студентов и индии-разработчиков автор идет навстречу по личной договоренности может разрешить использовать приложение по лицензии « CrazyBump для студентов », купленную за 49 долларов США в коммерческих целях. Если же вы хотите заполучить себе копию CrazyBump на одно лицо (один компьютер), а ваш годовой доход или годовой доход вашей компании не превышает 200.000 долларов, то вам останется лишь выложить за этот «аппарат» 99 долларов.Если вы давно зарабатываете более 200 тысяч долларов в год или доход вашей компании, хотя бы на доллар превысил уровень планку, то вам остается лишь выложить 299 долларов за одну копию данного приложения.

Crazy Bump также позволяет инвертировать загруженное изображение, а также смешивать карты нормалей . Об инвертировании изображения я уже сказал выше, а вот смешиванию карт нормалей будет посвящена отдельная статья.

Потрясающий удар

Следующей программой в списке генератором карт является

AwesomeBump.Для того чтобы создать карту нормального в данном приложении изображения, например, Albedo (диффузной) текстуры или карты высот, его необходимо загрузить. Переходим в работу с диффузной картой, открыв соответствующую вкладку « Diffuse », затем ставим флаг напротив опции Включить preview , загрузить текстуру, разрушить на иконку дискетки и выбрав вашу диффузную карту или карту высот. Теперь осталось лишь нажать на кнопку « Convert to N H », чтобы создать карту нормалей (а также карту отражений, карту высот и карту освещения / затенения) из вашего изображения.В окне предпросмотра 3D примитиву автоматически была создана созданная карта нормалей. Чтобы снять отображение карты нормалей, снимите флаг напротив опции « Включить превью ».

Хотите больше? Перетащите какую-нибудь текстуру на ту же самую иконку дискеты, и вы получите возможность лицезреть загруженную текстуру на 3D примитиве, наложенную поверх созданной карты нормалей.

На рисунке показан интерфейс программы Awesome Bump создания карты нормалей из текстуры.

Можно подвигать источник света в окне 3D предпросмотра (удерживать Среднюю Клавишу Мыши перемещайте мышь в окне с 3D примитивом).

Если вы хотите посмотреть, как будет выглядеть текстура на вашей 3D модели, то вам достаточно нажать кнопку “ 3 D settings ” на окном 3D предпросмотра модели, после чего нажмите кнопку “ Load OBJ Mesh ”и выбрать свою 3D модель в формате OBJ . Awesome Bump Не понимает 3D модели без УФтки!

При некотором умении данный инструмент станет вам незаменимым помощником в создании 3D контента для игр.

В следующей части статьи будет рассказано про Создание карты высот из текстуры и рисование карты высот для текстуры

Автор: Максим Голдобин

[email protected]

Просмотры сообщений: 41 264

.

Дисплейсмент или как сделать идеальную карту.

«Очень часто при создании карт вытеснения (вытеснения) мы сталкивались с проблемой шумов и методов их подавления. Часто есть желание рисовать карты вручную, но оказывается способ быстро побороть себя.

В Фотошопе есть очень полезная функция Вырез. Именно с ее помощью упрощенного процесса создания аккуратных карт для displacement .Автор урока рассматривает этод метод на примере создания карты смещения для куска скалы. »

Читать дальше…

Оригинальное название: Учебник: Perfect Displacement map

Автор: Чиро Саннино

Перевод: Василий Чабан

Язык: русский

Тип: текстовый

Источник: bitrateqz.blogspot.com

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

Большое спасибо Василию за перевод.

__________

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

Теги: смещение, текстурирование, текстуры

Было интересно? Смотри еще …

.

No related posts.