Details

    • Type: Task
    • Status: Resolved
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: None

      Description

      We need an automatic process to generate spritesheet from images, to incorporate the new icons. After a little research, I suggest to use Glue or sprity for spritesheets generation.

      Open for discussion:

      • Should we push the resulting assets or regenerate the spritesheets during the release process. I prefer the latter.

        Glue vs. sprity

      Both tools feature retina-ready sprites and are highly configurable.

      • Glue adds a bunch of new dependencies (python, ImageMagic, glue), but is pretty fast and the output quality is good.
      • The resulting file size and quality from Sprity isn't that good, but it's node only and
        really fast.
      • Glue uses images with a specific naming convention (foo@2x.png) for retina sprites, while sprity tries to scale images based on dimension settings.

        Action Items

      • Integrate and document sprity or glue
      • Create a better less/css output template, if necessary

        Installation

        Sprity

      Just a simple npm install:

      npm install sprity sprity-less --save-dev
      

      Glue

      Please follow these installation instructions:

      http://glue.readthedocs.org/en/latest/installation.html

      Generate some spritesheets

      Sprity

      Use the following gulp task to generate the icon spritesheet:

      var gulp = require('gulp');
      var sprity = require('sprity');
      
      gulp.task('sprites', function () {
          return sprity.src({
              "src": "./src/img/**/*.{png,jpg}",
              "style": "./icons.css",
              "processor": "less",
              "dimension": [{
                  "ratio": 1, "dpi": 72
              }, {
                  "ratio": 2, "dpi": 72
              }],
              "orientation":"binary-tree"
          }).pipe( gulp.dest("./sprites/"))
      });
      

      Glue

      Use the following command to generate the icon spritesheets:

      glue src/img sprites --retina
      

      Optimize

      It's highly recommended to optimize the output using pngquant:

      pngquant img/icons* --ext=.png --force
      

      Examples

      Sprity


      Glue


        Attachments

          Activity

            People

            • Assignee:
              GitHub_pierlo-upitup Pierluigi Cau (Inactive)
              Reporter:
              orlando Orlando Hohmeier
              Team:
              Orchestration Team
              Watchers:
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: