Red de conocimiento informático - Conocimiento del nombre de dominio - ¿Cómo hacer tú mismo la piel Qianting?

¿Cómo hacer tú mismo la piel Qianting?

Todo el proceso de creación de la máscara de Qianqian Jingting

Qianqian Jingting (en lo sucesivo, "Qianqian") ha admitido la función de cambio de máscara desde la versión 2.0, y ahora muchas máscaras son comparables a Winamp. Sin embargo, debido a que Qianqian actualmente no admite scripts ni formatos de imagen png, el efecto no se puede comparar con la máscara moderna de Winamp o la máscara de Windows Media Player. Pero la piel de Qianqian es mucho más sencilla de fabricar y no requiere ningún conocimiento de programación ni tecnología compleja. Siempre que domines las operaciones básicas de edición de imágenes (Photoshop) y tengas suficiente paciencia, podrás crear una piel hermosa. Después de leer el tutorial a continuación, creo que también puedes diseñar una máscara personalizada para Qian Qian.

1. Estructura del skin

El skin de Qianqian se encuentra en la carpeta del skin en el directorio de instalación y la extensión puede ser. skn o. cremallera. De hecho son iguales, todos son archivos comprimidos en formato zip. Para el primero, puedes cambiarlo primero. Llega skn. zip (para mostrar las extensiones de archivo en el sistema, haga clic en "Herramientas" - "Opciones de carpeta" - "Ver", y luego elimine la pequeña marca de verificación frente a "Ocultar extensiones para tipos de archivos conocidos") y luego extráigalo a una carpeta separada, ingrese a esta carpeta y encontrará que contiene muchas imágenes en formato bmp y varios archivos xml, el más importante de los cuales es.

La imagen Bmp es el fondo y la imagen del botón de cada ventana, y Skin.xml es el archivo de configuración, que define la información básica de la máscara, la posición y el tamaño de la ventana y el botón, etc. Es un archivo basado en formato XML y se puede abrir directamente con el Bloc de notas u otras herramientas de edición de texto proporcionadas por el sistema. Después de abrir, podemos ver su estructura básica:

ltSkin Version="2 "Name=" ... "Author=" ... "url=" ... "Email=" " .. "transparent_color= " ... " gt

ltplayer_window image= " ... " gt

...

lt/player _ window gt;

ltmini window image = "..." gt

...

lt/mini_windows gt;

ltlyric_window position= " ... " resize_rect= " ... " image = " ... " gt

...

lt/lyric _ windows gt;

lt ecualizador_ventana posición = "... " imagen = "..." eq _ intervalo = "..." gt

...

lt/ ecualizador _ ventana gt;

ltplaylist_window position= " ... "resize_rect= " ... "image=" ... " gt

...

lt/playlist_window

lt/skin gt;

Un análisis cuidadoso encontró que el final de cada línea está marcado con "". Finalmente, hay varios elementos y parámetros en el medio, que se pueden dividir en dos tipos. La primera estructura es la siguiente:

XXX y otros elementos se denominan elementos, aaa, bbb y otros elementos se denominan atributos, y AAA y BBB son los valores de los parámetros de los atributos. Aquí AAA y BBB son atributos de XXX, que se utilizan para modificar XXX. Por ejemplo, el atributo de posición se usa para definir la posición del elemento y el atributo de imagen se usa para definir el mapa de bits del elemento.

En este tipo,

La segunda estructura es la siguiente:

De hecho, esta es una forma abreviada, es decir,

Para conocer el formato de los archivos XML, consulte los documentos pertinentes. Lo que cabe mencionar aquí es que no importa el orden de los elementos y atributos, ni el número de espacios, siempre y cuando no se equivoquen las posiciones y formatos básicos de inclusión e inclusión (por ejemplo, el valor del parámetro del El atributo debe estar entre comillas dobles en inglés), pero para facilitar la lectura, edición y modificación, es mejor escribir estrictamente de acuerdo con el formato estándar. Analicemos Skin.xml en detalle, la primera línea:

ltSkin version="2" name="..."Author="..."url="..."Email= ". .. "transparent_color= " ... " gt

Esta línea se utiliza para definir los atributos básicos y la información del skin, donde version="2 "representa el número de versión del skin y no necesita que se modificará. Los siguientes atributos, como nombre, autor, URL y correo electrónico, representan respectivamente el nombre de la máscara, el nombre del autor, la dirección de la página de inicio del autor y la dirección de correo electrónico del autor. Estos atributos se mostrarán en la ventana del. Aplicación de piel Opciones Qianqian; Transparent_color es un atributo muy importante, que es "Color transparente". Una vez definido un color transparente, todas las partes de la piel con ese color aparecerán transparentes. Debido a que las imágenes en formato bmp no admiten transparencia, es necesario utilizar colores transparentes para crear ventanas y botones con fondos irregulares. Esto se hace rellenando la parte que desea que parezca transparente con un color transparente definido. Una máscara solo puede definir un color transparente fijo y está representado por el código RGB del color. Por ejemplo, el código RGB de color púrpura puro es #FF00FF. Puede comprobar el código RGB en herramientas como Photoshop. (Trate de elegir un color con una gran diferencia en el color de la piel para el color transparente; de ​​lo contrario, se superpondrá fácilmente con el color de la piel, lo que hará que las partes necesarias sean transparentes. Generalmente, se puede usar púrpura puro).

El siguiente paso son las cinco ventanas básicas de Configuración, donde las ventanas del modo mini se detallarán por separado más adelante. En Skin.xml, lo primero que se debe configurar son los ajustes relevantes de la ventana principal, la ventana de visualización de la canción, la ventana del ecualizador y la ventana de la lista de reproducción, y luego configurar los botones en cada ventana respectivamente.

Dos. Introducción a los parámetros de atributos

El siguiente es el diagrama correspondiente y la descripción de atributos de los elementos en cada ventana:

Posición: este es uno de los atributos más básicos entre muchos elementos, utilizado para definir la ventana El fondo y la posición y tamaño del botón. El formato del valor del parámetro es "a, b, c, d". Estos cuatro valores no solo fijan la posición del elemento sino que también determinan su tamaño, donde (a, b) es la coordenada de la esquina superior izquierda. , (c, d) son las coordenadas de la esquina inferior derecha, c-a es la longitud, d-b es la altura. Si es la posición del botón dentro de cada ventana, la esquina superior izquierda de la ventana correspondiente se utiliza como origen de las coordenadas. Por ejemplo, el botón "Cerrar" de la ventana de visualización de letras toma la esquina superior izquierda de la imagen de fondo de la visualización de letras como origen, ¡y así sucesivamente!

Específicamente: ① El elemento de la barra de desplazamiento en la lista de reproducción no necesita definir un atributo de posición, y su posición se fijará automáticamente en el lado derecho de la lista de reproducción ② Los elementos de progreso y volumen y el ecualizador en; la ventana principal Los atributos de posición de los elementos de balanza, sonido envolvente y preamplificador en la ventana representan las coordenadas del rango en el que se puede mover el control deslizante ③ Los atributos de posición del elemento de la lista de reproducción en la ventana de la máquina de pesaje de la lista de reproducción y el elemento de letra en la ventana; las letras representan la lista de reproducción y el rango de visualización de letras. Cuando la ventana de la lista de reproducción y la ventana de letras cambian de tamaño, estos dos elementos cambiarán de tamaño automáticamente, pero la distancia entre sus cuatro lados y los cuatro lados de la ventana se refleja en esta posición;

Resize_rect: visualización de la canción y reproducción Propiedad única de la ventana de lista que define la parte de las dos ventanas que se puede ampliar. Su formato de parámetro es el mismo que la posición, lo que significa que cuando se cambia el tamaño de la ventana, solo se estirará la parte dentro del cuadro rectangular y la parte fuera de este rango no cambiará. Además, hay otro atributo resize_tile que se puede usar en consecuencia y el valor de su parámetro puede ser 0 o 1.

Donde 0 significa estirar al cambiar el tamaño de la ventana y 1 significa mosaico. Este atributo se puede omitir, es decir, se usa el valor predeterminado de 0;

Además, la ventana de visualización de canciones y lista de reproducción también tiene un elemento opcional: el título, que se puede usar cuando haya necesidades específicas. (como mantener el título al cambiar el tamaño de la ventana) Centrado, etc.). El formato es el siguiente:

ltTitle position = "..."Image = "..."align= ". .."/ gt;

Los tres primeros El diagrama es el siguiente:

Imagen: se utiliza para definir la imagen utilizada por este elemento. Generalmente, la mayoría de las imágenes de botones se componen de cuatro imágenes del mismo tamaño, que representan cuatro estados diferentes del botón: botón normal, mouse sobre el botón, botón presionado y botón no válido. La siguiente imagen es la imagen del botón de reproducción:

Nota: ① Si los botones son iguales en estos cuatro estados, se deben mostrar cuatro imágenes una al lado de la otra. ② Los atributos scrollbar_button y scrollbar_button en el elemento de la barra de desplazamiento en la lista de reproducción solo corresponden a tres estados: el botón es normal, el mouse pasa sobre el botón y el mouse presiona el botón;

Alinear: se usa para definir la alineación del elemento. Hay dos valores de parámetros: uno está en los elementos LED, información, estéreo y estado de la ventana principal. El valor puede ser izquierdo, central o derecho, representando la sangría de estas palabras. los elementos de cierre y fin, y en los elementos de título, cierre y barra de herramientas de la ventana de la lista de reproducción. En este punto, los valores pueden ser izquierda, centro, derecha, arriba, abajo, etc. , lo que significa que cuando se cambia el tamaño de la ventana, la posición del elemento se mueve en relación con el borde. Si desea establecer la alineación vertical y la alineación horizontal al mismo tiempo, puede usar un signo más en inglés para conectar las dos, como "arriba a la izquierda".

Thumb_image, fill_image y bar_image: Existen en los elementos de progreso y volumen en la ventana principal y los elementos balance, envolvente, preamplificador y eqfactor en la ventana del ecualizador. Se utilizan para definir la imagen y el movimiento. el control deslizante respectivamente. La pantalla que llena el control deslizante y la pantalla de fondo dentro del rango móvil;

Vertical: los elementos de progreso y volumen que existen en la ventana principal. El valor del parámetro puede ser verdadero o falso, donde verdadero significa que el control deslizante se mueve en dirección vertical, falso significa que el control deslizante se mueve en dirección horizontal;

Color, fondo, fuente, tamaño_fuente: información, estéreo que existen en la ventana principal y los elementos de estado, utilizados para definir el color del texto, el color de fondo, la fuente y el tamaño de fuente. Si desea mostrar texto transparente, no es necesario especificar el color de fondo (bk gnd);

Thumb_resize_center: existe en el elemento de la barra de desplazamiento de la ventana de la lista de reproducción y se utiliza la mitad del control deslizante del pulgar. para definir la barra de desplazamiento se puede colocar en mosaico y escalar El tamaño de la porción. Si el valor es 0, significa que el control deslizante no se escalará cuando cambie la altura de la ventana de la lista de reproducción;

Thumb_resize_tile: existe en el elemento de la barra de desplazamiento de la ventana de la lista de reproducción y es lo mismo que resize_tile en la ventana de la lista de reproducción y la ventana de visualización de la canción La función es la misma;

Hot_image: existe en el elemento de la barra de herramientas de la ventana de la lista de reproducción y se usa para definir la forma de la imagen en la barra de herramientas de la lista de reproducción cuando el mouse pasa sobre ella.

Este atributo se puede seleccionar. Si se omite, el programa generará automáticamente el estado del botón cuando el mouse pase sobre él;

Eq_interval: existe en el elemento ecualizador_ventana de la ventana del ecualizador y se refiere al tamaño del intervalo. 10 bandas en el elemento eqfactor (además, eqfactor El atributo de posición del elemento indica la posición del primer control deslizante entre los 10 controles deslizantes, y otros atributos son válidos para los 10 controles deslizantes

Icono: It); existe en el elemento de icono de la ventana principal, que se utiliza para iconos de máscara personalizados. Los archivos de iconos (*.ico, 16*16) deben colocarse en la carpeta de máscaras y empaquetarse y comprimirse juntos. Este atributo se puede seleccionar; si se omite, se utilizará el icono predeterminado del programa;

Left_top_color y right_bottom_color: existen en el elemento mini_border de la ventana de visualización de la canción y se utilizan para definir el borde superior izquierdo y el color. del borde inferior derecho;

La siguiente es una breve introducción a la ventana del modo mini:

Como se muestra arriba, el modo mini es en realidad otra máscara independiente de la ventana principal, pero en el modo mini A continuación, se omiten las ventanas de lista de reproducción y ecualizador, y se simplifican la ventana de visualización de letras y la ventana principal. Todos los elementos, atributos y parámetros en la ventana pequeña son los mismos que los de la ventana principal, y todos están incluidos en

El modo Mini reduce el tamaño de la pantalla y simplifica las teclas, por lo que las teclas en la mini La ventana también debe ajustarse correspondientemente y omitir algunos botones que se usan con poca frecuencia, como el ajuste de volumen. Generalmente, sólo se pueden conservar "Reproducir/Pausar", "Detener", "Atrás", "Adelante", "Silenciar", "Icono" y "Efectos visuales". Además, la posición y la longitud de la ventana de visualización de la canción en el modo mini son fijas y la altura es la misma que la altura de la imagen de fondo en el modo mini.

3. Empaquetado y compresión

Cuando todas las imágenes estén listas y Skin.xml esté configurado, hay que hacer una cosa más, que es agregar tres archivos xml, respectivamente como Esquemas de color y configuraciones relacionadas para presentación de canciones, listas de reproducción y elementos visuales. Si no agrega estos tres archivos, la máscara se mostrará según el esquema de color predeterminado. Por lo tanto, se recomienda que cada piel combine con un color adecuado para hacerla más bella. Además, si la máscara no tiene su propio archivo de combinación de colores, al cambiar de otras máscaras con combinaciones de colores a esta máscara, también se traerá la combinación de colores de la máscara original y el efecto será muy feo.

Sus parámetros son similares a Skin.xml, que se puede configurar después de abrirlo en el Bloc de notas, pero existe un método más conciso y eficiente, que consiste en configurarlo en "Opciones de Qianqian" y luego hacer clic en " Archivo de configuración" - "Guardar en archivo" en cada pestaña para guardarlos como "Playlist.xml", "Lyric.xml" y "Visual.xml" respectivamente.

Finalmente, estos archivos se empaquetan y comprimen juntos para crear una máscara. Puedes utilizar herramientas de compresión como WinRAR o Winzip. Tomando WinRAR como ejemplo, primero presione CTRL A en el teclado para seleccionar todos los archivos y luego agregue todos los archivos a la carpeta comprimida. Seleccione "ZIP" como formato de archivo comprimido y "Mejor" como método de compresión y haga clic en "Aceptar".

Aquí la piel está completamente lista. Copie este archivo comprimido en la carpeta de máscaras en el directorio de instalación de Qianqian y luego seleccione la máscara de la aplicación: "Máscara" en "Opciones de Qianqian", o haga clic derecho en el panel principal: "Seleccionar máscara".

Algunas de las fotos del interior aún no se han publicado. Si no entiendes algo, pregúntamelo específicamente. Yo mismo he hecho algunos.