ruk·si

🖼️ Image Tools

Updated at 2015-09-07 11:09

This note contains apps, web tools and extensions that I use in everyday image editing.

General:

  • ImageOptim: Lossless compression for JPG and PNG images in-place by drag-and-drop.

    Tested it with some random images:
    Orig:     IO:      Photoshop:
    8   KB -> 3  KB <> 4   KB
    18  KB -> 4  KB <> 6   KB
    88  KB -> 44 KB <> 60  KB
    151 KB -> 70 KB <> 103 KB (transparent PNG)
    
  • ImageAlpha: Extra lossy optimization for transparent PNG images.

    Orig:     IA+IO:   Photoshop:
    151 KB -> 45 KB <> 103 KB (transparent PNG)
    
  • SVGO: SVGO is a Nodejs-based tool for optimizing SVG vector graphics files.

  • Data URL Maker: Convert image to data URL string, shows original and result size.

Photoshop:

# Create 20px baseline grid starting from 100px.
$h = | 20px |
100px | $h* | ( hlp )

# Create 3 columns with 10px gutter.
$v = | ~ | 10px |
| $v*2 | ~ | ( vl )

# Same, but start from 50px to the left, grid width 200px
$v = | ~ | 10px |
| $v*2 | ~ | ( vl, 50px | 200px | 50px )

# Create 6 columns, page has 20px margin left and right
$v = | ~ |
| 20px | $v*6 | 20px | ( vlp )

# Create 6 columns with 10px gutter, page has 20px margin left and right
$v = | ~ | 10px |
| 20px | $v*5 | ~ | 20px | ( vlp )

GuideGuide visual helper

  • Slicy: Extract PNG images from named PSD groups e.g. header.png or button1.png

Sketch:

  • Runner: Run menu commands and add symbols by name using a popup window.

  • Arrange Artboard: Arranges arboards into rows.