metafy home > stickler > docs > howto make skins


howto make a stickler skin


To make a Stickler Skin you need:
  • A Graphics Program such as Photoshop

  • Apple's free XCode development tools (but no programming is required)

    • There are three parts to creating a Stickler! Skin: the Graphics, the XCode Bundle, and Installation & Testing.


    Part One: The Graphics

    Currently, nine graphics are required for each Stickler! Skin plugin. Please note that this requirement may change at any time, and no backward-compatability is guaranteed.

    The nine graphics represent three pieces each of three composite images used to generate the view.

    The three composite images are the Base, the Mask and the Highlight.

    Of the three primary composite images (Base, Mask and Highlight): the Base image will have the primary "look and feel" of your skin; the Mask defines the area that will be transparent (so that you can have different shaped window edges); and the Highlight is what your skin will look like when the user is dropping an RSS link onto Stickler!

    Each composite image is comprised of three parts, a Left, a Right and a Middle.

    Here is a table showing a sample for each of the nine required images:

      Left

    Middle

    		 Right
    Base:
    Highlight:
    Mask:

    Generate your images using your graphics program taking special care to make sure that each of the graphics are sized the same as the others in their category, and that all share the same height overall.

    In the table of images above, each of the "_L_" and "_R_" images are 50 pixels tall x 24 wide, and the "_M_" image is 50 pixels tall by 352 pixels wide.

    When you save them, be sure make them type "Tiff" with transparency, and to identify which file is which, using the naming scheme shown below in which SKINNAME should be replaced with the actual name of your skin:

    	SKINNAME_L.tif
    
	SKINNAME_L_Mask.tif
    
	SKINNAME_L_Highlight.tif
    
	SKINNAME_R.tif
    
	SKINNAME_R_Mask.tif
    
	SKINNAME_R_Highlight.tif
    
	SKINNAME_M.tif
    
	SKINNAME_M_Mask.tif
    
	SKINNAME_M_Highlight.tif


    When done, you should have nine "tiff" images ready to be imported into XCode in the next step.



    Part Two: The XCode Bundle

    Don't worry if you're not a programmer, you can still use XCode (although you may need to install it), and creating a Stickler! Skin requires NO CODE whatsoever.

    First, from the XCode File Menu, create a New Project of type "Cocoa Bundle" and save it where you keep your projects. Important: be sure to name your project the same as the name of the skin you're creating and everything will just work. In this example, we're going to create a skin named "TestSkin".

    Next, click on "Targets" in the "Groups & Files" list on the left, and dink it open to reveal "TestSkin" plugin (looks like a building block), select it with a single-click, and then "Get Info" (Command-I) on the plugin.

    Click on the "Build" tab at the top of the Get Info window.

    Change the "Wrapper Extension" from "bundle" to "plugin".

    Click on the "Properties" tab at the top of the Get Info window.

    Set the identifier to represent you, eg, com.metafy.stickler.testskin


    Back in the main XCode project window, double-click on Info.plist in the Groups & Files pane list under your project's Resources Folder. Edit the empty "NSPrincipalClass" key value at the bottom to have the name of your skin.

    For example:
    <key>NSPrincipalClass</key>
    <string>TestSkin</string>

    Add the nine graphics to the "Resources" group folder in your XCode project in the main group.

    And that's it, not bad eh? In the future we will add more parameters (see "Baseline Shift & Info.plist" note below), but hopefully this is enough for most folks to get started.



    Part Three: Installation & Testing

    Once you've completed these steps, "Build" your project in XCode.
    The output of which will be in the "build" folder of your project folder on your hard drive.

    For example, our output from our sample project here is called "TestSkin.plugin" and it's in our projects folder, in the TestSkin project folder, and then in "build" within that:





    After you have the built plugin file, copy it out of the "build" folder and into a location where you can easily find it, such as onto your Desktop.

    And now, you're really done, follow the How To Install Stickler! Skins instructions to use your new Skin, and make sure that it works.


    Notes on Default Baseline and Info.plist:

    Stickler! will attempt to guess the best baseline for your skin image, but if you don't like what it comes up with, you can override the default baseline for a skin by modifying the Info.plist file in your Xcode project.

    To do so, add the following text inside the "" tags at the bottom of your info.plist file (NOT the InfoPlist.strings file):
    	<key>STKLSkinDefaultBaseline</key>
	<string>-27.4</string>

    Additional parameters will be forthcoming in future versions of Stickler!


    If you make a skin and would like us to list it for other Stickler! users, please let us know!


    [ Metafy Home ]


    Copyright © 2004, All Rights Reserved. Metafy LLC.