Web向けにボタンなどの画像を作る場合、角丸部分が左右2つと中央部分は1px幅で繰り返して表示します。そのため画像を切り出す必要があるのですが、これが意外と面倒な作業になります。 そこで使いたいのがOnionRingになります。画像を指定すると自動的に繰り返し部分を認識してそれを除外した画像を生成してくれます。

OnionRingの使い方

実行は次のようになります。

$ ruby sample.rb sample/before.png 
"border: [23, 0, 21, 0]"
"success!"

元画像はこちら。

生成された画像はこちら。一気に狭まっています。

PhotoshopやSketchなどから作って画像を切り出すという作業は非常に面倒です。OnionRingを使えば一気に自動化できるのではないでしょうか。

OnionRingはRuby製、MIT Licenseのオープンソース・ソフトウェアです。

kyubuns/onion_ring