Help us understand the problem. What is going on with this article?

ImageMagick でアイコン画像を作る

More than 5 years have passed since last update.

はじめに

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

材料となる画像と出力イメージ

背景 入力 (ベース画像) 入力 (背景) 入力 (バッヂ) 出力
無し input.png input_base.png input_badge.png output.png
あり input.png input_base_bg.png input_badge_bg.png output_bg.png

ImageMagick で画像を編集する

背景色を透明にする

背景 入力 出力
無し input.png output.png
あり input.png output_bg.png
sh
convert input.png \
  -fill none \
  -fuzz 25% \
  -draw 'matte 1,1 floodfill' \
  output.png

リサイズする

背景 入力 出力
無し input.png output.png
(48x48)
あり input_bg.png output_bg.png
(48x48)
sh
convert input.png -resize 64x48 output.png

白縁をつける (境界を白く囲む)

背景 入力 出力
無し input.png output.png
あり input_bg.png output_bg.png
sh
convert \
  input.png \
  \( +clone -channel A -blur 0x0.25 -level 0,0% +channel +level-colors white \) \
  -compose DstOver -composite \
  output.png

画像を重ねる

背景画像に編集したベース画像を重ねる

背景 入力 入力 (背景) 出力
無し input.png input_base.png output.png
あり input_bg.png input_base_bg.png output_bg.png
sh
convert \
  input_base.png \
  input.png \
  -gravity north \
  -composite \
  output.png

バッヂをつける

背景 入力 入力 (バッヂ) 出力
無し input.png input_badge.png output.png
あり input_bg.png input_badge_bg.png output_bg.png
sh
convert \
  input.png \
  badge.png \
  -geometry +2+2 \
  -gravity northeast \
  -composite \
  output.png

文字を入れる

背景 入力 出力
無し input.png output.png
あり input_bg.png output_bg.png
sh
convert \
  -font FONT_NAME \
  -pointsize 11 \
  -gravity south \
  -annotate 0x0+0+2 \
  "SAMPLE" \
  -fill white \
  input.png \
  output.png

まとめ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away