20 abril 2017

Creación y uso de iconos con Omnis Studio (Icon Editor)

Creación de nuevos iconos

  1. Abra “Omnis Studio Developer”.
  2. Abra una librería.
  3. Haga doble clic sobre la librería desde el “Studio Browser” (F2).
  4. Haga doble clic sobre la carpeta “System CLasses”.
  5. Haga doble clic (o “checkout” si trabaja con VCS) sobre la clase #ICONS. Esto causará la apertura de la ventana “Icon Editor”. Si se trata de una nueva librería, la clase #ICONS estará vacía.
  6. Haga clic sobre “New Icon Page..” para crear una nueva página de iconos.
  7. Asigne un nombre para la nueva página y seleccione el tamaño de los iconos que desea crear en ella.
  8. Si desea crear iconos transparentes, seleccione “Solid & Alpha radio button”. Nota: Si selecciona “Solid and Alpha” se creará un icono para cada versión. El primer icono será la versión “Solid”, el segundo icono será la versión “Alpha”. Se puede pasar de una versión a otra haciendo clic sobre el icono “A” (mayúscula/minúscula) situado la derecha del “Icons Editor”. No obstante, siempre podrá añadir la versión “Alpha” de sus iconos mediante hacer clic sobre el botón “Page Options” y después sobre “Alpha copy of 24 bit”.
  9. Haga clic en el botón “Create”.
  10. Copie una imagen al portapapeles (Ctrl + c). La imagen podrá proceder de herramientas como Photoshop, Illustrator, etc.
  11. Haga clic sobre cualquiera de los 20 espacios vacíos de la parte superior derecha.
  12. Haga clic sobre la imagen 48x48 situada en la parte inferior izquierda.
  13. Pegue la imagen desde el portapapeles (Ctrl + v). Esto asignará un tamaño de 48x48 píxeles.
  14. Repita este paso para los tamaños 32x32 y 16x16 (si es necesario).
  15. Si ha creado una versión “Alpha” de los iconos, haga clic sobre la opción situada a la izquierda para cambiar a versión “Alpha” y repita la acción de copiar y pegar para los diferentes tamaños de iconos.
  16. Haga clic sobre el botón “Set Icon ID” y a continuación introduzca un identificador único.
  17. Para editar un icono ya existente, selecciónelo, seleccione después el tamaño y haga clic sobre el botón “Edit Icon”.
Consejo: Si necesita crear iconos grandes y pequeños, comience por el más grande. Una vez satisfecho con su aspecto, cree las versiones más pequeñas mediante la acción de copiar y pegar dese éste mismo icono.

 

Creación de iconos transparentes


Para crear un icono transparente a partir de su versión “Solid”:
  1. Seleccione el icono desde el “Icon Editor”.
  2. Compruebe que el botón A (Solid/Alpha) esté en modo “Solid”.
  3. Haga clic sobre el botón “Page Options”.
  4. Compruebe que esté seleccionada la opción “Substitute Transparent Color”.
  5. Haga clic sobre el botón “Update Page Settings”, para que los cambios surtan efecto.
  6. Haga clic sobre el botón “Edit Icon”.
  7. Ahora podremos ver sobre la paleta de colores, un cuadro de color verde que contiene la letra "T". Esto corresponde al color transparente. Haga clic sobre el para seleccionarlo.
  8. Seleccione la función “paint” (por ejemplo).
  9. Haga clic sobre las áreas que desee hacer transparentes.
  10. Haga clic sobre el botón “Update” cuando haya terminado.
Para crear un icono opaco o totalmente transparente, desde su versión “Alpha”:
  1. Seleccione el icono desde el “Icon Editor”.
  2. Compruebe que el botón A (Solid/Alpha) esté en modo “Alpha”.
  3. Use la herramienta “eyedropper” para seleccionar el color que desea hacer transparente u opaco.
  4. Use la barra “Alpha slider” situada al lado derecho, para modificar el grado de transparencia. Cuanto más hacia la izquierda más transparente.
  5. Seleccione la función “paint” (por ejemplo).
  6. Haga clic sobre las áreas que desee hacer transparentes u opacas.
  7. Haga clic sobre el botón “Update” cuando haya terminado. Nota: Los cambios serán visibles sólo después de cerrar la ventana del “Icon Editor”.

Uso de iconos con Omnis Studio


Existen diversos componentes capaces de mostrar iconos. En el ejemplo siguiente usaremos el denominado “OmnisIcn Control” (en nuestro ejemplo denominado “icon1”). Para asignar un icono simplemente indicamos su identificados único $::iconid (en nuestro ejemplo 1021) y el tamaño deseado (en nuestro ejemplo 32x32 píxeles).
Do $cinst.$objs.icon1.$::iconid.$assign(k32x32+1021)

 

Preguntas frecuentes


¿Donde se almacenan los iconos?

Omnis Studio, guarda los iconos en dos archivos “.df1”. El “usperic.df1” y el “omnispic.df1” situados en la carpeta “icons” situada a su vez en el directorio raíz de la instalación Omnis.

Precaución: Nunca edite los iconos de archivo “omnispic.df1”, ya que los cambios se sobrescribirán con cada actualización de Omnis Studio.

¿Dónde está la clase Omnis creada para contener iconos?

La clase #ICONS se guarda sobre carpeta “System Classes” de cada librería.  Cada una de ellas tiene una propiedad denominada “$iconlib”, que le permite hacer uso de clase #ICONS que usted prefiera. De este modo podrá disponer de un repositorio único para todas sus librerías, evitando la necesidad de copiar (o actualizar) la clase #ICONS una y otra vez. También podrá hacer uso de VCS para crear clases comunes.

¿Cuáles son las propiedades de un icono?

Los iconos poseen un identificador único “icon number”. Además, pueden tener hasta tres diferentes tamaños: 16x16, 32x32 y 48x48.

Ejemplo: Do myIconRef.$iconid.$assign(k32x32+102)

Una práctica habitual es usar una única librería a modo de repositorio que contenga todos los iconos a usar en los diferentes proyectos.

No hay comentarios: