ImageMagick でアイコン画像を作る

# はじめに
画像編集スキルが無いのにアイコン画像作成を迫られたので、ImageMagick を使ってみます。当記事では、元となる画像が既にある前提で、コマンドラインでの背景の透過やリサイズ、画像の重ね合わせを目的とします。

## 材料となる画像と出力イメージ
|背景|入力 (ベース画像)|入力 (背景)|入力 (バッヂ)|出力|
|:-:|:-:|:-:|:-:|:-:|
|無し|![input.png](https://qiita-image-store.s3.amazonaws.com/0/102560/d71cc314-4ca2-d453-553c-87b2b47b9262.png)|![input_base.png](https://qiita-image-store.s3.amazonaws.com/0/102560/a92aea56-4808-88b5-6b80-698787e0d077.png)|![input_badge.png](https://qiita-image-store.s3.amazonaws.com/0/102560/10673373-d353-fcaf-8bd8-a2609957f381.png)|![output.png](https://qiita-image-store.s3.amazonaws.com/0/102560/448e31dd-25c5-57a5-09e1-423847fdca00.png)|
|あり|![input.png](https://qiita-image-store.s3.amazonaws.com/0/102560/d71cc314-4ca2-d453-553c-87b2b47b9262.png)|![input_base_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/471fef5e-a550-0f86-6382-95f04172512e.png)|![input_badge_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/32745890-51b5-6913-fd14-2e11eca43b74.png)|![output_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/761ef0a4-68a6-d423-f557-de4c6464b095.png)|

# ImageMagick で画像を編集する
## 背景色を透明にする
|背景|入力|出力|
|:-:|:-:|:-:|
|無し|![input.png](https://qiita-image-store.s3.amazonaws.com/0/102560/d71cc314-4ca2-d453-553c-87b2b47b9262.png)|![output.png](https://qiita-image-store.s3.amazonaws.com/0/102560/e9118108-1e9f-5ba2-1a99-d099f384a7ff.png)|
|あり|![input.png](https://qiita-image-store.s3.amazonaws.com/0/102560/d71cc314-4ca2-d453-553c-87b2b47b9262.png)|![output_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/b7a192da-9505-74cb-0be9-542de7237dd6.png)|

```lang:sh
convert input.png \
  -fill none \
  -fuzz 25% \
  -draw 'matte 1,1 floodfill' \
  output.png
```

* [Matte Fill Primitives](http://www.imagemagick.org/Usage/draw/#matte)

## リサイズする
|背景|入力|出力|
|:-:|:-:|:-:|
|無し|![input.png](https://qiita-image-store.s3.amazonaws.com/0/102560/e9118108-1e9f-5ba2-1a99-d099f384a7ff.png)|![output.png](https://qiita-image-store.s3.amazonaws.com/0/102560/6387f84b-913e-5ae6-74b0-9cdcf7a89d89.png)<br />(48x48)|
|あり|![input_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/b7a192da-9505-74cb-0be9-542de7237dd6.png)|![output_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/e652e8d3-c4b9-f12e-a65b-97ec2469a722.png)<br />(48x48)|

```lang:sh
convert input.png -resize 64x48 output.png
```

* [Resizing Images](http://www.imagemagick.org/Usage/resize/#resize)

## 白縁をつける (境界を白く囲む)
|背景|入力|出力|
|:-:|:-:|:-:|
|無し|![input.png](https://qiita-image-store.s3.amazonaws.com/0/102560/6387f84b-913e-5ae6-74b0-9cdcf7a89d89.png)|![output.png](https://qiita-image-store.s3.amazonaws.com/0/102560/bca87537-87c1-4b69-82fb-b286260c758f.png)|
|あり|![input_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/e652e8d3-c4b9-f12e-a65b-97ec2469a722.png)|![output_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/af2f59ed-6c02-41d8-e293-41b7e67c8643.png)|

```lang:sh
convert \
  input.png \
  \( +clone -channel A -blur 0x0.25 -level 0,0% +channel +level-colors white \) \
  -compose DstOver -composite \
  output.png
```

* [Dst_Over (put image 'under' background)](http://www.imagemagick.org/Usage/compose/#dstover)
* [Outline or Halo Transparency](http://www.imagemagick.org/Usage/masking/#outline)

## 画像を重ねる
### 背景画像に編集したベース画像を重ねる
|背景|入力|入力 (背景)|出力|
|:-:|:-:|:-:|:-:|
|無し|![input.png](https://qiita-image-store.s3.amazonaws.com/0/102560/bca87537-87c1-4b69-82fb-b286260c758f.png)|![input_base.png](https://qiita-image-store.s3.amazonaws.com/0/102560/a92aea56-4808-88b5-6b80-698787e0d077.png)|![output.png](https://qiita-image-store.s3.amazonaws.com/0/102560/70028ce9-c523-6eeb-bc69-d2d5d081845f.png)|
|あり|![input_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/af2f59ed-6c02-41d8-e293-41b7e67c8643.png)|![input_base_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/471fef5e-a550-0f86-6382-95f04172512e.png)|![output_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/bb9f49ec-da88-d5bb-e108-7e8d65b30c03.png)|

```lang:sh
convert \
  input_base.png \
  input.png \
  -gravity north \
  -composite \
  output.png
```

* [Over (overlay image over background)](http://www.imagemagick.org/Usage/compose/#over)

### バッヂをつける
|背景|入力|入力 (バッヂ)|出力|
|:-:|:-:|:-:|:-:|
|無し|![input.png](https://qiita-image-store.s3.amazonaws.com/0/102560/70028ce9-c523-6eeb-bc69-d2d5d081845f.png)|![input_badge.png](https://qiita-image-store.s3.amazonaws.com/0/102560/10673373-d353-fcaf-8bd8-a2609957f381.png)|![output.png](https://qiita-image-store.s3.amazonaws.com/0/102560/8609baa5-41a8-a7c1-1b2f-eca1ecf0c6dc.png)|
|あり|![input_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/bb9f49ec-da88-d5bb-e108-7e8d65b30c03.png)|![input_badge_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/32745890-51b5-6913-fd14-2e11eca43b74.png)|![output_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/e448a445-a39b-15e9-17f1-9fe0cd047f98.png)|

```lang:sh
convert \
  input.png \
  badge.png \
  -geometry +2+2 \
  -gravity northeast \
  -composite \
  output.png
```

* [The 'Gravity' of the Situation](http://www.imagemagick.org/Usage/annotating/#gravity)

### 文字を入れる
|背景|入力|出力|
|:-:|:-:|:-:|:-:|
|無し|![input.png](https://qiita-image-store.s3.amazonaws.com/0/102560/8609baa5-41a8-a7c1-1b2f-eca1ecf0c6dc.png)|![output.png](https://qiita-image-store.s3.amazonaws.com/0/102560/448e31dd-25c5-57a5-09e1-423847fdca00.png)|
|あり|![input_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/e448a445-a39b-15e9-17f1-9fe0cd047f98.png)|![output_bg.png](https://qiita-image-store.s3.amazonaws.com/0/102560/761ef0a4-68a6-d423-f557-de4c6464b095.png)|

```lang:sh
convert \
  -font FONT_NAME \
  -pointsize 11 \
  -gravity south \
  -annotate 0x0+0+2 \
  "SAMPLE" \
  -fill white \
  input.png \
  output.png
```

* [Fonts](http://www.imagemagick.org/Usage/text/#font)
* [Annotate - Text Drawing Operator](http://www.imagemagick.org/Usage/text/#annotate)

# まとめ
以上、画像編集スキルが無くてもアイコンが作れない言い訳にはならないことが分かりました。

- [Examples of ImageMagick Usage](http://www.imagemagick.org/Usage/)