Slicing

You can have a single slice (containing part or the whole image) to as many as you want.

Color.module let's the themer decide how they want to slice. In this instance, we have one image with 2 slices.

Syntax

  'slices' = array(
    'outputfilename.png'  => (
                                              'x' = > x,
                                              'y' => y,
                                              'width' =>  width,
                                              'height' => height),
    'outputfilename2.png'  => (
                                              'x' = > x,
                                              'y' => y,
                                              'width' =>  width,
                                              'height' => height),
  );

Examples

Here, an image from FriendsElectric. Single slice that covers the entire width/height of the image from x=0 and y=0.

	$color['images']['bg-bottom-right-thin'] = array(
	  'file' => 'images/bottom-right-thin-blank.png',
	  'fill' => array(
	    array('type' => 'solid',
                  'x' => 0,
                  'y' => 0,
                  'width' => 35,
                  'height' => 25,
                  'colors' => array('base')
                  ),
	  ),
	  'transparent color' => '#000000',
	  'slices' => array(
	    'images/bottom-right-thin.png'  => array(
                                                     'x' => 0,
                                                     'y' => 0,
                                                     'width' => 35,
                                                     'height' => 25
                                                     ),
	  ),

	);

Example theme Garland uses one image with multiple slices.

	$color['images']['base_image'] = array(
	  /**
	   *  'file' (Required)
	   *  Path to your source image in terms of theme's root.
	   */
	  'file' => 'color/base.png',

	  /**
	   *  'fill' (Optional)
	   *  Solid: x-coordinate, y-coordinate, width, height, fill color
	   *  Gradient: x-coordinate, y-coordinate, width, height, top color, bottom color
	   *  You can list as many solid/gradient fills as you want
	   */
	  'fill' => array(
	    // Solid colors
	    array('type' => 'solid',
                  'x' => 0,
                  'y' => 0,
                  'width' => 760,
                  'height' => 568,
                  'colors' => array('base')
                 ),
	    array(
                  'type' => 'solid',
                  'x' => 107,
                  'y' => 533,
                  'width' => 41,
                  'height' => 23,
                  'colors' => array('link'),
                 ),

	    // Gradients
	    array('type' => 'y-gradient',
                  'x' => 0,
                  'y' => 37,
                  'width' => 760,
                  'height' => 121,
                  'colors' => array('top', 'bottom'),
                 ),
	    array('type' => 'y-gradient',
                  'x' => 646,
                  'y' => 307,
                  'width' => 112,
                  'height' => 42,
                  'colors' => array('top', 'bottom')
                  ),
	  ),

	  /**
	   *  'slices' (Required)
	   *  Slice your image up to file destination.
	   *  If your slice output file matches a CSS image BG it will be replaced
	   *  automatically for you per scheme. :)
	   *  file-path according theme root  => x-coordinate, y-coordinate, width, height
	   */
	  'slices' => array(
	    'images/body.png'                      => array(
                                                            'x' => 0,
                                                            'y' => 37,
                                                            'width' => 1,
                                                            'height' => 280
                                                            ),
	    'images/bg-bar.png'                    => array(
                                                            'x' => 202,
                                                            'y' => 530,
                                                            'width' => 76,
                                                            'height' => 14
                                                            ),
	    'images/bg-bar-white.png'              => array(
                                                            'x' => 202,
                                                            'y' => 506,
                                                            'width' => 76,
                                                            'height' => 14
                                                            ),
	    'images/bg-tab.png'                    => array(
                                                            'x' => 107,
                                                            'y' => 533,
                                                            'width' => 41,
                                                            'height' => 23
                                                            ),
	    'images/bg-navigation.png'             => array(
                                                            'x' => 0,
                                                            'y' => 0,
                                                            'width' => 7,
                                                            'height' => 37
                                                            ),
	    'images/bg-content-left.png'           => array(
                                                            'x' => 40,
                                                            'y' => 117,
                                                            'width' => 50,
                                                            'height' => 352
                                                            ),
	    'images/bg-content-right.png'          => array(
                                                            'x' => 510,
                                                            'y' => 117,
                                                            'width' => 50,
                                                            'height' => 352
                                                            ),
	    'images/bg-content.png'                => array(
                                                            'x' => 299,
                                                            'y' => 117,
                                                            'width' => 7,
                                                            'height' => 200
                                                            ),
	    'images/bg-navigation-item.png'        => array(
                                                            'x' => 32,
                                                            'y' => 37,
                                                            'width' => 17,
                                                            'height' => 12
                                                            ),
	    'images/bg-navigation-item-hover.png'  => array(
                                                            'x' => 54,
                                                            'y' => 37,
                                                            'width' => 17,
                                                            'height' => 12
                                                            ),
	    'images/gradient-inner.png'            => array(
                                                            'x' => 646,
                                                            'y' => 307,
                                                            'width' => 112,
                                                            'height' => 42
                                                            ),
	    'logo.png'                             => array(
                                                            'x' => 622,
                                                            'y' => 51,
                                                            'width' => 64,
                                                            'height' => 73
                                                            ),
	    'screenshot.png'                       => array(
                                                            'x' => 0,
                                                            'y' => 37,
                                                            'width' => 400,
                                                            'height' => 240
                                                            ),
	  ),
	);