Создание индивидуального узора для The Sims 3
Оригинальное руководство находится тут
Перевод: Juuuulia / mixei.ru
Это руководство поможет вам создать индивидуальный узор, отредактировать нужное вам изображение и загрузить его в программе Delphy's Pattern Packager.
Ниже приведены инструкции как отредактировать ваше изображение так, чтобы у вас была возможность изменять цвета.
Пожалуйста, помните, вы не сможете просто загрузить или импортировать картинку без редактирования ее. У вас должно получиться разделенное по цветам изображение, так, чтобы вы смогли перекрасить каждую часть изображения.
Тут нет «легкого» пути – это не работает. Создание индивидуального узора – это процесс требующий много времени, сил и, в немалой степени, сосредоточенности. НЕВОЗМОЖНО использовать старые текстуры или импортировать их просто так. Это не будет работать. Сделав несколько узоров самостоятельно я могу сказать почему разработчики не предоставили нам никаких инструментов для создания текстур – это не быстро и не легко.
Поэтому, если вы скажете: «Боже, это выглядит так сложно, почему я не могу просто загрузить мою картинку» я приду к вам домой и завалю ваш компьютер грязными носками!
Уровень сложности
Вам понадобится солидные знания в области обработки векторных изображений. Я расскажу вам, как настроить слои и каналы изображения и прочее, но я НЕ БУДУ учить вас как пользоваться редакторами векторных изображений.Если вы не умеете пользоваться Adobe Illustrator или Inkscape – Google вам в помощь.
Что вам понадобится:
1. Векторный редактор Adobe Illustrator или Inkscape
2. Растровый редактор Adobe Photoshop или The Gimp
3. DDS плагин для растрового редактора ( Photoshop или The Gimp )
4. Delphy's Pattern Packager и .NET Framework 3.5 для того, чтобы это работало.
5. Изображение или хорошую идею, которую вы хотите использовать для своего узора. Но помните, что не все рисунки так легко превратить узоры для игры.
Руководство.
Преобразуйте растровое изображение в векторное
Это самая трудоемкая и продолжительная часть работы. Для некоторых изображений, возможно, и существует более легкий путь, но для геометрически сложных узоров наиболее оптимально подходит описанный ниже процесс
Вы можете пропустить эту часть только если ваше изображение одноцветное, например как текстура ткани или дерева.
Для демонстрации процесса я буду использовать четырехцветный узор в Adobe Illustrator. Вы можете создавать ваши узоры с любым количеством цветов – от одного (самое простое) до четырех (самое сложное).
Я создаю узор, используя ретро-текстуру, найденную на Shutterstock. Как вы можете видеть – она содержит больше, чем 4 цвета, но я упрощу ее в процессе.
Шаг 1 – импорт изображения
Импортируйте изображение в свой векторный редактор. Мне понадобится маленькая часть картинки, достаточная для того, чтобы перевести ее в векторный формат.
Шаг 2 – перевод в векторный формат.
Я опущу много мелкой и нудной работы, потому что каждый узор будет нарисован по-своему, так как вам удобно, и в этом руководстве я не буду учить вас КАК рисовать векторные узоры. Вы должны отрисовать все линии, стараясь упростить рисунок узора. Финальный размер текстуры составляет 256х256 pix, поэтому не увлекайтесь созданием большого количества мелких деталей. Помните, что у вас будет максимум 4 цвета для работы.
Отлично – у вас получилось. Итак – мы имеем все базовые элементы вашего будущего узора в векторе. Не волнуйтесь, если они выглядят слегка коряво – никто не увидит вашего оригинала, только текстуру. Сгруппируйте все части изображения, продолжая работать.
Шаг3 – определитесь с цветами
Все, что нужно в этом пункте работы – определиться с цветами будущего узора. Если вы собираетесь сделать очень простой узор – делайте, но чем сложнее рисунок, – тем легче все окажется впоследствии.
Неважно, какие цвета вы выберите, не используйте больше 4. И постарайтесь сделать так, чтобы разница между ними была заметна невооруженным глазом. Вы можете определить более светлые и более темные оттенки одного цвета, как сделаю это я, далее я объясню, как обращаться с этим.
Итак – у меня присутствуют белый, горчично-желтый, красный, светло-синий и темно-синие цвета.
Шаг 4 - мозаика
Есть много способов для того, чтобы ваш узор правильно складывался в мозаику прямо в векторном редакторе, но я нашел самый быстрый для себя вариант - сделать большой кусок рисунка и обрезать его позже. Если вы решите использовать программные возможности вашего векторного редактора – тут хорошее руководство ( good tutorial )
Перевод изображения из векторного в растровое
После того, как вы закончили работать в векторном формате изображение надо перевести в растр.
Шаг 5. Разделение цветов.
Теперь наступает самый нудный и утомительный момент – разделение цветов вашего паттерна на черный, белый и серый.
Важное замечание, прежде чем мы приступим – правильное расположение слоев очень важно. Красный должен быть внизу, зеленый над ним, синий над зеленым, и слой альфа на самом верху. Цвета могут находить друг на друга.
Начнем с моего белого цвета. Я собираюсь сделать белый цвет – белым, и все остальные мои цвета должны стать черным.
Теперь я должен сохранить результат, как растровое изображение Я нашел самый быстрый путь - я делаю скриншот используя PrintScreen, и вставляю его в новый слой в Photoshop. Если вы будете поступать так же, как я, помните, что в Иллюстраторе (или других программах, которыми вы пользуетесь) нельзя приближать изображение или двигать его – вы рискуете, что изображение в Photoshop просто не совпадет.
Отмените все перекраски и теперь сделаем желтый цвет. Желтый цвет красим белым, а все остальное – черным. И опять – скриншот, и вставить в новый слой в Photoshop.
Снова отменить все перекраски и повторить всю процедуру для красного. Красный становится белым, а все остальное – черным. Скриншот, и вставить в новый слой в Photoshop.
И наконец, синий. Если вы заметили – у меня в узоре присутствуют 4 оттенка синего – светлый, средний, темноватый и темный. Теперь все, что не является синим – я делаю черным. Затем я перевожу оттенки синего в полутона – самый светлый будет белым,
а остальные оттенки я перевожу в шкалу черно-белого. Средний – 20% черного, темноватый – 30% черного и темный 30%.
Скриншот, и вставить в новый слой в Photoshop.
Итак – у вас должно было получиться 4 слоя над слоем Background, содержащие различные комбинации цветов, являющиеся белым/оттенки серого.
Шаг 6 – Заканчиваем работу
Берите свой файл, содержащий 4 слоя и сделайте его бесшовным – обрезая его, или делая то, что вам нужно. Убедитесь, что изменения вы применили ко всем слоям одновременно. Лучший способ убедиться в том, что ваша текстура правильно повторяется: Photoshop – меню: Filter – Other – Offset.
Измените размер вашего файла так, чтобы он составлял 256х256 pix. Если вы используете Photoshop убедитесь в том, что во время изменения размера у вас включен параметр Bilinear иначе вы рискуете получить неприятный ореол вокруг границ изображения, что будет видно в игре. Все в порядке, если вы видите, что ваше изображение слегка искажено – если это не идеально квадратное изображение - при создании мозаики никто не увидит ваших огрехов.
Пришло время собрать четыре части в каналах. Создайте новый файл размером 256х256 pix. И вызовите закладку Channels (каналы) наверх. Если вы делаете четырехцветный узор добавьте новый канал - alpha1.
Если вы пользуетесь программой Gimp: Colors - Components – Decompose, чтобы разложить ваше изображение на четыре канала.
Теперь скопируйте каждый слой вашего узора и вставьте содержимое в разные каналы в новом файле. Помните – если для вашей текстуры порядок слоев очень важен – внизу должен быть красный, alpha сверху.
Если вы пользуетесь Gimp, ситуация немного другая – разложив изображение на каналы, вы можете вставить различные рисунки только в качестве новых слоев и затем переименовать их в красный, зеленый, синий или alpha. Вы не можете вставить изображение непосредственно в канал.
Когда вы вставили все изображения, то при взгляде на RGB канал картинка может выглядеть несколько странной. Вы можете ничего не разглядеть в канале alpha. Переключитесь между каналами, чтобы удостовериться, что у вас все настроено
правильно.
Если вы используете Gimp: Colors - Components – Compose чтобы склеить все слои в один, и не удивляйтесь, если картинка будет выглядеть странно. Gimp и не на такое способен.
Теперь сохраните результат, как файл формата DDS.
В появившемся окне измените верхний ползунной на 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 открытым, если вы хотите внести какие-то изменения позже.
Шаг 8 - тест
Чтобы заставить наш узор работать в игре вам понадобится следующие инструкции: Sims 3:Installing Package Files , а затем поместите ваше изображение в папку: Mods\Packages так, как сказано в инструкции.
Загрузите игру, выберите дом или создание персонажа. Найдите категорию, в которой находится ваш узор. Если все правильно – вы должны увидеть результат своей работы. Если же такового не произошло – вернитесь и проверьте правильность выполнения всех шагов.
К примеру я решил, что все будет работать лучше, если я сделаю свой красный канал абсолютно белым, так, чтобы линии красного канала отображались в тех местах, где отсутствуют другие каналы. В некоторых случаях – это здорово работает. Если вы захотите изменить цвета вашей палитры в процессе тестирования, то самым простым способом будет загрузить игру, выбрать там цветовую схему, соответствующую вашему узору, затем скопировать числовые значения в Pattern Packager и сохраниться заново.
Читать на английском: Туториал
Оригинальное руководство находится тут
Перевод: Juuuulia / mixei.ru
Это руководство поможет вам создать индивидуальный узор, отредактировать нужное вам изображение и загрузить его в программе Delphy's Pattern Packager.
Ниже приведены инструкции как отредактировать ваше изображение так, чтобы у вас была возможность изменять цвета.
Пожалуйста, помните, вы не сможете просто загрузить или импортировать картинку без редактирования ее. У вас должно получиться разделенное по цветам изображение, так, чтобы вы смогли перекрасить каждую часть изображения.
Тут нет «легкого» пути – это не работает. Создание индивидуального узора – это процесс требующий много времени, сил и, в немалой степени, сосредоточенности. НЕВОЗМОЖНО использовать старые текстуры или импортировать их просто так. Это не будет работать. Сделав несколько узоров самостоятельно я могу сказать почему разработчики не предоставили нам никаких инструментов для создания текстур – это не быстро и не легко.
Поэтому, если вы скажете: «Боже, это выглядит так сложно, почему я не могу просто загрузить мою картинку» я приду к вам домой и завалю ваш компьютер грязными носками!
Уровень сложности
Вам понадобится солидные знания в области обработки векторных изображений. Я расскажу вам, как настроить слои и каналы изображения и прочее, но я НЕ БУДУ учить вас как пользоваться редакторами векторных изображений.Если вы не умеете пользоваться Adobe Illustrator или Inkscape – Google вам в помощь.
Что вам понадобится:
1. Векторный редактор Adobe Illustrator или Inkscape
2. Растровый редактор Adobe Photoshop или The Gimp
3. DDS плагин для растрового редактора ( Photoshop или The Gimp )
4. Delphy's Pattern Packager и .NET Framework 3.5 для того, чтобы это работало.
5. Изображение или хорошую идею, которую вы хотите использовать для своего узора. Но помните, что не все рисунки так легко превратить узоры для игры.
Руководство.
Преобразуйте растровое изображение в векторное
Это самая трудоемкая и продолжительная часть работы. Для некоторых изображений, возможно, и существует более легкий путь, но для геометрически сложных узоров наиболее оптимально подходит описанный ниже процесс
Вы можете пропустить эту часть только если ваше изображение одноцветное, например как текстура ткани или дерева.
Для демонстрации процесса я буду использовать четырехцветный узор в Adobe Illustrator. Вы можете создавать ваши узоры с любым количеством цветов – от одного (самое простое) до четырех (самое сложное).
Я создаю узор, используя ретро-текстуру, найденную на Shutterstock. Как вы можете видеть – она содержит больше, чем 4 цвета, но я упрощу ее в процессе.
Шаг 1 – импорт изображения
Импортируйте изображение в свой векторный редактор. Мне понадобится маленькая часть картинки, достаточная для того, чтобы перевести ее в векторный формат.
Шаг 2 – перевод в векторный формат.
Я опущу много мелкой и нудной работы, потому что каждый узор будет нарисован по-своему, так как вам удобно, и в этом руководстве я не буду учить вас КАК рисовать векторные узоры. Вы должны отрисовать все линии, стараясь упростить рисунок узора. Финальный размер текстуры составляет 256х256 pix, поэтому не увлекайтесь созданием большого количества мелких деталей. Помните, что у вас будет максимум 4 цвета для работы.
Отлично – у вас получилось. Итак – мы имеем все базовые элементы вашего будущего узора в векторе. Не волнуйтесь, если они выглядят слегка коряво – никто не увидит вашего оригинала, только текстуру. Сгруппируйте все части изображения, продолжая работать.
Шаг3 – определитесь с цветами
Все, что нужно в этом пункте работы – определиться с цветами будущего узора. Если вы собираетесь сделать очень простой узор – делайте, но чем сложнее рисунок, – тем легче все окажется впоследствии.
Неважно, какие цвета вы выберите, не используйте больше 4. И постарайтесь сделать так, чтобы разница между ними была заметна невооруженным глазом. Вы можете определить более светлые и более темные оттенки одного цвета, как сделаю это я, далее я объясню, как обращаться с этим.
Итак – у меня присутствуют белый, горчично-желтый, красный, светло-синий и темно-синие цвета.
Шаг 4 - мозаика
Есть много способов для того, чтобы ваш узор правильно складывался в мозаику прямо в векторном редакторе, но я нашел самый быстрый для себя вариант - сделать большой кусок рисунка и обрезать его позже. Если вы решите использовать программные возможности вашего векторного редактора – тут хорошее руководство ( good tutorial )
Перевод изображения из векторного в растровое
После того, как вы закончили работать в векторном формате изображение надо перевести в растр.
Шаг 5. Разделение цветов.
Теперь наступает самый нудный и утомительный момент – разделение цветов вашего паттерна на черный, белый и серый.
Важное замечание, прежде чем мы приступим – правильное расположение слоев очень важно. Красный должен быть внизу, зеленый над ним, синий над зеленым, и слой альфа на самом верху. Цвета могут находить друг на друга.
Начнем с моего белого цвета. Я собираюсь сделать белый цвет – белым, и все остальные мои цвета должны стать черным.
Теперь я должен сохранить результат, как растровое изображение Я нашел самый быстрый путь - я делаю скриншот используя PrintScreen, и вставляю его в новый слой в Photoshop. Если вы будете поступать так же, как я, помните, что в Иллюстраторе (или других программах, которыми вы пользуетесь) нельзя приближать изображение или двигать его – вы рискуете, что изображение в Photoshop просто не совпадет.
Отмените все перекраски и теперь сделаем желтый цвет. Желтый цвет красим белым, а все остальное – черным. И опять – скриншот, и вставить в новый слой в Photoshop.
Снова отменить все перекраски и повторить всю процедуру для красного. Красный становится белым, а все остальное – черным. Скриншот, и вставить в новый слой в Photoshop.
И наконец, синий. Если вы заметили – у меня в узоре присутствуют 4 оттенка синего – светлый, средний, темноватый и темный. Теперь все, что не является синим – я делаю черным. Затем я перевожу оттенки синего в полутона – самый светлый будет белым,
а остальные оттенки я перевожу в шкалу черно-белого. Средний – 20% черного, темноватый – 30% черного и темный 30%.
Скриншот, и вставить в новый слой в Photoshop.
Итак – у вас должно было получиться 4 слоя над слоем Background, содержащие различные комбинации цветов, являющиеся белым/оттенки серого.
Шаг 6 – Заканчиваем работу
Берите свой файл, содержащий 4 слоя и сделайте его бесшовным – обрезая его, или делая то, что вам нужно. Убедитесь, что изменения вы применили ко всем слоям одновременно. Лучший способ убедиться в том, что ваша текстура правильно повторяется: Photoshop – меню: Filter – Other – Offset.
Измените размер вашего файла так, чтобы он составлял 256х256 pix. Если вы используете Photoshop убедитесь в том, что во время изменения размера у вас включен параметр Bilinear иначе вы рискуете получить неприятный ореол вокруг границ изображения, что будет видно в игре. Все в порядке, если вы видите, что ваше изображение слегка искажено – если это не идеально квадратное изображение - при создании мозаики никто не увидит ваших огрехов.
Пришло время собрать четыре части в каналах. Создайте новый файл размером 256х256 pix. И вызовите закладку Channels (каналы) наверх. Если вы делаете четырехцветный узор добавьте новый канал - alpha1.
Если вы пользуетесь программой Gimp: Colors - Components – Decompose, чтобы разложить ваше изображение на четыре канала.
Теперь скопируйте каждый слой вашего узора и вставьте содержимое в разные каналы в новом файле. Помните – если для вашей текстуры порядок слоев очень важен – внизу должен быть красный, alpha сверху.
Если вы пользуетесь Gimp, ситуация немного другая – разложив изображение на каналы, вы можете вставить различные рисунки только в качестве новых слоев и затем переименовать их в красный, зеленый, синий или alpha. Вы не можете вставить изображение непосредственно в канал.
Когда вы вставили все изображения, то при взгляде на RGB канал картинка может выглядеть несколько странной. Вы можете ничего не разглядеть в канале alpha. Переключитесь между каналами, чтобы удостовериться, что у вас все настроено
правильно.
Если вы используете Gimp: Colors - Components – Compose чтобы склеить все слои в один, и не удивляйтесь, если картинка будет выглядеть странно. Gimp и не на такое способен.
Теперь сохраните результат, как файл формата DDS.
В появившемся окне измените верхний ползунной на 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 открытым, если вы хотите внести какие-то изменения позже.
Шаг 8 - тест
Чтобы заставить наш узор работать в игре вам понадобится следующие инструкции: Sims 3:Installing Package Files , а затем поместите ваше изображение в папку: Mods\Packages так, как сказано в инструкции.
Загрузите игру, выберите дом или создание персонажа. Найдите категорию, в которой находится ваш узор. Если все правильно – вы должны увидеть результат своей работы. Если же такового не произошло – вернитесь и проверьте правильность выполнения всех шагов.
К примеру я решил, что все будет работать лучше, если я сделаю свой красный канал абсолютно белым, так, чтобы линии красного канала отображались в тех местах, где отсутствуют другие каналы. В некоторых случаях – это здорово работает. Если вы захотите изменить цвета вашей палитры в процессе тестирования, то самым простым способом будет загрузить игру, выбрать там цветовую схему, соответствующую вашему узору, затем скопировать числовые значения в Pattern Packager и сохраниться заново.
Читать на английском: Туториал
Последнее редактирование модератором:
