Tip:
Highlight text to annotate it
X
Hello fellow youtubers! Today I'll be teaching you how to edit Maplestory UI.wz windows
so that you'll be able to create your very own customized maple skin! :D
I'll take it as if you know how to use HaRepacker and have saved the images you want to edit already.
Firstly, open up the image you want to edit.
For this tutorial, I'll be editing the Equipment Inventory ONLY, just so to reduce the time.
Something to note.
The inventory windows in Maplestory are usually rounded, so there's a small little gap at each of the four corners. Therefore, it'll be quite hard to duplicate the window using the rectangle tool.
I'll name this layer mainUNTOUCHED. to indicate NOT to edit/delete this layer.
Well, unless you're confident that you won't be needing that layer anymore, I suggest you heed my advice.
Now, we'll duplicate the mainUNTOUCHED. layer that we'll be using to edit.
I suggest you hide the mainUNTOUCHED layer so that it'll not affect the rest of the layers.
Now, it's time to edit! :D
Right click the duplicated layer, and select Blending Options...
God. It's lagging.
Okay, here we are at the Blending Options window. This will be a shortcut to making a custom window.
Click Color Overlay.
Lag strikes.
Okay, now, choose the color you want as the background of the window. It's pretty self-explainatory.
Remember what I said about the little gap in each of the corners of the rectangle? Well, by using Color Overlay, we're just overlaying the original window with a different color, so, the gap remains there.
Of course, there's the problem of adding a border to the window.
Lag strike 2.
Okay, here we are at the Blending Options again.
Click Stroke.
Cheat code.
At the option "Position", change it to Inside.
Edit it as you like. You don't have to follow this tutorial as it shows.
Now, we have finished editing the background of the window! AREN'T YOU GLAD?
But of course, it's totally blank. If you like the window to be totally blank and boring, feel free to ***.
Now, we'll unhide the mainUNTOUCHED layer and bring it to the highest layer.
Set the Blending Mode to Multiply.
Now everything looks like the color you have chosen previously. Well, no, it does not end here. The "Multiply" layer is used as a guideline to where each component resides. You'll see what i mean.
You see the "Equipment Inventory" at the top of the window? There's a bar there right? We'll now redesign that idiotic bar.
Select the Rectangle tool.
Create a rectangle that is significantly bigger than the bar in the window. Of course, we'll make it fit the window later.
Arrange it in line with the bar in the inventory. Use the arrow keys to be as precise as possible.
Edit it to whatever color/ design you want.
Hypersonic speed. Note: Chipmunk click sounds.
3...
2...
1...
Okay we're back.
Let's see if we've done it accurately by checking the "Multiply" layer.
Mmm. Looks good. Now lets do the same for the bottom.
-Hides-
Oh. Crap. I forgot about something.
To create the bar, I used a layer mask which "erases" the region that isn't I do not need.
I'll just teach it backward. Meh.
Delete the layer mask from the one before.
Now, you'll see the oversized rectangle that you have created before.
Adjust the positioning of the rectangle as to how the window was orginally.
-Inserts cold joke-
Okay, now we have the positioning right. But we have to make the rectangle FIT into the window!
Hold ctrl (aka. control) and click on the thumbnail of the original layer.
Boom, we have the structure of the window selected.
See the icon at the bottom of the Layers panel? The one with a circle in a rectangle? Yeah, that's the layer mask tool. Click it.
There we go.
The layer mask is basically a tool that "erases" a section that you do not want in the picture. You'll be able to see it in action later.
It's so empty.
Okay now, we need to customize the stuff that's in the original window. I'll do the name of the window first.
Just add in the text you want. It can be anything. -Enters supersonic mode-
Okay, we have finished editing title of the window. Now, we need those boxes in our own window. Unless you want to draw those boxes yourself...
Duplicate the main layer.
-Hide-
This duplicated layer has things such as the top bar and bottom bar that we do not need, so we'll get rid of them with a layer mask.
This is how it works.
Select a BLACK brush.
Well, now the black brush acts as an ERASER. So, just erase everything that isn't required. -Super sonicspeed-
What's so special about the layer mask function? Well, since the black brush acts as an eraser, the white brush acts as th "brush version of ctrl-z" you'll be able to get back the area which you erased.
Layer masks are the 21st century toolz. Erasers are so outdated. /rants
Make sure you get out of the layer mask mode before doing anything else by clicking the non-white-or-black thumbnail in the layers mask.
Oh crap. I screwed up.
Okay, now, doesn't the boxes look weird with that color? Let's edit it.
Select Image>Adjustments>Hue/Saturation
Change the hue to your desired color.
This is just an extra step in darkening the boxes just in case it's too light. Click Image>Adjustments>Curves.
Mmm. Nice. Now it looks like it's original, with some modifications. Time to save it.
I suggest you save the psd file as a backup just in case you have to change anything.
Self-explainatory
I'll cut this video short by making everything else supersonic speed.
BOOM.
Now for some credits.
Thanks to me.
Thanks to you for watching.
This is illegal in all any Nexon maplestory games.
Some private servers, however, allow doing this.
So, please join Rydahms.
More info about the server: Visit rydahms.org.
Carlsburg. Probably the best beer in the world.
***.