[ГАЙД] - Интерфейс - Новогодние детали!

Очень долго думала над тем, что бы выложить нормальный гайд по изменению интерфейса, поняла, что те гайды, которые у нас выложены, очень пустые и не для всех понятные. Вот, наконец то, я решилась потратить кучу времени на благо mmorpg-devs.ru (для админ. - мои картинки удалены не будут, делаю гайд как правильнее мне кажется )
Новички должны для себя освоить Adobe Photoshop не ниже CS3 , UIEdit , sPCK Visual.
(Курс по пользованию Adobe Photoshop я проводить не буду, учитесь сами, инструкция по пользованию UIEdit где-то была на форуме, если кто найдет скиньте плиз в комменты, я добавлю в гайд, ну , а если вы не умеете пользоваться sPCK Visual то вы попали не на тот форум, вам надо на форум кулинары- лучшие рецепты мира. )
Поехали:
Устанавливает Adobe Photoshop CS3 его можно найти в шаре в поисковике. Далее скачиваем себе на комп UIEdit и говорим спасибо за нее pdev! И конечно не забываем про распаковщик sPCK Visual.
И так, первым делам нам надо понять, что мы хотим изменить? Только цвет? или форму? или вообще поменять кнопки местами? Я Вам покажу как работать, а вы уже будите черпать идеи из своей головы и используя те знания, которые я Вам дам сейчас, сможете сделать все, что хотите у себя в интерфейсе

- Открываете в фотошопе файлы с интерфейсом и меняете цвета как Вам угодно) Как это сделать? легко! - файлы картинки расположены в папке surfaces.pck
Распаковываем файл с помощью sPCK Visual и изучаем для себя содержимое! Для примера я останавливаюсь на такой части интерфейса как weblist
Смотрим, вот так она выглядит в игре , а в редакторе UIEdit здесь мы видим, что само окно не имеет ни какой личной картинки, это просто квадратик растянутый по нашей форме. Его форму можно увидеть в UIEdit, открываем программу, и там мы видим:


<DIALOG Name="Win_WebList" Width="160" Height="200">
- Размер окна интерфейса 160 на 200, где Width="160" это по горизонтали. И Height="200" соответственно по вертикали.
<FrameImage FileName="Version01\Windows\普通光板.tga"/>
-Картинка интерфейса, ее можно сделать или однотонной, или специально формы, как вам хочется!

И так, начнем менять сам weblist. Изменим размеры ставим 160 на 100, у нас получается вот так соответственно, нам надо передвинуть сами кнопки!
Кнопки: КНОПКА ЗАКРЫТЬ

代码:

    <STILLIMAGEBUTTON Name="Btn_Close" x="30" y="114" Width="95" Height="24" SoundEffect="SFX\Interface\ClickB.wav">
        <Text String="Закрыть" FontName="方正细黑一简体" FontSize="10" Bold="true" Color="255,251,202,255" Outline="1" OutlineColor="10,35,50,255" InnerTextColor="255,251,202,255"/>
        <Resource>

x="30" y="114" это ее расположение! если менять значение Х на более высокое, то кнопка уедет в право! Так как все значения отсчитываются от левого бока и с верху в низ. Соответственно, что бы нам поставить кнопку на нужное нам место, нам надо выставить x="30" y="55"
и в кнопке НОВОСТИ поменять с x="30" y="75" на x="30" y="25" , тем самым мы получим идеально расположенные кнопки по отношению к самому окну:
КНОПКА НОВОСТИ
Как менять местами или ширину вы уже научились, теперь обратим внимание, на такие детали как надписи на самих кнопках, и их цвет!
Надпись можно поменять, например на РАДИО или ЛК, с этой кнопки мы вызываем браузерное окно, где можно воспользоваться например личным кабинетом, или сделать там радио. Можете там ТВ настроить, все что угодно. Для примера я поменяю эту кнопку под РАДИО! и пожалуй сменю цвет надписи!
Для подбора цвета можно воспользоваться вот этой страничкой http://www.stm.dp.ua/web-design/color-html.php
Вот что мы получили но и тут я не хочу останавливаться, я хочу добавить картинку!
вот здесь начинается самое интересное!

Я придумала, что хочу, чтобы мой веб лист, на кануне нового года, станет снеговиком! я открываю Photoshop и рисую себе кнопку! Естественно без надписей, просто фон! И получаю вот такую картинку: ( Для ускорения взяла картинку из интернета, чуток ее переделала )
И сохраняем ее в формате tga и png
ПОМНИТЕ!!!! Что формат полотна в Photoshope полностью совпадает с размерами в интерфейсе!!! Поэтому перед тем как задавать размер полотна в Photoshope посмотрите какой Вам размер нужен, примеряясь в UIEdit , так вот, когда вы сделали картинку, открываем папку surfaces и создаем там себе папку отдельно, под Ваши фишки. ну или куда вам угодно, и кидаем туда 2 файла tga и png далее прописываем путь к картинкам, и вот что получаем!

Далее разбираемся с кнопками! Поменяю им цвет, и расположение!
И вот что получаем:



<FrameUpImage FileName="2015\1.tga"/> Это картинка, когда ее видим, еще не трогая!
<FrameDownImage FileName="2015\2.tga"/> Это картинка, при нажатой кнопке!
<FrameOnHoverImage FileName="2015\3.tga"/> Это картинка, когда просто наводишь мышку на кнопку!

Ну и Вот как все выглядит в игре)


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

Если Вам понравилось, или у Вас получился шедевр, выкладывайте, похвастайтесь)

относится

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

К - Креативность, молодец!

просто не особо Важная информация по отношению к самому гайду)
// Читать ее(информацию) - адский труд. (что это? и к кому относится? не поняла...)

я бы в двойне пользовался но ты не добавляешь те фишочки что я просил.