LuxSims

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » LuxSims » Туториалы » Создание паттернов/стилей


Создание паттернов/стилей

Сообщений 1 страница 3 из 3

1

Создание индивидуального узора для The Sims 3

Этот руководство поможет вам создать индивидуальный узор, отредактировать нужное вам изображение и загрузить его в программе Delphy's Pattern Packager.
Ниже приведены инструкции как отредактировать ваше изображение так, чтобы у вас была возможность изменять цвета.
Пожалуйста, помните, вы не сможете просто загрузить или импортировать картинку без редактирования ее. У вас должно получиться разделенное по цветам изображение, так, чтобы вы смогли перекрасить каждую часть изображения.
Тут нет «легкого» пути – это не работает. Создание индивидуального узора – это процесс требующий много времени, сил и, в немалой степени, сосредоточенности. НЕВОЗМОЖНО использовать старые текстуры или импортировать их просто так. Это не будет работать. Сделав несколько узоров самостоятельно я могу сказать почему разработчики не предоставили нам никаких инструментов для создания текстур – это не быстро и не легко.
Поэтому, если вы скажете: «Боже, это выглядит так сложно, почему я не могу просто загрузить мою картинку» я приду к вам домой и завалю ваш компьютер грязными носками!

Уровень сложности
Вам понадобится солидные знания в области обработки векторных изображений. Я расскажу вам, как настроить слои и каналы изображения и прочее, но я НЕ БУДУ учить вас как пользоваться редакторами векторных изображений.Если вы не умеете пользоваться Adobe Illustrator или Inkscape – Google вам в помощь.

Что вам понадобится:
- Векторный редактор Adobe Illustrator (платно) или  Inkscape (бесплатно).
- Растровый редактор Adobe Photoshop (платно) или The Gimp (бесплатно).
- DDS плагин для растрового редактора (Photoshop или The Gimp.) Оба плагина бесплатны.
- Delphy's Pattern Packager и .NET Framework 3.5 для того, чтобы это работало.
- Изображение или хорошую идею, которую вы хотите использовать для своего узора. Но помните, что не все рисунки так легко превратить узоры для игры.

Руководство

http://s60.radikal.ru/i168/0906/80/acf39c5ad039.jpg

Преобразуйте растровое изображение в векторное
Это самая трудоемкая и продолжительная часть работы. Для некоторых изображений, возможно, и существует более легкий путь, но для геометрически сложных узоров наиболее оптимально подходит описанный ниже процесс
Вы можете пропустить эту часть только если ваше изображение одноцветное, например как текстура ткани или дерева.
Для демонстрации процесса я буду использовать четырехцветный узор в Adobe Illustrator. Вы можете создавать ваши узоры с любым количеством цветов – от одного (самое простое) до четырех (самое сложное).
Я создаю узор, используя ретро-текстуру, найденную на Shutterstock. Как вы можете видеть – она содержит больше, чем 4 цвета, но я упрощу ее в процессе.

Шаг 1 – импорт изображения
Импортируйте изображение в свой векторный редактор. Мне понадобится маленькая часть картинки, достаточная для того, чтобы перевести ее в векторный формат.

http://s54.radikal.ru/i143/0906/f3/2bc67e13c5af.jpg

Шаг 2 – перевод в векторный формат.
Я опущу много мелкой и нудной работы, потому что каждый узор будет нарисован по-своему, так как вам удобно, и в этом руководстве я не буду учить вас КАК рисовать векторные узоры. Вы должны отрисовать все линии, стараясь упростить рисунок узора. Финальный размер текстуры составляет 256х256 pix, поэтому не увлекайтесь созданием большого количества мелких деталей. Помните, что у вас будет максимум 4 цвета для работы.
Отлично – у вас получилось. Итак – мы имеем все базовые элементы вашего будущего узора в векторе. Не волнуйтесь, если они выглядят слегка коряво – никто не увидит вашего оригинала, только текстуру. Сгруппируйте все части изображения, продолжая работать.

http://i054.radikal.ru/0906/33/ad981627f801.jpg

Шаг3 – определитесь с цветами
Все, что нужно в этом пункте работы – определиться с цветами будущего узора. Если вы собираетесь сделать очень простой узор – делайте, но чем сложнее рисунок, – тем легче все окажется впоследствии.
Неважно, какие цвета вы выберите, не используйте больше 4. И постарайтесь сделать так, чтобы разница между ними была заметна невооруженным глазом. Вы можете определить более светлые и более темные оттенки одного цвета, как сделаю это я, далее я объясню, как обращаться с этим.
Итак – у меня присутствуют белый, горчично-желтый, красный, светло-синий и темно-синие цвета.

http://s55.radikal.ru/i147/0906/43/a9db0fff9f21.jpg

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

http://s55.radikal.ru/i148/0906/d5/2f79d44ad925.jpg

Перевод изображения из векторного в растровое
После того, как вы закончили работать в векторном формате изображение надо перевести в растр

Шаг 5. Разделение цветов.
Теперь наступает самый нудный и утомительный момент – разделение цветов вашего паттерна на черный, белый и серый.
Важное замечание, прежде чем мы приступим – правильное расположение слоев очень важно. Красный должен быть внизу, зеленый над ним, синий над зеленым, и слой альфа на самом верху. Цвета могут находить друг на друга.

http://s53.radikal.ru/i139/0906/85/98a54ce1d0ac.jpg

Начнем с моего белого цвета. Я собираюсь сделать белый цвет – белым, и все остальные мои цвета должны стать черным.
Теперь я должен сохранить результат, как растровое изображение Я нашел самый быстрый путь - я делаю скриншот используя PrintScreen, и вставляю его в новый слой в Photoshop. Если вы будете поступать так же, как я, помните, что в Иллюстраторе (или других программах, которыми вы пользуетесь) нельзя приближать изображение или двигать его – вы рискуете, что изображение в Photoshop просто не совпадет.

http://s49.radikal.ru/i123/0906/f7/7afcda5316d7.jpg

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

http://s47.radikal.ru/i116/0906/b7/8ee13d971edc.jpg

Снова отменить все перекраски и повторить всю процедуру для красного. Красный становится белым, а все остальное – черным. Скриншот, и вставить в новый слой в Photoshop.

http://s59.radikal.ru/i166/0906/e0/16cb8ebe3f92.jpg

И наконец, синий. Если вы заметили – у меня в узоре присутствуют 4 оттенка синего – светлый, средний, темноватый и темный. Теперь все, что не является синим – я делаю черным. Затем я перевожу оттенки синего в полутона – самый светлый будет белым,
а остальные оттенки я перевожу в шкалу черно-белого. Средний – 20% черного, темноватый – 30% черного и темный 30%.
Скриншот, и вставить в новый слой в Photoshop.

http://s47.radikal.ru/i115/0906/22/d84b9904e99b.jpg

Итак – у вас должно было получиться 4 слоя над слоем Background, содержащие различные комбинации цветов, являющиеся белым/оттенки серого.

Шаг 6 – Заканчиваем работу
Берите свой файл, содержащий 4 слоя и сделайте его бесшовным – обрезая его, или делая то, что вам нужно. Убедитесь, что изменения вы применили ко всем слоям одновременно. Лучший способ убедиться в том, что ваша текстура правильно повторяется: Photoshop – меню: Filter – Other – Offset.

http://s52.radikal.ru/i137/0906/0d/057b1492c9fd.jpg

Измените размер вашего файла так, чтобы он составлял 256х256 pix. Если вы используете Photoshop убедитесь в том, что во время изменения размера у вас включен параметр Bilinear иначе вы рискуете получить неприятный ореол вокруг границ изображения, что будет видно в игре. Все в порядке, если вы видите, что ваше изображение слегка искажено – если это не идеально квадратное изображение - при создании мозаики никто не увидит ваших огрехов.

http://s53.radikal.ru/i142/0906/49/d130d6733095.jpg

Пришло время собрать четыре части в каналах. Создайте новый файл размером 256х256 pix. И вызовите закладку Channels (каналы) наверх. Если вы делаете четырехцветный узор добавьте новый канал - alpha1.
Если вы пользуетесь программой Gimp: Colors - Components – Decompose, чтобы разложить ваше изображение на четыре канала.
Теперь скопируйте каждый слой вашего узора и вставьте содержимое в разные каналы в новом файле. Помните – если для вашей текстуры порядок слоев очень важен – внизу должен быть красный, alpha сверху.
Если вы пользуетесь Gimp, ситуация немного другая – разложив изображение на каналы, вы можете вставить различные рисунки только в качестве новых слоев и затем переименовать их в красный, зеленый, синий или alpha. Вы не можете вставить изображение непосредственно в канал.

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

Если вы используете Gimp: Colors - Components – Compose чтобы склеить все слои в один, и не удивляйтесь, если картинка будет выглядеть странно. Gimp и не на такое способен.

Теперь сохраните результат, как файл формата DDS.

http://s52.radikal.ru/i138/0906/be/7e546632966b.jpg

В появившемся окне измените верхний ползунной на 8.8.8.8 ARGB. Это один из нескольких форматов, которые работают (так же можно использовать формат DXT), но он дает наилучшее качество. На всех остальных форматах заметны серьезные проблемы с качеством.
Если вы пользуетесь Gimp поставьте значения сжатия на None, Format поставьте Default и нажмите Generate Mipmap. Если вы получите сообщение об ошибке просто проигнорируйте его.

Запаковываем файлы
Теперь ваш файл готов для использования в игре.

Шаг 7 – пакуем узор
Скачайте Delphy's Pattern Packager. Если вы пользуетесь этой программой впервые – прочитайте лицензионное соглашение, введите имя, под которым вы будете работать и нажмите I Agree.
Откройте File - New Pattern для того, чтобы создать новый узор. Введите URL вашего сайта под вашим именем.
Введите название узора и описание и решите в какой категории и на каком типе поверхностей он будет использоваться в игре. По мнению разработчиков тип поверхностей содержит звук, если узор используется для покрытия пола. Отнеситесь к выбору сознательно.
Кликните кнопку Browse и выберите ваш файл DDS. Теперь выберите количество цветов, которые вы хотите использовать в игре в закладке "number of recolourable palettes".Я выбрал 4. Это разблокирует палитру цветов ниже.
Вы можете проигнорировать Background Filler палитру в большинстве случаев, она используется для областей красного канала (background) где изображение отсутствует, но в то же время цвет Background Filler не может быть изменен во время игры.
Вы можете назначить палитру по умолчанию для вашего узора в закладке Palette 1-4. 1 – соответствует красному, 2 – зеленому, 3 – синему и 4 – Alpha. Помните, что изображение вашей текстуры останется неизменным, если вы хотите увидеть изменения, то лучше сделайте это в вашему векторном редакторе или сохраните с любыми цветами, проверьте какой цвет лучше во время игры и сохраните позже. Вы всегда можете скопировать числовые значения палитры RGB в пустые поля закладки «palette»
Оставьте галочку напротив «use default specular map» и снимите напротив "make this pattern a decal".
Теперь - File - Save As и сохраните свой файл под любым именем. Оставьте Pattern Packager открытым, если вы хотите внести какие-то изменения позже.

http://s61.radikal.ru/i174/0906/ec/5b2d18865f71.jpg

Шаг 8 - тест
Чтобы заставить наш узор работать в игре вам понадобится следующие инструкции: Sims 3:Installing Package Files , а затем поместите ваше изображение в папку: Mods\Packages так, как сказано в инструкции.
Загрузите игру, выберите дом или создание персонажа. Найдите категорию, в которой находится ваш узор. Если все правильно – вы должны увидеть результат своей работы. Если же такового не произошло – вернитесь и проверьте правильность выполнения всех шагов.
К примеру я решил, что все будет работать лучше, если я сделаю свой красный канал абсолютно белым, так, чтобы линии красного канала отображались в тех местах, где отсутствуют другие каналы. В некоторых случаях – это здорово работает. Если вы захотите изменить цвета вашей палитры в процессе тестирования, то самым простым способом будет загрузить игру, выбрать там цветовую схему, соответствующую вашему узору, затем скопировать числовые значения в Pattern Packager и сохраниться заново.

http://i082.radikal.ru/0906/11/81b58c2edadb.jpg

miXei.ru

2

Как сделать паттерн из растрового изображения

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

1) Размножьте свой узор так, чтобы он представлял правильно повторяющуюся мозаику. У вас должен получиться квадрат 256x256 pixels

http://s42.radikal.ru/i098/0906/b0/f7ed7c10d25b.jpg

2) Это то изображение, с которого я начну. Большей частью я буду работать в полутоновом, так что нам надо обесцветить изображение (команда Image>Adjustments>Desaturate) Если мне повезет, то у меня получится хорошо различимый узор и я сразу могу перейти к пункту №6. Но, если же у вас получилось что-то похожее на это:

http://s58.radikal.ru/i159/0906/ea/9c20ade35449.jpg

Мне понадобится вернуться назад.

3) Отменяйте обесцвечивание. Необходимо увеличить контраст изображения до того, как его обесцвечивать. Начнем увеличивать контраст с помощью кривых (Image>Adjustments>Curves)

http://s57.radikal.ru/i157/0906/38/57615365da28.jpg

Стало немного лучше, но все равно необходимо внести изменения в сам цвет.

4) Для этого я выбрал метод замены цвета (Image>Adjustments>Replace Color). Возьмите инструмент пипетка и выберите цвет, который будет изменен. Я выбрал серый цвет и внизу панели я подвинул ползунок уровня света, чтобы затемнить изображение. Попробуйте подвигать верхние ползунки, если изменения не достаточны или избыточны

http://i027.radikal.ru/0906/4a/f5a6835bf3dc.jpg

Ту же самую операцию я повторил и для желтого цвета.

http://s55.radikal.ru/i148/0906/f8/cfc91f5cae6d.jpg

5) Теперь, как мне кажется, контраста достаточно. Обесцветим изображение (см. пункт№2)

6) Теперь переходим к разделению цветов. Для начала дублируйте слой.
Теперь, с выделенным слоем откройте меню уровней (Image>Adjust>Levels)

http://s42.radikal.ru/i096/0906/ff/0f9cba390fd5.jpg

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

http://s50.radikal.ru/i128/0906/db/9a9a91883e09.jpg

7) Я закончил делать свой первый канал. Но сейчас я покажу вам один маленький трюк. Если я повторю шаг №6, чтобы выделить серый, то как светлый серый так и серый станут белыми, но мне это не надо. Мне нужно убрать светлые тона из моего узора.
Возьмем волшебную палочку (magic wand) и установим значение tolerance на 0. Щелкнем на черную область моего узора. Теперь выберем похожие области (Select>Similar) и инвертируем их (Select>Inverse). Выключив мой первый слой, мы увидим наш полутоновой оригинал. Он должен выглядеть как-то так:

http://s57.radikal.ru/i158/0906/24/9c7343c0777c.jpg

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

8) Возьмем инструмент карандаш, выставим его на большой размер и зададим черный цвет. Я провожу по слою несколько раз, так что исключая выделенные области все закрашивается черным. Снимаем выделение (Selection>Deselect)

9) Открываем панель уровней и двигаем ползунки как мы делали это, чтобы выделить средний тон серого.

http://s46.radikal.ru/i112/0906/ef/b276d0339d2e.jpg

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

http://s48.radikal.ru/i121/0906/d9/0e5fea816ca5.jpg

Если же у вас более трех цветов, вы должны повторить шаг 7, 8 и 9 для каждого отдельно взятого цвета.

11) Последним цветом должен стать белый. Чисто белый цвет.

12) Теперь мне хотелось бы понять, выглядят ли эти каналы, так, как я хочу.
Очень просто сделать тест в photoshop. Первым делом я выключаю все слои на которых работал. Теперь выбираем инструмент перо или прямоугольник. Опции для выбранных инструментов должны быть настроены следующим образом:

http://s42.radikal.ru/i098/0906/a3/b947bebcc311.jpg

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

http://s54.radikal.ru/i144/0906/82/8b9cf4ce1cdc.jpg

13) Посмотрите, у меня получились три новых слоя с прямоугольниками масок (рядом со слоем). Я беру каждый прямоугольник маски и отправляю их в корзину. Каждый раз программа будет уточнять – хочу ли я удалить векторную маску. Я говорю – да. Теперь панели слоев выглядят так:

http://s53.radikal.ru/i142/0906/fc/199ab6bcae32.jpg

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

http://s45.radikal.ru/i107/0906/4d/7bfbad16535b.jpg

15) Теперь мне надо скопировать и вставить каждый канал в отдельную маску слоя. Включим наши слои (у нас не будет возможности увидеть их, потому что в моем документе новые слои находятся сверху, но это нормально) Выбиреам самый верхний слой, нажимаем ctrl+A, для того, чтобы выделить все и ctrl+C, для того, чтобы все скопировать. Выбираем маску самого верхнего слоя с помощью alt+щелчок (квадрат справа). Теперь нажмаем ctrl+V – чтобы вставить мой верхний канал в маску. Повторим эту операцию и для остальных слоев. Конечный результат должен выглядеть таким образом:

http://s59.radikal.ru/i164/0906/00/fe9b2e763119.jpg

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

http://s50.radikal.ru/i129/0906/1c/fffe8be13246.jpg

17) Если результат вас не удовлетворяет, попробуйте поэкспериментировать с кривыми. Если края орнамента выглядят грубо, попробуйте воспользоваться фильтром (Filters>Noise>Reduce Noise).
Если все получилось – уменьшите свое изображение до размера 256x256. Теперь можно использовать полученное изображение для создания игрового паттерна.
Сохраните свой файл, как это сказано в этом руководстве:
Вуаля, ваш узор готов.

miXei.ru

3

MYЗА, не подскажешь как быть но у меня ни в Adobe Photoshop , ни в The Gimp нет формата DDC при сохранении.
Вопрос отпадает. Прочла начало внимательнее, скачала плагин и всё появилось.

Отредактировано Dyn`ka (2009-06-26 23:40:48)


Вы здесь » LuxSims » Туториалы » Создание паттернов/стилей