How do easiest I generate bitmaps for tiles, splash screen etc in different resolutions?

Question

In a Windows 8/10/Phone project you are supposed to provide assets for tiles, splash screens and store logo in different resolutions. I’m having a vector based icon. Can I somehow generate everything I need from this without doing everything manually?

Answer 1

This is how I have solved it. I’m using Inkscape to draw the icon and InkscapeBatch (http://inkscapebatch.org/) to generate the bitmaps. To do this I have three versions of my icon:

• logo.svg – size 36x36. Used for most tiles.
• logo_high.svg – size 36x60. Used for splash screen in Windows Phone.
• logo_wide.svg – size 74.4x36. Used for splash screen and wide tiles.

The document size is not important as long as the proportions are right.

In the same folder as the svg-files I have an InkscapeBatch file (.idp) that is doing the magic.

I have used black color in Inkscape in my drawing. I’m replacing black color with white color when I generate the bitmaps with the command Replace fill:#000000;fill-opacity:1; fill:#FFFFFF;fill-opacity:1; in the scripts below.

These are the scripts I’m using. Note that these scripts generate bitmaps in all resolutions and sizes which you may not need. Also note that I have used slightly different file names than the original ones.

Windows 8.1

PathClear true
FileFormat png
FilePrefix
ExportBackground

// Convert
PathExport '.\windowsstore'

ExportArea canvas
FileSvg '.\logo.svg'

// Replace black color with white color
Replace fill:#000000;fill-opacity:1; fill:#FFFFFF;fill-opacity:1;



FileName 'LogoSquare30x30.targetsize-16'
ExportWidth 16
ExportHeight 16
Convert

FileName 'LogoSquare30x30.targetsize-32'
ExportWidth 32
ExportHeight 32
Convert

FileName 'LogoSquare30x30.targetsize-48'
ExportWidth 48
ExportHeight 48
Convert

FileName 'LogoSquare30x30.targetsize-256'
ExportWidth 256
ExportHeight 256
Convert

FileName 'LogoSquare30x30.scale-80'
ExportWidth 24
ExportHeight 24
Convert

FileName 'LogoSquare30x30.scale-100'
ExportWidth 30
ExportHeight 30
Convert

FileName 'LogoSquare30x30.scale-140'
ExportWidth 42
ExportHeight 42
Convert

FileName 'LogoSquare30x30.scale-180'
ExportWidth 54
ExportHeight 54
Convert



FileName 'LogoSquare70x70.scale-80'
ExportWidth 56
ExportHeight 56
Convert

FileName 'LogoSquare70x70.scale-100'
ExportWidth 70
ExportHeight 70
Convert

FileName 'LogoSquare70x70.scale-140'
ExportWidth 98
ExportHeight 98
Convert

FileName 'LogoSquare70x70.scale-180'
ExportWidth 126
ExportHeight 126
Convert



FileName 'LogoSquare150x150.scale-80'
ExportWidth 120
ExportHeight 120
Convert

FileName 'LogoSquare150x150.scale-100'
ExportWidth 150
ExportHeight 150
Convert

FileName 'LogoSquare150x150.scale-140'
ExportWidth 210
ExportHeight 210
Convert

FileName 'LogoSquare150x150.scale-180'
ExportWidth 270
ExportHeight 270
Convert



FileName 'LogoSquare310x310.scale-80'
ExportWidth 248
ExportHeight 248
Convert

FileName 'LogoSquare310x310.scale-100'
ExportWidth 310
ExportHeight 310
Convert

FileName 'LogoSquare310x310.scale-140'
ExportWidth 434
ExportHeight 434
Convert

FileName 'LogoSquare310x310.scale-180'
ExportWidth 558
ExportHeight 558
Convert



FileName 'StoreLogo.scale-100'
ExportWidth 50
ExportHeight 50
Convert

FileName 'StoreLogo.scale-140'
ExportWidth 70
ExportHeight 70
Convert

FileName 'StoreLogo.scale-180'
ExportWidth 90
ExportHeight 90
Convert



FileSvg '.\logo_wide.svg'

// Replace black color with white color
Replace fill:#000000;fill-opacity:1; fill:#FFFFFF;fill-opacity:1;



FileName 'LogoWide310x150.scale-80'
ExportWidth 248
ExportHeight 120
Convert

FileName 'LogoWide310x150.scale-100'
ExportWidth 310
ExportHeight 150
Convert

FileName 'LogoWide310x150.scale-140'
ExportWidth 434
ExportHeight 210
Convert

FileName 'LogoWide310x150.scale-180'
ExportWidth 558
ExportHeight 270
Convert



FileName 'SplashScreen.scale-100'
ExportWidth 620
ExportHeight 300
Convert

FileName 'SplashScreen.scale-140'
ExportWidth 868
ExportHeight 420
Convert

FileName 'SplashScreen.scale-180'
ExportWidth 1116
ExportHeight 540
Convert

Windows Phone 8.1

PathClear true
FileFormat png
FilePrefix
ExportBackground

// Convert
PathExport '.\windowsphone'

ExportArea canvas
FileSvg '.\logo.svg'

// Replace black color with white color
Replace fill:#000000;fill-opacity:1; fill:#FFFFFF;fill-opacity:1;



FileName 'LogoSquare44x44.scale-100'
ExportWidth 44
ExportHeight 44
Convert

FileName 'LogoSquare44x44.scale-140'
ExportWidth 62
ExportHeight 62
Convert

FileName 'LogoSquare44x44.scale-240'
ExportWidth 106
ExportHeight 106
Convert



FileName 'LogoSquare71x71.scale-100'
ExportWidth 71
ExportHeight 71
Convert

FileName 'LogoSquare71x71.scale-140'
ExportWidth 99
ExportHeight 99
Convert

FileName 'LogoSquare71x71.scale-240'
ExportWidth 170
ExportHeight 170
Convert



FileName 'LogoSquare150x150.scale-100'
ExportWidth 150
ExportHeight 150
Convert

FileName 'LogoSquare150x150.scale-140'
ExportWidth 210
ExportHeight 210
Convert

FileName 'LogoSquare150x150.scale-240'
ExportWidth 360
ExportHeight 360
Convert



FileName 'StoreLogo.scale-100'
ExportWidth 50
ExportHeight 50
Convert

FileName 'StoreLogo.scale-140'
ExportWidth 70
ExportHeight 70
Convert

FileName 'StoreLogo.scale-240'
ExportWidth 120
ExportHeight 120
Convert



FileSvg '.\logo_wide.svg'

// Replace black color with white color
Replace fill:#000000;fill-opacity:1; fill:#FFFFFF;fill-opacity:1;



FileName 'LogoWide310x150.scale-100'
ExportWidth 310
ExportHeight 150
Convert

FileName 'LogoWide310x150.scale-140'
ExportWidth 434
ExportHeight 210
Convert

FileName 'LogoWide310x150.scale-240'
ExportWidth 744
ExportHeight 360
Convert




FileSvg '.\logo_high.svg'

// Replace black color with white color
Replace fill:#000000;fill-opacity:1; fill:#FFFFFF;fill-opacity:1;

// This could be used to add a background color
// ExportBackground #004873 

FileName 'SplashScreen.scale-100'
ExportWidth 480
ExportHeight 800
Convert

FileName 'SplashScreen.scale-140'
ExportWidth 672
ExportHeight 1120
Convert

FileName 'SplashScreen.scale-240'
ExportWidth 1152
ExportHeight 1920
Convert

Windows 10

I’ve published a solution for Windows 10 on Github:

https://github.com/pekspro/Icons-and-tiles-generator

This is very similar to the solution for Windows 8.1 above but with some templates to start with. These should follow Microsoft guidelines.