This is a quick little utility to take some of the pain out of stitching together graphics for use as css-sprites it was conceived to fit a specific workflow. Original Authors: Saul Rosenbaum - Chris Morrell
PHP
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
docs
images
README
SpriteGenerator.php
a00_orig.png
a00_over_orig.png

README


         
         Sprite Generator v01
         Quick Notes:
         
         Authors:

         Saul Rosenbaum / visualchutzpah.com
         Chris Morrell / cmorrell.com
         
         
         This is a quick little utility to take some of the pain out of
         stitching together graphics for use as css-sprites it was conceived
         to fit a specific workflow. The class is nicely commented, 
         read on for a quick overview.
         
         
         To utilize it follow the simple steps below: 
         
         1. As you normally would create a folder of individual
            graphics that represent the states of your graphics. 
         
         2. Designate your over-state with '_over' so if your neutral state was 'home.gif' 
            it's corresponding over state would be 'home_over.gif' [likewise if
            you want to change this default behavior you can pass your own
            pattern to the SpriteGenerator constructor - see line 37 of the
            class for the expected arguments]
            
            Example:
                  working_directory
                     spriteGen.php
                     images
                        a00.png
                        a00_over.png                        
                        a01.png
                        a01_over.png                        
                        
         3. MAKE A COPY YOUR GRAPHICS - this class consumes the individual graphics, 
            We fully reccomend you work on copies of your images

         4. Pass the directory path containing your individual graphics to the class [line 190]
            $sg = new SpriteGenerator("./images/"); 
            If all has gone as expected you should now have:
          
            Results:
                  working_directory
                     spriteGen.php
                     images
                        a00.png
                        a01.png

            Where a00.png is a combined image of a00.png and a00_over.png stitched together vertically.
         
            Notes on Color Space:
            The class can deal with any 'web-friendly' format of graphic - in regards to stitching gifs - 
            if both states don't share the same color palette you may get some artifacts where the palette 
            of the overstate gets remapped to the palette of the neutral state, I'm sure it's addressable 
            programatically but working with pngs and outputting as gifs is a simple enough solution.
            
                        
            Possible Enhancements:
            -  The most obvious one is support for a variable number of states.
            -  The addition of a vertical offset variable - we didn't need it but adding it 
               to the generateSprite method would be simple.
            -  I suppose there are situations when you want to work horizontally rather than vertically - 
               but I can't imagine what they may be.
            -  Some type of GUI front-end to make this process drag and drop from the desktop
               (perhaps via PHP-GTK).
             
            
            Additional Info:
            - info on css-sprites can be found here: http://www.alistapart.com/articles/sprites
            - info on the benefits of reducing http requests canbe found here: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/