Cómo hacer que Qianqianjingting tenga una piel personalizada
1. ¿Entiendes de qué se trata la producción de piel de Qianqianjingting?
1. Si nunca ha estado expuesto a la producción de piel, lea atentamente el siguiente párrafo:
Cómo aplicar las representaciones de piel diseñadas. Al utilizar el software Qianqianjingting, existen Hay dos ideas principales que debes entender: una es que los controles (o botones) en las representaciones deben recortarse por separado, y la otra es que los controles (o botones) mencionados en el punto anterior deben recortarse. las coordenadas y localizarlo con precisión. Si escuchaste que es un poco confuso, continuemos.
2. El skin de Qianqian se encuentra en la carpeta Skin bajo el directorio de instalación. La extensión puede ser .skn o .zip. Para el primero, primero puede cambiar la extensión de .skn a .zip (para mostrar la extensión del archivo en el sistema, haga clic en "Herramientas" - "Opciones de carpeta" - "Ver" y luego cambie "Ocultar tipos de archivos conocidos". elimine la pequeña marca de verificación delante de la extensión"), y luego descomprímalo en una carpeta separada. Ingrese a la carpeta y encontrará que contiene muchas imágenes en formato bmp y varios archivos xml. Estos archivos son la máscara. 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 del skin, la posición y el tamaño de la ventana y el botón, etc. Es un archivo basado en formato XML y puede ser Ábrelo directamente con el Bloc de notas integrado del sistema u otras herramientas de edición de texto.
Bien, después de comprender los conocimientos básicos anteriores, comenzamos a aprender el proceso de producción real.
2. ¡Empieza a hacer!
Siga cuatro pasos: (A) Cortar la imagen (B) Modificar el archivo de configuración (C) Empaquetarlo en un archivo de máscara (D) Aplicar la máscara
(A) Cortar la imagen:
Utilice PS o FW para abrir las representaciones del diseño y observarlas en su conjunto. Hablemos sobre qué imágenes deben recortarse por separado y los nombres de las imágenes.
1. Controles de la ventana principal
(1) Nombre del fondo de la ventana principal: player_skin.bmp
Puntos clave: ahuecar las pequeñas esquinas redondeadas del Rellénelo con el color (#ff00ff). Debe manejar esta parte con cuidado. Los bordes deben rellenarse 1 píxel por 1 píxel (como se muestra en la imagen de arriba, el procesamiento de color de la parte hueca)
(2) Botón Minimizar (4 piezas) Estado)
Nombre: minimizar.bmp
Punto clave: Todos los botones de función deben tener cuatro estados, y estos cuatro estados deben ser creado en una imagen y almacenado en formato .BMP, tenga en cuenta que el ancho y el alto de cada botón de estado deben ser consistentes. Hablemos del significado de cada estado.
El primer estado: estado natural
p>El segundo estado: mouse El estado al cruzar
El tercer estado: el estado cuando se presiona el mouse
El cuarto estado: el estado cuando el botón falla (por ejemplo, si la lista de reproducción solo tiene una canción, entonces no se puede hacer clic en el botón "Siguiente canción", por lo que el estado del botón en este momento es el estado en el que falla)
3) Botón de modo mini
Nombre: minimode.bmp
Igual que el anterior, no entraré en detalles aquí.
(4) Botón Cerrar
Nombre: close.bmp
(5) Control deslizante de progreso de reproducción (en este ejemplo, el pequeño botón redondo en el progreso de reproducción bar )
Nombre: Progress_thumb.bmp
Punto clave: este pequeño botón debe separarse de la parte del fondo, así que, ¿cómo lidiar con la parte hueca para finalmente mostrar transparencia en el fondo? interfaz En cuanto al efecto, la solución es la misma que el procesamiento del hueco de fondo grande anterior, que consiste en llenar el hueco con el color (#ff00ff), como se muestra en la imagen de arriba.
(6) Imagen de fondo de relleno del progreso de la reproducción
Nombre: Progress_fill.bmp
(7) Botón para abrir y cerrar la ventana de lista de reproducción
Nombre: playlist.bmp
(8) Botón para abrir y cerrar la ventana del ecualizador
Nombre: ecualizador.bmp
(9) Botón para abrir y cerrar la ventana de letras
p>
Nombre: lyric.bmp
(10) Botón "Anterior"
Nombre: prev.bmp
( 11) Botón "Reproducir"
Nombre: play.bmp
(12) Botón "Pausa"
Nombre: pausa.bmp
(13) Botón "Siguiente canción"
Nombre: next.bmp
(14) Botón "Abrir archivo de reproducción"
Nombre: open.bmp
(15) Botón de altavoz de volumen
Nombre: mute.bmp
(16) Imagen de relleno de fondo de progreso de volumen
Nombre: progreso2. bmp
(17) Control deslizante de volumen
Igual que (5)
2 Controles de la ventana del ecualizador
(18) Botón Abrir<. /p>
Nombre: eq_enabled.bmp
(19) Botón de reinicio
Nombre: reset.bmp
(20) Botón de configuración
p>Nombre: eq_profile.bmp
(21) Botón Cerrar, corta la imagen igual que el botón cerrar en la ventana principal
(22) Sonido envolvente Balancer todo deslizante pequeño El botón es el mismo que (5)
(23) Fondo equilibrado y relleno envolvente
Nombre: eqfactor_full2.bmp
(24) Equilibrado fondo relleno
Nombre: eqfactor_full.bmp
3 Controles de la ventana de lista de reproducción
(25) Botón Cerrar, igual que el botón de cerrar la ventana principal
p>
(26) Botón de la barra de herramientas,
Nombre: playlist_toolbar.bmp
Nombre del estado del punto activo: playlist_toolbar_hot.bmp
(27) Desplazamiento botones de barra arriba y abajo
Nombre: scrollbar_button.bmp
Punto clave: coloque los botones arriba y abajo en una imagen para hacer
(28) Barra de desplazamiento botón deslizante
Nombre: scrollbar_thumb.bmp
(29) Fondo de la barra de desplazamiento
Nombre: scrollbar_bar.bmp
4. la ventana de visualización de letras
(30) Botón Cerrar, igual que la ventana principal
(31) Botón Siempre visible
Nombre: ontop.bmp
5. Controles de la ventana de música
La imagen de arriba muestra la interfaz de la ventana de Música Qianqian. La parte encerrada por el borde verde es la parte de visualización y no tiene nada que ver con el diseño de la máscara. Es decir, lo que queremos hacer es el contenido fuera del borde verde.
Bien, aclaremos la parte de producción y comencemos a hablar sobre el proceso de producción. Primero, necesitamos crear un fondo de ventana, que es la ventana de estilo azul más externa que se muestra en la imagen. no es difícil de entender. El formato también es .bmp, debe configurar un fondo transparente (#FF00ff) y prestar atención al procesamiento de píxeles de esquinas redondeadas.
Luego cree los controles en la ventana. En la imagen de arriba, todos los controles están marcados con cuadros rojos, incluidos atrás, adelante, actualizar, cerrar, cuadro de selección múltiple y área de texto conectado. Las funciones de avance y retroceso son para controlar la página actual como una página web, no el avance y retroceso de canciones, pero no tiene ningún efecto, así que no diré más.
Finalmente, necesitamos crear un botón para abrir la ventana de música. El botón debe colocarse en la ventana principal. No olvides dejar espacio al crear la ventana principal...
Detalles El ejemplo del diagrama de corte es el siguiente, todos lo entenderán de un vistazo:
(B) Modificar el archivo de configuración
1. el archivo de configuración skin.xml
skin version="2" name="Just Listening to Azure" Author="Qianqian Listening" url="" email="none" transparent_color="#ff00ff"
Puedes consultar la imagen a continuación para comprender el código
player_window image="player_skin.bmp"
play position="50, 123, 90, 163" image ="play.bmp"/
posición de pausa="50, 123, 90, 163" image="pause.bmp"/
posición anterior="9, 123, 49 , 163" image="prev.bmp"/
siguiente posición="132, 123, 172, 163" image="next.bmp"/
detener posición="91 , 123, 131, 163" image="stop.bmp" /
posición de silencio="183, 137, 194, 148" image="mute.bmp" /
letra position="248, 112, 272, 126" image=" lyric.bmp"/
ecualizador position="223, 112, 242, 126" image="equalizer.bmp"/
posición de la lista de reproducción="197, 112, 216, 126 " image="playlist.bmp"/
posición del navegador="214, 86, 276, 106" image="browser.bmp" /
minimizar posición="230, 3, 247, 21" image="minimize.bmp"/
minimodo posición="248, 3, 265, 21" imagen="minimodo .bmp"/
posición de salida= "266, 3, 283, 21" image="close.bmp"/
posición de progreso="7, 112, 184, 123" bar_image="" thumb_image="progress_thumb.bmp" fill_image=" Progress_fill.bmp"/
posición del volumen="197, 136, 277, 147" vertical="false" bar_image="" thumb_image=" Progress_thumb.bmp" fill_image="progress2.bmp"/
p>El siguiente texto son algunas configuraciones de texto para mostrar en el reproductor
El ícono es el logotipo de Qianqianjingting;
la información es el título de la música y la información del artista del álbum. La rotación se muestra en la ventana del reproductor;
el LED es un número de tiempo. Esto no es un código de texto, sino una imagen. 12 caracteres del mismo tamaño, 0 1 2 3 4 5 6 7 8 9 : -
Recuerda que estos 12 personajes son indispensables.
Estéreo es la configuración de fuente estéreo
Estado es la configuración de fuente de estado
Visual es la configuración de efecto visual, que simplemente define la posición, más detalles Consulte el archivo Visual.xml para la configuración
icon position="4, 3, 20, 19" image="TTPlayer.ico"/
info position="21, 34, 208, 49" color="#ffffff" font="Tahoma" font_size="13" align="left"/
posición del led="160, 37, 270, 49" image="number. bmp" align="right"/
posición estéreo="224, 54, 273, 70" color="#ffffff" font="Tahoma" font_size="13" align="right" /
posición de estado="200, 70, 273, 86" color="#ffffff" font="Tahoma" font_size="13" align="right" /
posición visual= "17, 56, 185, 106"/
/player_window
2 El código de la ventana de visualización de letras
Consulte la siguiente figura como referencia
lyric_window position="0, 393, 287, 475" resize_rect="49, 25, 245, 73" image="lyric_skin.bmp"
lyric position="10, 25, 277, 73 "/
posición cerrada="221, 3, 283, 20" image="close.bmp" align="right"/
posición superior="202, 3, 264, 20" image="ontop.bmp" align="right"/
/lyric_window
3. Código de la ventana del ecualizador
equalizer_window position= " 0, 165, 287, 279" image="eq_skin.bmp" eq_interval="5"
cerrar posición="266, 3, 283, 20" image="close.bmp" align=" right "/
posición habilitada="152, 3, 187, 21" imagen="eq_enabled.bmp"/
posición de perfil="224, 3, 259, 21" imagen = "eq_profile.bmp"/
posición de reinicio="188, 3, 223, 21" image="reset.bmp"/
posición de equilibrio="15, 45, 71 , 56" thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full2.bmp"/
posición envolvente="15, 76, 71, 87" thumb_image="progress_thumb.bmp" bar_image= " " f
ill_image="eqfactor_full2.bmp"/
posición del preamplificador="81, 36, 92, 99" thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full.bmp"/
eqfactor position="115, 36, 126, 98" thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full.bmp"/
/equalizer_window
4. Código para la ventana de lista de reproducción
playlist_window position="0, 279, 287, 393" resize_rect="61, 43, 265, 105" image="playlist_skin.bmp"
close position="221, 2, 283, 19" image="close.bmp" align="right"/
posición de la barra de herramientas="10, 24, 278, 41" image="playlist_toolbar. bmp " hot_image="playlist_toolbar_hot.bmp" align="left"/
botones de barra de desplazamiento_image="scrollbar_button.bmp" thumb_image="scrollbar_thumb.bmp" bar_image="scrollbar_bar.bmp" align="center"/
posición de la lista de reproducción="10, 43, 278, 105" selected_image="playlist_selected.bmp"/
/playlist_window
1. Código de mini ventana
>mini_window image="mini-player.bmp"
posición de reproducción="177, 3, 271, 27" image="play_mini.bmp" /
posición de pausa ="177, 3, 271, 27" image="pause_mini.bmp" /
posición anterior="153, 3, 247, 27" image="prev_mini.bmp" /
siguiente posición="224, 3, 318, 27" imagen="next_mini.bmp" /
parada posición="201, 3, 295, 27" imagen="stop_mini.bmp" /
lyric position="269, 17, 379, 27" image="lyric_mini.bmp" /
minimodo position="272, 3, 335, 20" image=" minimodo. bmp" /
minimizar posición="255, 3, 317, 20" imagen="minimizar.bmp" /
salir posición="289, 3, 351, 20 " imagen ="cerrar.bmp" /
posición del icono="3, 6
, 19, 22" image="TTPlayer.ico"/
info position="27, 7, 142, 22" color="#ffffff" font="Tahoma" font_size="13" align= "left"/
/mini_window
2. El código de la ventana de música (la parte // después del código es un comentario)
browser_window position= "540, 0, 810, 336" image="browser_skin.bmp" transparent_color="#ff00ff"
cerrar posición="452, 3, 469, 19" image="close.bmp" // Posición del botón Cerrar
Posición atrás="112, 3, 133, 19" image="browser_backward.bmp" //Posición del botón Atrás
Posición adelante="148, 3, 169, 19" image="browser_forward.bmp" / //Posición del botón Avanzar
refresh position="186, 2, 207, 18" image="browser_refresh.bmp" / //Posición del botón Actualizar
posición de inicio="7, 458, 144, 473" ckbox_image="browser_startup.bmp" intervalo=4 color="#ffffff" font="SimSun" font_size="12" //La posición del cuadro de selección múltiple, preste atención. La coordenada X debe incluir el siguiente texto y el valor del intervalo es la distancia entre el cuadro de selección múltiple y el texto
linktxt position="280, 457, 464 , 472" color="#ffffff" font="SimSun " font_size="12" //Conecta el área de texto, se recomienda dejar más para mostrar más contenido de texto
posición del navegador="9, 26, 464, 447" //posición de la página web html. Es el mismo que el rango de visualización de letras en "Lyric Show"
/browser_window
2. Echemos un vistazo a el archivo de configuración Lyric.xml
El siguiente es el texto de la letra. Las configuraciones definen respectivamente el tipo de fuente, el color de fuente, el color de resaltado y el color de fondo
ttplayer_lyric
Letra
Font="-11,0,0 ,0,400,0,0,0,134,3,2,4,49,Tahoma"
TextColor="#008CC1"
HilightColor="#005489"
BkgndColor="#F4FBFE" /
/ttplayer_lyric
3. Archivo de configuración Playlist.xml
Este es el texto de la ventana de la lista de reproducción. Las configuraciones definen respectivamente el tipo de fuente, el color de fuente, el color de resaltado, el primer color de fondo, el color de número, el color de tiempo, el color seleccionado actualmente y el segundo color de fondo. (puede ser coherente con el primer color de fondo)
ttplayer_playlist
PlayList
Font="-11,0,0,0,400,0,0,0,134 ,3,2,4,49,Tahoma"
Color_Text="#008CC1"
Color_Hilight=
"#005489"
Color_Bkgnd="#EAF5FA"
Color_Number="#005489"
Color_Duration="#005489"
Color_Select="#84CEF9"
Color_Bkgnd2="#EAF5FA"
/
/ttplayer_playlist
Echemos un vistazo a cuatro. Archivo de configuración visual.xml
Esto se utiliza para configurar el efecto de visualización visual. Primero, le presentaremos qué tipos de efectos visuales proporciona Qianqianjingting:
1. >
2. Cielo estrellado de fantasía
3. Visualización de ondas
4. Portada del álbum
5. p>Estas 5 situaciones se pueden cambiar haciendo clic derecho en la ventana principal del reproductor
Como se muestra en la figura:
Los siguientes archivos de configuración se utilizan para configurar varios efectos visuales Color, puedes probarlo y ajustar el efecto que más te guste
ttplayer_visual
Visual
SpectrumTopColor="#FFFFFF"
SpectrumBtmColor ="#07F7FF"
SpectrumMidColor="#8CDCFF"
SpectrumPeakColor="#FFFFFF"
SpectrumWide="1"
BlurSpeed="3"
Blur="1"
BlurScopeColor="#07F7FF"
TextColor="#FFFFFF"
Font="-11,0,0,0,400,0,0,0,134,3,2,4,49,Tahoma"
/ttplayer_visual
(C) Empaquételo en un archivo de máscara
Bien, lo anterior es el proceso completo de producción de máscaras. Después de realizar los recortes y archivos de configuración anteriores, puede empaquetarlo en un archivo de máscara. use herramientas de compresión como WinRAR o WinZIP. Tome 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" para el formato de archivo comprimido y "mejor". " para el método de compresión. " y haga clic en "Aceptar" nuevamente.
(D) Aplicar máscara
Copie este archivo comprimido a la carpeta Skin en el directorio de instalación de Qianqian y luego selecciónelo en "Opciones de Qianqian..." - "Skin" Usted Puede optar por aplicar la máscara o hacer clic derecho en el panel principal: "Seleccionar máscara".
Quizás ya sepas cómo hacer máscaras. Para una comprensión más profunda, hemos agregado el siguiente contenido para ayudarte a digerir:
3.
p>
posición: Este es uno de los atributos más básicos entre los elementos. Se utiliza para definir el fondo de la ventana y la posición y el tamaño del botón. El formato del valor del parámetro es "a, b, c,. d". Estos cuatro valores son ambos La posición del elemento es fija y se determina su tamaño. (a, b) es la coordenada de la esquina superior izquierda, (c, d) es la coordenada de la esquina inferior esquina derecha, c-a es la longitud, d-b es la altura y el origen de las coordenadas se puede dividir en dos situaciones: si es la posición de las tres subventanas del programa de letras, el ecualizador y la lista de reproducción, la esquina superior izquierda La esquina de la ventana principal se usa como origen de coordenadas; si es la posición del botón dentro de cada ventana, se usa la esquina superior izquierda de la ventana correspondiente, por ejemplo, el botón "Cerrar" en el. La ventana Lyric Show toma la esquina superior izquierda de la imagen de fondo de Lyric Show como origen, ¡y así sucesivamente para el resto!
Especialmente: ① El elemento de la barra de desplazamiento en la lista de reproducción no necesita definir el atributo de posición, y su posición se fijará automáticamente en el lado derecho de la lista de reproducción ② progreso, v en la ventana principal;
Los atributos de posición de los elementos de equilibrio, sonido envolvente y preamplificador en el elemento de volumen y la ventana del ecualizador 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 del instrumento de la lista de reproducción y el elemento de letra; en la ventana del instrumento de visualización de letras Representa el rango de visualización de listas de reproducción y letras. Cuando la ventana de lista de reproducción y la ventana de visualización 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 es. determinado por esto reflejado por la posición;
resize_rect: un atributo único de las ventanas de visualización de letras y lista de reproducción. Se utiliza para definir las partes de las dos ventanas que se pueden estirar. Su formato de parámetro es el mismo. posición, que representa cuando se cambia el tamaño de la ventana. Solo se estirará la parte dentro de este marco rectangular, y la parte fuera de este rango no cambiará. También hay un atributo resize_tile que se usa en consecuencia. Su valor de parámetro puede ser 0 o. 1, donde 0 significa que está cambiando el tamaño de la ventana está ampliado, 1 significa en mosaico, este atributo se puede omitir, es decir, se usa el valor predeterminado 0;
Además, la letra muestra y. Las ventanas de listas de reproducción también tienen un Elemento opcional: título, que se puede usar cuando existen necesidades específicas (como mantener el título centrado al cambiar el tamaño de la ventana, etc.). El formato es el siguiente:
título.