Finding it hard to size your tiles correctly? Want to create awesome PNG images with PinPNG, but don’t have the time?
Below are my 2 favourite tile design tips, mainly because I spent a lot of time sourcing the info and creating the templates I’m about to share with you guys.
1. Live tile sizes
Couple of people have been asking me about the sizes of live tiles, and I spent a few hours sourcing all the measurements and testing them out on the phone. I can now say with confidence that the below sizes are accurate, and apply to both 2 & 3 column layouts.
2. Tile art templates
This is where things get a little more tricky. For most of my designs I use a very old version of Photoshop which you can download for free here [UPDATE: this link no longer works, I recommend checking out the Photography monthly plan here]. What I’ve done is created a series of tile templates so that you can simply position, edit and save tiles as PNG images without all the hassle. Here’s a step-by-step guide:
Step 1:
First, download my templates here.
Step 2:
Once you have them saved to your PC, open them up with photoshop. You’ll see a few options, mainly 3 column layout, but you can still use just 2 columns if you want.
Step 3:
In order to create a PNG image, simply highlight and delete the selected area you want to remove using the magic wand tool:
Step 4:
Once you have your PNG image it’s time to position it in the pre-defined tile layout I created.
Step 5:
Once you’re happy with the layout it’s time to save your PNG tiles, so go to “File” and instead of “Save as” you need to click on “Save for Web”
Step 6:
When you click on “Save for Web” make sure that you select the sections of the image you want (in my example I’ve selected all the sections in the green boxes). Once you’ve done that you need to make sure that you’ve selected the right options on the right (ie. The green circle in the screen grab). You want to save the images as PNG and make sure the “transparent” box is ticked.
Step 7:
Once you’ve done that it’s time to save your images. Make sure the “Images only (png)” option is selected from the drop-down below:
Step 8:
Hit “Save” and it should automatically create a folder for you with all your pretty PNG images in the right size and format.
Step 9:
Now you can copy these pics across to your phone and pin them to your home screen with PinPNG. They should create a perfect layout for you with transparency if you’ve got a PNG image of course.
I know this seems like a lot of effort, so hopefully me sharing all this info will help give an awesome developer out there the kick in the ass he needs to make it easy for us all 😉
Have fun out there!
*UPDATE: Lumia 1520 Wallpaper dimensions for those of you who asked…
Tile Art Guy 