Springboard - Guía para crear temas para WinterBoard (iOS 5)

Guía para crear temas para WinterBoard (iOS 5)

Springboard:

1. ¿Qué es el springboard?



El springboard es la pantalla que aparece al desbloquear el dispositivo.

Rutas:
Bundles: com.apple.springboard
Folders: SpringBoard.app

2. Centro de notificaciones:
2.1 Elementos:
Las imágenes del centro de notificaciones empiezan por "BulletinList". Son muchas pero las más interesantes son las siguientes:

"BulletinListLinen.png" ("BulletinListLinen~ipad.png"): es el fondo del centro de notificaciones. Sus dimensiones son 480x480 px (480x1024 px).

NOTA: es necesario borrar un archivo llamado "com.apple.SpringBoard.notificationCenterLinen", que está en la ruta var/mobile/Library/Caches, para que el cambio del fondo surta efecto. Después de esto haz un respring.

"BulletinListGrabber.png": es el rectángulo pequeño que aparece al final del centro de notificaciones. Sus dimensiones son 45x17 px.

"BulletinListTab.png": es el fondo que aparece cuando se muestra el BulletinListGrabber en una aplicación a pantalla completa. Sus dimensiones son 47x21 px.

Nota: el resto de imágenes las puedes encontrar en el archivo descargable llamado "SpringBoard".

Ejemplos:


Dimensiones: 45x17 px


Dimensiones: 47x21 px

2.2 Notificaciones:


Las imágenes de la barra de notificaciones se encuentran en el springboard y todas ellas empiezan por "Banner".

Las imágenes se estructuran de la siguiente forma:

Barra:
BannerGradientLeft.png (6x36 px - 15x74 px)
BannerGradientMiddle.png (2x36 px - 4x74 px)
BannerGradientRight.png (10x36 px - 20x73 px)
BannerMask.png (15x38 px - 30x76 px)
BannerRollGradient.png (1x10 px - 2x20 px)

Sombra:
BannerShadowBottom.png (16x27 px - 30x54 px)
BannerShadowCenter.png (16x40 px - 30x80 px)
BannerShadowLeft.png (32x40 px - 64x80 px)
BannerShadowLeftCorner.png (32x27 px - 64x54 px)
BannerShadowRight.png (32x40 px - 64x80 px)
BannerShadowRightCorner.png (32x27 px - 64x54 px)

Nota: en el archivo descargable "SpringBoard" vienen todas estas imágenes. Cuando veas las imágenes comprenderás para que es cada una de ellas.

2.3 Rutas widgets del centro de notificaciones:
Compartir widget:
Bundles: com.apple.SocialWeeApp
Folders: SocialWeeApp.bundle

Widget de tiempo:
Bundles: com.apple.weathernotifications.bundle
Folders: WeatherNotifications.bundle

Widget de bolsa:
Bundles: com.apple.stocksweeapp.bundle
Folders: StocksWeeApp.bundle

3. Dock:
El dock es lo que aparece en la parte inferior del springboard.

3.1 Imágenes del dock:
Distinguimos entre iPhone e iPad.

iPhone: su nombre es SBDockBG~iphone.png y sus dimensiones son 320x45 px.

iPad: su nombre es SBDockBG-Portrait~ipad.png (vertical) y SBDockBG-Landscape~ipad.png (horizontal) y sus dimensiones son 768x64 px y 1024x64 px.

Ejemplos:


Dimensiones: 320x45 px


Dimensiones: 768x64 px


Dimensiones: 1024x64 px

3.2 Reflejo iconos del dock:
Para el reflejo de los iconos del dock se usa una máscara llamada SBDockMask.png (SBDockMask~ipad.png) de dimensiones 59x60 px (74x76 px).

Ejemplo:


Dimensiones: 59x60 px

3.3 Sombra del dock:
Detrás del dock aparece una sombra llamada WallpaperGradientPortraitBottom~iphone.png de dimensiones 1x237 px.

En el iPad son dos imágenes, una para orientación vertical y otra para orientación horizontal. Sus nombres respectivamente son: WallpaperGradientPortraitBottom~ipad.png y WallpaperGradientLandscapeBottom~ipad.png de dimensiones 1x509 px y 1x381 px.

Ejemplo:


Dimensiones: 59x60 px

4. Elementos de iconos:
4.1 Sombra de los iconos:
Los iconos tienen una especie de sombra detrás de ellos.

Tenemos la sombra de los iconos que están en el dock que se llama "WallpaperIconDockShadow~iphone.png" ("WallpaperIconDockShadow~ipad.png") que tiene como dimensiones 59x60 px (74x76 px).

Luego tenemos la sombra de los iconos que no están en el dock que se llama "WallpaperIconShadow~iphone.png" ("WallpaperIconShadow~ipad.png") que tiene como dimensiones 103x103 px (130x130 px).

Ejemplos:


Dimensiones: 59x60 px (74x76 px)


Dimensiones: 103x103 px (130x130 px)

4.2 Badge y closebox:
El badge es la imagen que aparece arriba a la derecha de los iconos. Está compuesta por 2 imágenes:

"SBBadgeBG.png" es el icono normal. Sus dimensiones son 29x31 px.

"SBBadgeExclamation.png": es el badge con un signo de exclamación. Sus dimensiones son 29x30 px.

Luego tenemos la imagen closebox que aparece arriba a la izquierda de algunos iconos cuando activamos el modo para mover los iconos del springboard. Su nombre es "closebox.png" y tiene como dimensiones 30x29 px.

Ejemplos:


Dimensiones: 29x31 px


Dimensiones: 29x31 px


Dimensiones: 30x29 px

5. Carpetas y multitarea:
5.1 Imagen de fondo:
Las imágenes de fondo son 3 (una para iPhone, una para iPhone con retina display y otra para iPad):

FolderSwitcherBG~iphone.png: esta imagen es para el iPhone y tiene como dimensiones 320x360 px.

FolderSwitcherBG~ipad.png: esta imagen es para el iPad y sus dimensiones son 1024x1024 px.

NOTA: es necesario borrar unos archivos con nombre similar a "com.apple.SpringBoard.folderSwitcher" que están en la ruta var/mobile/Library/Caches para que el cambio del fondo surta efecto. Después de esto haz un respring.

Ejemplo:


Dimensiones: 320x360 px (1024x1024 px)

5.2 Icono carpetas:
Sus dimensiones son 59x62 px (74x78 px) y su nombre es "FolderIconBG~iphone.png" ("FolderIconBG~ipad.png").

En el iPad se incluye una imagen llamada "FolderIconOverlay~ipad.png" que es identica al icono de la carpeta pero en negro y sirve para que al pulsar sobre una carpeta se oscurezca una determinada zona.

Luego tenemos una imagen llamada "FolderDropBG~iphone.png" ("FolderDropBG~ipad.png") que es para cuando vamos a añadir un icono a una carpeta y tiene como dimensiones 177x177 px (220x220 px).

Ejemplos:


Dimensiones: 59x62 px (74x78 px)


Dimensiones: 74x78 px


Dimensiones: 177x177 px (220x220 px)

5.3 Iconos multitarea:
En este apartado tenemos los iconos de bloqueo de orientación de pantalla que se llaman "RotationLockButton~iphone.png" ("RotationLockButton~ipad.png") que es para cuando la orientación está bloqueada y "RotationUnlockButton~iphone.png" ("RotationUnlockButton~ipad.png") que es para cuando la orientación no está bloqueada. Sus dimensiones son 59x60 px (74x76 px).

Luego está el icono para el Print Center que se llama "Printer~iphone.png" ("Printer~ipad.png") y sus dimensiones son 59x60 px (74x76 px).

También tenemos una imagen que es como una sombra para los iconos. Su nombre es "SwitcherIconShadow~iphone.png" ("SwitcherIconShadow~ipad.png") y sus dimensiones son 59x60 px (78x78 px).

Por último tenemos el botón rojo que sirve para cerrar una aplicación. Su nombre es "SwitcherQuitBox.png" y tiene como dimensiones 30x29 px.

Ejemplos:


Dimensiones: 59x60 px (74x76 px)


Dimensiones: 59x60 px (74x76 px)


Dimensiones: 59x60 px (78x78 px)


Dimensiones: 30x29 px

5.4 Controles musicales:
Son 5 imágenes (Play, Pause, Next, Previous y AirPlay).

Las 4 primeras están constituidas por 3 imágenes cada una y tienen los mismos nombres exceptuando que si no tiene ningun sufijo es el icono normal, si tiene como sufijo "_p" es la imagen para cuando está pulsado y si tiene como sufijo "_d" es que el botón está desactivado.

Sus nombres son:

* "MCPlay~iphone.png" ("MCPlay~ipad.png")
* "MCPause~iphone.png" ("MCPause~ipad.png")
* "MCNext~iphone.png" ("MCNext~ipad.png")
* "MCPrev~iphone.png" ("MCPrev~ipad.png").

En cuanto a los iconos de AirPlay son 4 imágenes llamandose:

* "SwitcherAirPlayNowPlayingButton~iphone.png" ("SwitcherAirPlayNowPlayingButton~ipad.png"): es el icono normal.

* Añadiendo el sufijo "Pressed": es el icono pulsado.

* Añadiendo el sufijo "On": es el icono cuando está activado.

* Añadiendo el sufijo "OnPressed": es el icono cuando está activado y pulsado.

Las dimensiones de todas estas imágenes son 47x47 px (61x61 px)

NOTA: los sufijos se añaden antes de ~iphone o ~ipad.

Ejemplos:


Dimensiones: 47x47 px (61x61 px)


Dimensiones: 47x47 px (61x61 px)

5.5 Barras de la multitarea:
Este grupo está constituido por 5 imágenes llamadas:

"SwitcherSliderThumb.png": es el círculo de las barras. Sus dimensiones son 28x28 px.

"SwitcherSliderTrackMax.png": es la barra en sí y sus dimensiones son 11x9 px.

"SwitcherSliderTrackMin.png": es el trozo de barra que indica la cantidad de brillo o volumen que hay. Sus dimensiones son 259x9 px.

"SwitcherBrightnessIcon.png" (solo presente en el iPad): es el icono de brillo que aparece debajo de la barra. Sus dimensiones son 16x17 px.

"SwitcherVolumeIcon.png": es el icono de volumen que aparece debajo de la barra. Sus dimensiones son 17x19 px.

Ejemplos:


Dimensiones: 28x28 px


Dimensiones: 11x9 px


Dimensiones: 259x9 px


Dimensiones: 16x17 px


Dimensiones: 17x19 px

6. Quiosco:
6.1 Icono:
El icono son dos imágenes que son las siguientes:

NewsstandIconBackground~iphone.png (NewsstandIconBorder~ipad.png):



NewsstandIconBorder~iphone.png (NewsstandIconBackground~ipad.png):


Dimensiones: 57x57 px (72x72 px)

6.2 Elementos:
Las imágenes que forman la carpeta del quiosco son muchas y es mejor que te descargues el archivo "SpringBoard" y mires las imágenes que empiezan por "News".

Añadida la ruta para el widget de compartir de iOS 6.

Por lo demás todo parece ser igual en iOS 6 al menos para iPhone y iPod touch (algunas imágenes cambiaron su diseño pero tienen el mismo nombre).