Tutorial de Rainmeter Cómo crear tu propio skin
Tabla de contenidos
- 1 Tutorial de Rainmeter
- 1.1 Creando la estructura base (Parte 1)
- 1.2 Archivos necesarios para descargar
- 1.3 Instalación y configuración de Rainmeter y HWiNFO
- 1.4 Empezando con Photoshop y mi skin (Parte 2)
- 1.5 Desatando la imaginación (Parte 3)
- 1.6 Capturando y creando las variables (Parte 4)
- 1.7 Dando las últimas pinceladas (Parte 5)
- 1.8 Conclusión sobre el tutorial de Rainmeter
Hola amigos, ¿Cómo va todo? Yo he estado preparando este artículo, espero que este tutorial de Rainmeter te ayude a entender el lenguaje de programación de Rainmeter y ya que estamos, crear tu propio skin 😉
Hace no mucho, ya escribí un artículo donde enseñaba los primeros pasos con Rainmeter, he vinculado dicho artículo a este ya que es una gran actualización del mismo contenido.
Durante la lectura y práctica de este artículo, espero que obtengas un resultado final personalizado de tu skin de sistema para Rainmeter.
Tengo pensado añadir unos vídeos que explique todo el proceso de manera más amena y visual.
Ahorrando el trabajo de copiar/pegar y fomentado el ejercicio intelectual, siendo tu mismo el que crea todo desde cero.
Y digo esto puesto que no voy a colocar un archivo de descarga al final del artículo, pues entra en conflicto con la idea principal.
Solo pondré los archivos o enlaces externos necesarios e imprescindibles.
Tutorial de Rainmeter
Cada parte tendrá su vídeo correspondiente explicando qué y como hacer para la creación de un skin personalizado para Rainmeter.
Explicare el conocimiento básico y como hacer tu propio skin mediante photoshop.
Este tutorial de Rainmeter se va a dividir en varias partes:
Creando la estructura base (Parte 1)
- Creación de carpeta para «mi skin»
- Creación de archivos necesarios para «mi skin»
- Instalar plugins .dll necesarios para «mi skin» y Rainmeter
- Instalar HWInfo para recolección de datos
Como ves, en esta primera parte del tutorial de Rainmeter vamos a crear la estructura principal de nuestro skin e instalaremos las librerias .dll necesarias, junto con el programa HWiNFO.
Las librerías necesarias para el funcionamiento correcto de nuestro nuevo skin son las siguientes:
- CheckNet.dll (Necesaria para el funcionamiento del Meter INTERNET)
- HWiNFO.dll (Necesaria para el funcionamiento general de todos los Meter del skin)
- TopProcesses.dll (Necesaria para el funcionamiento del Meter de los procesos del sistema)
Archivos necesarios para descargar
A continuación voy a colocar un botón para la descarga de las librerías .dll tanto en 32 como en 64 bits.
Ahora los ejecutables necesarios para obtener las variables de nuestro skin y renovar la ip.
HWiNFO Shared Memory Viewer
Renovar IP
También voy a dejar el enlace de descarga de Rainmeter y del programa HWiNFO.
Rainmeter
Descarga la versión 4.1 de Rainmeter.
HWiNFO
Descarga la versión Installer de 32 o 64 bits dependiendo de tu sistema operativo. (Normalmente 64bits).
Instalación y configuración de Rainmeter y HWiNFO
Una vez descargado el archivo de librerías .dll instalaremos Rainmeter y HWiNFO. (primero procederemos a instalar Rainmeter y seguidamente el programa HWiNFO).
Si al terminar la instalación de Rainmeter o HWiNFO da la opción de ejecutar el programa, marcar dicha opción y aceptar.
En el caso de Rainmeter, se cargará el skin predeterminado.
Tan solo tendremos que hacer clic derecho en cada skin y elegir la opción «Descargar pieles» o «Unload skin».
Para el programa HWiNFO en el primer arranque tenemos que darle a Settings antes de darle a Run y dejar las opciones como en la siguiente imagen:
Ahora sí, haz clic en el botón OK y luego en el botón RUN.
Opcionalmente puedes dejar marcadas las dos primeras opciones de «Show […] on Startup»
Ahora ya puedes ver el vídeo de la primera parte 😛
Vídeo tutorial de Rainmeter Primera parte
Empezando con Photoshop y mi skin (Parte 2)
- Creación de Background mediante Photoshop
- Edición de archivo Sistema.ini de «mi skin» para primer lanzamiento
En esta parte vamos a crear la base de nuestro skin y empezar a escribir los primeros códigos para arrancar por primera vez nuestro skin y empezar a trabajar en él.
Vamos a aprovechar y descargar un zip de fuentes para mejorar la presencia de las letras en nuestro skin. Obviamente este pack de letras es de GoogleFonts donde podrás encontrar muchos tipos de fuente para la personalización de tu skin.
Pack de fuentes personalizadas
Vídeo tutorial de Rainmeter Segunda parte
Parte2
Desatando la imaginación (Parte 3)
- CPU mediante photoshop y creación de Meter en Sistema.ini
- GPU mediante photoshop y creación de Meter en Sistema.ini
- INTERNET mediante photoshop y creación de Meter en Sistema.ini
- HDD mediante photoshop y creación de Meter en Sistema.ini
- TIME mediante photoshop y creación de Meter en Sistema.ini
- PAPELERA mediante photoshop y creación de Meter en Sistema.ini
Aquí creo yo que es donde más vas a tardar, pues es la parte donde deberás crear tu skin. En este vídeo tutorial, voy a ayudarte a crear la base con ideas para crear tu propio skin personalizado.
Como ves mi skin tiene barras, líneas, histogramas y medidores redondos, estos puedes cambiarlos a tu elección para cada medida.
Deberás decidirlo en el momento de la creación del skin con el editor de imágenes.
Vídeo tutorial de Rainmeter Tercera parte
Parte2
Parte3
Capturando y creando las variables (Parte 4)
- Edición de archivo variables.inc de «mi skin» para los medidores a mostrar
Ahora toca identificar los medidores que vayamos a querer mostrar en nuestro skin. Para ellos vamos a necesitar del ejecutable HWiNFOSharedMemoryViewer y el archivo variables.inc.
Vídeo tutorial de Rainmeter Cuarta parte
Dando las últimas pinceladas (Parte 5)
- ACCESOS DIRECTOS mediante photoshop y creación de Meter en Sistema.ini (OPCIONAL)
- BOTONES DE SISTEMA mediante photoshop y creación de Meter en Sistema.ini (OPCIONAL)
Una vez creados todos los meter de tu skin quedará por añadir opcionalmente los botones de acceso directo, botones del sistema y de configuración del skin.
Vídeo tutorial de Rainmeter Quinta parte
En los ejemplos de los botones de sistema de Windows, me olvidé las variables de las funciones para bloquear la pantalla, reiniciar y apagar el sistema. A continuación dejo el código de las variables:
[Variables] Lock Computer=rundll32.exe user32.dll LockWorkStation Restart=shutdown.exe -r -t 00 Shutdown=shutdown.exe -s -t 00
DOCUMENTACIÓN RAINMETER: https://docs.rainmeter.net/manual-beta/
Conclusión sobre el tutorial de Rainmeter
Espero que hayas podido hacer un skin de sistema personalizado llegado a este punto y de ser el caso me gustaría de poder ser ver tu resultado, así que, si te animas déjame un comentario con una captura de tu resultado, así otro podrán inspirarse con nuestros diseños, muchas gracias!
A continuación dejo una captura de mi actual skin de sistema personalizado para Rainmeter:
Hola Estimado…
Te comento que he seguido tu tutorial de rainmater, que lo hiciste en video, en donde muestras tu skin que por cierto esta genial..
mi consulta es la siguiente…. cuando muestras tu skin, punchas con el mouse uns flecha azul y que cuando se despliega la ventana cambia a roja…. lo que quiero saber, si se puede, es como haces para que la ventana se despligue de derecha a izquierda,… esa es mi duda…. te agradeceria muchisimo si me pudieras decir como se hace…
esperando tu respuesta me despido dandote las muchas gracias por el tutorial en video…
un abrazo
soy de Chile…jejej
Buenas Alvaro, es muy sencillo. Tan solo tienes que crear un button como imagen dandole al primer button una posición X para cuando esta escondido y otro button igual pero con la posición X donde quieres que quede al hacer clic. Puedes ver todo esto que te digo en la Documentación de Rainmeter.
Saludos y suerte con tu skin!
Estupendo tutorial, al final he podido solucionar un pequeño error y no encontraba solución. Un saludo.
Hola hola Marc….
Muchas gracias por tu respuesta….pense que no me ibas a contestar…jejeje
Te comento, tengo otro problema …. lo que pasa es que tengo una imagen como boton de inicio de mi skin….cuando lo cliqueo, necesito que desaparezca, debido a que se acciona otra imagen la cual es traslucida….. entonces ahi esta el problema porque la imagen queda debajo de la otra que es traslucida y no se ve bien….se ve nefasto…. abra una forma de ahcer que la imagen que queda abajo desaparezca?…
Esperando tu respuesta….
Un abrazo desde Chilito lindo…
PD: abra una manera de que me puedes pasar el skin que usaste en los videos….. me lo puedes vender….
Buenas Alvaro, pues deberás mirar en el código de la imagen y poner una buena resolución para que no se vea nefasto como tu comentas. El skin que estoy utilizando lo hice para mi, de forma personal jejej Cuando tenga un poco de tiempo trabajare en un para compartir con el mundo el cual podrás descargar gratuitamente. De nuevo gracias por tu visita y perdona la tardanza!
Hola estimado, te comento que los links de descarga de las librerías no funcionan
Hola Oscar, enlaces actualizados!
Hola Marc, podrias arreglar los enlaces de las descargas? Quiero probar a hacer esto de los skins y me gustaria seguir los pasos al pie de la letra, pues soy muy novato en esto.
Gracias.
Hola David, ya he actualizado los enlaces, gracias por el comentario y suerte en la creación de tu skin 🙂
hola mira los enlaces sirven pero todos nos llevan al mismo archivo especificamente al HWInfo podrias areglarlos ?? gracias de antemano
Ya están arreglados! Gracias por avisar!
Mi hermano, cuando actualizo como dices en la gotita de rainmeter para que aparezca la piel, no aparece todo el bendito trabajo, o sea no aparece la carpeta con todo lo que hemos hecho mas el sistem.ini !!!
No se que pasa y no puedo seguir hasta que se resuelva
Muy buenas Matias, gracias por leer mi blog. Fijate que hayas colocado bien la carpeta de tu skin en la carpeta de rainmeter, que suele estar en «Mis Documentos» para que aparezca en las pieles del programa. Espero que se resuelva tu problema!
buenas tardes he seguido el tutorial que te has currado y gracias a eso he podido hacerme un skin personalizado con las cosas que necesitaba. pero hay una cosa que no he consegido hacer al nivel estetico que me gustaria. Te comento por si me puedes echar una mano, es basicamente que consigo poner las RPM de los fans que quiero pero no consigo ponerlo en una barra o en un circulo que me indique tambien visualmente de a que porcentaje esta trabajando ese fan, no se si me explico, a ver si puedes echarme una mano y ya dejo el skin tal lo tenia diseñado gracias a ti. un saludo y gracias de antemano
Muy buenas Maximo, me alegra mucho que mi tutorial ayude pues ese es su fin 🙂
respecto a tu problema, parece ser fácil. Tan solo tienes que crear una meter como barra o como circulo dependiendo de lo que necesites y asignarlo a las rpm de los fans. Para hacerlo más fácil, toma como ejemplo una barra o circulo de un medidor ya creado, por ejemplo el uso de cpu o temperatura y lo modificas a las necesidades de tus fans. Espero que consigas tener tu skin tal y como quieres y si puedes mandar una foto la podría añadir al post 🙂 Saludos y salud!
buenas Marc despues de darle muchas vueltas al final di con la tecla. el problema es que no no cambiaba los valores minimo y maximos de revoluciones de los fan, estaban puestos los mismos de las temperaturas que los tengo de 0 a 100 y por eso siempre me salian las barras llenas.por fin lo solucione!! otra cosa por si me puedes dar luz en el tema, en los medidores de temperatura se podria poner que por ejemplo si la temperatura esta de 0 a 40 que este en verde si esta de 40 a 50 amarillo y de 50 a 100 rojo, no se si me explico, y como seria? porque imagino que sera complicado o no se podra hacer. bueno gracias de nuevo y un saludo
Muy buenas Maximo, me alegro que al fin consiguieras arreglar tu problema!! Respecto a tu pregunta, si se puede. A continuación te dejo un ejemplo, aunque en la web de rainmeter tendrás más info al respecto.
Ejemplo: [CPUTemp]
Measure=Plugin
Plugin=CoreTemp
CoreTempType=Temperature
CoreTempIndex=0
IfCondition=CPUTemp <= 40 IfTrueAction=[!SetOption CPUTotalTemp FontColor "#Blue#"][!SetOption MeterBar BarColor "#Blue#"][!UpdateMeter "CPUTotalTemp"][!UpdateMeter "BarColor"][!Redraw] IfCondition2=(CPUTemp > 40) && (CPUTemp <= 50) IfTrueAction2=[!SetOption CPUTotalTemp FontColor "#Yellow#"][!SetOption MeterBar BarColor "#Yellow#"][!UpdateMeter "CPUTotalTemp"][!UpdateMeter "BarColor"][!Redraw] IfCondition3=(CPUTemp > 50) && (CPUTemp <= 60) IfTrueAction3=[!SetOption CPUTotalTemp FontColor "#Orange#"][!SetOption MeterBar BarColor "#Orange#"][!UpdateMeter "CPUTotalTemp"][!UpdateMeter "BarColor"][!Redraw] IfCondition4=CPUTemp > 60
IfTrueAction4=[!SetOption CPUTotalTemp FontColor «#Red#»][!SetOption MeterBar BarColor «#Red#»][!UpdateMeter «CPUTotalTemp»][!UpdateMeter «BarColor»][!Redraw]
IfConditionMode=1
soy nuevo en esto de la programación, y estoy en la primera parte de tu tutorial sobre montar la piel de fondo, hice todo lo que explicas pero al momento de cargar la piel no sale nada, te envío mi text para que me ayudes y ver donde esta el error, gracias
; Globales de Rainmeter
[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
; Metadatos del Skin
[Metadata]
Name=Logo Elder
Author=Elder
Version=1.0
License=
Information=Skin logo Escritorio
Date=Sep 11, 2020
; Variables
[Variables]
@Include=#@#Variables.inc
[MedidorSkinFondo]
Meter=Image
ImageName=#@#Imagen\LogoElder.png
W=1079
H=612
AntiAlias=1
DynamicVariables=1
Hoal elder, primero, te recomiendo que pongas las etiquetas en ingles 🙂 y pues te falta seguir con el tutorial ya que despues del measure viene el
meter, aqui un ejemplo:
[MeterBackgroundBase]
Meter=Image
SolidColor=0,0,0,1
Antialias=1
X=0
Y=0
W=(#BgWidth# * #Scale#)
H=(#BgHeight# * #Scale#)
UpdateDivider=-1
Saludos!