PDA

View Full Version : [Tutorial] Kako izraditi grafičko sučelje



i542
22.03.09, 20:23
Kako izraditi grafičko sučelje
priručnik za početnike u izradi grafičkih sučelja

Što su grafička sučelja?
Grafička sučelja (na engleskom graphic pack ili GP) mijenjaju izgled igrice. Time igrica ne dobiva nove funkcionalnosti već jednostavno novi izgled. No, u ovom tutorialu će biti riječi o izradi vlastitog sučelja.

Što biste trebali znati prije upuštanja u ovaj tutorial?
Prije ovoga biste trebali znati kako uređivati slike i proći po CSS tutorialu na ovoj stranici ;) (http://www.webmajstori.net/clanci/index.php?kat=dizajn&ad=0&rd=0) (DA, želite odmah naučiti CSS!)

Pa krenimo!
Meni paše!


1. Skidanje osnovnog grafičkog paketa. vrijeme: >5 minuta
Preuzmite osnovni grafički paket na ovoj adresi. (http://img.travian.com/ba/std/t3_ba_standard.zip) Potom ga otpakirajte u vaše dokumente. Ako se planirate ozbiljno baviti izradom skinova, preporučam da napravite neku mapu tipa "Moja škart sučelja" ili tako nešto.

2. Istraživanje. vrijeme: 25 minuta
Ako već znate što se nalazi u paketu, slobodno preskočite ovaj korak.
Na početku vidite datoteku zagonetnog naziva unx.css. Slobodno je otvorite - ona opisuje stil igrice (poput boje linkova, pozadine, gdje se što nalazi i slično). Znati ćete je dešifrirati ako ste pročitali onaj tutorial o CSS-u sa početka priče.
Otvorite mapu IMG a potom UN. Dočekat će vas nekoliko mapa. Ovdje sam popisao što se nalazi u kojoj mapi:
a - Ikonice koje označuju pomicanje vojske, točkice iz opisa saveza ili adresara, općenite ikonice koje vjerovatno ni ne primijetite u igri
g - Građevine i pozadine sela (da, ovdje se možete diviti izgledu 15-cropa). U podmapi s nalaze se brojke za razine polja resursa.
l - Ikonice u gornjem dijelu igrice. Kod sličica n1 - n4 crno-bijeli dio označava neaktivnu ikonicu a dio u boji označava ikonicu kad je miš preko nje
m - Ikonice mapa i oaza
p - Sličice koje vidite u opisu Plus računa, ovo najčešće nećete dirati
r - Ikonice resursa i oznaka blagdana
u - Ikonice vojske u izvještajima. Za one zadnje ikonice nitko nije odgonetnuo što znače - možda je neko novo pleme, ali nemojte se truditi,
u2 - Slike vojnika iz vodiča. Ni to najčešće nećete mijenjati

3. Mijenjanje slika vrijeme: 2 - 4 sata
Sada slijedi teži dio, a to je mijenjanje slika u grafičkom paketu. Ovdje se prepustite mašti i vašoj viziji kako Travian treba izgledati. Zaista nema ograničenja kako želite da zgrade izgledaju (autor tutoriala je jednom namontirao spremnik piva iz slike pivnice na rezidenciju, pa mislim da bi vam to moglo dati ideju :)). Ipak, trebali biste slijediti ove dvije smjernice:

Slike bi trebale ostati istih dimenzija kao što su i bile. Inače bi se dizajn mogao poremetiti.
Spremite sliku pod potpuno istim nazivom u potpuno istu mapu. Ako to ne učinite igrica će jednostavno nastaviti koristiti onu originalnu sliku.

Uživajte! (I ne, ne morate promijeniti baš svaku sliku u paketu!)

4. Mijenjanje CSS dizanja vrijeme: 2 sata
Ovo će vam vjerovatno pasti najteže. I dok ste se u prošlim koracima nekako i mogli zabaviti, ovdje vas čeka gomila šifriranih besmislica koje vi morate naštelati kako bi vaš dizajn bio točno onakav kakav vi želite.
CSS datoteke možete uređivati i u Notepadu ali to je besmislica. Zato skinite besplatnu verziju TopStylea, TopStyle Lite (http://www.softpedia.com/get/Internet/WEB-Design/HTML-Editors/TopStyle-Lite.shtml) i instalirajte je. (Ako se mislite puno baviti skinovima, možete natjerati člana vaše obitelji da vam za rođendan kupi jaču verziju, TopStyle Pro, sa cijenom od 79.95$! Uh!). Takvi editori vam omogućavaju puno zgodnih stvarčica, a jedna od njih je da i ne morate pamtiti sve stvari koje ste naučili u CSS tutorialu kojeg ste pročitali (jel tako da jeste?)
U TopStyleu otvorite datoteku unx.css. Program se lako koristi i vjerujem da ćete brzo doći do prvih rezultata.
(Napomenica: u dijelu programa sa natpisom Preview stvari se mogu činiti zbrčkano. Bez brige, kada vaš zadnji krik mode bude gotov, stvari će raditi normalno.)

5. Korištenje i zapakiravanje vrijeme: 10 minuta
Nakon što ste napravili remek-djelo i nadivili mu se, bilo bi vrijeme da i zaigrate sa njime. Zato cijelu mapu premjestite u C:\ i ukucajte je u Travian GP!
Ako ga želite staviti na forum, zapakirajte ga u ZIP datoteku. Uđite u vašu mapu, na onaj dio gdje se nalazi unx.css. Potom označite sve datoteke i kliknite na njih desnom tipkom. Odaberite Send To -> Compressed Files. Ako se na vašem kompjutoru nalazi WinRAR, odite desnom tipkom, odaberite Add to Archive i potom stisnite ZIP pod Archive Format.
Ako nešto ne valja ili niste zadovoljni, uredite ga i ponovno napravite ovaj korak.

6. Zaključak
Čestitamo! Napravili ste vaš prvi grafički paket! Ispod se nalazi još par stvari koje bi bilo zgodno učiniti...

Postaviti grafičko sučelje na forum
Posjetiti stranicu www.travianskins.com da dobijete još ideja
I, naravno, javiti autoru što mislite o tutorialu i pokazati mu vaš rezultat kako bi on znao što treba nadodati ili izbaciti!

Uživajte!
i542

Svi programi su testirani na viruse, no nismo odgovorni ako vam se na kompjuteru napravi bilo kakva šteta.