Crear e instalar relojes anime para nuestro escritorio.

[josek610]

En este tutorial vamos a hacer este reloj de Rin pero pueden hacerlo con cualquier otro.



¿Que se nesesita para crear el reloj?

-Photoshop (Para dimencionar las imagenes)
-Block de Notas (Para editar el codigo)
-Render del personaje que vayan a usar
-Render del logo del anime
-Box (Donde va la hora)

Está en color azul solo las partes con las que se trabajará
se puede copiar cualquiera de estos 2 códigos y pegarlos en un bloc de notas con la terminación nombredelrelojclock.ini
solo es necesario uno para que el reloj funcione.

Para empezar aquí está el código del reloj (el formato de 12 horas)

(click to show/hide)

[Rainmeter]
Author=
AppVersion=1001


;-------------------------------------------------------------


[MeasureTime]
Measure=Time
Format="%#I:%M:%S%p"
;Substitute="AM":"am","PM":"pm"



[MeasureDate]
Measure=Time
Substitute="Monday":"Lunes","Tuesday":"Martes","Wednesday":"Miercoles","Thursday":"Jueves","Friday":"Viernes","Saturday":"Sabado","Sunday":"Domingo","January":"Enero","February":"Febrero","March":"Marzo","April":"Abril","May":"Mayo","June":"Junio","July":"Julio","August":"Agosto","September":"Septiembre","October":"Octubre","November":"Noviembre","December":"Diciembre"
Format="%#x"

[TimeZone]
Measure=Time
Format="%Z"


;-------------------------------------------------------------

[]
Meter=IMAGE
X=
Y=
ImageName=

[Box]
Meter=IMAGE
X=
Y=
ImageName=

[Logo]
Meter=IMAGE
X=
Y=
ImageName=


[MeterTime]
Meter=STRING
MeasureName=MeasureTime
x=194
y=328
FontColor=255, 255, 255
StringStyle=NORMAL
FontSize=32
StringAlign=Center
FontFace=Lucida Sans Unicode
AntiAlias=1
Text="%1"





[MeterDate]
Meter=String
MeasureName=MeasureDate
x=194
y=388
FontColor=255, 255, 255
StringStyle=NORMAL
FontSize=9
StringAlign=CENTER
FontFace=Lucida Sans Unicode
AntiAlias=1
Text="%1"

[MeterTimeZone]
Meter=String
MeasureName=TimeZone
x=194
y=375
FontColor=255, 255, 255
StringStyle=BOLD
FontSize=8
StringAlign=CENTER
FontFace=Lucida Sans Unicode
AntiAlias=1
Text="%1"

y aquí es está el código del formato de 24 horas.

(click to show/hide)

[Rainmeter]
Author=
AppVersion=1001


;-------------------------------------------------------------




[MeasureMilitaryTime]
Measure=Time
Format="%H:%M:%S"

[MeasureDate]
Measure=Time
Substitute="Monday":"Lunes","Tuesday":"Martes","Wednesday":"Miercoles","Thursday":"Jueves","Friday":"Viernes","Saturday":"Sabado","Sunday":"Domingo","January":"Enero","February":"Febrero","March":"Marzo","April":"Abril","May":"Mayo","June":"Junio","July":"Julio","August":"Agosto","September":"Septiembre","October":"Octubre","November":"Noviembre","December":"Diciembre"
Format="%#x"

[TimeZone]
Measure=Time
Format="%Z"


;-------------------------------------------------------------

[]
Meter=IMAGE
X=
Y=
ImageName=

[Box]
Meter=IMAGE
X=
Y=
ImageName=

[Logo]
Meter=IMAGE
X=
Y=
ImageName=

[MeterMilitaryTime]
Meter=STRING
MeasureName=MeasureMilitaryTime
x=194
y=328
FontColor=255, 255, 255
StringStyle=NORMAL
FontSize=32
StringAlign=Center
FontFace=Lucida Sans Unicode
AntiAlias=1
Text="%1"
;hidden=1



[MeterDate]
Meter=String
MeasureName=MeasureDate
x=194
y=388
FontColor=255, 255, 255
StringStyle=NORMAL
FontSize=9
StringAlign=CENTER
FontFace=Lucida Sans Unicode
AntiAlias=1
Text="%1"

[MeterTimeZone]
Meter=String
MeasureName=TimeZone
x=194
y=375
FontColor=255, 255, 255
StringStyle=BOLD
FontSize=8
StringAlign=CENTER
FontFace=Lucida Sans Unicode
AntiAlias=1
Text="%1"

Author=esto sive para poner quién creo el reloj solamente (no es algo muy relevante )
[]  tampoco es algo muy relevante solo es para nombrar el reloj

lo que viene es para trabajar esta parte del reloj:[image]

X= esto es para mover la imagen hacia la izquierda o derecha por ej. 25 se mueve hacia la derecha y -25 se mueve a la izquierda (el valor por defecto sería 0)

Y= esto sirva para mover arriba o abajo la imagen por ej. 25 se mueve hacia abajo y-25 se mueve hacia arriba (el valor por defecto sería 0)

ImageName= el nombre de la imagen que va puesta en este caso yo le puse Rin.png


Lo que viene ahora es para modificar esta parte del reloj:[box]



sería un poco mas de lo mismo pero con algunos cambios:

X= esto es para mover la imagen hacia la izquierda o derecha por ej. 25 se mueve hacia la derecha y -25 se mueve a la izquierda (su valor por defecto sería 63)

Y= esto sirva para mover arriba o abajo la imagen por ej. 25 se mueve hacia abajo y-25 se mueve hacia arriba (el valor por defecto sería 310)

ImageName= se pone el nombre de la imagen que va ahí en este caso fue Box.png


y por último esta el logo que se le pone al reloj:[Logo]



y vuelve a ser un poco mas de lo mismo  pero solo cambian los valores

X= esto es para mover la imagen hacia la izquierda o derecha por ej. 25 se mueve hacia la derecha y -25 se mueve a la izquierda (su valor por defecto sería 63)

Y= esto sirva para mover arriba o abajo la imagen por ej. 25 se mueve hacia abajo y-25 se mueve hacia arriba (el valor por defecto sería 270)

ImageName= se pone el nombre de la imagen que va ahí en este caso fue logo.png

Ahora a poner en práctica el tutorial

Lo 1° que hay que tener es la imagen (render) que queremos poner en nustro reloj
yo lo voy a hacer con esta imagen

(click to show/hide)

y para que entre en el reloj la tengo que redimensionar a 353 de alto y 212 de ancho es importante que tenga esas medidas para que no quede corrida ha ninguna parte
aqui ya esta redimensionada (tiene que quedar en un fondo transparente .PNG) Rin.PNG

(click to show/hide)

ahora usaré un logo para el reloj y lo recomendado son estas medidas 80 de alto y 262 de ancho igual se pueden aplicar otras por ejemplo si se usa una imagen
cuadrada las dimensiones recomendadas serían 125 de alto por 125 de ancho
aquí ya esta redimensionado Logo.PNG

(click to show/hide)

y por último usaré un Box que ya está listo Box.PNG

(click to show/hide)

estas se pueden cambiar de color fácilmente en photoshop
en estos simples pasos:

(click to show/hide)

Nos vamos a saturar el color y al final se corren las barras para conseguir el color deseado

y ahora sigo los pasos antes ya mencionados

lleno cada lugar con lo indicado

(click to show/hide)

[Rainmeter]
Author=josek610
AppVersion=1001


;-------------------------------------------------------------


[MeasureTime]
Measure=Time
Format="%#I:%M%p"
;Substitute="AM":"am","PM":"pm"



[MeasureDate]
Measure=Time
Format="%#x"

[TimeZone]
Measure=Time
Format="%Z"


;-------------------------------------------------------------

[Rin]
Meter=IMAGE
X=0
Y=0
ImageName=Rin.png

[Box]
Meter=IMAGE
X=63
Y=310
ImageName=Box.png

[Logo]
Meter=IMAGE
X=63
Y=270
ImageName=Logo.png


[MeterTime]
Meter=STRING
MeasureName=MeasureTime
x=194
y=328
FontColor=255, 255, 255
StringStyle=NORMAL
FontSize=32
StringAlign=Center
FontFace=Lucida Sans Unicode
AntiAlias=1
Text="%1"





[MeterDate]
Meter=String
MeasureName=MeasureDate
x=194
y=388
FontColor=255, 255, 255
StringStyle=NORMAL
FontSize=9
StringAlign=CENTER
FontFace=Lucida Sans Unicode
AntiAlias=1
Text="%1"

[MeterTimeZone]
Meter=String
MeasureName=TimeZone
x=194
y=375
FontColor=255, 255, 255
StringStyle=BOLD
FontSize=8
StringAlign=CENTER
FontFace=Lucida Sans Unicode
AntiAlias=1
Text="%1"

Con el otro se hace lo mismo aunque es solo necesario 1 para que funcione luego este texto lo guardo con el nombre que yo lo puse a mi reloj en este caso fué Rinclock.ini
lo que está en rojo es importante para que funcione
al final se guarda todo en una misma carpeta con el nombre que le queramos poner a nuestro reloj


y el resultado sería este

(click to show/hide)

Lo que explique antes, lo de las X e Y es por que cuando hacemos un reloj suele quedar algo asi

Entonces debemos modificar los valore de las X e Y para que nos quede asi

(click to show/hide)

y ya esta listo.

Pero para poder utilizarlos 1° tiene que descargar el rainmeter aquí lo dejo para 32 bits y para 64 bits después que lo descarguen y lo instalen
los pasos a seguir son estos

1° el archivo que crearon (reloj anime) lo copian y lo llevan a esta dirección

(click to show/hide)

lo de bibliotecas se lo pueden saltar y van directo a "Documentos" y después siguen con los otros sub-menús

y lo pegan ahí.

2°después (abajo a la derecha ) le dan click derecho al icono del rainmeter (gota de agua)
y les saldrá esto:

(click to show/hide)

Nota: si no les aparece el acceso al reloj primero denle a la opción refresh all

Traté de hacer el tutorial lo mas completo posible y siguiendo cada paso en el que me basé yo para hacerlo,

si hay alguna duda al respecto solo pregunta en los comentarios.

Post original MCanime.net

Aquí dejo un pack de relojes que yo mismo he creado Pack de relojes creados.<---Nuevos.
y aquí relojes que he recopilado Pack de relojes recopilados.
Relojes de Beako<---Nuevos.

PD: Si alguién no puede acerlo (por no encontrar renders, por no tener photoshop, o por ser muy vagocualquier otra cosa)
acepto encargos por un modico precio XD.
PPD: Si este tema no esta en el foro adecuado que un moderador lo mueva al foro adecuado.

[Al_eXs]

Esta muy bien, muy currado el tuto, pero una cosa, en Windows Vista y Windows 7, esto se puede hacer sin tener que instalar el Rainmeter, solo transformar el codigo para que sea un simple Gadget del Sidebar, y tomando algunos gadgets como ejemplo se puede hacer un todo en uno, con la opcion de cambiar los renders y las formas...

cuando me pase a Windows probare esto jeje..

[REY]

Gran tutorial, enhorabuena y muchas gracias.

[DeadWitness]

Tiene buena pinta, me tengo que hacer uno í o sí. :D Gracias por el tuto. 

[Al_eXs]

Pues en un rato que me dio por ver como se podia hacer esto para el Sidebar... ya casi lo tengo listo, aqui dejo un "informe" de mi experiencia con este Gadget.

(click to show/hide)

No es tan sencillo la parte de la programacion de gadgets, porque es HTML, javascript y CSS, y hay varias formas de hacer lo mismo, pero como me gusta sufrir lo hago de la forma dificil, que al ultimo lleva a una facil configuracion para cualquiera...

Por lo pronto es mas chico que este que muestra josek610, pero se puede cambiar el render desde las opciones, mostrar u ocultar los segundos, y estaba pensando en tambien que se pueda cambiar el box donde esta el reloj, pero aun no empiezo con eso...

Aqui unos previews..

(click to show/hide)

   

fueron los primeros renders que encontre en mis carpetas, pero voy a agregar muchos mas...

Aun tiene fallos:
-el borde ese rosa que no encuentro como quitarselo.
-en las opciones no se carga la imagen hasta que se le da a la siguiente.
-no se guarda el estado del checkbox, siempre se desmarca.

como me divierto haciendo este tipo de cosas XD...

[ThaReP]

Si se puede cambiar desde las propias opciones esa es una muy buena mejora, sigue trabajando Alex, a ver que te sale.

[Al_eXs]

Pues tengo lo que seria la "primera" version, con 8 imagenes que me encontre entre mis cosas... y fallos minimos, pero despues de 2 dias metido entre JavaScript y CSS no encuentro como hacerlo sin extender mucho el programa..

Creo que en Windows XP funciona en el BioSidebar, que es la extraccion tal cual del Sidebar de Windows Vista, y debe funcionar bien en Windows Vista y Windows 7, para el que lo quiera probar ahi esta.. despues agarro algunos de los renders de los relojes que dejo josek610 para integrarlos a este, jejee.

[ThaReP]

...despues agarro algunos de los renders de los relojes que dejo josek610 para integrarlos a este, jejee.

Ah!, solo se podrían poner entonces los que ya lleva incorporados 

[Al_eXs]

pues para agregar mas renders, solo hay que ir a la carpeta del Gadget(normalmente %username%\AppData\Local\Microsoft\Windows Sidebar\Gadgets), y ahi esta en Clock_Alex.gadget\temas..

La notacion con la que lo hice fue, una carpeta con el nombre(ej.: archer), dentro 2 imagenes en .PNG(una de 130x250px que es el render y se llama fondo.png y otra de 130x67px que es el preview y se llama preview.png, que es solo tomar la imagen llamada back.png de la carpeta img y sobreponerle el render) y lo unico que falta es modificar el archivo temas.js agregando una linea igual a las anteriores pero con el nombre de la carpeta del tema.. esque me falta ver como hacer esto mas practico, pero creo que voy a hacer packs de temas con un .bat que lo agregue automaticamente...

[Ayelen]

oooh!!! mola mola!!!! tengo k probarlo!!! jeje