Alletun's Eyecandy Tutorial
Eyecandy Tutorial
By : Alletun
Hello! This is a simple tutorial i made while working on the 2d graphics for Wrath of the Norsemen mod for M2TW on TWC. Hopefully someone will find it usefull :) To make this tutorial easy to follow for even the newest modder i'll start with just a brief introduction where I set up the mod folder and makes everything ready for testing. After that i'll get to the interesting part!
Setting up the environment
To set up your environment ready for modding follow these steps.
1) Unpacked the files. Do this by using the unpack_all in the M2TW/data/tools folder.
2) Make a new folder called "wrath of the Norsemen" (or whatever your mod is called) in your M2TW root directory.
3) Create a batch file . It's a .txt file (notepad), where i wrote "medieval2.exe @wrathnorsemen.cfg" in it. After that i closed it and renamed Wrathnorsemen.txt to Wrathnorsemen.bat
4) Create a .cfg file, open it with notepad and write the following:
[io]
file_first = true
[features]
mod = Wrath of the Norsemen
[log]
to = logs/system.log.txt
level = * error
[video]
movies = false
Name it wrathnorsemen.cfg
5) go into your "wrath of the Norsemen" folder and create a folder called "data", inside that folder, create two new folder called "loading_screen" and "menu"
Now that our game is set up for testing, we're ready for the fun part: The Graphics!!
Graphics
Photoshop is used to make the graphics in this tutorial, but any photoediting software can be used such as GIMP, Painter and so on. I assume a base knowledge of the photoshop functions, but i wil try and explain as good as possible. All files that will be altered/edited is always copied to the mod folder, so the original files remain intact.
The tutorial is from here devided into 4 parts: 1)Custom Splash Screen 2) Loading bar 3) Main Menu and beyond 4) Faction Symbols.
Custom Splash screenThe splash screen i create for WotN looks like this:
This is how i made it:
1)
Go to your M2TW\Data\menu folder and copy the file called _m2_border.tga to M2TW\wrath of the Norsemen\data\menu
2)
Open that _m2_border.tga file in photoshop
3)
Create a new layer (ctrl+n) and fill it with black (shift+f5, then choose black from the drop down)
4)
Go on google and find an image of a nice old map. The higher resolution the better. Old maps make for great background images.
5)
Paste the map into a new layer, and transform it until the fills out the image. Use ctrl+t, and hold down shift when transforming to keep proportions.
6)
For a nice effect, take the Erase tool and erase the sides. make sure your erase brush is a round brush, 0% hardness, and about 25% opacity.
This is how it looks like so far:
7)
Now go to Mayang and pick a texture you like.
Copy that texture into a new layer.
8)
Change the "Blending Options" of that layer to Multiply, or any of the other blending modes. Experiment and see what looks best for your texture.
I put mine on Multiply, and this is how it looks:
9)
Now it's time for the text. Write the name of your mod in a new layer. Here i start by writing "Wrath" in the font called "Viking-Normal" (www.dafont.com)
After that I double click the layer to open up the Layer Styles menu.
Add Drop shadow and Bevel & emboss with the settings shown in the image.
10)
I then wrote the rest of the name as i did in step 9.
11)
After that i added the WotN logo that i had created at an earlier time (the horse). if you want to create a logo/emblem for your mod, see further in this tut of how to make a symbol/faction emblem.
12)
Save your file as both a .tga called _m2_border.tga (overwrites the old one) and as .psd so you can always go back and correct.
13)
Congratulations! you've created your first simple custom splash screen! i added more minor effects to it, if you want further info, feel free to send me a PM.
Custom loading bar
1)
Go to your M2TW\Data\loading_screen folder and copy the file called "loading_bar.tga" to M2TW\wrath of the Norsemen\data\loading screen
2)
Open that loading_bar.tga file in photoshop
3)
This is what you will see:
The loading bar that on the buttom side of the red line is the base loading bar, and is the one that's showing when nothing is loaded yet. The loading bar on the top of the red line is the bare that will gradually become visible as the game loads.
NOTE that the loading bar we're going to create must stay within the confines of the two blue bars, or else!
4)
To add some barbarian-isme to the mod, i chose to use a sword as the new loading bar. I found the sword via google and i had to cut of the two metal bars protecting the hand in order to stay within the confines of the original loading bar.
5)
Then i added blood to the top sword. The blood was added by using the brushtool and then painting in the blood using a strong red color on a new layer. This bloodlayer was then set to "Multiply" blendingmode
6)
Now that the loadingbar is done, save it as loading_bar.tga. (remember to keep the .psd file (photoshop file) if you want to come back and redo something)
Main Menu
I'll start this chapter about the main menu with a small cosmetic change: changing the color of the buttons in the main menu
To do this go to: Medieval II Total War\data\menu
copy these files to Medieval II Total War\Wrath of the Norsemen\data\menu:
_m2_single_player_panels.tga
_m2_load_game_panels.tga
Open the above files in photoshop and alter the color on them as you wish.
The color can be altered by using Ctrl+U and then sliding back and forth on the sliders.
Heres what i did. The below image is a Before/after shot of the _m2_load_game_panels.tga file.
on the fleur de lys on the right i just took Saturation in Ctrl+u to -100.
When you've given them the colors you like save them (with the same name and as .tga files)
Main menu itself and the campaign menu
First, lets get rid of the medieval2 logo in the main menu and replacing it with our own logo:
The file mtw2.lnt (Medieval II Total War\data\menu\mtw2.lnt) states how the layout is set up.
Copy this from \data\menu to Medieval II Total War\Wrath of the Norsemen\data\menu
You can view the contents of this file through notepad.
Look for this piece of code (it can be hard to find, so use the search function to find it):
If you delete it, the Medieval logo will go away, but you could also just remove the phrase UIP_EMPTY_ART like this:Code:<UI piece>Medieval_II <identifier>UIP_EMPTY_ART</identifier> <Parameters> <x>264</x> <y>2</y> <width>490</width> <height>171</height> <locked>false</locked> </Parameters> <object_data></object_data> <object_id>BI_main_menu</object_id> </UI piece>
Now you make a background image and make your logo on it. The background image is made very much like the Custom Splash screen, but with one big difference: There must be two big dark "bars" on the top and bottom, like this:Code:<UI piece>Medieval_II <identifier></identifier> //UIP_EMPTY_ART <Parameters> <x>264</x> <y>2</y> <width>490</width> <height>171</height> <locked>false</locked> </Parameters> <object_data></object_data> <object_id>BI_main_menu</object_id> </UI piece>
What you see above is my modified _m2_border.tga file.
1)
Copy the original _m2_border.tga file from the medieval2\data\menu folder to your mods \data\menu folder.
2)
Open the file and begin making it as the Custom Splash Screen
3)
Where the bars on the original file was, put in your own as the top most layers. These bars will be important in the Campaign menu
4)
Write the name of your mod up in the top. Be sure to leave some room for the faction symbols that will be displayed in the campaign menu.
5)
I wont go into more detail about how to make the custom _m2_border.tga file, but if your having problems please PM me.
If you launch your mod from the .bat file we created earlier and go through the different menus like Load Game and Options you will notice something irritating: The Medieval 2 logo we removed earlier is in vanilla replaced by title banners when you move through the different menus. Eg. in Load Game a big Load game banner will be displayed on the top bar.
These title banners are blocking the view from our mods logo, which we put into the _m2_border.tga file. so what we want to do is remove these title banners. For this we shall again open our modded mtw2.lnt file.
1)
Open the mtw2.lnt file (which we put in Medieval II Total War\Wrath of the Norsemen\data\menu)
2)
Open Search and search for "Title", the third hit you get will probably be a line that says:
<UI piece>new_game_title
the code that lie between this and the next </UI piece> is code that belongs to the position and such of the New game Title banner (it's the banner when your in the single player menu).
3)
The line just beneath this says:
<identifier>UIP_EMPTY_ART</identifier>
Remove or clip this out as show in this image:
4)
When this is done you go onto the next UI_Piece with a Title in it (should be <UI piece>imperial_campaign_title) and do delete UIP_Empty_ART and so on...
Sometimes it's not enough to just delete the UIP_EMPTY_ART but you have to delete the <object_id>empty_art</object_id> as well. I discovered which through trial and error.
This is boring and repetitive work since there are a LOT of title banners, so for your convenience you can download my file:
http://rapidshare.com/files/20482587/mtw2.lnt.html
I would recommend that you play around with your file and try changing the parameters to see what happens. NOTE: dont fool around in the original file though, always have a backup copy (hard earned experience lol)
Now we have a Beautiful main menu that will serve us well.
Faction emblems
As above you'll need Photoshop (any version from 6 and up) to make the gfx, and preferably a Wacom tablet, but a normal Mouse will do just fine too.
when graphics for m2tw you can go two ways with it: stylized or realistic. Stylized is kind of how the vanilla symbols are. we'll be aiming for Realism!
Here follows my symbol for the Kingdom of England:
1)
Open photoshop, and make a new canvas size 500x500 and fill it with black (shift + F5)
2)
Go on google and seach for a photography of a shield, and copy it into your canvas. I found this one:
http://rubens.anu.edu.au/raid4/turke...s/DSCN6342.JPG
3)
The image is huge, so we need to resize it. Do this by pressing Ctrl + T and, while holding down shift, minimize the shield until it takes up a good portion of your canvas. So far it looks like this:
4)
Take the erase tool (E) and delete the background wall from the photo. Make sure you erase with a round, hard edged brush:
5)
You have probably noticed that the top of the shield is missing. This is probably the hardest part of the tutorial, because we have to paint something entirely from scratch. We address this by using the Clone-Stamp tool combined with the Brush tool. First select the clone-stamp tool (S), and make sure it has these settings:
6)
Make a new layer (Ctrl + Shift + N). Pres and hold down the alt key and the curser changes into a bullseye. Click this bullseye on a part of the neighboring shield rim. You can now copy the part you selected with the bullseye onto the missing shield rim. This is Hard! for a first timer it takes alot of practice and alot of bullseye samples to get it right. If your relatively new to photoshop I suggest you find a different shield than i did. This is how mine looks like after repetitively sampling and painting. i used the brush tool to paint in the base and then the clone-stamp tool to add the photo-realism:
7)
Take your erase tool and erase the middle section of the shield:
8)
Go to mayang (http://www.mayang.com/textures/) and find a good wood texture. One of these are good:
http://www.mayang.com/textures/perl/...ks_5160263.JPG
http://www.mayang.com/textures/perl/...ds_6190214.JPG
9)
paste the wood texture into your canvas, and place the layer beneath your shield layer. Use Ctrl+T to rotate and minimize the wood.
10)
Make sure your wood layer is selected and press Ctrl+M. This bring up the Curves tool. It is THE most power tool to manipulate lighting, colors and a whole punch of other things. Make it something like this:
After this you could use the Brush tool to make the wood look better (i did that on my symbols).
11)
So, to sum up what we have so far: A border and a background. and both of them are on separate layers to that we can change their colors independently.
12)
Now we need to find the symbol itself. Im making the English symbols so i go on google and try and find a good symbol:
13)
And now for something completly different: Color editing. select your rim layer and open up curves (ctrl+M) or color balance (Ctrl+B). Color Balance is pretty straight forward, and i recommend it to people not so accustomed to photoshop. But for the best result use curves. First select red and drag the line upwards (putting more red into the color), then select green and pull the line downwards (to remove green from the color):
14)
Do the same for the wooden background
15)
OPTINAL: take the brushtool and lightly paint some scratches and dirt onto the shield, it will make the shield look better in preview, but it wont be visible in the game.
16)
Congratulations! you've made your first faction symbol!
For how to add the symbol into the game i recommend alpaca's tutorial:
https://forums.totalwar.org/vb/showthread.php?t=81326
Some of my Symbols put into a menu im making for the Stainless Steel modification:
My faction symbols, which you are free to put into your mod (but kindly leave me a note):
http://www.twcenter.net/forums/showthread.php?t=92839
Ingame Interface
COMING SOON!
Conclusion:Hope you can use this tutorial!
(Im not a terribly good modder so there might be a better way of handling the text files such as mtw2.lnt. Please post your thoughts.)
Dont be discouraged if your graphics don't look like a Rembrandt the first time, practice makes perfect!
As a final note i would like to say: this WONT make your mod a better mod, but it will make your mod stand out and add a certain amount of uniqueness to it!
Happy modding :)
Reply With Quote
Originally Posted by Beregorn
Bookmarks