View Full Version : Test UI Skins: Blue & Pink

01-25-2008, 12:24 AM
The whole UI skinning thing got me nosey enough to actually try it out.

So I downloaded the art pack and was shocked by the sheer amount of files.
After looking through the tutorial, I found that it's sadly incorrect and misleading.
There are several backslashes missing, which caused the confusion.

So here's what I did.

I went to the folder where DDO stores my screenshots.
There I created a folder ui. Then I created a sub-folder named skins.

Essentially it looked like this in my documents folder:

Dungeons & Dragons Online\ui\skins

Now in that folder I simply created another one and gave it the name of the
skin, in my case it was TestSkin and the second one was PinkSkin.

Then I copied and pasted in all the files from the UI art pack I previously downloaded.

Aside from editing the images, all I needed to do is adjust the name of the skin
in the file SkinDefinition.xml.
In the third line, you'll find a tag
<SkinName Name="UIArtPackTemplate"></SkinName>

I replaced UIArtPackTemplate with TestSkin and the other one with PinkSkin,
matching it with the folder names they were in - just like described in the
tutorial. Al the rest could be ignored for now. The structure was there and I
didn't intend to touch it.
All I wanted was to colourize it to show the change.

Btw I tested it on Risia and it works :)

Careful through. When you change your skin, your client will lag out! Do not click
a second time or you will most likely hit the default button.

I can only assume that the client has to load and cache all 1000+ images, which
takes a moment. During that time it looks like it's hanging and didn't take your

Here is what the result looks like. Careful, the pink might make you go blind. :p
http://img239.imageshack.us/img239/8595/screenshot00045ow7.th.jpg (http://img239.imageshack.us/my.php?image=screenshot00045ow7.jpg)
http://img526.imageshack.us/img526/2583/screenshot00046fe2.th.jpg (http://img526.imageshack.us/my.php?image=screenshot00046fe2.jpg)

Is it possible to upload the files here somewhere? They're both between 4
and 5MB in size. I used WinRAR to pack it up. I also asked my former guild
leader, who's still hosting all the guild stuff.

The blue skin images were all manually coloured and saved using Paint Shop Pro X.
Since I'm lazy and there are a lot of files, I looked into scripting and batch
processing. Turned out I could easily create a macro that coloured the file,
then saved it. PSP let me batch process the entire folder :D

What definitely is interesting is selecting a skin and then logging out. It will
keep the skin active and show all frames and buttons in blue or pink. Same goes
for the character generation screens. I haven't tested it yet but I assume it
takes the skin of the character that was last logged in.
If you close your client, changed skin or not, and restart it again, the login
screen goes back to default. Your character should keep the changes though :)

01-25-2008, 12:55 AM
Is it possible to upload the files here somewhere? They're both between 4 and 5MB in size. I used WinRAR to pack it up. I also asked my former guild leader, who's still hosting all the guild stuff.That's the whole idea behind the site. If it's a complete skin replacement, then it goes in the "complete (http://www.lotrointerface.com/downloads/cat37.html)" download section. It'd be better if you use .zip though, instead of .rar as your compression method. More people know how to deal with .zip, as it's pretty well standard, but a lot of people would have no idea what to do with a .rar file.

01-25-2008, 01:22 AM
I must be blind :)

Thanks for your response. I'll upload the pink and blue one as zip then.

01-25-2008, 08:00 AM
Very nice Keeyrah. I played with the skinning to, but at the moment I couldn't test it. Don't have a Account on Risia. Have to wait since mod6 hits europe.

I try to make a minimalistic DDO-GUI. Maybe the most borders very thin und translucent. I always say: "The best gui is that gui a don't see."


01-27-2008, 08:45 PM
What program did you use for a skin editor?

01-28-2008, 02:23 PM
Hi Gax,

i can suggest you GIMP. Its free and has all features you need.



01-28-2008, 08:51 PM
What program did you use for a skin editor?

Gimp should do it, I suppose.

However, I used Paint Shop Pro X. I liked the older versions going back to when
it was a mere picture viewer, then got PSP X cheap for around 20 Euros. Might
even be cheaper now that X2 is out.

I'm not sure Gimp has macro scripting and batch processing. That was very helpful
when doing those skins, but it's also a very lazy way. There are a bunch of graphics
that probably should not be entirely colourized ... and I was lazy :)

01-28-2008, 11:39 PM
I'm not sure Gimp has macro scripting and batch processing.

It sure does.

01-30-2008, 05:10 AM
I used photoshop cs2 to edit the whole package to different colors. Has a built in batch processor, just had to program what u wanted done and change.
Took all of 5 minutes to do.
But alas, now its time for the fun things like changing images and such and different things instead of just colors.!.

01-30-2008, 02:43 PM
Go for it, Mudfud :D

I'm eager to see the skin - or any other from somebody who knows what
they're doing.

I was just testing and for a visual result it was enough :)

01-31-2008, 12:06 PM
Well I changed it, but didn't check it before I actually did. I think I should have.

Here is what I had when I got into new mod6!


Basically what I noticed was with changing hue/saturation...not every picture is going to be like the original...This was the color I originally changed it to. Oh, btw it glows in the dark:p

Considering it takes 5 minutes to actually change colors, it's not that big of deal for me. Once I get the coloring worked out. Will start on some more complicated ones with different images and such.

01-31-2008, 12:50 PM
Aah that is less eye-cancerous :D

Let's wait for the first reports of manly big screens going black and refusing to
turn on again because they've been ... pinked :eek::cool:

The batch thing is nice but it still changes all pics. Until somebody has mapped
out which images do what and which shouldn't be changed just like that we'll
prolly get a couple different colours.

I'm still waiting for the first really different one and wonder if it's possible to
really tweak the UI and make different ones for different resolutions. If you
play on different computers with differently sized screens you've prolly run into
the hotbar problem already. It's annoying.

01-31-2008, 12:54 PM
This might help.
Don't know if psp or whatever u have can do this though.
I edited the whole folder as a batch again, and changed every image from the default tga to jpeg.
This way, my computer could read in thumbnails what the image looked like initially. This beat opening each one by hand to see what it was.
I started to seperate different images that I think go together and such and was coloring them seperate. For things i could not find where they were in the ui, i made them a bright green. This way, when it's ingame, I can see where the bright green is and know what that is now.

01-31-2008, 01:04 PM
I think you've got it as good as done. All it needs now is documentation *hint hint!*
so that others can make skins easier :)

02-02-2008, 03:08 AM
so i am very interested in makin a skin but have not even 1 clue how to do it lol, is there something other then the tutorial posted on here that shows how to do it? or someone wanna be really kind and try to explain it to me? would be very much appreciated :)

02-02-2008, 05:43 PM
so i am very interested in makin a skin but have not even 1 clue how to do it lol, is there something other then the tutorial posted on here that shows how to do it? or someone wanna be really kind and try to explain it to me? would be very much appreciated :)

Narrow down what photo editing programs you have. I use photoshop think he uses paint shop pro. 2 different programs with 2 different ways of doing.

02-04-2008, 12:48 AM
Sheldie even mentioned that it's possible with Gimp. That's three different programs :)

I just played around and made another skin.
This time I created a script that coloured things in a blue tone again, only I had
the saturation set to max.
Then I went and put a wax coating effect into the script and had that run over
the big pile.

Again I noticed that the colouring thing was overdoing it.
So I went and opened the PSP file browser, which displayed (almost) all images
as thumbnails without the suggested conversion.
Then I opened two explorer windows, one containing the source files of the art
pack, one containing my new skin. I picked out the ranges of images that contained
classes, marking things, toggle on/off, and and and. I copied and pasted images
into the test folder with the new skin, overwriting them.
Again and again I was able to see instant changes by selecting skin 'none' and
reselecting my test skin in the Risia client. I didn't want to play, just test,
didn't want to get molested by plat farmers, get ninjaed by ignorants etc., hence
Risia. Surprise, it was empty LOL

Anyway, when I was 'done' shock hit me. My hotbars! They had all gone back
to the original colour, apart from bar #1.

So I went digging, opened literally all images and closed one by one until I found
the right ones. They're called detach_* by the way :)

Here's the outcome:

http://img155.imageshack.us/img155/2554/screenshot00002eo6.th.jpg (http://img155.imageshack.us/my.php?image=screenshot00002eo6.jpg)

If wanted, I'll give it a name and upload it here again.

02-05-2008, 03:31 AM
aye i have gimp not too great with it though lol, umm ne 1 know how to do it on gimp? or is there a way to get the programs u used? download? buy? etc.. thx for the help so far :)

02-05-2008, 04:55 AM
No idea about Gimp, sorry.

I suppose Photoshop and Paintshop Pro are available in any well sorted software
store,though Photoshop will be a lot more pricey than Paintshop Pro.

I got mine for 20 Euros on eBay I think. It should be a tad cheaper in stores now,
depending on where you live.

I can write down the steps in Paintshop Pro, no problem, but there might be a
chance all the option are named differently, since I'm using the German version
and would be translating :)

02-05-2008, 10:12 PM
cool man that would be awesome! any help u can give is very much appreciated and ill work on gettin that program thx for all the help so fars i appreciate it :)

02-10-2008, 06:56 PM
How is it that you are colorizing the whole interface?
Are you opening each file or is there some batch process?


02-10-2008, 09:58 PM
For Photoshop 7:

Open an image then open the Action window.

Make a new Action, It will now start recording all the changes you make to the image. Hit stop (on the action window) when you are done, You can delete/move/etc... steps in the action like layers in an image. The Action window isn't a whole lot different than the Layer window, so if you can use layers you'll be able to figure out the Actions.

When you are ready to apply the action to a set of images go to File > Automate > Batch ...

Select the action you just made
Set the Source dropdown to 'Folder'
Click the 'Choose' button to set the folder you want to process
For Destination you can do 'Save and Close' to overwrite the current images or set it to 'Folder' and save the changes as new files.
I would also recommend changing the Error box at the bottom to 'Log Errors to File', if you leave it on 'Stop for Errors' you'll click 'OK' then 'Continue' a LOT since there are many small files that some filters won't work on
Click 'OK' and take a quick bio break

- - - - - - - -
When I tried this using blending options in my action It tried to save all the images as .psd and a confirmation box poped up for each one. I got around it by putting two more steps in the action: Add new layer, Merge Visible Layers.

- - - - - - - -

It may also be a good idea to go in before the changes and separate different types of images to different folders. That way you can make a separate batch file for all the small buttons, the gui screens, and other misc items that you may want to edit manually.

02-12-2008, 07:09 AM
Yeah I just run a batch process over everything because I'm lazy and wanted to
test it.

Sorry for the delay, M6 came live in Europe on Thursday and I had to beat the
raid first :)

Firstly, make the fitting folder in your DDO screenshot folder and copy the images
in. I didn't get it to work anywhere else. The guide on the DDO forums really
drove me mad because it just wouldn't work for me.

Pick one random image and copy it someplace else. You'll need it as trial image
to create the script.

Open the trial image/drag it into PSP.
File -> Script -> Start recording

Adjust (5th option in the worded menu line)
Colour & Saturation
Colourize (SHIFT L)
Choose a colour and saturation. (blue and pink were both 100%)
Save the file
File -> Script -> Save recorded

In your PSP folder you have two scripts folders. You need to save it in Scripts (trustworthy) or it will spit out an error message when you run the batch process.

File -> Batch process

Choose your script. You'll see the option in the middle of the window.
Browse - choose your skin folder and click select all.
Click start (2nd group of buttons to the right, middle button) and wait.

This takes a few minutes but then it's done. Just make sure you follow the rest
of the instrutions on how to rename the skin and where to put the files to make
it work. :)

Hope this makes sense.