Como realizar un Skin para PsRockola,

el_ripper

Bovino maduro
#1
Hola Kamarada Morgan, más que un programa serian 2 aclaro un editor de textos (block de notas) y un editor de imágenes (photoshop) y mucha, mucha paciencia. :)

Dentro de la carpeta donde instalamos el psrockola, tenemos una subcarpeta "Mascaras" y dentro de esta varias con los skins que vienen con el programa.

Vamos a tomar como ejemplo: PsRockola\Mascaras\psrockola (4-800x600)

IMPORTANTE: haz una copia de la carpeta y renombrala como "mi skin 4-800x600" por decir algo, donde 4 son las portadas y 800x600 el tamaño en pixeles.

 

el_ripper

Bovino maduro
#2
Ahí encontraremos 2 archivos "main" uno que es un mapa de bits en formato .bmp, y otro con extención DIB, este lo podemos abrir con el block de notas para modificarlo de acuerdo a nuestras necesidades, también encontraremos varios gráficos mas que hacen de botones en el psrockola, de estos tenemos dos por botón, el original lo vemos cuando abrimos el programa, la copia aparece cuando activamos el botón, y hace el efecto de que esta oprimido.

Para modificar el main.bmp, primero recomiendo le des un repaso al archivo de texto, ya que en el tenemos los elementos que aparecen en el psrockola, así como su posición (en pixeles).

Voy a tratar de explicar, para que sirven y para que los vayas ubicando en la pantalla, los que no tengan comentario, es por que no me acuerdo o no los uso en los skins que he hecho, favor de investigarlo por su cuenta. (si colocas una letra "x" antes de la llave x[*********] este elemento no se mostrará en la pantalla. de esa manera podrás ubicar los que falten.

Esta es la estructura del archivo .DIB:

[pbxArtistas] * caja para mostrar las portadas de los discos *
Font.Name=Arial narrow * tipo de letra, esta la puedes cambiar por la que tengas en tu sistema *
Font.Size=17 *tamaño de letra *
Font.Bold=1 * el 1 representa verdadero, el 0 falso *
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
FontOn.Color=0,0,0 * color de la fuente en rgb, los valores asilan entre 0 y 255 *
BGFontOn.Color=245,245,0 * color del fondo de las portadas *
BGFontOn0.Color=15,255,15 * color cambiante *
BGFontOn1.Color=245,245,0 * " * lo mismo
BGFontOn2.Color=15,255,15 * " * lo mismo

FontOff.Color=255,255,255 * textos de los discos no seleccionados *
BGFontOff.Color=0,99,147 * color de las portadas no seleccionadas *
BGColor=0,0,0 * color de la caja (4 portadas, negro) *
Left=20 * posición en pixeles * recordemos que este skin mide 800x600 pixeles,
Top=20 * " *
Width=759 * ancho de la caja que delimita el espacio de las portadas *
Height=214 * alto de la caja *
nSkinAnchoItem=187 * ancho de cada recuadro detras de la portada *
nSkinAltoItem=214 * alto del recuadro detras de la portada *
nSkinAltoFoto=184 * tamaño de la portada (es cuadrada en este caso 184x184 pixeles *
nSkinX=2
nSkinY=2
nSkinEspacioAnchoItem=2
nSkinBordeFoto=3 * espacio entre portadas *
nSkinNuevaLinea=0
nSkinTopNUevaLinea=176
nSkinEsquina=5
nSkinTotalArtistas=4
nSkinTopNombreArtista=0
nSkinArtistasPorPagina=4 * portadas por pagina *
bSkinNombreArtistaWordBreak=0
 

el_ripper

Bovino maduro
#3
[Item1] * posición de la primera portada de izquierda a derecha *
L1=2
T1=2
R1=187
B1=210
L2=5
T2=5
R2=181
B2=181
L3=3
T3=188
R3=186
B3=24

[Item2] * 2a portada *
L1=192
T1=2
R1=187
B1=210
L2=195
T2=5
R2=181
B2=181
L3=193
T3=188
R3=186
B3=24

[Item3] *3a portada *
L1=382
T1=2
R1=187
B1=210
L2=385
T2=5
R2=181
B2=181
L3=383
T3=188
R3=186
B3=24

[Item4] * 4a portada *
L1=572
T1=2
R1=187
B1=210
L2=575
T2=5
R2=181
B2=181
L3=573
T3=188
R3=186
B3=24

[pbxTemas] * CAJA PARA NOMBRES DE LAS CANCIONES *
Font.Name=Arial * tipo de letra *
Font.Bold=1 * verdadero *
Font.Italic=0 * falso *
Font.Underline=0
Font.StrikeOut=0
Font.Color=240,240,240 * color *
Font.Size=16 * tamaño *

SelectedBG=245,245,0 * colores de letra *
SelectedBG0=0,255,0
SelectedBG1=245,245,0
SelectedBG2=0,255,0

SelectedFontColor=0,0,0 * color de texto seleccionado *
ShadowFontColor=0,0,0 * sombra del texto *
VideoColor=0,255,0 * color del cuadrito a la izquierda, verde claro = video *
NoVideoColor=0,70,0 * verde obscuro = musica *
KaraokeColor=255,128,128 * rosa = karaoke *
BorderVideoColor=128,128,128 * color del borde del cuadro *
nListaTemasItemHeightDec=2
Left=20 * posición *
Top=351 * posición *
Width=488 * tamaño *
Height=198 * tamaño *

[lblArtista] * NOMBRE DEL GRUPO EN REPRODUCCIÓN *
Font.Name=Impact
Font.Size=22
Font.Bold=0
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Font.Color=0,0,0
ShadowFontColor=255,255,255
ShadowDeep=2
Left=18
Top=298
Width=370
Height=47
Alignment=0

[lblArtistaPos] * NUMERO X DE Y DISCOS *
Font.Name=Tahoma
Font.Size=18
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Font.Color=0,0,0
ShadowFontColor=255,255,255
ShadowDeep=2
Left=17
Top=237
Width=201
Height=39
Alignment=2

[lblTemaPos] * NUMERO DE PISTA EN REPRODUCCIÓN = cancion x de y*
Font.Name=Tahoma
Font.Size=15
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Font.Color=0,0,0
ShadowFontColor=255,255,255
ShadowDeep=2
Left=387
Top=305
Width=123
Height=34
Alignment=1

[lblGenero]
Font.Name=Impact
Font.Size=22
Font.Bold=0
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Font.Color=255,255,255
ShadowFontColor=0,0,0
ShadowDeep=2
Left=245
Top=255
Width=92
Height=35

[lblGeneroNombre] * ETIQUETA GENERO *
Font.Name=Impact
Font.Size=22
Font.Bold=0
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Font.Color=255,255,255
ShadowFontColor=0,0,0
ShadowDeep=2
Left=447
Top=255
Width=335
Height=35

[lblGeneroPos] * POSICIÓN DE LOS GENEROS: MUSICA, VIDEO, KARAOKE *
Font.Name=Tahoma
Font.Size=18
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Font.Color=255,255,255
ShadowFontColor=0,0,0
ShadowDeep=2
Left=337
Top=257
Width=110
Height=35
Alignment=2

[AudioVideoLabel]
Font.Color=255,255,255
ShadowFontColor=0,0,0
ShadowDeep=2
Font.Name=Impact
Font.Size=12
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0

[ScreenPanel]
BGColor=10,10,10

[Skin] * PANTALLA DE REPRODUCCIÓN DE VIDEOS *
NormalScreenLeft=559 * posición *
NormalScreenTop=314 * posición *
NormalScreenWidth=221 *tamaño *
NormalScreenHeight=167 *tamaño *
Tipo=3

[ImgOk] * botón OK*
Left=685
Top=532
Width=35
Height=35

[ImgArriba] * botón ARRIBA*
Left=611
Top=532
Width=35
Height=35

[ImgAbajo] * botón ABAJO*
Left=648
Top=532
Width=35
Height=35

[ImgIzquierda] * botón IZQUIERDA*
Left=537
Top=532
Width=35
Height=35

[ImgDerecha] * botón DERECHA*
Left=574
Top=532
Width=35
Height=35

[ImgAbc] * botón ABECEDARIO *
Left=722
Top=532
Width=35
Height=35

[ImgGeneros] * botón GENEROS*
Left=759
Top=532
Width=35
Height=35

[lblAudio] * ETIQUETA (PALABRA) AUDIO *
Left=555
Top=508
Width=58
Height=20
Alignment=0
Wordwrap=0
Font.Color=255,255,255
ShadowFontColor=0,0,0
ShadowDeep=2
Font.Name=Arial narrow
Font.Size=15
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0

[lblVideo] * ETIQUETA (PALABRA) VIDEO *
Left=633
Top=508
Width=55
Height=20
Alignment=0
Wordwrap=0
Font.Color=255,255,255
ShadowFontColor=0,0,0
ShadowDeep=2
Font.Name=Arial narrow
Font.Size=15
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0

[lblKaraoke] * ETIQUETA (PALABRA) KARAOKE *
Left=710
Top=508
Width=90
Height=20
Alignment=0
Wordwrap=0
Font.Color=255,255,255
ShadowFontColor=0,0,0
ShadowDeep=2
Font.Name=Arial narrow
Font.Size=15
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0

[shAudio] * POSICIÓN Y COLOR DEL CUADRITO JUNTO A LA ETIQUETA, AUDIO *
Left=537
Top=510
Width=15
Height=15

[shVideo] * POSICIÓN Y COLOR DEL CUADRITO JUNTO A LA ETIQUETA, VIDEO *
Left=615
Top=510
Width=15
Height=15

[ShKaraoke] * POSICIÓN Y COLOR DEL CUADRITO JUNTO A LA ETIQUETA, KARAOKE *
Left=692
Top=510
Width=15
Height=15

[pnlBarraEstado] * POSICIÓN Y TAMAÑO DE LA BARRA NEGRA (LA DE HASTA ABAJO) *
Left=0
Top=570
Width=800
Height=30

[lblCreditos1] * POSICIÓN, TAMAÑO DE CAJA DELIMITADORA, Y TIPO DE LETRA PARA CRÉDITOS *
Left=2
Top=1
Width=375
Height=25
Font.Name=Arial narrow
Font.Color=255,0,0
Font.Size=16
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Alignment=2


[pbxMensajesRotativos1] * POSICIÓN, TAMAÑO DE LETRA, COLOR DE LOS MENSAJES ROTATIVOS *
Left=380
Top=-1
Width=200
Height=30
Font.Name=Impact
Font.Color=255,255,0
Font.Size=20
Font.Bold=0
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0

[lblInfo1] * VERSIÓN DEL PSROCKOLA, PON UNA "X" ANTES DEL [***] SI NO QUIERES QUE SE VEA*
Left=587
Top=1
Width=210
Height=25
Font.Name=Arial narrow
Font.Size=16
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Font.Color=255,255,255

[gaProgreso] * BARRA VERDE DE PROGRESO *
Left=610
Top=7
Width=184
Height=18


[lblListaRep1] * LISTA DE REPRODUCCIÓN *
Left=607
Top=0
Width=190
Height=0
Font.Name=Arial
Font.Color=255,255,0
Font.Size=13
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Alignment=1

[pnlBarraProgreso1]
Left=635
Top=18
Width=160
Height=15

[MainForm] * TAMAÑO DEL SKIN *
Left=34
Top=34
Width=083EF6
Height=06FE67
nSkinBordePantalla=60
nSkinAltoVideoAprox=599

[frmAbc] * ABECEDARIO * me parece que siempre aparecerá al centro de la pantalla.
Width=785
Height=73
BtnAbcLeft=7
BtnAbcTop=8
BtnAbcWidth=25
BtnAbcHeight=38
BtnAbcEsp=29
BtnFontSize=23

[frmGeneros]
Height=308
Width=560
FontSize=22
pnlTituloGeneroLeft=7
pnlTituloGeneroTop=7
pnlTituloGeneroWidth=515
pnlTituloGeneroHeight=39
pbGenerosLeft=13
pbGenerosTop=52
pbGenerosWidth=516
pbGenerosHeight=180
pbGenerosAltoItem=36
btnGeneroSubirLeft=13
btnGeneroSubirTop=239
btnGeneroSubirWidth=169
btnGeneroSubirHeight=38
btnGeneroBajarLeft=187
btnGeneroBajarTop=239
btnGeneroBajarWidth=169
btnGeneroBajarHeight=38
btnGeneroOkLeft=361
btnGeneroOkTop=239
btnGeneroOkWidth=169
btnGeneroOkHeight=38

[frmOk]
FontSize=22
Width=435
BtnX=15
BtnY=15
BtnWidth=388
BtnHeight=38
BtnEsp=10
BtnEspV=30

[frmListaRep] * caja para lista de reproducción *
FontSize=22
Width=767
Height=515
pnlTituloLeft=14
pnlTituloTop=3
pnlTituloWidth=723
pnlTitulooHeight=39
pbListaRepLeft=13
pbListaRepTop=52
pbListaRepHeight=432
pbListaRepWidth=724
pbListaRepAltoItem=36

[frmRanking] * ranking *
FontSize=22
Width=767
Height=515
pnlTituloLeft=14
pnlTituloTop=3
pnlTituloWidth=723
pnlTitulooHeight=39
pbRankingLeft=13
pbRankingTop=52
pbRankingHeight=360
pbRankingWidth=724
pbRankingAltoItem=36

[pbxListaRep] * tipo de letra en lista de reproducción *
Font.Name=Arial narrow
Font.Size=13
Font.Bold=1
Font.Italic=0
Font.Underline=0
Font.StrikeOut=0
Font.Color=255,255,0
Color=0,0,0


A grandes rasgos esto es lo que he podido sacarle al archivo. Bueno ahora que ya tienes ubicados la mayoría de los componentes, piensa si quieres utilizar todas las opciones del skin, yo por mi parte no utilizo algunas cosas, como botones, etiquetas de generos, y hasta le he quitado la barra negra. ya que las rockolas que he armado han sido por el puro gusto, no son comerciales.

Como ya te había dicho anteriormente al poner una "x" al principio del "componente" del skin esa parte no saldrá en la pantalla. cuando hayas decidido que componentes usaras y les hayas dado una posición en el skin, abre el archivo main.bmp con tu editor de imagen, pintalo de algun color (todo el fondo), y guardalo. Ahora abre el psrockola, ve al menú de opciones y cambia el skin por el que estas editando "mi skin 4-800x600" y toma una captura de pantalla, esta sera tu base para modificar el fondo.



Yo hice este, y como verás le volé varias cosas. Después de la edición:



y para terminar edite también este archivito, "nopic.bmp"



PARTE 2:

Viene la edición en photoshop, o el de tu preferencia, esa parte te la dejo a tu gusto, ya sabrás cual será el tema de tu skin, suerte y mucha paciencia, que te hará falta, cuando decidas mover los componentes de posición o redimensiónarlos.

Un Saludo...!!
 

el_ripper

Bovino maduro
#6
Tienes mucha razón amigo CHOCO1069, una imagen vale más que mil palabras, así que mejor les dejo una liga para que vean las imágenes, ya que el foro no me da chance de colocarlas

https://www.dropbox.com/sh/38tquuq5745vfj2/AADtVGO3S1uVthh11eVs0H2ia?dl=0[URL] Un Saludo...!!
 
#7
Muchisimas gracias por la ayuda con esta explicacion e podido editar una del tamaño 1280x1024 pero el programa se llama rockobox porque en ese el codigo para modificar el tamaño me sale en pixeles pero lo malo es que no me carga los videos y en psrockola me carga los videos y las imagenes de los artistas pero no puedo modificar el tamaño del skin porque me sale como en exadecimal
esto es en psrockola
[MainForm] * TAMAÑO DEL SKIN *
Left=34
Top=34
Width=083EF6
Height=06FE67
nSkinBordePantalla=60
nSkinAltoVideoAprox=599

este es en rockobox

[MainForm]
Left=0
Top=0
Width=800
Height=600
nSkinBordePantalla=60
nSkinAltoVideoAprox=599

aqui les dejo el que edite en rockobox https://www.dropbox.com/s/rqzop3ofptrsall/Morgan (10 - 1280x1020).rar?dl=0
 

el_ripper

Bovino maduro
#8
Hola kamarada MORGAN, que bueno que te sirvió la información, dejame decirte que ya salió la versión 4G de Psrockola, en esta trae una opción para que el programa trate de ajustar los skins al tamaño de tu monitor, yo baje el demo solo para probar ese detalle y si funciona, probé con un monitor 1024x768 y le puse un skin 1280x768 y al principio quedo mocha la pantalla pero puse esa opción de ajustar al monitor, me sali del psrockola volví a entrar y el skin se ajusto al tamaño de mi monitor.

Un saludo...!!
 
#9
arranqué con todas ganas hice varios skin siempre en rockobox ya que no había leído tu información, pero de tanto estar editando los fondos ahora me manda un error con las imágenes pero los los primeros skin que hice me los reconoce sospecho que es photoshop el del erro ya que si convierto los skin con otro programa siempre a bmp si me los reconoce pero si los guarda desde photoshop en bmp me da el error
 

el_ripper

Bovino maduro
#11
Hola kamarada Henry Morgan, el problema con las imágenes también me pasa con photoshop, no me queda otra mas que reabrir las imagenes con paint y sobreescribir el archivo. En cuanto a la versión 4G, solo tengo el demo que puedes descargar del blog del programador :

paradesoft1.blogspot.com/p/psrockola.html

La que uso es la 4D, si te interesa la posteo. Un Saludo...!!
 

Dan.iel

Bovino maduro
#13
Buen día, tengo un problema que me ha pasado con cualquier versión del PsRockola, no me guarda la lista de reproducción, esta una canción en reproducción y al momento de seleccionar otra, no la pone en la lista, la toca inmediatamente. Que podrá ser?

Saludos
 

Dan.iel

Bovino maduro
#15
Gracias por responder, si tengo desactivada esa opción.

Anoche estuve haciendo pruebas, en la pestaña de Créditos tenia seleccionada que tocara la música/vídeo/karaoke en la opción de Normal, la puse en VIP y de esa forma si me guarda la lista de canciones.

Tal vez tenia la opción errónea.

Lo que no puedo hacer es que toque la música aleatoria (música gratuita), la tengo que después de 1 segundo de inactividad toque la música pero no pasa nada
 

el_ripper

Bovino maduro
#16
Hola Kamarada, solo indicale de que subcarpeta tiene que tocar la música, precisamente en la pestaña reproducción.:



Selecciona la carpeta.

Un Saludo...!!
 

Dan.iel

Bovino maduro
#17
Gracias por responder, le tengo habilitado todo eso y ni así reproduce la música solo. Sera otro problema, la aplicación esta fallando o me falta instalar otra cosa?
 

el_ripper

Bovino maduro
#18
Hola kamarada, yo intentaría otras cosas, primero cambiaría de carpeta, y recortaría el nombre a veces el programa falla si el nombre de la carpeta o del archivo es muy largo, (ejemplo: mis canciones favoritas - mías) también revisaría que las canciones no están fallando, (archivo dañado). Ami me ha fallado con canciones codificadas en mp3 a 320 kbs, bajarles un poco el tamaño. Espero te sirva. Un Saludo...!!
 

saulsebastian

Bovino adolescente
#20
Un saludo amigo muchas gracias por la información pero tengo una duda como podria modificar el archivo ,dib para que en vez de caratulas de artista me muestre solamente una lista, similar a la lista de canciones
 
Arriba