My OperaGuía: como hacer una skin de opera
Tuesday, September 19, 2006 2:01:35 PM
Nuevamente otras de las guías elaboradas por el staff de este blog (que alcanza el gran numero de 1 persona o sea yo) me dedique a investigar un poco como se hace una skin para opera y a elaborar mi propia skin, así que de paso mientras hacia mi skin elabore parte de esta guía (por lo que no se sorprendan si los tiempos verbales a veces no calzan 
), use windows xp y opera 9.02 cuando hice la skin y esta guia.
Me base en Opera 7 Skin specifications y la Opera Wiki: Advanced skin.ini-guide ambas en inglés
Tambien existe un editor via web para los novatos: Opera Skin Editor
Previo:
Necesitamos tres cosas principalmente:
A) Un editor de imágenes : Puede ser cualquiera (photoshop, gimp, etc) así que usa tu favorito, en mi caso voy a usar gimp ya que se puede usar en varias plataformas aunque para algunos efectos use el photoshop
B) Un editor de texto : Incluido en tu sistema operativo, en este caso voy a usar el blok de notas (notepad)
C) Compresor para los archivos .zip : Nuevamente puede ser cualquiera que soporte achivos .zip (como por ejemplo winzip, winrar, winace, etc)
Ahora la guía:
1) Comencemos
Primero, es recomendable bajar e instalar la ultima versión de Opera antes de hacer esto, para tener la ultima versión de la skin por defecto.
Encontremos la skin que trae por defecto opera (estándar_skin.zip), la cual se encuentra comúnmente en C:\Archivos de programa\Opera\skin y luego abrimos el archivo zip y lo descomprimimos en una carpeta (yo por ejemplo cree una carpeta llamada opera skin en mi disco duro y después extraje todos los archivos a esa carpeta) entre todos los archivos hay uno que se llama skin.ini, el cual contiene los ajustes y configuraciones de la skin.
2) Editando la skin
Ahora abriremos el archivo skin.ini con un editor de texto, en este caso utilizara el blok de notas (Más conocido como Notepad). El archivo luciría así:
La estructura básica es la siguiente
Comencemos a editarla
3) Informaciones Básicas:
La sección que primero se muestra es la de [Info] y contiene la información básica, la siguiente:
Le cambiamos un poco la información, yo por ejemplo puse:
Importante: No hay que cambiar el valor de la versión (2) o las ultimas versiones de opera rechazaran la skin
4) La sección de Opciones
Adivinaron esta en [Options] Quizás no contenga algunas cosas de las que voy a mencionar, en ese caso toman el valor por defecto, aquí voy con algunas cosas:
Puede tomar el valor de 0 o 1 (por defecto es 0) si se deja como 1 opera dibujara ciertos controles y similares para que luzcan nativos (como la apariencia del sistema)
Esto se utiliza para especificar en pixeles el ancho mínimo y máximo de los botones del pagebar (barra de paginas). Normalmente, no es necesario especificar esto, así que déjalos fuera o no los incluyas.
Fallback background = 0 o 1
Esto especifica si en caso de que no se encuentre algún elemento del tipo foreground (primer plano) o background (fondo) en la skin, se use o cargue el de la skin estándar. Normalmente los valores son foreground = 1 y background = 0 y significa que en el caso de que algunos los elementos del primer plano como las imágenes del botón que la piel nueva (la personalizada) no se tiene (no esta o existe), entonces se utiliza o traen de la skin estándar, pero que las imágenes de fondo no son traídas o se utilizan (ejemplo la apariencia de las ventanas, etc). Esto se basa en que en caso de que no se encuentre algún botón o similar no es necesario cambiar el fondo sino solo agregar el botón faltante, lo que puede pasar al agregar nuevas cosas en las ultimas versiones de Opera. Así que nuevamente al menos que quieras hacer un cambio en esto es mejor dejarlo como esta o no agregarlo
Esto hace que aparezca o no la casilla imágenes grandes (herramientas > apariencia > barra de herramientas), en caso que sea 1 aparece esa casilla que aumenta el tamaño de la imágenes (como los botones) y si es 0 no aparece esa opción
Controla el relleno (padding) general de los textos de los botones, elimina el padding individual del texto, creo que por defecto es 2
Centra las lengüetas o pestañas (tabs) fuera del pagebar (barra de paginas) por defecto es 0.
Creo que eso es todo en la parte de opciones.
5) Configuración de Imágenes y elementos del skin.ini
Esto abarca casi todo el resto del archivo, y la parte que más nos interesa que trabajaremos con imágenes, así que va una explicación general de esto.
Lo que sigue es de la forma:
Así que va una tabla resumen con los elementos principales y sus posibles valores:
Lo pueden ver con mayor detalle en Opera 7 Skin specifications o en Opera Wiki: Advanced skin.ini-guide
En un comienzo no se entiende mucho la tablita, pero trabajando en la skin se comienza a comprender que hace cada uno, así que vamos a hacer un par de ejemplos pero antes hay que explicar como se da la ruta de las imágenes (más adelante lo explico con más detalle), cuando declare la ruta de una imagen no hay que poner la ruta completa, como seria D:\opera skin\standard_skin\buttons\back.png sino que solo se pone la parte que esta al final (o sea desde la carpeta donde esta el skin.ini) en este caso seria buttons\back.png lo pueden ver con mas detalle en el punto 6 de esta guía.
Pasemos a los ejemplos:
Ejemplo 1:
Es una cita textual de la estándar skin, sin modificar nada:
Explicación:
En el comienzo al Menu Button Skin se la un padding (acolchado/relleno) en la derecha e izquierda de 7 pixeles.
Ahora en Menu Button Skin.hover hereda las propiedades del Menu Button Skin pero se cambie el color del texto a blanco (#ffffff) y el color de fondo a = #6B82A4 cuando este elemento de la skin esta flotando/se asoma (hover)., los colores se pueden escribir como RGB o sea del modo #RRGGBB, o como colores definidos por el usuario como por ejemplo "Window Disabled"
Finalmente en Menu Button Skin.selected se repite las propiedades fijadas en el Menu Button Skin.hover
Ahora lo modificamos un poco:
Si se fijan en este caso lo único que hice fue agregar algunas imágenes para cambiar la apariencia de los botones.
Ejemplo 2:
En la standar skin tenemos:
Si se fijan solo están definidos márgenes , padding y espaciado de la barra de harramientas, luego lo modifico un poco
No es la gran cosa, pero fijense que en la ultima línea agregue un text zoom, lo que hace un efecto de que al pasar el curso por los botones de la barra principal se agrande el texto que tienen debajo los botones.
Lo demás es de la misma forma.
6) Modificando y creando imágenes:
Primero hay que señalar que tenemos tres extensiones típicas: los JPG que son ideales para fotos y fondos por la profundidad de colores y compresión que manejan, en cambios los GIF se limitan a 256 colores, pero permiten solo permiten un color transparente y se pueden animar, los PNG tienen una mayor profundidad de color que el gif y permiten distintos grados de transparencia, por lo que se pueden crear sombras por ejemplo, así que estos dos últimos (sobre todo el PNG) son ideales para trabajar los botones, siendo el JPG útil para algunos fondos (aunque se pueden utilizar los otros dos).
La manera más fácil para hacer cambios en la skin, es modificar las imágenes ya existentes ya que así no hay que preocuparse mucho por las configuraciones de la ruta de la imagen, sino solo de la apariencia, así por ejemplo modificaremos la flecha para devolverse a la pagina anterior (\buttons\back.png), tal como lo muestra la imagen la modificamos un poco para lograr lo que queríamos y luego la guardamos sobre la imagen original. Como recomendación, muchas imágenes son muy pequeñas (ejemplo 16x16 px) por lo que es recomendable trabaja con un zoom entre 800-1600% para poder ver cada uno de los pixeles de la imagen.
Por lo anteriormente planteado se explica por que la gran mayoría de las imágenes de la skin son .png ya que se hace necesario que se pueda ver el fondo, como en el caso de los botones, aunque hay excepciones como /window/background.jpeg el cual (al igual que las otras imágenes) lo podemos guardar con otra extensión e incluso con otro nombre, pero en ese caso hay que modificar la ruta dentro del skin.ini para que corresponda a la a imagen que queremos.
Otra cosa es que podemos agregar y eliminar carpetas (por ejemplo yo agregue una carpeta con las imágenes de la barra de desplazamiento), en ese caso hay que asegurarse de que dentro del skin.ini la ruta de las imágenes sea correcta.
7) Como publicar la skin
Una vez que hayan hecho todos los cambios necesarios a las imágenes y el skin.ini, con el compresor (como por ejemplo winrar) procedemos a seleccionar las carpetas que contienen las imágenes y el skin.ini y los comprimimos en un archivo zip con el nombre que le van a poner a la skin, como lo muestra la imagen.
Luego para probar su skin copian el archivo zip en la carpeta en donde esta las distintas skins (normalmente C:\Archivos de programa\Opera\skin) y luego abren opera, y en el menu hrarramientas > apariencia entre las skin que tengan aparecera la que crearon, la eligen y la prueban para ver que lodo funcione como debe.
Como ultimo paso publican su skin para que los demás la puedan bajar (si no la quieren publicar es decisión suya) van a la dirección http://my.opera.com/community/customize/submit/ ingresan su nombre de usuario y contraseña y les aparecerá el formulario para enviar su skin con el primer botón les muestra su PC y tiene que buscar y escoger el archivo .zip con su skin, el segundo es para subir una imagen con una captura de su skin (la imagen tiene que ser PNG, JPG o GIF de 180*120 píxeles como máximo) luego ingresan el nombre de su skin, la versión de la skin y escogen en el menú la versión de opera (son dos opciones para opera 6 o para opera 7 y superiores) y luego ingresan una descripción de la skin, escogen el color que mas se acerque al de la skin, su categoría y escriben algunos tags, aceptan los términos de uso y suben la skin con el botón upload. También tienen la opción (si quieren) de enviar otras configuraciones como Toolbars, Mouse Gestures, etc.
Nota: Se demora un par de días para que opera revise y publique su skin
), use windows xp y opera 9.02 cuando hice la skin y esta guia.Me base en Opera 7 Skin specifications y la Opera Wiki: Advanced skin.ini-guide ambas en inglés
Tambien existe un editor via web para los novatos: Opera Skin Editor
Previo:
Necesitamos tres cosas principalmente:
A) Un editor de imágenes : Puede ser cualquiera (photoshop, gimp, etc) así que usa tu favorito, en mi caso voy a usar gimp ya que se puede usar en varias plataformas aunque para algunos efectos use el photoshop
B) Un editor de texto : Incluido en tu sistema operativo, en este caso voy a usar el blok de notas (notepad)
C) Compresor para los archivos .zip : Nuevamente puede ser cualquiera que soporte achivos .zip (como por ejemplo winzip, winrar, winace, etc)
Cuando cite algo textualmente del archivo lo voy a poner en un cuadro como este
Cuando modifique algo del archivo de la skin tendrá esta apariencia
| Cuando me este refiriendo a alguna estructura en general se vera así |
Ahora la guía:
1) ComencemosPrimero, es recomendable bajar e instalar la ultima versión de Opera antes de hacer esto, para tener la ultima versión de la skin por defecto.
Encontremos la skin que trae por defecto opera (estándar_skin.zip), la cual se encuentra comúnmente en C:\Archivos de programa\Opera\skin y luego abrimos el archivo zip y lo descomprimimos en una carpeta (yo por ejemplo cree una carpeta llamada opera skin en mi disco duro y después extraje todos los archivos a esa carpeta) entre todos los archivos hay uno que se llama skin.ini, el cual contiene los ajustes y configuraciones de la skin.
2) Editando la skinAhora abriremos el archivo skin.ini con un editor de texto, en este caso utilizara el blok de notas (Más conocido como Notepad). El archivo luciría así:
La estructura básica es la siguiente
| [Sección] Configuración = Valor de la configuración ; Una línea que es un comentario (no afecta a los ajustes) |
Comencemos a editarla
3) Informaciones Básicas:
La sección que primero se muestra es la de [Info] y contiene la información básica, la siguiente:
[Info] Name=Opera7 Standard Skin Author=Opera Software Version=2 Preview Image=
Le cambiamos un poco la información, yo por ejemplo puse:
[Info]
Name=Win Aqua
Author=Daniel Fuentes (http://my.opera.com/cyborgzero/)
Version=2
Preview Image=
Importante: No hay que cambiar el valor de la versión (2) o las ultimas versiones de opera rechazaran la skin
4) La sección de Opciones
Adivinaron esta en [Options] Quizás no contenga algunas cosas de las que voy a mencionar, en ese caso toman el valor por defecto, aquí voy con algunas cosas:
| Native skin = 0 o 1 |
Puede tomar el valor de 0 o 1 (por defecto es 0) si se deja como 1 opera dibujara ciertos controles y similares para que luzcan nativos (como la apariencia del sistema)
| Pagebar max button width = valor (en pixeles) Pagebar min button width = valor (en pixeles) |
Esto se utiliza para especificar en pixeles el ancho mínimo y máximo de los botones del pagebar (barra de paginas). Normalmente, no es necesario especificar esto, así que déjalos fuera o no los incluyas.
| Fallback foreground = 0 o 1 |
Fallback background = 0 o 1
Esto especifica si en caso de que no se encuentre algún elemento del tipo foreground (primer plano) o background (fondo) en la skin, se use o cargue el de la skin estándar. Normalmente los valores son foreground = 1 y background = 0 y significa que en el caso de que algunos los elementos del primer plano como las imágenes del botón que la piel nueva (la personalizada) no se tiene (no esta o existe), entonces se utiliza o traen de la skin estándar, pero que las imágenes de fondo no son traídas o se utilizan (ejemplo la apariencia de las ventanas, etc). Esto se basa en que en caso de que no se encuentre algún botón o similar no es necesario cambiar el fondo sino solo agregar el botón faltante, lo que puede pasar al agregar nuevas cosas en las ultimas versiones de Opera. Así que nuevamente al menos que quieras hacer un cambio en esto es mejor dejarlo como esta o no agregarlo
| Large Images = 0 o 1 |
Esto hace que aparezca o no la casilla imágenes grandes (herramientas > apariencia > barra de herramientas), en caso que sea 1 aparece esa casilla que aumenta el tamaño de la imágenes (como los botones) y si es 0 no aparece esa opción
| Button Text Padding = valor |
Controla el relleno (padding) general de los textos de los botones, elimina el padding individual del texto, creo que por defecto es 2
| Center tabs =1 |
Centra las lengüetas o pestañas (tabs) fuera del pagebar (barra de paginas) por defecto es 0.
Creo que eso es todo en la parte de opciones.
5) Configuración de Imágenes y elementos del skin.ini
Esto abarca casi todo el resto del archivo, y la parte que más nos interesa que trabajaremos con imágenes, así que va una explicación general de esto.
Lo que sigue es de la forma:
| [Nombre del elemento de la skin] configuración = Valor de la configuración |
Así que va una tabla resumen con los elementos principales y sus posibles valores:
| Type | = Image | Box | BoxTile (por defecto es Image) |
| Margin | = Pixeles (numero) |
| Height | = Pixeles (numero) |
| Width | = Pixeles (numero) |
| Color | = #RRGGBB | Window | Window Disabled |
| Text Color | = #RRGGBB | Window | Window Disabled |
| Tile | = Ruta de la imagen |
| Corner | = Ruta de la imagen |
| Name of element | = Ruta de la imagen, 1 o 0 (colorize : yes/no), Pixeles (numero) |
| Blend | = Porcentaje (numero del 0 al 100) |
| Clone | = vinculo al elemento |
| Child | = vinculo al elemento |
| Actions | = .hover | .pressed | .selected | .attention | .disabled | .bottom | .open |
| Positions | = .top | .bottom | .left | .right |
Lo pueden ver con mayor detalle en Opera 7 Skin specifications o en Opera Wiki: Advanced skin.ini-guide
En un comienzo no se entiende mucho la tablita, pero trabajando en la skin se comienza a comprender que hace cada uno, así que vamos a hacer un par de ejemplos pero antes hay que explicar como se da la ruta de las imágenes (más adelante lo explico con más detalle), cuando declare la ruta de una imagen no hay que poner la ruta completa, como seria D:\opera skin\standard_skin\buttons\back.png sino que solo se pone la parte que esta al final (o sea desde la carpeta donde esta el skin.ini) en este caso seria buttons\back.png lo pueden ver con mas detalle en el punto 6 de esta guía.
Pasemos a los ejemplos:
Ejemplo 1:
Es una cita textual de la estándar skin, sin modificar nada:
[Menu Button Skin] Padding Left= 7 Padding Right= 7 [Menu Button Skin.hover] Text Color= #ffffff Color= #6B82A4 [Menu Button Skin.selected] Clone= Menu Button Skin.hover
Explicación:
En el comienzo al Menu Button Skin se la un padding (acolchado/relleno) en la derecha e izquierda de 7 pixeles.
Ahora en Menu Button Skin.hover hereda las propiedades del Menu Button Skin pero se cambie el color del texto a blanco (#ffffff) y el color de fondo a = #6B82A4 cuando este elemento de la skin esta flotando/se asoma (hover)., los colores se pueden escribir como RGB o sea del modo #RRGGBB, o como colores definidos por el usuario como por ejemplo "Window Disabled"
Finalmente en Menu Button Skin.selected se repite las propiedades fijadas en el Menu Button Skin.hover
Ahora lo modificamos un poco:
[Menu Button Skin]
Padding Left= 5
Padding Right= 5
[Menu Button Skin.hover]
Type= BoxTile
Tile Center= selector_button/hover_center.png
Tile Left= selector_button/hover_left.png
Tile Top= selector_button/hover_top.png
Tile Right= selector_button/hover_right.png
Tile Bottom= selector_button/hover_bottom.png
Corner Topleft= selector_button/hover_topleft.png
Corner Topright= selector_button/hover_topright.png
Corner Bottomright= selector_button/hover_bottomright.png
Corner Bottomleft= selector_button/hover_bottomleft.png
[Menu Button Skin.selected]
Type= BoxTile
Tile Center= selector_button/selected_center.png
Tile Left= selector_button/selected_left.png
Tile Top= selector_button/selected_top.png
Tile Right= selector_button/selected_right.png
Tile Bottom= selector_button/selected_bottom.png
Corner Topleft= selector_button/selected_topleft.png
Corner Topright= selector_button/selected_topright.png
Corner Bottomright= selector_button/selected_bottomright.png
Corner Bottomleft= selector_button/selected_bottomleft.png
Si se fijan en este caso lo único que hice fue agregar algunas imágenes para cambiar la apariencia de los botones.
Ejemplo 2:
En la standar skin tenemos:
[Toolbar Button Skin] Padding Left= 4 Padding Top= 3 Padding Right= 6 Padding Bottom= 5 Margin Right= -1 Spacing= 2
Si se fijan solo están definidos márgenes , padding y espaciado de la barra de harramientas, luego lo modifico un poco
[Toolbar Button Skin]
Padding Left= 3
Padding Top= 3
Padding Right= 5
Padding Bottom= 5
Margin Right= -1
Spacing= 2
Text Zoom= 1
No es la gran cosa, pero fijense que en la ultima línea agregue un text zoom, lo que hace un efecto de que al pasar el curso por los botones de la barra principal se agrande el texto que tienen debajo los botones.
Lo demás es de la misma forma.
6) Modificando y creando imágenes:
Primero hay que señalar que tenemos tres extensiones típicas: los JPG que son ideales para fotos y fondos por la profundidad de colores y compresión que manejan, en cambios los GIF se limitan a 256 colores, pero permiten solo permiten un color transparente y se pueden animar, los PNG tienen una mayor profundidad de color que el gif y permiten distintos grados de transparencia, por lo que se pueden crear sombras por ejemplo, así que estos dos últimos (sobre todo el PNG) son ideales para trabajar los botones, siendo el JPG útil para algunos fondos (aunque se pueden utilizar los otros dos).
La manera más fácil para hacer cambios en la skin, es modificar las imágenes ya existentes ya que así no hay que preocuparse mucho por las configuraciones de la ruta de la imagen, sino solo de la apariencia, así por ejemplo modificaremos la flecha para devolverse a la pagina anterior (\buttons\back.png), tal como lo muestra la imagen la modificamos un poco para lograr lo que queríamos y luego la guardamos sobre la imagen original. Como recomendación, muchas imágenes son muy pequeñas (ejemplo 16x16 px) por lo que es recomendable trabaja con un zoom entre 800-1600% para poder ver cada uno de los pixeles de la imagen.
Por lo anteriormente planteado se explica por que la gran mayoría de las imágenes de la skin son .png ya que se hace necesario que se pueda ver el fondo, como en el caso de los botones, aunque hay excepciones como /window/background.jpeg el cual (al igual que las otras imágenes) lo podemos guardar con otra extensión e incluso con otro nombre, pero en ese caso hay que modificar la ruta dentro del skin.ini para que corresponda a la a imagen que queremos.
Otra cosa es que podemos agregar y eliminar carpetas (por ejemplo yo agregue una carpeta con las imágenes de la barra de desplazamiento), en ese caso hay que asegurarse de que dentro del skin.ini la ruta de las imágenes sea correcta.
7) Como publicar la skin
Una vez que hayan hecho todos los cambios necesarios a las imágenes y el skin.ini, con el compresor (como por ejemplo winrar) procedemos a seleccionar las carpetas que contienen las imágenes y el skin.ini y los comprimimos en un archivo zip con el nombre que le van a poner a la skin, como lo muestra la imagen.
Luego para probar su skin copian el archivo zip en la carpeta en donde esta las distintas skins (normalmente C:\Archivos de programa\Opera\skin) y luego abren opera, y en el menu hrarramientas > apariencia entre las skin que tengan aparecera la que crearon, la eligen y la prueban para ver que lodo funcione como debe.
Como ultimo paso publican su skin para que los demás la puedan bajar (si no la quieren publicar es decisión suya) van a la dirección http://my.opera.com/community/customize/submit/ ingresan su nombre de usuario y contraseña y les aparecerá el formulario para enviar su skin con el primer botón les muestra su PC y tiene que buscar y escoger el archivo .zip con su skin, el segundo es para subir una imagen con una captura de su skin (la imagen tiene que ser PNG, JPG o GIF de 180*120 píxeles como máximo) luego ingresan el nombre de su skin, la versión de la skin y escogen en el menú la versión de opera (son dos opciones para opera 6 o para opera 7 y superiores) y luego ingresan una descripción de la skin, escogen el color que mas se acerque al de la skin, su categoría y escriben algunos tags, aceptan los términos de uso y suben la skin con el botón upload. También tienen la opción (si quieren) de enviar otras configuraciones como Toolbars, Mouse Gestures, etc.
Nota: Se demora un par de días para que opera revise y publique su skin
Edgar P. NashNetegrof # Wednesday, October 25, 2006 4:42:50 PM
Small Screen, la pueden encontrar en View->Small screen), (Translate, click derecho en una palabra y veran traducir), (Check for updates, Help->Check for updates), (About Opera, Help->About Opera). Necesito de la ayuda de alguien que tenga experiencia en este tema para poder terminar el skin y compartirlo con la comunidad.
Y por ultimo despues que termine el skin como puedo publicarlo para que otras personas lo puedan bajar y usarlo. Si no te es molestia podrias mandarme un mensaje en caso de poder ayudarme en este sentido?.