PDA

View Full Version : [Classic]Guide to Creating a T3.5 Graphic Pack



Darkest
16 Oct 2009, 07:06 PM
*Currently Unfinished*


Creating a T3.5 Graphic Pack

Contents of Guide:
1. What and Where is the Graphic Pack
2. Tools needed for Editing it.
3. What's in the Graphic Pack (http://archive.forum.travian.co.uk/showthread.php?p=949683#post949683)
3.1. The Images (http://archive.forum.travian.co.uk/showthread.php?p=949683#post949683)
3.2. The CSS files (http://archive.forum.travian.co.uk/showthread.php?p=949683#post949683)
4. Modification (http://archive.forum.travian.co.uk/showthread.php?p=949919#post949919)
4.1. Modifying the Images (http://archive.forum.travian.co.uk/showthread.php?p=949919#post949919)
4.2. Modifying the CSS (http://archive.forum.travian.co.uk/showthread.php?p=950545#post950545)
5 Putting you Graphic Pack into The Game (http://archive.forum.travian.co.uk/showthread.php?p=950550#post950550)
6. Further Information
6.1. Information about the Images
6.2. Information about Coding
7. Appendix - Notes




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.

http://img126.imageshack.us/img126/3339/dlgpguide.jpg
This Link (http://www.4shared.com/file/140665718/3b9cf3d0/travian_default_uk.html) 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 (http://en.wikipedia.org/wiki/Comparison_of_raster_graphics_editors):

Photoshop - 5 Star
Price: $699
Corel Painter - 5 Star
Price: $429
ERDAS IMAGINE - 5 Star
Price: $2,200
Photogenics - 4 Star
Price: $699
TVPaint - 4 Star
Price: $550
Artweaver - 3 Star
Price: Free
Brush Strokes Image Editor - 3 Star
Price: Free
CinePaint - 3 Star
Price: Free
GIMP - 3 Star
Price: Free
GIMPshop - 3 Star
Price: Free
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).

Darkest
16 Oct 2009, 07:10 PM
3. What's in the Graphic Pack


http://img207.imageshack.us/img207/9636/mogpfolder.jpg

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


http://img382.imageshack.us/img382/3311/moimgfolder.jpg

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)

/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.

/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...

/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.

/imgs/g/s - Inside the 'g' folder, contains the new addition to the village. Images for the + and - that shows building levels.

/imgs/l - Contains the Navigation images and back ground navigation images. Such as "New message" and "Statistics". Also contains some advert images.

/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.

/imgs/misc - Contains some random images. Only 4.

/imgs/msg - Contains the Notepad Images.

/imgs/p - Gold Advantages Images. +10% Offence, +10% Defence, +25% Wheat etc..

/imgs/q - Quest master Images. Everything you see from the Quest master, including himself, is in this folder.

/imgs/r - Contains the resource images that will be used in the game. Like the tiny image of Clay, Wood, Iron and Wheat.

/imgs/s - T3.5 Statistics images. The Top 10 Button, The offensive ranking button and the defensive ranking button.

/imgs/special - Contains New Year rockets, when it's the new year ceasefire. Also when you complete the Quests.

/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.

/imgs/u - Units. Every single 16x16 Unit image is here, past and present. Romans, Gauls, Teutons, Nature and Natar.

/imgs/u2 - All the slightly larger images of the units used in the manual. Of the Phalanx and Macemen, etc..
/imgs/u2rtl - Same as above only facing opposite way round.


3.2. The CSS Files


http://img207.imageshack.us/img207/1624/modulesimage.jpg

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.

Darkest
16 Oct 2009, 10:37 PM
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:
http://img33.imageshack.us/img33/6666/t22p.jpg Into http://img199.imageshack.us/img199/2236/guidefinalimage.jpg
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.
http://img132.imageshack.us/img132/2889/guidemedalinphotoshop.jpg

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.
http://img197.imageshack.us/img197/8379/guideduplicatelayer.jpg

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.
http://img2.imageshack.us/img2/1373/guidenewlayer.jpg

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.
http://img514.imageshack.us/img514/456/guidebrushsizencolour.jpg


Step 5: In the layer "Medal Colour", brush over the face of the medal, keeping within the borders and removing the swords from view.
http://img30.imageshack.us/img30/483/guideblankmedal.jpg

http://img243.imageshack.us/img243/8065/guidenuclearribbon.jpg

http://img199.imageshack.us/img199/2236/guidefinalimage.jpg

Darkest
17 Oct 2009, 04:54 PM
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)


/* ------------------- 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)


/* ------------------- 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.

Darkest
17 Oct 2009, 04:55 PM
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 (http://www.yummysoftware.com/YummyFTP.dmg.zip), its free and easy.
For windows users maybe try FileZilla (http://filezilla-project.org/).

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.

Avi
20 Oct 2009, 05:15 PM
Very cool, can't wait to see it completed and thank you for taking the time to explain it all.

Crannys
20 Oct 2009, 07:36 PM
It would help if he kept himself unbanned though ;)

Darkest
23 Oct 2009, 07:17 PM
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.

Berzerker
23 Oct 2009, 07:26 PM
lol- Its awesome guide Darkest, but the 10GB of Dirty Films???????????????????????

Tullia
23 Oct 2009, 07:46 PM
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.

Darkest
23 Nov 2009, 10:35 PM
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.

Avi
24 Nov 2009, 12:02 PM
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.

ElementalGoDz
04 Nov 2010, 09:28 PM
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

ElementalGoDz
04 Nov 2010, 11:06 PM
Step 1: Open up the medal, named t2_2.jpg, from /img/t/, into photoshop.
http://img132.imageshack.us/img132/2889/guidemedalinphotoshop.jpg

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.
http://img197.imageshack.us/img197/8379/guideduplicatelayer.jpg

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.
http://img2.imageshack.us/img2/1373/guidenewlayer.jpg

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.
http://img514.imageshack.us/img514/456/guidebrushsizencolour.jpg


Step 5: In the layer "Medal Colour", brush over the face of the medal, keeping within the borders and removing the swords from view.
http://img30.imageshack.us/img30/483/guideblankmedal.jpg

http://img243.imageshack.us/img243/8065/guidenuclearribbon.jpg

http://img199.imageshack.us/img199/2236/guidefinalimage.jpg

LoL, it doesnt say the rest :S