Results 1 to 14 of 14

Thread: [Classic]Guide to Creating a T3.5 Graphic Pack

  1. #1
    Honoured Teuton MemberHonoured Teuton MemberHonoured Teuton MemberHonoured Teuton Member Darkest's Avatar
    Join Date
    Aug 2009
    Location
    North Yorkshire Age: 18
    Posts
    1,840

    Default [Classic]Guide to Creating a T3.5 Graphic Pack

    *Currently Unfinished*

    Creating a T3.5 Graphic Pack

    Contents of Guide:



    1. What and Where is the Graphic Pack

    The Graphic Pack allows users to customise their Travian Experience by modifying the "code" of the game to the users own liking and desire. It allows the User to create Unique images; such as replacing the image of an Club/Mace for the Phalanx with a little spike. If the User understand the concept of editing images and CSS a whole different village could be implemented, such as a modern day city or a snowy Norwegian settlement. The CSS in the packs allows the User to edit, well, basically the whole general layout of the Travian web page. CSS is very complicated at the best of times, but their are some simple pleasures, like changing the background colours, the fonts, those sort of things. A well experienced User may like to change the "Table" locations to their own desire, but as mentioned, this is not easy stuff.

    The Graphic pack file can be found, in-game, under the Graphic Pack link when you go to your profile.

    This Link will give you the .zip file if you can't find it. Just unzip it and let the fun begin.



    2. Tools needed for Editing it.

    Technically you only need two things. A Raster Graphic Editing Program and a text editing program. In reality you may need a lot more. Unless you know enough about CSS to know how the editions you make will look, before you upload it, you may need a web editing program.
    Raster Graphic Editing Programs:
    1. Photoshop - 5 Star
      Price: $699
    2. Corel Painter - 5 Star
      Price: $429
    3. ERDAS IMAGINE - 5 Star
      Price: $2,200
    4. Photogenics - 4 Star
      Price: $699
    5. TVPaint - 4 Star
      Price: $550
    6. Artweaver - 3 Star
      Price: Free
    7. Brush Strokes Image Editor - 3 Star
      Price: Free
    8. CinePaint - 3 Star
      Price: Free
    9. GIMP - 3 Star
      Price: Free
    10. GIMPshop - 3 Star
      Price: Free
    11. Paint.NET - 2 Star
      Price: Free

    (sorry for US prices, it didn't list UK prices, I will EDIT at a later date.)


    Photo shop do a free trial. I suggest, and would recommend, using photoshop. All these programs basically do is allow you to modify the current images, by tweaking colours and sizing etc.. They also allow you to create your own images, if you want to completely replace an image. The Programs that are purchased will give a lot more choice, options and depth to your Graphic Editing.

    For editing the CSS files all you need is a simple text editor. Just load up "TextEdit" for example, and open the file "travian.css". It will give you the CSS file, as the PHP reads it. All you do is replace some of the code with the code you want and it's done. Using a simple text edit won't allow you to see what you have done. If you have a program like Adobe Dreamweaver it will allow you modify the CSS file and then view a page from Travian to see how it will look. (I'll explain how to later on).
    I'm a big, fat, hairy Spam-melon

    .

  2. #2
    Honoured Teuton MemberHonoured Teuton MemberHonoured Teuton MemberHonoured Teuton Member Darkest's Avatar
    Join Date
    Aug 2009
    Location
    North Yorkshire Age: 18
    Posts
    1,840

    Default

    3. What's in the Graphic Pack


    Inside the Graphic Pack you have the following:
    'imgs' folder - Contains all the images, explain contents below.
    'modules' folder - Contains the CSS, explain contents below.

    'lang' Folder - Contains all Language Specific (English) Images and some two CSS files.
    - gp_check.css - should not be altered in any way.
    - lang.css - allows you to manoeuvre the language specific images to fit in with the layout style you desire.
    All the images can be edited the way you like.

    Travian.css - Leave as it is, just links all other edits to the game.
    gp_Preview.gif - A Travain Plus account Image.

    3.1. The Images


    There are many folders with many Images in the 'imgs' folder. This is what is inside:
    (Parts in bold are the Name of the folders inside the 'imgs' folder)
    1. /imgs/a - This folder contains a load of generalised images. Such as the little images for resources, The Borders for the Guide, The guide Navigation, the Alliance Online Status Images, Attack and defence from Guide.
    2. /imgs/f - f is for Forum. This folder contains all the alliance forum images. Like the "Poll" image, the create a new thread image etc...
    3. /imgs/g - This folder contains all the Images for Buildings and Villages. 15 cropper, 9 cropper. Under construction Stable, Completed warehouse, even the 6 stages of the WW.
    4. /imgs/g/s - Inside the 'g' folder, contains the new addition to the village. Images for the + and - that shows building levels.
    5. /imgs/l - Contains the Navigation images and back ground navigation images. Such as "New message" and "Statistics". Also contains some advert images.
    6. /imgs/m - Contains all "Field" images. When you view the map, it has the arrows and different tiles for oasis and larger villages. This contains all Villages and oasis as seen on the map, and the map navigation images.
    7. /imgs/misc - Contains some random images. Only 4.
    8. /imgs/msg - Contains the Notepad Images.
    9. /imgs/p - Gold Advantages Images. +10% Offence, +10% Defence, +25% Wheat etc..
    10. /imgs/q - Quest master Images. Everything you see from the Quest master, including himself, is in this folder.
    11. /imgs/r - Contains the resource images that will be used in the game. Like the tiny image of Clay, Wood, Iron and Wheat.
    12. /imgs/s - T3.5 Statistics images. The Top 10 Button, The offensive ranking button and the defensive ranking button.
    13. /imgs/special - Contains New Year rockets, when it's the new year ceasefire. Also when you complete the Quests.
    14. /imgs/t - Contains the Dove of Peace and every single Medal. Number 1 attacker, Number 1 Climber etc.. Including some that you can't receive in the game.
    15. /imgs/u - Units. Every single 16x16 Unit image is here, past and present. Romans, Gauls, Teutons, Nature and Natar.
    16. /imgs/u2 - All the slightly larger images of the units used in the manual. Of the Phalanx and Macemen, etc..
    17. /imgs/u2rtl - Same as above only facing opposite way round.


    3.2. The CSS Files


    In the Modules folder is where you'll find all the CSS files.
    The Red files at the bottom are for Right-to-left sites, such as in the Arab Emirates, they will not work on the UK server so there is no point even looking at the file. They are the same as the other files only the layout is right-to-left instead of left-to-right. So don't waste your time on those files.

    The Green Files:

    These files are all linked with layout and placement. Width of borders, should navigation be top or bottom, image files, general colours and fonts etc...

    /travian_layout-ltr.css
    Contains: All styles outside of tables except font styles and image styles

    This CSS file allows you to modify the location of certain areas of Travian and put them where you want. It is 90% positioning and 10% formatting. The sub Headings for Positioning are:
    General, Layout, General elements, Servertime, Dynamic Header, Navi, Side Navi, Side Info, Footer Menue, Ressources, Login, Logout, Signup, Activate, Village Overview, Village Center, Map, Player, Alliance, Alliance Forum, Statistics, Reports, Messages, Buildings, Manual, Quest, Send troops, Plus, War simulator, Banned Users, Medal description and Format.

    Essentially you can completely re-design the face of Travian. If you think Travian's design is not good enough, then you can modify it yourself the way you want. It's not easy to understand however.
    For example:
    div.statistics table {margin-top:5px;}
    Italic: Will not be edited. This is used in the .PHP files, and we cannot edit the .PHP files, so if you change the name of the 'divs' then the .PHP files won't know what your talking about and will cause this item to me mis-read, if read at all.
    Bold: The positioning of a certain item. You can move it to practically anywhere you want. We will talk about this further in the Modifying CSS section.

    /travian_table-ltr.css
    Contains: All styles inside of tables except font styles and image styles

    This file allows you to define the tables within the Travian game and all elements within them. It allows you to edit the size of tables, the location of tables, the width of borders, background colours and other design modifications. The sub Headings for Positioning are:
    Layout, Side Info, Ressources, Login, Signup, Activate, Village Overview, Village Center, Village Infos, Map, Player, Alliance, Alliance Forum, Statistics, Reports, Messages, Buildings, Manual, Quest, Send troops, Plus, War simulator and Support.

    This file is similar to the one above for editing. It allows you to modify the tables anyway you chose to match your chosen layout design. Again, because there are a lot of items to modify it can be time consuming and very difficult to understand.

    /travian_images-ltr.css
    This file is used to define the non-language-specific images for reading direction left to right (ltr).
    Contains: width, height, background-image, background-repeat, background-position.

    This is where the Images are all kept. You can edit the positioning of the images and the URL of the image if you would like the site to load a different one. You can't edit the actual image in this file, as this is all code, not graphical. The Heading and Subheadings for image definitions are:
    General,
    Mouseover,
    Icons;
    General, ressources, Units, battle icons, switch to big map, big map close, online points, header point, external links, carry capacity, building contracts, newbie dove, medal size, player medals, medals for allies, message player acp, accept friend, holiday visits, alliance forum and smileys.
    Buttons; level display switch, statistic submenu, alliance forum.
    Backgrounds, layout, left menu, small map, big map, read message, write message, adress book, notepad, hero's atrribute bar, advertisement, alliance forum, alliance chat header, popup, gpack error, taskmaster
    and quest popup.
    Images; navigation, buildings, ressource field, ressource field levels, oases, village center map, new buildings, village building levels, rockets, village fields, oasis fields, empty fields, navigation box, alliance forum, write message, gpack errors, gpack logo, manual kategories, big units, plus features, roman character and error pages.

    This just links all the images form the image folder to the game. If you edit the image but save it as a different name so you can keep the original, you'll have to put the new image name in this file where it is supposed to go.
    For example:
    If you edit a Medal named t1_1.jpg and name it medal1_1.jpg but keep the old one with the same name, so you know its the orginal, in the script you'll need to change:

    /* player medals */
    div.player img.t1_1, body.manual img.t1_1 {background-image:url(../img/t/t1_1.jpg);}

    to

    /* player medals */
    div.player img.t1_1, body.manual img.t1_1 {background-image:url(../img/t/medal1_1.jpg);}

    So the right file is chosen.
    Also, you only want to edit the ltr files (left to right) as this is the UK graphic pack and our servers probably aren't played by Arab, or similar, country's.

    /travian_hacks-ltr.css
    This is the styling for the "Payment" options in plus. This is the only thing to edit in this file. Allow you to change the background image of this section in Travian.


    The Blue Files:

    /modules/travian_fonts-medium.css

    This file is used to define the font styling for small or medium fonts. This includes all font styles.
    Contains: font-size, font-family, font-weight, color, text-decoration

    Allows you to Edit all Writing styles in Travian. The areas that in this CSS file are:
    General, Layout, General elements, Servertime, Side Navi, Side Info, Footer Menu, Login, Signup, Activate, Village Overview, Village Center, Village Infos, Map, Player, Alliance, Alliance Forum, Statistics, Reports, Messages, Buildings, Manual, Quest, Send troops, Plus and War simulator.

    body {color:#000000; font-size:14px; font-family:Tahoma, Helvetica, Arial, Verdana, sans-serif; font-weight:normal;}
    a {text-decoration:none; font-weight:bold; color:#71D000;}
    a:visited {color:#71D000;}
    a:active {color:#FF8000;}
    a:hover {color:#00BC00;}
    h1 {font-size:25px;}
    h2 {font-size:19px;}


    As, you can see, you can edit the text colour for standard text, the font size, the font family, bold and highlights etc. You can also edit the links. You can include further coding to make the links turn bold when hovering over the link. Like so:
    a:hover {color:#00BC00; font-weight:bold;}

    You can be as creative as you like really.

    /modules/travian_fonts-small.css

    This file is used to define the font styling for small or medium fonts. This includes all font styles.
    Contains: font-size, font-family, font-weight, color, text-decoration

    Allows you to Edit all Writing styles in Travian. The areas that in this CSS file are:
    General, Layout, General elements, Servertime, Side Navi, Side Info, Footer Menu, Login, Signup, Activate, Village Overview, Village Center, Village Infos, Map, Player, Alliance, Alliance Forum, Statistics, Reports, Messages, Buildings, Manual, Quest, Send troops, Plus and War simulator.

    It is the same as the other font CSS file, only all the sizes are 1px smaller.


    The Purple Files:

    /modules/travian_images-brewery.css
    This file is used to define the image of the brewery.
    Contains: background-image

    img.g35 {background-image:url(../img/g/g35.gif);}
    img.g35b {background-image:url(../img/g/g35b.gif);}


    Contains the two images of the new building "The Brewery". If you edit the image of the Brewery, the image files should be put in here.

    /modules/travian_images-tea.css
    This file is used to define the image of the teahouse.
    Contains: background-image

    img.g35 {background-image:url(../img/g/g35_tea.gif);}
    img.g35b {background-image:url(../img/g/g35b_tea.gif);}


    Contains the two images of the new building "Tea House". If you edit the image of the Tea House, the image files should be put in here. Also, I have no idea what this building is.

    From the Main Folder:

    /travian.css

    This just makes sure you import all of the above files. No need to edit this file in any way shape or form.
    I'm a big, fat, hairy Spam-melon

    .

  3. #3
    Honoured Teuton MemberHonoured Teuton MemberHonoured Teuton MemberHonoured Teuton Member Darkest's Avatar
    Join Date
    Aug 2009
    Location
    North Yorkshire Age: 18
    Posts
    1,840

    Default

    4. Modification
    When making modifications you have to be patient. It will be very difficult to make something exactly the way you want, first time round. For people who have not used editing programs before, I'm just going to guide you through three tutorials, starting with the simplest, ending with the most complex, in editing some of the images. Just follow the guide and get a hang of your chosen application. Once you have completed the guide, you should have picked up some of the basics, and you may like to try it on your own.


    4.1. Modifying the Images

    Notes to self:

    Images to Modify: Medal, Terrain and a Character.

    Medal modify tutorial:

    *Images need ordering with steps and guidance.*


    So for the first edit, we are just going to change a simple medal. This guide can be, pretty much, applied to all the medals and other small images. It is basically 100% editing. You will only need to brush a little bit yourself. I'm sure you can manage that.
    This is what we'll be editing:
    Into
    Just a simple runners up attackers medal, into a runners up Nuclear medal, with a sexy ribbon to match this guide.

    Step 1: Open up the medal, named t2_2.jpg, from /img/t/, into photoshop.


    Step 2: Duplicate the background layer. Right Click on the layer, select duplicate layer. The background is locked, which is no good for us, duplicating it allows us to modify what's in that layer but in a new layer.


    Step 3: Create a new layer. Shift-Alt-N or Clicking the little arrow in the top right or your layers window, a drop-down menu will appear, select new layer. Change the layer name to "Medal Colour" just be clicking on it until you can type into the text box.


    Step 4: Select the Brush tool, sex the size of the brush to 5 px. Chose the colour of the brush by clicking either the swatch tool or the foreground colour tab. The colour you want ti E3E3E3.



    Step 5: In the layer "Medal Colour", brush over the face of the medal, keeping within the borders and removing the swords from view.




    I'm a big, fat, hairy Spam-melon

    .

  4. #4
    Honoured Teuton MemberHonoured Teuton MemberHonoured Teuton MemberHonoured Teuton Member Darkest's Avatar
    Join Date
    Aug 2009
    Location
    North Yorkshire Age: 18
    Posts
    1,840

    Default

    4.2. Modifying the CSS


    Example of CSS modification: http://darkest.x10hosting.com/travian_Modern70

    I'm not going to show you masses of complicated modifications on how to create differing CSS files. I will just give you hints on what to edit so you can change the interface within the game. The link above is free to download, so you can save it to your computer and have a look at the CSS files which I edited. The graphic pack listed isn't 100% perfect, but quite a bit form each file has been edited.

    This code is taken from the original downloaded UK Graphic Pack. (/modules/travian_fonts-medium.css)

    Code:
    /* ------------------- General ------------------- */
    /* ----------------------------------------------- */
    body {color:#000000; font-size:14px; font-family:Tahoma, Helvetica, Arial, Verdana, sans-serif; font-weight:normal;}
    a {text-decoration:none; font-weight:bold; color:#71D000;}
    a:visited {color:#71D000;}
    a:active {color:#FF8000;}
    a:hover {color:#00BC00;}
    h1 {font-size:25px;}
    h2 {font-size:19px;}
    And this is taken from the Graphic pack listed above, form the same CSS file. (/modules/travian_fonts-medium.css)

    Code:
    /* ------------------- General ------------------- */
    /* ----------------------------------------------- */
    body {color:#cccccc; font-size:11; font-family:Tahoma, Helvetica, Arial, Verdana, sans-serif; font-weight:normal;}
    a {text-decoration:none; font-weight:normal; color:#999966;}
    a:visited {color:#999966;}
    a:active {color:#999966;}
    a:hover {color:#FFFFFF;}
    h1 {font-size:15px;}
    h2 {font-size:13px;}
    As you can see, the header is general, referring to the whole of the game (except texts which have their own area of modification).

    Here, we have the body. This is standard texts such as, on your village overview, the resources and production per hour. The colour can be edited, so can the font size, and the actual font. You can input more code that is listed, such as italics, bold, highlights etc.
    Next, we have a. This refers to all links, such as those on the left hand side. The visited addition refers to links that have been click, the active addition refers to the links that are already open on that page, and hover refers to links that have the curser "hovering" over them. Here, you can edit the colours, font's etc...
    The last two are Headers, called H1 and H2. As you can see in your village overview and city centre, there is a large text that says "[your village name]". This where we edit this. It's not necessary to type the code for colours again, as it will use the information supplied by the body section, but if you want the header to be different, you will need to add more coding.
    I'm a big, fat, hairy Spam-melon

    .

  5. #5
    Honoured Teuton MemberHonoured Teuton MemberHonoured Teuton MemberHonoured Teuton Member Darkest's Avatar
    Join Date
    Aug 2009
    Location
    North Yorkshire Age: 18
    Posts
    1,840

    Default

    5 Putting you Graphic Pack into The Game


    Once you've made your modifications you now need to put into practice. There are two ways to do this, via URL or straight from your desktop.

    In order to get a URL you need to upload it to a web site, preferably one that can manage FTP uploads (its much faster this way).
    I can recommend www.x10hosting.com. Loads of space and can manage the FTP uploading.
    You also need an FTP.
    For mac users I would recommend YummyFTP, its free and easy.
    For windows users maybe try FileZilla.

    All you need to do is go the control panel on your site. Find the FTP section. Create a new FTP account. Then go toy our FTP and connect to a new server, enter your sites details and you should get connected. Now all you need to do is upload the files from your computer, via FTP, to your site and once it's done you will have a Graphic Pack link like this one:
    http://darkest.x10hosting.com/travian_Modern_UK/

    All you do is enter that into the Graphic pack section, in your profile, on Travian, save it, and your creation is ready to be played.

    The other way to do it is via a path. If you right click the folder or a file inside it and open it up in your web browser it will give you a link to your graphic pack folder, something similar to:
    file:///C:Desktop/travian_Modern_UK/

    Copy that into the Graphic pack section, in your profile, on Travian, save it, and your creation is ready to be played.
    I'm a big, fat, hairy Spam-melon

    .

  6. #6
    Paralysis by analysis Avi's Avatar
    Join Date
    Sep 2007
    Location
    Oxford, UK
    Posts
    1,807

    Default

    Very cool, can't wait to see it completed and thank you for taking the time to explain it all.

  7. #7
    Well-Known MemberWell-Known MemberWell-Known MemberWell-Known Member Crannys's Avatar
    Join Date
    Sep 2007
    Location
    Scotland
    Posts
    1,329

    Default

    It would help if he kept himself unbanned though

  8. #8
    Honoured Teuton MemberHonoured Teuton MemberHonoured Teuton MemberHonoured Teuton Member Darkest's Avatar
    Join Date
    Aug 2009
    Location
    North Yorkshire Age: 18
    Posts
    1,840

    Default

    I'm sorry it taking so damn long. My computer has been acting really slow. It might have something to with the 10GB of dirty movies... I dunno.
    I'm a big, fat, hairy Spam-melon

    .

  9. #9

    Default

    lol- Its awesome guide Darkest, but the 10GB of Dirty Films???????????????????????

  10. #10
    Tullia
    Guest

    Default

    I'm not sure you need to go into massive detail on the actual editing of images. It's interesting, but it's going to make the guide HUGE and won't be any use to anyone using different editing software.

    The longer the guide the more offputting people will find it.

    I'd perhaps restrict it to explaining what files are where, and what formats things need to be saved in, and how to upload the packs etc, rather than a guide on how to create artwork; there are already guides on both photoshop and GIMP in the Gallery, after all.

  11. #11
    Honoured Teuton MemberHonoured Teuton MemberHonoured Teuton MemberHonoured Teuton Member Darkest's Avatar
    Join Date
    Aug 2009
    Location
    North Yorkshire Age: 18
    Posts
    1,840

    Default

    Quote Originally Posted by Tullia View Post
    I'm not sure you need to go into massive detail on the actual editing of images. It's interesting, but it's going to make the guide HUGE and won't be any use to anyone using different editing software.

    The longer the guide the more offputting people will find it.

    I'd perhaps restrict it to explaining what files are where, and what formats things need to be saved in, and how to upload the packs etc, rather than a guide on how to create artwork; there are already guides on both photoshop and GIMP in the Gallery, after all.
    I'll try and keep all that to a minimum.
    I'm a big, fat, hairy Spam-melon

    .

  12. #12
    Paralysis by analysis Avi's Avatar
    Join Date
    Sep 2007
    Location
    Oxford, UK
    Posts
    1,807

    Default

    Quote Originally Posted by Darkest View Post
    I'll try and keep all that to a minimum.
    Hey Eliot, would you have the time to add in some of the problems people might face when making their own graphics pack? Or things which other players might find difficult or not consider first time around? For example on the images section, people need to remember to coordinate background colours, or a tutorial to help players delete the background altogether. I think out of the image tutorials, this would be a helpful one to have.

  13. #13
    ElementalGoDz
    Guest

    Default

    Good guide, will be hard to follow as it may be hard, I will spend about 3 days - 2 weeks making this

    Also how do you add the images on the Attacker Ribbon as all I know is to make the circle silver
    Last edited by ElementalGoDz; 04 Nov 2010 at 08:52 PM.

  14. #14
    ElementalGoDz
    Guest

    Default hjghgvhjgvhjvbhjv

    Quote Originally Posted by Darkest View Post
    Step 1: Open up the medal, named t2_2.jpg, from /img/t/, into photoshop.


    Step 2: Duplicate the background layer. Right Click on the layer, select duplicate layer. The background is locked, which is no good for us, duplicating it allows us to modify what's in that layer but in a new layer.


    Step 3: Create a new layer. Shift-Alt-N or Clicking the little arrow in the top right or your layers window, a drop-down menu will appear, select new layer. Change the layer name to "Medal Colour" just be clicking on it until you can type into the text box.


    Step 4: Select the Brush tool, sex the size of the brush to 5 px. Chose the colour of the brush by clicking either the swatch tool or the foreground colour tab. The colour you want ti E3E3E3.



    Step 5: In the layer "Medal Colour", brush over the face of the medal, keeping within the borders and removing the swords from view.




    LoL, it doesnt say the rest

Posting Permissions

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