Manual para hacer tu propio skin

| Manual para hacer tu propio skin.

1.- Prólogo.
2.- ¿De qué está formado el skin?
3.- Las imágenes del skin.
4.- El formate.css
5.- El skin offline
6.- El skin online: hostings

--------------------------------------------------------------------


1.- Prólogo

Durante este manual de referencia sobre el mundo de los skins de ogame que os ofrecemos, se hablara de unos cuantos temas, aunque no se profundizara demasiado en ninguno.

Antes de empezar nada, es recomendable tener ciertas herramientas que nos serán de mucha utilidad a la hora de trabajar con nuestros skins.

- Editor de texto o editor web

Para modificar ciertos archivos (véase mas adelante, el formate.css) necesitamos alguna de estas herramientas. Lo mas básico es trabajar con el propio notepad o bloc de notas de windows, con eso nos sera mas que suficiente para lo que queremos hacer.
Si queremos hacerlo de un modo un poco mas completo, podemos utilizar un editor avanzado, del estilo del dreamweaver (EJ: Macromedia Dreamweaver MX2004). La utilización no cambiara demasiado.

- Navegador web

Esta claro que lo necesitaremos, de hecho todos tenemos uno, sea cual sea.
Cabe destacar que en los sistemas "microsoft Windows" el que viene por defecto es Internet Explorer". En Windows XP, la versión 6, y en Windows Vista, la versión 7. Usemos la versión que usemos, siempre podemos actualizarlo a esta ultima, y dentro de lo malo, es conveniente hacerlo.

Consigue Internet Explorer 7

Aunque desde aquí os recomendamos utilizar Firefox, en caso de utilizar Internet explorer, hacerlo con la ultima versión. Aunque la mayoría de skins no os funcionaran como debería, al menos la ultima versíon del navegador de microsoft tiene compatibilidad con las imagenes PNG.

Como ya se ha dicho, se recomienda el uso de Firefox (actualmente la versión 2), por diferentes motivos. Entre otros, lo que nos interesa, que es el aspecto gráfico y las posibilidades que brinda.

Consigue FIREFOX 3

Si queréis informaros algo mas sobre los navegadores, visitar este link:
Tabla comparativa de navegadores (wikipedia)


- Programa de edición de imagen

Es importante poseer y controlar un mínimo un programa de este tipo, para crear y modificar imágenes para utilizarlas en nuestros skins.

Ya se lo que estaréis pensando algunos, y no; no vale el PAINT ni derivados...

Necesitareis un programa del estilo del Adobe Photoshop, el cual os recomiendo, especialmente en su versión 8 (versión CS), la cual esta disponible en castellano, y podéis descargar buscando en google por "adobe photoshop CS, CS2 o CS3".

Es preferible utilizar este software, ya que, a parte de ser uno de los mas completos del mercado, es uno de los mas utilizados, y en caso de enseñaros algún truco o manual, sera con dicho programa.

- Skin descargado para practicar

Podéis descargaros un skin completo, o bien solamente el archivo formate.css, si bien os hará falta todo llegados el momento.

Podéis elegir trabajar con el skin por defecto de ogame, lo cual no es muy recomendable, ya que su archivo de configuración esta optimizado por los creadores de ogame, y no es sencillo de entender ni modificar, o bien podéis descargaros un skin no oficial. Yo os recomiendo trabajar, al menos, con mi archivo formate.css, pues sta pensado para poder ser cambiado fácilmente, o reestructurado sin mucha complicación.

Podéis hacerlo de aquí, exactamente, la última versión creada por mí:

Formate.css [Saphire2KCOM edition] by danix

Con todo esto, podemos continuar.

2.- ¿De qué está formado el skin?

La composición que tiene que tener un skin esta predeterminada por el código de ogame privado, aquel que nosotros no podemos cambiar. Este nos indica como tienenque ser y llamarse las carpetas que utilizaremos, la extensión de las imágenes, etc.


Empecemos viendo las carpetas que tiene un skin:

Imagen

Como veis, son unas pocas:

GEBAEUDE: en esta carpeta es donde van todas las imágenes de edificios, tecnologías, naves y demás.
La extensión de las imágenes debe estar en .GIF

GFX: en esta carpeta encontramos las tres imágenes rectangulares del menú izquierdo.
Deben estar en JPG.

IMAGES: las cuatro imágenes de los recursos, en JPG también.

IMG: aquí deben estar las imágenes para los iconos de mandar mensajes, los iconos de galaxia de espiar y demás (en formato GIF).
El resto de imágenes que pueda haber no tienen que estar hay obligatoriamente (el fondo, imágenes para los fondos de las celdas del skin...),
ya que en el formate.css debemos declarar en que ruta están (osea, podemos ponerlas donde queramos mientras luego indiquemos donde están cuando las usemos)

PIC: aquí encontraremos 3 imágenes en GIF: los iconos para echar y cambiar el rango de miembros en administración de alianza,
y las de cambiar etiquete/nombre de la alianza (botón "switch").

PLANETEN: aquí estarán las imágenes de los planetas, tanto grandes (en la misma carpeta planeten) como las pequeñas,
que estarán en una subcarpeta denominada small. Todas estarán en JPG.


También podéis apreciar el archivo FORMATE.CSS. Este sera el encargado de darle formato al skin, en tamaños, colores, etc. Lo observaremos mas adelante.


3.- Las imágenes del skin.

Dentro de la carpeta "Gebaeude", las imágenes están nombradas de la misma forma siempre, con números. Viendo las del skin original, o uno que conozcamos, podemos identificarlas, e incluso recordarlas, pero he aquí una lista de lo que es cada una de las imágenes:

Imagen

Citar:
1 - Mina de metal
2 - Mina de cristal
3 - Sintetizador de deuterio
4 - Planta solar
12 - Planta de fusión
14 - Fabrica de robots
15 - Fabrica de nanobots
21 - Hangar
22 - Almacén de metal
23 - Almacén de cristal
24 - Contenedor de deuterio
31 - Laboratorio
33 - Terraformer
34 - Deposito de alianza
41 - Base lunar
42 - Sensor phalanx
43 - Salto cuántico
44 - Silo

106 - Espionaje
108 - Computación
109 - Militar
110 - Defensa
111 - Blindaje
113 - Energía
114 - T. Hiperespacio
115 - M. Combustión
117 - M. impulso
118 - P. Hiperespacial
120 - Láser
121 - Iónica
122 - Plasma
123 - Red investigación
199 - Gravitón

202 - C. Pequeña
203 - C. Grande
204 - Ligero
205 - Pesado
206 - Crucero
207 - NB
208 - Colonizador
209 - Reciclador
210 - Sonda
211 - Bombardero
212 - Satélite
213 - Destructor
214 - EDLM
215 - Acorazado

401 - Lanzamisiles
402 - Láser pequeño
403 - Láser grande
404 - Cañón gauss
405 - Cañón ionico
406 - Cañón de plasma
407 - Cúpula P
408 - Cúpula G
502 - Misil de intercepción
503 - Misil interplanetario



Asi bien, en la carpeta "Planeten", donde encontraremos los planetas, estos tienen unos nombres fijos también, y siguen unas pautas.
Los nombres son los siguientes:

Imagen

Citar:
dschjungelplanet
eisplanet
gasplanet
normaltempplanet
trockenplanet
wasserplanet
wuestenplanet
mond




Dichos nombres, irán seguidos de un numero (del 01 al 11 o mas) en cada uno de los anteriores grupos, seguido de la extensión JPG.

Para las pequeñas, que serán las que se vean en el desplegable superior, en las colonias de visión general y galaxia, los nombres y numeraciones son los mismos, pero con el prefijo "s_".


Mond son las lunas, y debe haber una normal en la carpeta planeten y otra pequeña, con el prefijo s_ en la carpeta small.
Debris serán los escombros, y solo sera necesaria una en la carpeta normal (pero de pequeño tamaño, ya que solo sera usada en galaxia)



A la hora de crearlas, o modificar otras, debemos tener en cuenta el tamaño que les vamos a dar en el formate.css. O eso, o tener en cuenta luego el tamaño, sin importar el tamaño cuando las creemos.
Pero lo que es necesario es que coincidan, si las pequeñas son de 50x50px, en el formate.css lo diremos, ya que si no, estas se redimensionarán de una manera horrorosa.


Existen otras imágenes, como las del menú izquierdo (los 3 rectángulos Jpg en la carpeta GFX), los botones de escribir mensajes y los botones de galaxia (en la carpeta /img) y otras. Todas esas imágenes, pueden ser cambiadas, pero debemos mantener aunque sea su tamaño y su extensión.


4.- El formate.css.

Este archivo es el esqueleto del skin. En el declararemos todo: características del texto, de las celdas y cajas, etc... incluso existe mas de un apaño para cambiar cosas del juego (como texto) o añadir alguna cosa....todo siempre de lo legal, aunque eso depende del creador y su habilidad con este lenguaje, el CSS.


Hagamos una pequeña introduccion al css:

codigo:

1:
2:
3:
4:
5:



Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.