Page 1 of 5 12345 LastLast
Results 1 to 20 of 96

Thread: Alletun's Eyecandy Tutorial

  1. #1
    Alletun's Avatar Artifex
    Join Date
    Jan 2007
    Location
    Denmark
    Posts
    584

    Default 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. 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 screen
    The 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 splash.tga to M2TW\wrath of the Norsemen\data\menu

    2)
    Open that splash.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 splash.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):
    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>
    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></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>
    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:


    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!


    The above is the base symbol i made for Roma Surrectum


    For how to add the symbol into the game i recommend alpaca's tutorial:
    http://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

    Last edited by Alletun; May 03, 2007 at 03:20 AM. Reason: Added Faction Symbol Chapter

  2. #2

    Default Re: Alletun's Eyecandy Tutorial

    WOW!!! good tutorial Alletun!

  3. #3

    Default Re: Alletun's Eyecandy Tutorial

    Thanks a lot for this. Photoshop is pretty much the only thing involved with modding that I have any proficiency in. Wasn't sure where all these things were that you'd have to find to change them.

    Doubt I'll ever be involved with a mod project, but it'll be nice to customize the DlV stuff all the same.


    "I am what the Gods have made me!"

  4. #4

    Default Re: Alletun's Eyecandy Tutorial

    Wow, good tutorial, I might have to give this a try. We'll certainly need to change these types of things for ROX:TW, so it's nice to have something I can keep referring back to for techniques.

  5. #5
    B. Ward's Avatar ★★★★ RockNRolla ★★★★
    Join Date
    Feb 2007
    Location
    East Coast, United States
    Posts
    4,373

    Default Re: Alletun's Eyecandy Tutorial

    nice my friend....i wanted to write a tutorial on this....but my tutorial always seem like rambling to me....lol

  6. #6

    Default Re: Alletun's Eyecandy Tutorial

    Very nice tutorial! I have worked with the loading bars, splash screens, and menu, but I anticipate some of your upcoming tutorials, seeing how in depth you go! Good job!

  7. #7
    Indefinitely Banned
    Join Date
    Jun 2006
    Location
    Calgary, Canada
    Posts
    13,968

    Default Re: Alletun's Eyecandy Tutorial

    Very useful tutorial. Looking forward to see how you made the faction symbols look so great!

  8. #8
    Alletun's Avatar Artifex
    Join Date
    Jan 2007
    Location
    Denmark
    Posts
    584

    Default Re: Alletun's Eyecandy Tutorial

    Glad you all like the tut

    Stainless Steel mod will be released in about a week and shortly after that i'll release the Faction Symbol tutorial. also i'll make all my faction symbols available for use in any mod.

  9. #9
    selenius4tsd's Avatar Happiness Is A Warm Gun
    Join Date
    Sep 2006
    Location
    CT, South Africa.
    Posts
    1,707

    Default Re: Alletun's Eyecandy Tutorial

    Looking forward to it.
    Under the patronage of vikrant
    Patron of Ramtha, Alletun, finneys13, SirPaladin and GrnEyedDvl

  10. #10

    Default Re: Alletun's Eyecandy Tutorial

    Wow, beautiful graphics, well done!

  11. #11
    Alletun's Avatar Artifex
    Join Date
    Jan 2007
    Location
    Denmark
    Posts
    584

    Default Re: Alletun's Eyecandy Tutorial

    Added the Faction Symbol Chapter

  12. #12
    selenius4tsd's Avatar Happiness Is A Warm Gun
    Join Date
    Sep 2006
    Location
    CT, South Africa.
    Posts
    1,707

    Default Re: Alletun's Eyecandy Tutorial

    Good tutorial again, + rep on the way.

    EDIT: I thought mods could give rep more often? Oh well, seems like it wont let me give any to you.
    Under the patronage of vikrant
    Patron of Ramtha, Alletun, finneys13, SirPaladin and GrnEyedDvl

  13. #13
    Indefinitely Banned
    Join Date
    Jun 2006
    Location
    Calgary, Canada
    Posts
    13,968

    Default Re: Alletun's Eyecandy Tutorial

    Excellent tutorial. I will definitely use it.

  14. #14
    Matthĉus's Avatar Knez Bribirski
    Join Date
    May 2006
    Location
    Croatia
    Posts
    3,955

    Default Re: Alletun's Eyecandy Tutorial

    nice and usefoul! 3x hooray for Alletun

  15. #15
    Methoz's Avatar Senator
    Join Date
    Jul 2005
    Location
    Bohemia (Czech: Čechy; German: Böhmen) (CZE)
    Posts
    1,282

    Default Re: Alletun's Eyecandy Tutorial

    ok, what is this (black border)
    TotalWarForum.cz
    Česko-Slovenské fórum o hrách ze série Total War

  16. #16
    Lusted's Avatar Look to the stars
    Join Date
    Jan 2005
    Location
    Brighton, Sussex, England.
    Posts
    18,185

    Default Re: Alletun's Eyecandy Tutorial

    You need to edit the alpha channel for your new symbols.
    Creator of:
    Lands to Conquer Gold for Medieval II: Kingdoms
    Terrae Expugnandae Gold Open Beta for RTW 1.5
    Proud ex-Moderator and ex-Administrator of TWC from Jan 06 to June 07
    Awarded the Rank of Opifex for outstanding contributions to the TW mod community.
    Awarded the Rank of Divus for oustanding work during my times as Administrator.

  17. #17
    Alletun's Avatar Artifex
    Join Date
    Jan 2007
    Location
    Denmark
    Posts
    584

    Default Re: Alletun's Eyecandy Tutorial

    Hello Methoz

    As Lusted said you need to edit the alpha channels:

    They can be found in the tabs bar or just next to your layers bar (the window with your layers). The interesting channel here is the one called "Alpha 1".


    If there is no "Alpha 1" channel, you must make it yourself. Then by using the brush tool you paint black and white. The white is what will show in the game, and the black wont. your "Alpha 1" could look something like this:


    For more information i recommend that you take a closer look at alpaca's tutorial:
    http://forums.totalwar.org/vb/showthread.php?t=81326

    hope it helped

  18. #18
    Methoz's Avatar Senator
    Join Date
    Jul 2005
    Location
    Bohemia (Czech: Čechy; German: Böhmen) (CZE)
    Posts
    1,282

    Default Re: Alletun's Eyecandy Tutorial

    oh, thanks,now its ok
    TotalWarForum.cz
    Česko-Slovenské fórum o hrách ze série Total War

  19. #19
    Alletun's Avatar Artifex
    Join Date
    Jan 2007
    Location
    Denmark
    Posts
    584

    Default Re: Alletun's Eyecandy Tutorial

    I've added another example of what can be done with the new symbol chapter:

    It's the base symbol I made for Roma Surrectum

  20. #20

    Default Re: Alletun's Eyecandy Tutorial

    Hi Alletun !
    Really good tutorial.
    But i need help. How can i turn off that "video" on background ? (I think that blue video where are walking soldier)
    Thx for answer.


Page 1 of 5 12345 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •