Generate icons, storefront graphics, screenshots and loading screens for Steam and Mobile
-
You're going to need to install: Node.js (https://nodejs.org/en/download/)
-
Download the WindowDresser zip, and extract it where you like on your computer.
-
Run the installer double click "install WindowDresser.bat" on windows double click "install WindowDresser.command" on mac Type "npm install" in terminal
This task will take a while to run, as it downloads things. It'll close when it's finished
- Run the compiler: double click "create images.bat" on windows double click "create images.command" on mac Type "node windowdresser.js" in terminal and press enter
Replace the src/icon.png with your own (1024px x 1024px)
Replace the src/cover.png with your own (2048px x 2048px)
Replace the src/screen[1-5].png files with your own If your source file is portrait, the output will be portrait.
Save all of your individual elements as high-res PNG files Edit the config.json file Each "layer" in the file can have the following properties: file - the path of the image file align - the position to align the image to:
tl - align the layer to the top left t - align the layer to the top tr - align the layer to the top right l - align the layer to the left c - align the layer to the center r - align the layer to the right bl - align the layer to the bottom left b - align the layer to the bottom br - align the layer to the bottom right
offsetX: - offsets the image from the align point - if the value is between -1 and 1, it's interpreted as a percentage, otherwise as pixels offsetY: - offsets the image from the align point - if the value is between -1 and 1, it's interpreted as a percentage, otherwise as pixels scaleX: accepts a value between 0 and 1, scales the layer according to a percentage of the image width scaleY: accepts a value between 0 and 1, scales the layer according to a percentage of the image height
Layers are assembled from back to front.