Multiple Icons Generator using Ruby and ImageMagick
Switch branches/tags
Nothing to show
Pull request Compare This branch is even with ubilabs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
generate.rb
output_sample.png
pngquant
readme.md
source.png

readme.md

Multiple Icons Generator

Creates all possible variations for a given set of layers. You can provide a single image, specify some dimensions and run this script to automatically export a list of graphic files.

Requirements: You need Ruby and ImageMagick running on your machine. pngQuant is already include in the project.

Quick Install

To download and test the script, execute these lines of code in your shell:

git clone git@github.com:ubilabs/icons_generator.git 
cd icons_generator
ruby generate.rb

Configuration

Layers

To add more variations, simply add a new row to the source.png image document and update the SOURCE titles:

LAYERS = [
  %w(normal active),
  %w(default site offer coupon my),
  %w(cluster shopping eat explore)
]

Dimensions

To modify the icon size, change the image grid dimensions and update the following settings:

WIDTH = 31
HEIGHT = 35

Sample Output

Source input image:

Source

Generated icons:

Source

List of exported files:

  • normal_default_cluster
  • active_default_cluster
  • normal_site_cluster
  • active_site_cluster
  • normal_offer_cluster
  • active_offer_cluster
  • normal_coupon_cluster
  • active_coupon_cluster
  • normal_my_cluster
  • active_my_cluster
  • normal_default_shopping
  • active_default_shopping
  • normal_site_shopping
  • active_site_shopping
  • normal_offer_shopping
  • active_offer_shopping
  • normal_coupon_shopping
  • active_coupon_shopping
  • normal_my_shopping
  • active_my_shopping
  • normal_default_eat
  • active_default_eat
  • normal_site_eat
  • active_site_eat
  • normal_offer_eat
  • active_offer_eat
  • normal_coupon_eat
  • active_coupon_eat
  • normal_my_eat
  • active_my_eat
  • normal_default_explore
  • active_default_explore
  • normal_site_explore
  • active_site_explore
  • normal_offer_explore
  • active_offer_explore
  • normal_coupon_explore
  • active_coupon_explore
  • normal_my_explore
  • active_my_explore

Sample Log

While running the script, you see the following output:

Croping 11 images: 31x35
...........

Composing 40 images:
........................................

Quantifying PNG-8 images:
........................................

Creating index file:
- output/_index.png

DONE! 40 images generated.