Интерфейс руками - Форум


Правила форума ·

  • Страница 1 из 1
  • 1
Интерфейс руками

Murador

#1
От автора:
Ну перед тем как перейти к созданию своего интерфейса , нужно определиться , что мы хотим, и что получим. Нужно также учесть как мы будем делать, если подумать , то по отдельности редактировать UI получиться жудко криво, и некрасиво. Я возьму интерфейс из карты Hyperblast Arena )). Я беру за основу интерфейс Human.
Что нужно для работы:
Photoshop (желательно CS2)
War3ME (>скачать<)
Warcraft 3 Viewer (>скачать<)
Я разделил эту статью на три подраздела.
1.1 Экспорт.
1.2 Редактирование.
1.3 Сохранение и импорт в карту.


Экспорт

Итак начнём.
Сперва нужно экспортировать все нужные файлы , максимально просто)).
Открываем Warcraft 3 Viewer
сразу же бросаеться в глаза панель под названием "Древовидная структура" по русски выражаясь это содержимое .mpq-архива.

Нажимаем на вкладку в "Древовидной структуре" "BLP"

Примечание: формат .blp это формат текстур в Warcraft 3.
Тут мы видим немалое количество папок с .blp файлами.
Переходим в
UI > Console > Human
и нужные нам для редактирования файлы
HumanUITile01.blp
HumanUITile02.blp
HumanUITile03.blp
HumanUITile04.blp
HumanUITile03-TeamColor.blp
HumanUITile-InventoryCover.b lp
HumanUITile-TimeIndicator.blp
HumanUITile-TimeIndicatorFrame.blp
HumanUITile-TimeIndicatorMask01.blp
HumanUITile-TimeIndicatorMask02. blp
HumanUIPortraitMask.blp
ВАЖНО: Вы спросите а зачем тогда Warcraft 3 Viewer если отличным .mpq-экспортёром являеться War3ME. А потому что при экспортировании в Warcraft 3 Viewer можно сразу задать формат файла.
Экспортируем в формате .tga (он являеться более универсальным в отличии от .jpg и .bmp)

Часть работы сделано перейдём к другому разделу.



Редактирование

Открываем Photoshop и создаём рисунок форматом 1610х768.
Выделяем экспортированные текстуры интерфейса

И в буквальном смысле переносим выделенные файлы в окно Photoshop'a
Получим такой ужас))

И теперь кликаем по каждому окну выбираем инструмент " Move Tool (V) " и переносим изображение текстуры на нами созданный документ.
Таким образом собираем весь интерфейс в нём

Если вы всё сделали правильно то у вас должно получиться что то вроде этого.

Теперь создаём новый слой в Layer > New > Layer . . .

Создаём его с параметрами выстанавлеными как у меня (т.е. параметры по умолчанию ))

(я предпочёл назвать его)
Окей всё готово для нарисовки. Но сперва я раскажу немного о проблемах которые у вас возникнут.

HumanUITile-InventoryCover.blp: Это текстуры так сказать, нет слотов для предмета , очевидно что для этого нужна отдельная текстура . . . Поэтому создадим отдельный слой и на нём будем рисовать изображение (в её позиции).

Я не буду писать о самом редактировании ( для этого есть demiart.ru) ,но покажу что я нарисовал ))
UI в общем
UI c InventoryCover



Сохранение и импорт в карту.

Итак интерфейс готов , теперь открываем все экспортированные текстуры.
Осталось только разбить нарисованный UI это всё на текстуры.

Выбираем все слои зажав shift и переносим все слои сразу на текстуру

скрываем все слои кроме изначального щелкнув на иконку глаза
И делаем как указанно дальше (тут придёться приводить пример).
Например мы переносим всё слои на текстуру "HumanUITile03.blp" значит удаляем слои которые не пренадлежат ему.
Открываем слой который аналогичен текстуре, выставляем ему прозрачность 40%

Мы получаем размытое изображение

Выбераем все слои кроме фона (зажав клавишу shift)
Берём Move Tool (V) ( При этом скрытые слои должны быть скрытыми)
И двигаем слой до того чтобы получить нормальную картинку.
Проверьте её точность переодичностью в пол секунды щёлкая по если изображение не меняеться то готово, осталось только отредактировать альфа-канал.
Хочу напомнить что при просмотре альфы в RGB режиме , он будет выделен - красным цветом, при просмотре без RGB - чёрным.

Подобную операцию надо провести со всеми текстурами.
Примечание: не обязательно некоторые текстуры редактировать вариантом предложенным выше. Я предпочитаю замазывать их алфа-каналом.
Ну и вот текстуры которые можно не редактировать а замазать альфой.
HumanUIPortraitMask
HumanUITile-TimeIndicatorMask01
HumanUITile-TimeIndicatorMask02
HumanUITile-TimeIndicatorFrame
HumanUITile- TimeIndicator

Всё готово ,осталось только отконвертировать в обратный формат и импортировать в карту.

Открываем Warcraft 3 Viewer , при этом создадим две папки , в одной будут лежать переделанные текстуры а другую пустой оставим.
Переходим на Конвертировать файлы > Групповая конверсия

И делаем как показано на скрине

Открываем WorldEdit
идём в мененджер импорта

и ипортируем тестуры, прописывая им путь
UI\Console\Human\
готово ))

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

Автор: Murador

Murador

#2
Спасибо всем . В следущей части статьи я напишу о:
1.1 Подробнее о редактировании альфа-канала
1.2 Возникшие проблемы и решения к ним.
1.3 (Возможно) Видео с обучением.
  • Страница 1 из 1
  • 1
Поиск: