tisdag, september 25, 2012

Badge Logo till en Windows Store app

I min senaste app behövde jag skapa en Badge Logo. En Badge Logo pekas ut i Package.appxmanifest under sektionen Notifications och används på lock screen för att visa notifieringar från en app. Det är inget krav att peka ut en Badge Logo men om din app kan ta emot toasts så måste du ha en Badge Logo och då måste den också vara korrekt. En felaktig Badge Logo kommer att göra så att ni app inte klarar certifieringen.


Exempel på en Badge Logo in action:


När jag så här i efterhand tittar på bilden ovan så är det helt uppenbart hur man ska göra en Badge Logo men när jag satt och bara vill få min app certifierad var det inte lika uppenbart.

Reglerna säger:
"A logo image that is shown next to the badge to identify the app. This image must be monochromatic, of type .png, and measure 24 x 24 pixels."

Det felmeddelande man får när man har en felaktig bild är:
Image reference "Assets\BadgeLogo.png": The image "C:\Program Files\WindowsApps\YourAppName_1.0.0.12_neutral__somerandomletters\Assets\BadgeLogo.png" has an ABGR value "0xFFC7C7C7" at position (0, 0) that is not valid. The pixel must be white (##FFFFFF) or transparent (00######).

Bilden som man skapar måste vara monokrom med transparanta (00######) och vita (##FFFFFF) pixlar. Dvs varje pixel ska vara genomskinlig eller i någon nyans av vitt.

För att lösa det använder man lämpligen ett bildbehandlingsprogram som kan hantera lager. Det kan vara Photoshop eller paint.net.
  1. Skapa en ny bild som är 24x24 pixels med tre lager.
  2. Lager 1 ska vara transparent, lager 2 ska vara svart och lager 3 transparent.
  3. Skapa ditt ikonsika mästerverk på lager tre och använd bara vit färg.
  4. Ta bort eller dölj lager 2 så att bilden bara har via och transparenta pixlar synliga.
  5. Spara din bild i jpg eller png
Du kan självklart hoppa över det svarta lagret men det är så mycket enklare att se vitt på svart än vitt på transparent.

Inga kommentarer: