Soporte › Cómo crear/editar skins y temas de color de la aplicación
Si tiene incluso conocimientos artísticos básicos, puede crear skins/temas para AllMyNotes Organizer. A continuación encontrará los detalles sobre cómo hacerlo. Incluso ofrecemos una licencia Deluxe Edition de AllMyNotes Organizer para fomentar la creación de nuevos skins, con estas dos condiciones:
1. El skin, el tema o incluso un pequeño elemento debe verse lo bastante bien como para distribuirse con la aplicación, publicarse en nuestro sitio web o, al menos, incluir algún elemento que consideremos adecuado para incorporarlo a otros skins;
2. Envíenos el archivo fuente de sus gráficos (archivo .psd). Lo necesitamos porque añadimos con frecuencia elementos gráficos e iconos nuevos. Sin este archivo no podremos mantener el skin.
--- Cómo crear skins para AllMyNotes Organizer (borrador de la guía) ---
Los archivos de los skins se encuentran en c:\Program Files\AllMyNotes Organizer\Skins older. Actualmente hay dos skins - Holy Crown y Deep. Cada uno se encuentra en una carpeta independiente.
Cada carpeta contiene dos archivos:
1. SkinInfo.ini - contiene todos los colores y parámetros del skin.
2. Archivo .png con los elementos gráficos del skin. Las coordenadas de los controles de este mapa de bits se guardan en SkinInfo.ini
Para crear un skin nuevo:
1. Copie uno de los skins existentes a otra carpeta
2. En el archivo copiado, cambie el nombre del skin en SkinInfo.ini - consulte la entrada FileDescription. Lo ideal es que el nombre de la carpeta y el del skin coincidan. Eso es prácticamente todo: a partir de ahí puede cambiar colores, editar el mapa de bits, etc.
Otros consejos:
1. Normalmente creamos los skins con PhotoShop en formato .psd. Esto permite aplicar efectos potentes y aprovechar los efectos de capas y la transparencia. Cuando terminamos de editar el mapa de bits del skin, exportamos los datos al archivo .png del skin. Trabajar exclusivamente con archivos .png está totalmente desaconsejado: resulta agotador para el diseñador y dificulta futuras ampliaciones.
2. No dude en ponerse en contacto con Vladonai Software si necesita recursos. Podemos proporcionarle gráficos que ya hemos utilizado para skins, además de otros consejos basados en nuestra experiencia.
El contenido del mapa de bits y de SkinInfo.ini es bastante claro, los nombres de las entradas son descriptivos y hemos añadido etiquetas al mapa de bits para facilitar la creación de nuevos skins. Si necesita información sobre el significado de los iconos de las barras de herramientas, menús, botones o árbol, contáctenos y con gusto le proporcionaremos más detalles y recursos.
P.S. Este es un ejemplo visual rápido de cómo se reflejan las coordenadas de la imagen en el archivo SkinInfo.ini:
Anatomía del archivo SkinInfo.ini
SkinInfo.ini es un archivo de texto sin formato compuesto por líneas Name=Value, agrupadas en secciones: información de apariencia, temas de color, colores, editor de texto, dimensiones, fuentes y mapa de la imagen de mapa de bits (todas las entradas SB_*). Las líneas que comienzan con ** o // son comentarios - un lugar práctico para guardar un valor antiguo en vez de eliminarlo. Los colores pueden escribirse como #RRGGBB (copiándolo directamente de Photoshop) o como R,G,B - #FFFFFF y 255,255,255 representan el mismo blanco.
No modifique ProjectSignature ni RequiredAppBuildNumber: indican a la aplicación que se trata de una apariencia de AllMyNotes y qué compilación necesita. Cambie FileDescription - es el nombre de la apariencia que se muestra en el menú.
Temas de color: una apariencia, veinte ambientes
Una apariencia no tiene por qué ofrecer un único aspecto. Cada línea ThemeEffects_N es como una receta: al cargar el tema, la aplicación toma la imagen de mapa de bits de la apariencia y le aplica una cadena de filtros de imagen, de izquierda a derecha, antes de dibujar nada. El archivo .png del disco nunca cambia. Así es como Holy Crown ofrece los temas Sepia, Gold, Coffee, Blueprint y Night Vision a partir de una sola imagen - un único mapa de bits, sin trabajo gráfico adicional, y Photoshop ni se enteró.
El formato es el siguiente: el nombre del tema entre comillas dobles, seguido de los efectos separados por |. ThemeEffects_Default (sin nombre) se aplica a la propia apariencia. Numere los temas 1, 2, 3... sin saltos - la aplicación los lee hasta encontrar el primer número que falta, por lo que cualquier tema situado después de un salto se ignora sin avisar. Las líneas ThemeEffectsM3_N funcionan igual y requieren AllMyNotes 3 o posterior. Los temas de color son una función de la edición Deluxe.
Del blanco al negro en una sola línea
¿Quiere crear una versión oscura de una apariencia clara? No necesita volver a pintar ni un solo píxel. INVERTBRIGHTNESS convierte las zonas claras en oscuras, pero conserva los tonos, así que el azul sigue siendo azul; simplemente pasa al turno de noche. Un simple INVERT también convertiría sus azules en naranjas - divertido durante un minuto, hasta que sus ojos presenten una queja. Añada SCALELUMA para evitar que el resultado quede completamente negro y un poco de GRAYSCALE para suavizar esos colores que de repente empiezan a brillar en la oscuridad:
Los temas "Night Vision Glow" y "Night Vision Gray" de Holy Crown se crean exactamente así. No olvide los colores del texto: los filtros modifican el mapa de bits, mientras que los colores de la sección Colores permanecen tal como están definidos - un FontColor gris oscuro sobre un fondo que ahora también es oscuro constituye una forma muy elegante de ocultarse sus propias notas.
Efectos que puede combinar en cadena
| Efecto | Qué hace |
|---|---|
| AUTOLEVELS | Amplía el rango de brillo hasta cubrir todo el intervalo 0-255. Es como un botón para «hacer que la imagen parezca menos descolorida». |
| GRAYSCALE | Elimina los colores; GRAYSCALE40 solo reduce su intensidad un 40%. Modo de trabajo serio al instante. |
| SEPIA | Tonos de fotografía antigua. Sus notas de ayer parecen de repente escritas en 1890. |
| INVERT, INVERTBRIGHTNESS | INVERT invierte todos los colores (como un negativo fotográfico), mientras que INVERTBRIGHTNESS solo invierte las zonas claras y oscuras - la opción adecuada para los temas oscuros. |
| BLUEPRINTLIGHT, BLUEPRINTDARK | BLUEPRINTLIGHT / BLUEPRINTDARK - aspecto de plano de ingeniería. Notas con las que casi podría construirse un puente. |
| ADJUSTLEVELS | ADJUSTLEVELS:min,max,midSrc,midDst (0-255) - ajusta los tonos medios: 0,255,150,110 los oscurece y 0,255,150,190 los aclara. |
| BRIGHTNESSCONTRAST | BRIGHTNESSCONTRAST:b,c (-255..255, 0 = sin cambios). Hace exactamente lo que indica su nombre. |
| HUESATURATIONLIGHTNESS | HUESATURATIONLIGHTNESS:h,s,l - desplazamiento del tono de -360..360, saturación y luminosidad en porcentaje. Gire el tono 180 y toda la apariencia pasará al lado opuesto del círculo cromático. |
| REPLACECOLOR | REPLACECOLOR:#from,#to,fuzziness - sustituye un color por otro; la tolerancia 0..180 determina el grado de similitud aceptado. Los temas Gold, Coffee, Pink y Sea de Holy Crown utilizan todos este mismo truco, pero con distintos valores de #to. |
| SCALELUMA | SCALELUMA:min,max (0-1000) - comprime el brillo dentro de un intervalo: 250,950 = imagen más definida, 0,500 = todo como máximo a la mitad de brillo, ideal para los noctámbulos. |
| SCALESATURATION | SCALESATURATION:min,max (0-1000) - lo mismo para la saturación: aumente el valor mínimo y los colores pálidos ganarán intensidad. |
Los elementos principales y qué ocurre al modificarlos
Algunas entradas de Holy Crown, lo que controlan y qué puede esperar al cambiarlas:
| Entrada | Qué cambia (y los efectos secundarios) |
|---|---|
| WindowBackgroundColor=#DAE1F0 | El fondo situado detrás de todos los paneles. Cámbielo y toda la aplicación cambiará de ambiente, como una habitación con papel tapiz nuevo. |
| FontColor=#636363 | El color principal del texto. Asígnele el mismo valor que a ViewBackgroundColor y habrá inventado la tinta invisible - excelente para guardar secretos, poco útil para la productividad. |
| MenuFontColor=#6080BD MenuSelectionColor=#a9beef MenuBackgroundColor=#FAFAFA | El texto de los menús, la barra de selección bajo el puntero del ratón y el fondo de los menús. Elija un color llamativo para la selección y cada visita al menú se convertirá en una pequeña discoteca. |
| TextEditorSelectionColor=#f6d595 TextEditorInactiveSelectionColor=#f8ebd3 | El resaltado que aparece al seleccionar texto en una nota (la variante inactiva se utiliza cuando el editor no tiene el foco). Elija un color oscuro y el texto seleccionado se volverá ilegible justo cuando quiera copiarlo. |
| TreeOutlineColorHighlighted=#D0BF91 | El contorno redondeado alrededor de la carpeta seleccionada en el árbol. Un discreto indicador de «usted está aquí». |
| DistBetweenControls=4 DistBetweenCtlAndBorder=5 | Los espacios entre paneles y entre los paneles y el borde de la ventana, en píxeles. Con 4 todo queda bien junto; con 40 los paneles se separan como continentes. |
| FontNormalName=Amelian.TTF FontMenuName=segoepr.ttf FontEditName=TENAHB48.TTF FontWndTitleName=Orbitbn.ttf FontWndTitleBolded=TRUE FontHintName=Amelian.TTF | Una apariencia puede incluir sus propias fuentes para cinco elementos: texto normal de la interfaz (FontNormal), menús (FontMenu), editor de notas (FontEdit), títulos de ventanas (FontWndTitle, junto con FontWndTitleBolded=TRUE) e información sobre herramientas (FontHint). Si no se incluyen estas entradas, se utiliza la fuente del sistema. El archivo .ttf se obtiene de la carpeta de la apariencia o de la carpeta Fonts de Windows (de ahí procede Segoe Print, segoepr.ttf). Segoe Print en los menús resulta encantadora durante exactamente un día; Orbitbn.ttf en el título de la ventana hace que la aplicación parezca la consola de una nave espacial durante algo más de tiempo. Las entradas ...Size siguen funcionando, pero ahora es mucho más sencillo cambiar el tamaño del texto desde la configuración de la propia aplicación - deje que la apariencia elija la fuente y que el usuario decida el tamaño. |
| SkinBitmap=HolyCrown.png SB_Button_NormalCoord=69,108 SB_Button_LeftPieceWidth=10 SB_ScrollBarWidth=16 | Todas las entradas con el prefijo SB_ apuntan a partes del archivo .png: Coord indica las coordenadas x,y del píxel superior izquierdo del elemento, mientras que los anchos LeftPiece / Fill / RightPiece determinan cómo se divide - los extremos se dibujan tal cual y la parte central se estira. Cambie aquí una dimensión sin mover los píxeles en el .png y la aplicación recortará la imagen por lugares equivocados - su apariencia entrará en su época de Picasso. |
Cómo ver rápidamente sus cambios en la aplicación
AllMyNotes lee SkinInfo.ini y el archivo .png solo en dos momentos: al iniciarse y cuando selecciona una apariencia o un tema en el menú Apariencias. Guardar el archivo por sí solo no produce ningún cambio. Sin embargo, no hace falta reiniciar la aplicación después de cada ajuste:
1. Edite SkinInfo.ini (o exporte el .png) y guarde el archivo.
2. En el menú Apariencias, seleccione cualquier otra apariencia o tema y después vuelva a seleccionar el suyo. Cada selección vuelve a leer los archivos del disco, así que el segundo clic mostrará sus cambios - aproximadamente un segundo para todo el proceso.
Seleccionar la apariencia que ya está marcada no hace absolutamente nada - la aplicación decide amablemente que no hay nada que cambiar. Pase siempre a otra opción y luego regrese.
La lista de apariencias del menú se genera una sola vez por sesión. Por eso, después de añadir una nueva carpeta de apariencia o cambiar el nombre de una apariencia (FileDescription) o de un tema, reinicie AllMyNotes una vez para ver el nuevo nombre. Y si su apariencia de pronto se ve exactamente igual que Holy Crown, significa que la aplicación no pudo cargar su archivo y volvió a la apariencia predeterminada - revise la última línea que modificó.
Consejo: la carpeta Skins se encuentra dentro de Program Files, por lo que Windows podría impedir guardar archivos allí. Ejecute el editor como administrador o utilice la versión portátil, donde las apariencias se encuentran en una carpeta normal.
Nota: la edición Lite está limitada a 2 skins, mientras que Deluxe ofrece más temas.
¡Que se divierta! :-)