How to make a decent window skin
By Xilef
For this tutorial we will be using this template:
You can't use any window skin for any game as they can clash with the desired mood or enviroment. A game set in a tropical island needs an ocean blue background and a simple frame, a game with a dark story line should have a dark, gothic window skin, a short game with no particular desired mood needs a simple window skin with a simple colour, such as red or green.
Let's make a window skin for this game. The game is dark and deppressing.
First we will start on the background of the window skin, that's the 128x128 box on the far left in Purple, it's best to keep the background simple, so we'll use a gradient going from top left of the box to bottom right. As this game is dark and sad we will use the colours black and dark blue. Try to work for a good shade. Never ever use an image as a background as they stretch horribly on scenes such as the menu. Only use an image if you know what you are doing.
(Remember, never use a light background with the default RMXP font colour, that's no yellows or whites)
This is what we have.
Now for the frame, zoom in on this 64x64 section of the window skin in the upper right:
The red squares in the corners are the corners of our frame, keep it close to the outside of the box, the orange sections next to the red boxes are there for decorations, if you want to make an advanced window skin then put in a fancy pattern here, make sure it connects with the corners in the red boxes though. The marroon square is for another fancy pattern, this should connect to the orange sections.
It is best to keep the frame simple, so we won't use any patterns this time.
I went around mine with black, grey and grey/blue colours to get this:
I kept mine very simple.
Now lets attach that to the rest of the window skin.
The yellow parts in the frame section of the window skin are for arrows that indicate directions to scroll on the window skin, some people leave this out, but it can be very easy to do.
Zoom back here:
About two pixel down from the upper right of the west side yellow box draw a black line 3px long from right to left and a diagonal line from there to the centre on the left, repeat this from the bottom and connect the edges on the right to get this:
Go around the inner edge of that with white and fill in the rest with a light grey/blue:
Copy that, flip and rotate where needed to finish this part off.
A simple, easy and effective arrow.
This is what we have so far.
The selection box causes confusion sometimes, but it is really quite simple. Zoom in on the blue 32x32 box here:
The dark blue, 2px wide frame around the outside of it is the only part that won't stretch, so we should make the frame of the selection box here. I went around it in black and then added white on one side and grey on the other to get this:
Don't use a picture for the middle of this, use either a solid colour or a gradient, we will use a gradient here, make sure it doesn't go in the same direction as the background else it'll clash. I did my gradient going from top to bottom, keeping my theme of dark blues.
Oh yes, don't use bilinear gradients on the selection box, it doesn't work very well.
We then have this:
The continue message animation should be kept simple aswell. You can use images such as rotating circles or morphing shapes or sometimes have the letters N E X T appear in that order, but this time we'll keep it easy and go for a triangle that moves up and down.
Zoom in on these, 16x16 squares here:
Using the same method as the scroll arrows, we'll draw a black outline arrow, with 1px gap at the top.
Colour it in how you want, I went around the inner edge with white again and filled it with purple.
I then copied it onto each square going from left to right, moving it down 2 pixels each time.
In game it'll move down pretty smoothly and then go back at the top again.
We have this so far:
Now for the battle cursors. We will use triangles for this as they will be simple and easy to draw.
Zoom in on these two squares:
Using a similar method as the arrows we drew before, draw this black outline.
I went around the inside of this in white like I did before. Now for the inside of this frame.
We could use a solid colour here, but that would be boring, so we'll use a gradient. This is a black to grey gradient from bottom to top. Use the gradient inside the frame.
Copy and paste it onto the other square and tint the gradient into a slightly different colour, I changed it to a lighter blue/grey.
Zoom back out and we have this an almost finished window skin:
Now to finish it off, fill in all the parts we dont need with a solid colour that hasn't been used in this, I suggest a light green or yellow.
Import that into RPG Maker XP and select the green as transparent. Set it as the window skin in the database and try it out!
Now test it out in the menu for any obvious signs of stretch:
And test it out in battle to see if the cursor looks good:
If anyone wants to try this out in VX, here's my VX template
And the key
By Xilef
For this tutorial we will be using this template:
You can't use any window skin for any game as they can clash with the desired mood or enviroment. A game set in a tropical island needs an ocean blue background and a simple frame, a game with a dark story line should have a dark, gothic window skin, a short game with no particular desired mood needs a simple window skin with a simple colour, such as red or green.
Let's make a window skin for this game. The game is dark and deppressing.
First we will start on the background of the window skin, that's the 128x128 box on the far left in Purple, it's best to keep the background simple, so we'll use a gradient going from top left of the box to bottom right. As this game is dark and sad we will use the colours black and dark blue. Try to work for a good shade. Never ever use an image as a background as they stretch horribly on scenes such as the menu. Only use an image if you know what you are doing.
(Remember, never use a light background with the default RMXP font colour, that's no yellows or whites)
This is what we have.
Now for the frame, zoom in on this 64x64 section of the window skin in the upper right:
The red squares in the corners are the corners of our frame, keep it close to the outside of the box, the orange sections next to the red boxes are there for decorations, if you want to make an advanced window skin then put in a fancy pattern here, make sure it connects with the corners in the red boxes though. The marroon square is for another fancy pattern, this should connect to the orange sections.
It is best to keep the frame simple, so we won't use any patterns this time.
I went around mine with black, grey and grey/blue colours to get this:
I kept mine very simple.
Now lets attach that to the rest of the window skin.
The yellow parts in the frame section of the window skin are for arrows that indicate directions to scroll on the window skin, some people leave this out, but it can be very easy to do.
Zoom back here:
About two pixel down from the upper right of the west side yellow box draw a black line 3px long from right to left and a diagonal line from there to the centre on the left, repeat this from the bottom and connect the edges on the right to get this:
Go around the inner edge of that with white and fill in the rest with a light grey/blue:
Copy that, flip and rotate where needed to finish this part off.
A simple, easy and effective arrow.
This is what we have so far.
The selection box causes confusion sometimes, but it is really quite simple. Zoom in on the blue 32x32 box here:
The dark blue, 2px wide frame around the outside of it is the only part that won't stretch, so we should make the frame of the selection box here. I went around it in black and then added white on one side and grey on the other to get this:
Don't use a picture for the middle of this, use either a solid colour or a gradient, we will use a gradient here, make sure it doesn't go in the same direction as the background else it'll clash. I did my gradient going from top to bottom, keeping my theme of dark blues.
Oh yes, don't use bilinear gradients on the selection box, it doesn't work very well.
We then have this:
The continue message animation should be kept simple aswell. You can use images such as rotating circles or morphing shapes or sometimes have the letters N E X T appear in that order, but this time we'll keep it easy and go for a triangle that moves up and down.
Zoom in on these, 16x16 squares here:
Using the same method as the scroll arrows, we'll draw a black outline arrow, with 1px gap at the top.
Colour it in how you want, I went around the inner edge with white again and filled it with purple.
I then copied it onto each square going from left to right, moving it down 2 pixels each time.
In game it'll move down pretty smoothly and then go back at the top again.
We have this so far:
Now for the battle cursors. We will use triangles for this as they will be simple and easy to draw.
Zoom in on these two squares:
Using a similar method as the arrows we drew before, draw this black outline.
I went around the inside of this in white like I did before. Now for the inside of this frame.
We could use a solid colour here, but that would be boring, so we'll use a gradient. This is a black to grey gradient from bottom to top. Use the gradient inside the frame.
Copy and paste it onto the other square and tint the gradient into a slightly different colour, I changed it to a lighter blue/grey.
Zoom back out and we have this an almost finished window skin:
Now to finish it off, fill in all the parts we dont need with a solid colour that hasn't been used in this, I suggest a light green or yellow.
Import that into RPG Maker XP and select the green as transparent. Set it as the window skin in the database and try it out!
Now test it out in the menu for any obvious signs of stretch:
And test it out in battle to see if the cursor looks good:
If anyone wants to try this out in VX, here's my VX template
And the key
I made it in five minutes, just for these test shots.