Slipcover

Folder structure

To create a SlipCover case, you will need two elements. A XML file and graphics wrapped in a folder. The XML file is named "rectangles.xml" and basically tells SlipCover how large to make the case, and where to place it.

The graphics are quite simply named the resolution of the graphic followed by .png. For example, a 512x512 case state will be named "512.png" SlipCover requires that every size of an icon be present in the folder, so you will need a 512.png, 256.png, 128.png, 48.png, 32.png, and 16.png in the case folder. All of these files should be wrapped in another folder called images.

Basic Masking

By default, SlipCover was intended to be used for rectangular shaped images, and this is the default behavior of the application. However, if there are more advanced cases that you have in mind, SlipCover supports alpha masking. To use this, you will simply need to include a masks folder that contains mask images named 512.png, 256.png, 128.png, 48.png, 32.png, and 16.png. More detailed tutorials on the specifics and limitations of masking can be found on dustinschau.com.

XML structure

rectangles.xml is the crucial piece of text that tells SlipCover how to build your case. It's really quite simple to make your own rectangles.xml, or to edit a preexisting one. The basic structure is shown below.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>512</key>
<string>{{106, 51}, {280, 415}}</string>
</dict>
</plist>

Now, to examine that little piece of code a bit further, let's take a look at the key and string section of rectangles.xml.

<key>512</key> <string>{{106, 51}, {280, 415}}</string>

The key section simply contains the size of the case and string contains information as to where the case will be placed. There will need to be key values for 512, 256, 128, 48, 32, 16. The brackets and numbers of string are quite simply just pixel values that correspond to {{Horizontal width from left, Vertical distance from bottom}, {Horizontal width, Vertical Height}} and these values will need to be calculated for each size of the case. For more information regarding the graphical aspects involved, please check out graphics tutorial.

An additional option for more advanced users of SlipCover is to add a key with the value imageRendering with a string of bottom or top. This little addition to rectangles.xml tells SlipCover where to place the image (either above or below). If no value is set, SlipCover defaults to bottom. An example of a case that would place the image on top of the background file is shown below.

<key>imageRendering</key>
<string>top</string>

Finishing up

As you can see, creating a case for SlipCover is simple. To finish up, just append a .case extension to the folder containing rectangles.xml and 512.png, 256.png, 128.png, 48.png, 32.png, 16.png. That's it! If there is any lingering confusion, please feel free to download the Sample.case. To access the contents, simply right click on Sample.case and select "Show Package Contents".