Apple Fan Boy

viernes, 3 de julio de 2009

Personaliza el icono de carga de Safari 4


El nuevo Safari 4 utiliza un sistema de información de carga de nuevas páginas un tanto diferente a la versión anterior del navegador. En la barra de direcciones se ha sustituido el indicador de carga por una nueva "ceja azul" que a algunos usuarios no ha gustado especialmente.

Hoy vamos a modificar el "Spinner", ese relojito que indica que se está cargando una página en nuestro navegador.

El comportamiento y aspecto de este spinner viene definido por una serie de imágenes que están almacenadas dentro de la carpeta resources en Safari. Para poder acceder a estas imágenes, debes hacer click con el botón alternativo del ratón (o control + click) para mostrar el contenido el paquete. Solo tienes acceder a Contents > Resources y navegar por la larga lista de recursos de Safari hasta una serie de archivos llamados "WhiteSpinner". Hay 11 de ellos y cada uno representa una de los cuadros de la animación del indicador de carga de Safari. Actualización: Pagafantas nos pregunta si se puede modificar también la "ceja azul" de Safari y añadimos unos archivos modificados.

Lo primero es hacer una copia de seguridad de los archivos (11 en total). Selecciónalos todos y pulsa la tecla ⌥ antes de arrastrarlos a otra carpeta. Verás que aparece un icono con el signo "+". eso quiere decir que estas copiando los archivos en vez de trasladándolos.

Una vez tengas la copia de seguridad realizada, vamos a modificarlos.

Estos archivos son png y llevan transparencia, así que los abriremos con un editor que soporte transparencias en los png. Photroshop o Pixelmator te funcionarán de maravilla.

Ahora solo tienes que elegir el tipo de icono que quieres que represente la carga: nosotros hemos elegido un botón verde similar al que usa iChat.

Sobre la imagen vacía del png hemos pegado el icono y hemos jugado con la transparencia de la capa en vez de crear un icono giratorio, como el spinner. Safari carga estos iconos en orden (empezando por el cero, hasta el 11 y luego vuelta a empezar), así que hemos ido asignando un nivel de transparencia a cada uno de ellos hasta llegar al 11.

El resultado es un punto verde que aparece y vuelve a cargarse, un tanto mas llamativo que elspinner de Apple.

Si para ti es complicado, no tienes tiempo, o quieres ver como está hecho para hacerte una idea mas concreta de cómo realizar tu propio icono, puedes descargarte nuestros spinners desde este enlace.

Recuerda guardar una copia de tus nuevos spinners ya que cuando Apple actualice Safari, volverás a tener el icono giratorio por defecto y tendrás que volver a recrear el efecto de carga en la versión actualizada.

La ceja azul

Para modificar la "ceja azul" debes acceder a los siguientes archivos en la misma ruta que los spinners del icono de carga:

  • LoadingCornerFillPush.png
  • LoadingCornerLeftCap.png
  • LoadingCornerFill.png
  • LoadingCornerLeftCapPush.png
  • LoadingCornerRightCap.png
  • LoadingCornerRightCapPush.png
  • Hemos creado sobre la marcha una nueva "ceja naranja" para que puedas sustituirla por la azul y veas el efecto que hace (descarga archivos)... aunque el color o el aspecto que mas te guste queda en manos de tu creatividad. Recuerda hacer todas estas modificaciones con Safari cerrado.



    No hay comentarios: