ImageMagick 使用例 -- サムネイルの作成とフレーミング

ImageMagick 使用例 前書きと目次

サムネイルの保存

• 画像フォーマットの選択
• プロファイルと JPEG 画像

一般的なサムネイルの作成

• 特定の高さのサムネイル
• 枠に収まるようサムネイルをリサイズ
• サムネイルのパディング
• サムネイルを枠に合わせて切り取る
• 面積で合わせるサムネイルサイズ
• 指定スペースへの収め方まとめ
• 正方形のパディングまたはクロップ
• 手動クロップ
• HTML サムネイルページ
• FavIcon ウェブページリンクサムネイル

その他の非 IM 手法 |

装飾の追加

• 画像ラベルの追加
• 浮き出しボタン
• バブルボタン
• 縁の追加
• シンプルなフレーム
• Montage によるフレーミング
• 柔らかくぼかしたエッジ
• 角丸と変形した角
• 破れた紙のエッジ
• 影の追加
• 厚みの追加
• ポラロイド風サムネイル

|

フレーミング手法

• セルフフレーミング(外側)
• セルフフレーミング(内側)
• シンプルな縁のオーバーレイ
• オーバーレイによるバッジ
• マスク&ペイント手法
• 角丸の縁
• マスク&ペイントによるバッジ
• ペイント&マスク手法
• ページめくりの角
• 凝った角のオーバーレイ
• ペイント&マスクによるバッジ
• ライティングマスク手法
• ガラスのバブル
• ライティングマスクによるバッジ

エッジ画像を使ったフレーミング

• 単純すぎる append
• 拡張オーバーレイフレーミング
• 45 度の角の接合

ImageMagick の最大の用途のひとつは、家族の写真アルバム、スポーツや趣味のページ、カタログなどのためのサムネイル作成です。一般にワールドワイドウェブや写真 CD で使われます。このページでは、サムネイルを生成するための例と手法を紹介します。

サムネイルの保存

まず最初に、ひとつとても重要な点から始めたいと思います。ビデオカメラや写真スキャンから得たオリジナル画像は、できればファイル名の変更を除いて、リサイズやその他の変更を一切加えず、元のフォーマットのまま、できれば非可逆でないフォーマット(JPEG 画像フォーマットではなく)で、安全な場所に保管しておくべきです。もちろんスキャン画像は再スキャンできますが、すでに劣化したコピーから後でやり直すよりも、オリジナルのソースを再利用するほうがはるかに優れています。これは非常に重要で、いかなる形の変更も画像の情報をいくらか失うことを意味し、また他の用途のために画像を再加工できる元データを提供してくれます。オリジナル画像は、表示用にリサイズや色調整を施すかもしれない作業用画像である必要はありません。ただ、将来のために画像をどこか安全な場所に保存してバックアップしておくことだけは確実にしてください。次にすべきことは、サムネイルを作成する前であっても、通常サイズの画像フォーマットに対してサムネイルをどのように保存したいかを決め、その方式を守ることです。これは特にウェブページで重要です。方式には次のようなものがあります。

• メインの写真画像は必要なサイズで可逆性のない JPEG フォーマットで保存し、生成したサムネイルには同じ名前で GIF 画像フォーマットを使う。つまり同じファイル名で、フォーマットと拡張子が異なる。メイン画像: photo_name.jpg サムネイル: photo_name.gif
• サムネイルは、たとえば「thumbs」など都合のよい名前のサブディレクトリに同じ名前で保存する。メイン画像: photo_name.jpg サムネイル: thumbs/photo_name.jpg
• オリジナル画像と同じフォーマットを使うが、ファイル名に余分な文字列を追加する。よく使われる追加文字列は「_tn」「_small」「_thumb」など。メイン画像: photo_name.jpg サムネイル: photo_name_tn.jpg
• 上記の組み合わせ。サムネイルを別の画像フォーマットで、ファイル名に余分な拡張子を付けて、さらにサブディレクトリに保存してはいけない理由はありません! メイン画像: images/photo_name.jpg サムネイル: thumbs/photo_name.jpg.gif これは実際 WWW では非常によくあることで、ふたつのディレクトリがまったく別のマシンに保存されているのを見たことすらあります!

最初の方式では「magick mogrify」を使い、出力画像フォーマットを指定する「[-format](https://imagemagick.org/command-line-options/#format)」設定を用いることで、オリジナル画像を壊すことなくすべてのサムネイルを生成できます。IM v3.2.0 以降、ふたつ目の方式も、変更後の画像を保存する別ディレクトリを指定する特別な「[-path](https://imagemagick.org/command-line-options/#path)」設定の追加のおかげで、「magick mogrify」で実行できるようになりました。たとえば次の例では、JPG 画像を、ちょうど作成した「thumbs」サブディレクトリ内に GIF サムネイルへと変換します。

  mkdir thumbs
  magick mogrify  -format gif -path thumbs -thumbnail 100x100 *.jpg

他の方法では、「magick mogrify」を実行する前にまずオリジナル画像のコピーを作るか、画像を処理する専用のスクリプトを作るか、その他の自前の方法を取る必要があります。より単純な非 IM 手法のいくつかは、バッチ処理 -- 「magick mogrify」を使わない方法の例の節の末尾で詳しく説明しています。どの方法を選ぶにせよ、重要なのはサムネイル保存の方式を選び、それを守ることです。すべてのサムネイルに同じ方式を使うことで、シェルや Perl のスクリプトを書いてサムネイル生成や、さらには HTML リンクの生成すら簡単にできるようになります。これについては後で詳しく述べます。

サムネイルフォーマットの選択

サムネイルを保存するフォーマットは、ディスク上の最終的なサイズやウェブページのダウンロード速度に大きな違いをもたらします。この点で、各種の一般的なファイルフォーマットのまとめを学ぶことをお勧めします。特に次の点に注意してください。

**JPEG** は圧縮効率がよく非可逆ですが、小さなサムネイルではなく、大きな実世界の画像向けに設計されています。また、いかなる形の透明性も許しません。まとめると、このフォーマットは大きな画像には向きますが、サムネイルには向きません。プロファイルに注意してください(次の節を参照)。JPG はサムネイルには推奨しませんが、WWW での画像閲覧用には、より小さな 800x600 ピクセルの画像を、はるかに低い「`[-quality](https://imagemagick.org/command-line-options/#quality)`」のパーセンテージ(たとえば 50 や 30% でも)で使うことが推奨されます。ただしあまり見栄えはよくありません。「`[-sampling-factor](https://imagemagick.org/command-line-options/#sampling-factor) 2x1`」を使うとさらに JPEG 画像のサイズを小さくできる、という指摘もあります。完全なオリジナル画像は、友人にダウンロードしてもらうために一時的に(参照される場所に)置く場合を除いて、決して直接ウェブに置かないことをお勧めします。リンクは張らず(ディレクトリのインデックス表示によるものも含め)、決して 1 日以上は置かないでください。さもなければ Google にインデックスされる可能性があります。
 **GIF** は単純な小さい画像には機能し、まずまずの圧縮ができます。256 色という色数の制限がありますが、小さな画像ではめったに気になりません。画像のアニメ風アニメーションもできますが、本当に凝りたいのでなければサムネイルには必要ありません。問題なのは、このフォーマットがブール値(オン/オフ)の透明性しか持たないことで、これが変形した画像の縁をひどく見せてしまいます。その解決策は、ブール値の透明性だけを使うようサムネイルを設計するか、特定の背景色の上でのみ使えるように調整することです。詳しくは[背景色やパターンの上の GIF](formats.html#bgnd)の例を参照してください。 
 **PNG** はサムネイルにとって現代的な理想のフォーマットです。圧縮効率がよく、内部のフォーマットスタイルもあります。非可逆ではなく、すべての色を表示でき、近頃ではほとんどすべてのブラウザで理解されます(ただし Microsoft Internet Explorer の v7 より前のものには、ウェブページにいくらかの JavaScript を追加する必要があります)。さらに重要なのは、このフォーマットが半透明の色を理解することで、影やエッジを思いどおりにくっきり鮮明に、あるいはぼかして曖昧にできます。ただしこのフォーマットはアニメーションはできません。関連する MNG フォーマットならできますが、これをサポートしているブラウザはごくわずかのようです。サムネイルでは、深度と色数を減らし、また最終サムネイル画像に対してより高い「`bzip`」圧縮品質(「`[-quality](https://imagemagick.org/command-line-options/#quality)`」の最初の桁)を設定することで、最終的な画像のサイズを小さくできます。たとえば、透明性を含まない小さな PNG サムネイルには次のように指定するとよいでしょう。


        -strip  -quality 95  PNG8:thumbnail.png

これはより小さな、8 ビットすなわち 256 色に制限された PNG フォーマットを使います。最終画像を二次的なアプリケーションで再処理(非 IM PNG 処理を参照)することもでき、その特定の画像に対して最適な PNG 圧縮を自動的に見つけてくれます。半透明の色を保持したまま、より小さな内部 PNG フォーマットへ色数削減を行うプログラムもあります。これは現在 IM では扱えないことです。. フォーマットについての最後のひとこと... サムネイルにどのフォーマットを使うにせよ、未完成の中間画像を保存しなければならない場合は、PNG(色数削減なし)か MIFF 画像フォーマットを使ってください。そうすることで中間段階での画像の色情報をできるだけ多く保持できます。色数削減や、GIF・JPEG フォーマットへの保存は、絶対的に最後のステップとしてのみ行ってください。これは重要なので繰り返します...

中間の作業画像には JPEG、PNG8、GIF を使わないこと!
PNG か MIFF を使うほうがよい。

プロファイル、ストリップ、JPEG の扱い

デジタルカメラ、スキャンソフトウェア、一部のペイントプログラム(Photoshop はこれで悪名高い)から得た多くの画像は、プロファイルという形で画像についての余分な情報を保存します。これには JPEG、PNG、TIFF、そして IM v6.2.4-1 以降は GIF といった画像フォーマットが含まれます。もちろん IM 固有のフォーマットである MIFF もこれを行います。(より詳しい情報は画像プロファイルを参照)。これらのプロファイルは最大 60 Kb になることがあるので、ファイルサイズに大きな違いをもたらすことがあり、デフォルトでは IM はこのプロファイル情報を保持します。サムネイルにはこのデータは必要なく、メイン画像でさえ必要ないことが多いです。次の IM コマンドで画像からプロファイルを削除することもできます...

  magick input.jpg  -strip output.jpg

  magick mogrify -strip  *.jpg

オプション「[-profile](https://imagemagick.org/command-line-options/#profile) '*'」を使ってプロファイルを削除することもできます。ただし、画像を変更するとき、特にウェブ表示やサムネイル画像のためにサイズを縮小するときにのみプロファイルをストリップすることをお勧めします。リサイズしながらプロファイルをストリップすること、特に小さなサムネイル画像を生成することは非常によくあることなので、まさにこの目的のために「[-resize](https://imagemagick.org/command-line-options/#resize)」と「[-strip](https://imagemagick.org/command-line-options/#strip)」が新しいひとつの操作にまとめられました。当然ながらこのリサイズ操作は「[-thumbnail](https://imagemagick.org/command-line-options/#thumbnail)」と呼ばれます。たとえば...

  magick -define jpeg:size=240x180 image.jpg -thumbnail 120x90 thumbs/image.gif

  magick mogrify -path thumbs -format gif -define jpeg:size=240x180 -thumbnail 120x90 '*.jpg'

| IM v6.5.4-7 より前は、「[-thumbnail](https://imagemagick.org/command-line-options/#thumbnail)」は ICC カラープロファイルを含む画像のすべてのプロファイルをストリップしていました。このバージョン以降はカラープロファイルが保持されます。カラープロファイルが不要な場合は、「[-strip](https://imagemagick.org/command-line-options/#strip)」ですべてのプロファイルをストリップしてください。
---|---
「[magick mogrify](basics.html#mogrify)」はもちろん JPEG 画像のディレクトリ全体のサムネイルを生成しますが、残しておきたいサムネイルを上書きしないよう注意してください。多数の画像をループ処理するその他の非 IM 手法については、バッチ処理 -- Mogrify を使わない方法の例の節を参照してください。非常に大きな画像の場合、「[-thumbnail](https://imagemagick.org/command-line-options/#thumbnail)」リサイズ演算子はさらに進んで、実際のリサイズ操作を行う前に、まず画像を最終サムネイルサイズの 5 倍まで縮小します。これによってサムネイル生成がさらに高速化されます。しかし JPEG 画像のサムネイル化では、そもそも画像全体をメモリに読み込まないという、さらによい方法で初期画像サイズを制限できます。「[-define](https://imagemagick.org/command-line-options/#define) jpeg:size=」設定(上の例で示したもの)は、非常に大きな JPEG 画像から読み込まれるデータ量を減らすよう JPEG 画像ライブラリに与える特別なヒントです。JPEG ファイルの読み込みを参照してください。 | _IM v6.5.6-0 より前は、このコーダー設定は「[-size](https://imagemagick.org/command-line-options/#size)」設定から抽出されていました。これはユーザーが画像生成のために「[-size](https://imagemagick.org/command-line-options/#size)」を使ったのに JPEG の読み込みで予期しない結果が出るという問題を引き起こしました。そのため、これは代わりに特別なコーダー設定へと変更されました。

古いバージョンの IM では、この「二重」の役割のために、JPEG 画像を読み込む前に「[+size](https://imagemagick.org/command-line-options/#size)」で設定をリセットする必要があるかもしれません。_
---|---
IM バージョン 6.2.6-2 以降、新しい画像読み込み修飾子が追加され、入力画像を読み込んだ直後にリサイズできるようになりました。このオプションは JPEG 画像だけでなく、あらゆる画像フォーマットで機能します。ただし JPEG 画像に対する「[-define](https://imagemagick.org/command-line-options/#define) jpeg:size=」設定の代わりにはなりません。そのため、いかなる入力画像フォーマットでもリサイズする推奨方法は、いまや次のとおりです...

  magick -define jpeg:size=240x180 input.img'[120x90]' \
          -strip  output_thumbnail.gif

それでは実践的な IM サムネイルの例に進みましょう...

一般的なサムネイルの作成

一般的なサムネイルの生成(特定の高さ)

大きなサンプル JPEG 画像を、高さ 90 ピクセルの GIF サムネイルへと magick で変換しましょう。画像のアスペクト比を保つよう、幅は(250 ピクセルの幅制限内で)自動的に調整されます。 |

  magick -define jpeg:size=500x180  hatching_orig.jpg  -auto-orient \
          -thumbnail 250x90   -unsharp 0x.5  thumbnail.gif

上では「[-thumbnail](https://imagemagick.org/command-line-options/#thumbnail)」オプションを使ったことに注意してください。これは画像をリサイズするだけでなく、オリジナルの JPEG 画像に存在するかもしれないあらゆるプロファイルやコメント情報をストリップします。また、画像の初期縮小に「[-sample](https://imagemagick.org/command-line-options/#sample)」リサイズ演算子を使うため、より高速でありながら、小さなサムネイルには妥当な結果を生み出します。読み込まれる画像には最小限の「[-define](https://imagemagick.org/command-line-options/#define) jpeg:size=」も設定しました。これは JPEG ライブラリに渡され、非常に大きなオリジナル画像全体ではなく、(可能なら)このサイズとその 2 倍の間あたりのサイズの画像を返してくれます。基本的に、必要のないときに巨大な画像でコンピューターのメモリを溢れさせないということです。私が使っている JPEG サイズのヒントは、リサイズが妥当な見栄えの結果を生み出せるよう、最終サムネイルの少なくとも 2 倍にしています。「[-auto-orient](https://imagemagick.org/command-line-options/#auto-orient)」演算子は、画像がデジタルカメラからのものなら、カメラの向きに従って正しく回転されることを保証します。これは私が使っている「デスクトップ」画像には必要ありませんが、デジタルカメラのユーザーのために上の例に含めました。ただし、特に文書を撮るときのように真下や真上を向いて撮った写真では、向きがやはりおかしくなることがあります。結果は特定の高さで幅が可変のサムネイルになります。私はこのサムネイルを自分のウェブページで使っていて、横一列に並んだ一連の画像が高さの点ですべて揃い、すっきりした見た目になるようにしています。上の 250 ピクセルの幅制限は重要です。設定せずに(つまり「-thumbnail x90」を使って)おくと、IM はウェブ用ライン画像で示されているような非常に細長い画像のサムネイルを生成するときに問題を起こす可能性があります。その場合の結果は、小さなサムネイルではなく、非常に非常に長い画像の_拡大_になってしまいます。一部の人々(私自身を含む)は、IM のリサイズが最良の実装のひとつである(IM リサイズ vs 他のプログラムを参照)一方で、結果がやはり少しぼやけていると感じます。そのため、「[-thumbnail](https://imagemagick.org/command-line-options/#thumbnail)」リサイズ操作のあとに画像をわずかにシャープにする(「[-unsharp](https://imagemagick.org/command-line-options/#auto-orient)」を使う)ことで、上の結果を改善できます。詳しくはリサイズした画像のシャープ化 -- Photoshop リサイズ手法を参照してください。とはいえ、結局は個人の好みの問題です。
「magick mogrify」版は「magick」コマンドと同じ(初期入力画像なし)ですが、カレントディレクトリ内の_すべての_ JPEG 画像のサムネイルを自動生成します。画像の引数は、コマンドラインシェルではなく IM 自身にディレクトリをスキャンさせるためにクォートされています。これにより、膨大な数の画像を含むディレクトリで「行の長さ制限のオーバーフローエラー」が起きるのを防ぎます。

  magick mogrify  -format gif -define jpeg:size=500x180 -auto-orient \
                -thumbnail 250x90 -unsharp 0x.5  '*.jpg'

| _「magick mogrify」は何も考えずにサムネイルを作成し、同じ名前の既存の画像を置き換えてしまうことに注意してください。この場合は GIF 画像です。このコマンドを使うときは常に細心の注意を払うことが勧められます。

何らかの処理を行う前にはバックアップコピーを取っておくことを常にお勧めします。
---|---
| (「[-format](https://imagemagick.org/command-line-options/#format)」を使って)別のフォーマットを指定して「magick mogrify」にオリジナルのソース画像を上書きさせないようにする代わりに、「[-path](https://imagemagick.org/command-line-options/#path)」設定を使って別のサムネイルディレクトリを定義することもできます。両方の出力オプションを使うこともできます。
---|---
「magick mogrify」は新しい画像を別の拡張子(「[-format](https://imagemagick.org/command-line-options/#format)」)や別のディレクトリ(「[-path](https://imagemagick.org/command-line-options/#path)」)で出力できますが、このコマンドで使えるのはこれらのオプションだけです。サムネイルや小さい版の画像を示すために「_tn」や「_sm」を付けるなど、画像の名前も変えたい場合は、「magick」を使って一度に 1 枚ずつ処理するシェルスクリプトを作ることをお勧めします。_私はこれを行いつつ、同時に HTML インデックスも生成するスクリプトを書きました。

枠に収まるようサムネイルをリサイズ

自動サムネイル生成のもうひとつの形は、画像のアスペクト比を保ちながら、たとえば「100x100」のような固定サイズの枠に収まるよう画像を縮小することです。さて、これはリサイズのジオメトリ設定のデフォルトの意味そのものです。 しかし私は、すでにそのような枠に収まる画像を拡大しないほうを好みます。そのためには、ジオメトリ文字列に「>」を追加する必要があります。 |

  magick -define jpeg:size=200x200 hatching_orig.jpg \
          -thumbnail '100x100>' rectangle.gif

前と同様に画像のアスペクト比は保たれるので、サムネイルがちょうど 100 ピクセル四方になることはまずありません。しかし少なくとも画像のどちらか一方の寸法は 100 ピクセルになります。

サムネイルのパディング

次によくある要望は、サムネイルがちょうど望むサイズになるよう、特定の色(通常は「black」や「transparent」ですが、これらの例では「skyblue」を使います)の縁で画像を埋めて生成することです。たとえば、400x300 ピクセルの画像を 100x100 ピクセルの枠に収まるよう縮小すると、(上記の方法では)通常 100x75 ピクセルのサイズになります。最終サムネイル画像が常に 100x100 ピクセルのサイズになるよう、画像の上下に(念のため左右にも)パディングの縁を追加したいわけです。 これを行うにはいくつかの方法があり、IM v6.3.2 以降、最良の方法は Extent 演算子を使うことです。 |

  magick -define jpeg:size=200x200 hatching_orig.jpg -thumbnail '100x100>' \
          -background skyblue -gravity center -extent 100x100 pad_extent.gif

IM バージョン 6.2.5 以降では、ビューポートクロップを使って、その結果を背景色の上にフラット化することもできます。 |

  magick -define jpeg:size=200x200 hatching_orig.jpg -thumbnail '100x100>' \
          -gravity center  -crop 120x120+0+0\! \
          -background skyblue  -flatten    pad_view.gif

Extent を使う場合とビューポートクロップを使う場合の重要な違いは、最小限の仮想キャンバスが欲しいのか、それとも領域全体を「パディング」したいのかという点です。画像をパディングするもうひとつの方法は、ちょうどよいサイズの背景画像(実際の画像、単色、タイル状のキャンバス)の上にサムネイルをオーバーレイすることです。この場合は 128x128 の「granite:」組み込み画像を使います。 |

  magick -define jpeg:size=200x200 hatching_orig.jpg -thumbnail '100x100>' \
          granite: +swap -gravity center -composite pad_compose.gif

この方法は、古いバージョンの IM(IM v5 など)で使うのにおそらく最適な方法です。ただし「[-composite](https://imagemagick.org/command-line-options/#composite)」操作は、上記の単一コマンドの方法ではなく、別の「[composite](basics.html#composite)」コマンドで行う必要があります。しかし画像処理の観点から言えば、上記のすべては実際には同じことをしています。

サムネイルを枠に合わせて切り取る

別の方法として、望む特定のサムネイルサイズに合わせて画像をパディングする代わりに、最終サイズに収まらない部分を切り落とすこともできます。もちろんこれはオリジナル画像の一部、特に画像の縁を実際に失うことを意味しますが、結果は画像中央部分を拡大したサムネイルになります。これは通常(常にではありませんが)画像の主要な被写体なので、実用的なサムネイル作成の方法です。IM v6.3.8-3 以降、これを容易にするための特別なリサイズオプションフラグ「^」が追加されました。このフラグを使ってリサイズし、望むサイズからはみ出す部分を切り取るだけです。 |

  magick -define jpeg:size=200x200 hatching_orig.jpg  -thumbnail 100x100^ \
          -gravity center -extent 100x100  cut_to_fit.gif

ご覧のとおり、画像のサムネイルははるかに大きく詳細になっていますが、オリジナル画像の両側を切り落とすという代償があります。このオプションの詳細は指定領域を埋めるリサイズを参照してください。 | この特別なフラグが追加された IM v6.3.8-3 より前は、同じ結果を得るためにかなり複雑なトリックが必要でした。詳しくは指定スペースを埋めるリサイズを参照してください。
---|---

面積で合わせるサムネイルサイズ

直前のふたつの方法は、しばしば画像を多くの余分なパディングとともに非常に小さくしてしまうか、スペースを完全に埋めるために画像の多くを切り落としてしまいます。しかし別のリサイズフラグを使えば、これらふたつの極端の中間にあたるサムネイルを得ることが可能です。たとえば 100x100 ピクセルのサムネイルには 10,000 ピクセルあります。さて、そのピクセル数あたりの大きさに画像をリサイズするよう(リサイズの「@」フラグを使って)指定すると、わずかなパディングとわずかな切り取りの両方が必要な画像になります。これにより、結果として得られるサムネイルのサイズを最大化しつつ、切り落としすぎないようにできます。たとえば... |

  magick -define jpeg:size=200x200 hatching_orig.jpg  -thumbnail 10000@ \
          -gravity center -background skyblue -extent 100x100  area_fit.gif

ご覧のとおり、サムネイルにはいくらかのパディングがあり、画像にはいくらかのクロップがありますが、その結果はおそらく指定されたサムネイルスペースに対する画像の最良のフィットです。

指定スペースへの収め方まとめ

まとめとして、画像を特定サイズの領域にサムネイル化する 3 つの方法の結果をここに示します。3 つの方法はすべて、使うリサイズの引数/フラグをわずかに変えるだけで、まったく同じコードを使っています。
パディングして収める
リサイズ、フラグなし |
面積で合わせる
リサイズ、'@' フラグ |
切り取って収める
リサイズ、'^' フラグ
---|---|---

正方形のパディングとクロップ

上記のパディングとクロップの方法は、画像を収めたい領域の最終サイズが分かっていることを前提としています。しかし常にそうとは限りません。ときには、「パディング」して(外側の正方形)、あるいは縁を「削って」(内側の正方形)、単に「画像を正方形にする」だけがしたいこともあります。IM ディスカッションフォーラムの画像の正方形化から、いくつかの方法が開発されました。 外側の正方形化は、Mosaic を使い、画像の回転したコピーで大きな背景キャンバスを作ることで行えます。 |

  magick thumbnail.gif \
          \( +clone -rotate 90 +clone -mosaic +level-colors white \) \
          +swap -gravity center -composite    square_padded.gif

一方、内側の正方形化は少し難しく、実現にはより多くの作業が必要です。これは、より小さなキャンバスを生成するためにかなり手の込んだマスク処理を使っています。 |

  magick thumbnail.gif \
          \( +clone +level-colors white \
             \( +clone -rotate 90 +level-colors black \) \
             -composite -bordercolor white -border 1 -trim +repage \) \
          +swap -compose Src -gravity center -composite \
          square_cropped.gif

別の方法としては、distort のビューポートを使い、何もしない distort で画像をクロップ/パディングする方法があります(Distort ビューポートによる中央正方形クロップを参照)。本質的には、Extent 型の操作に必要な計算を行うために「パーセントエスケープ」を使っています。外側(パディング)の正方形... |

  magick thumbnail.gif  -virtual-pixel white -set option:distort:viewport \
     "%[fx:max(w,h)]x%[fx:max(w,h)]-%[fx:max((h-w)/2,0)]-%[fx:max((w-h)/2,0)]" \
     -filter point -distort SRT 0  +repage  square_external.gif

仮想ピクセル設定がパディング色の指定に使われます。内側(クロップ)の正方形... |

  magick thumbnail.gif   -set option:distort:viewport \
     "%[fx:min(w,h)]x%[fx:min(w,h)]+%[fx:max((w-h)/2,0)]+%[fx:max((h-w)/2,0)]" \
     -filter point -distort SRT 0  +repage  square_internal.gif

Fred Weinhaus 氏の Tidbits ページの厚意による。これはより単純な版ですが、画像が持つかもしれないメタデータ(コメント文字列やプロファイルなど)を失います。 |

  magick thumbnail.gif -set option:size '%[fx:min(w,h)]x%[fx:min(w,h)]' \
          xc:none +swap -gravity center -composite square_internal_2.gif

| IMv7 では、上記の計算をクロップや extent の引数の一部として直接行えるようになり、画像メタデータの損失を防げます。
---|---

手動クロップ

私が自分のウェブページ用にサムネイル画像を生成する通常の方法は、自動スクリプトと手動の混合です。私の画像の最終的な構成は次のとおりです。

• 写真の非常に大きなスキャン、またはデジタルカメラからダウンロードしたオリジナル JPEG 画像には PNG か TIFF を使う。基本的にはアーカイブ用の、変更されていないオリジナルのソース画像です。この画像のファイル名には今では「_orig」という文字列を含めるのが好みです。
• サムネイルをクリックまたは選択したときにウェブで閲覧できる画像には、より小さな JPEG 画像フォーマットを使う。この画像は 800x800 ピクセルの枠に収まるようリサイズされ、これはほとんどのウェブユーザーが閲覧するのに適したサイズです。中間サイズの画像を示すため、ファイル名に「_md」を付けるのが普通です。
• そして最後に、固定の高さ 90 ピクセル、幅は可変にリサイズした GIF サムネイル。これにより、ウェブページ上の中央揃えされたサムネイルの行がそこそこすっきりきれいに見えつつ、ユーザーが使っているブラウザのサイズに関係なく、ブラウザウィンドウの幅を自動的に埋めます。やはりサムネイルであることを示すため、ファイル名に「_tn」を含めるのが普通です。

私はまずオリジナルのスキャン画像から「magick mogrify」を使ってウェブ閲覧用の JPEG 画像(中サイズ)を生成します。これは、(モデム経由でログインしているかもしれない)典型的なウェブユーザーにとって実用的なものへと、画像のダウンロード時間と表示サイズを削減します。これらの画像から、やはり「magick mogrify」を使って初期のサムネイルセットを生成します。しかし典型的な写真では、サムネイルの被写体が、表示されたときに効果的なサムネイルになるには小さすぎることがよくあります。これを直すために、自動生成されたサムネイルを調べ、おおよそ半分の場合に自分で「被写体にズームインした」サムネイルを手動で作ります。JPEG 画像を読み込み、画像の主要な被写体まで切り詰めて被写体に効果的に「ズームイン」し、画像の背景の文脈の大半を取り除きます。これはその後、「magick -thumbnail」を使うか、より多くの場合は画像を表示しクロップしているのと同じグラフィックプログラム(通常は「XV」、下記参照)で、平滑化されサムネイル化されます。そういうわけで、写真に写っている人々がほとんど見えないサムネイル(左)の代わりに、サムネイル化する前に、写真の主要なポイントを際立たせるよう被写体の周りを手動でクロップしたもの(右)を作ります。これにより、ユーザーは画像の内容をより明確に見ることができ、画像の大きな JPEG 版を実際にダウンロードして見たいかどうかをよりよく判断できます。 Queensland KiteFlyers, Ron and Val Field

自動
生成された
サムネイル | |
手動でクロップ
してリサイズした
サムネイル
(どちらかの画像をクリックするとオリジナルのスキャン写真が表示されます)
これはもちろんより手間がかかりますが、画像ごとに一度だけ行えばよく、上の例のように余白の多い画像にだけ行えばよいのです。また私はウェブに載せる画像にだけこれを行います。もちろん「magick mogrify」は既存の、おそらく手作業で生成したサムネイルを上書きしてしまうので、手動でのサムネイル生成を行ったあとに再びそれを使うことはできません。「magick mogrify」コマンドは便利ですが、多数の画像を上書きしてしまうので非常に危険でもあります。全画像にわたってグローバルに「magick mogrify」を実行する前には、常によく考えてください。

HTML サムネイルページ

ディレクトリ内のすべてのサムネイル画像を整理し終えたら、私が書いた「thumblinks」という特別な perl スクリプトを使います。これは画像(JPEG 写真と GIF サムネイル)を探し、HTML リンクを生成し、完全な HTML 写真ページまで生成します。このスクリプトは GIF サムネイルのサイズを読み取って HTML に含め、サムネイルリンクの周りにあらかじめ用意したヘッダーとフッターのファイルを付加します。またこのスクリプトは、ヘッダーやフッターのファイル自体に既存のリンクを見つけた場合、生成するリストからそのサムネイルリンクを取り除きます。複雑に聞こえるかもしれませんが、これは私の HTML ページ生成を非常に高速で柔軟なものにし、ディレクトリ内のサムネイル化されたすべての画像がそのディレクトリのインデックスページに追加されることを保証しつつ、インデックスのヘッダーで特定の画像にコメントを付けることもできます。また、ユーザーのウィンドウサイズに依存せず、それに合わせて自動的に調整されるページにもなります。私の「thumblinks」スクリプトの出力の簡単な例は、Tomb of Castle Artworksを参照してください。そのようなリンクを生成するための手早い例と出発点については、identify コマンドを使う例を参照してください。

FavIcon ウェブページリンクサムネイル

「favion.ico」アイコンは、ウェブブラウザがウェブサイトの最上位ウェブページで、そのサイト全体のためによく探すものです。その画像は特別なマルチ解像度の画像フォーマットで、次のように作成できます。

  magick image.png -alpha off -resize 256x256 \
          -define icon:auto-resize="256,128,96,64,48,32,16" \
          favicon.ico

「image.png」は何でも好きなものでかまいませんが、正方形であるべきです。そうでない場合は、それを上記の最初のステップにすべきです。128 や 256 ピクセルといったより大きな解像度を含めることもできますが、それを利用するブラウザはほとんどありません。16 と 32 ピクセルのサイズは、そのような ICO ファイルではるかによく使われるので、それらに特に重点を置くと役立つかもしれません。また、多くのブラウザはユーザーのブックマークファイルに保存する際の容量を減らすために画像の色数を削減することを覚えておいてください。これがもうひとつの点につながります。一般に最も小さい画像だけが使われ、さらに色数削減されるので、画像をできるだけ小さく、よく定義したまま保つことが推奨されます。次に、ICO ファイルフォーマット用に画像を手動でリサイズする例を示します。

  magick image.png  -background white \
          \( -clone 0 -resize 16x16 -extent 16x16 \) \
          \( -clone 0 -resize 32x32 -extent 32x32 \) \
          \( -clone 0 -resize 48x48 -extent 48x48 \) \
          \( -clone 0 -resize 64x64 -extent 64x64 \) \
          -delete 0 -alpha off -colors 256 favicon.ico

前述のとおり、一般にはウェブサイトの最上位ディレクトリにある「favion.ico」画像だけが使われますが、ページのヘッダーに次の HTML タグを追加することで、リンクサムネイル画像の場所を指定することもできます...

  <LINK REL="icon" HREF="/path/to/favicon.ico" type="image/x-icon">
  <LINK REL="shortcut" HREF="/path/to/favicon.ico" type="image/x-icon">

「/path/to/favicon.ico」は、ブラウザがウェブページのサムネイル画像を取得すべき場所への絶対または部分的な URL/URI です。「REL="shortcut"」の使用は Internet Explorer(IE9 より前)に特有のもので、HTML 仕様の公式な一部ではありません。「REL="shortcut icon"」を使ってふたつの HTML タグをひとつにまとめることも可能ですが、タグを分けておくことで、firefox のような IE 以外のブラウザのために非 ICO の画像ファイルフォーマット(SVG など)を利用できます。この html 要素を使わない場合は、(あれば)ウェブサイトの最上位ディレクトリにある「favicon.ico」ファイルが代わりに使われることを覚えておいてください。ICO 画像フォーマットはすべての現代的なブラウザで普遍的に理解されます。Internet Explorer 以外はすべて、リンクサムネイルに JPEG、PNG、GIF の画像ファイルフォーマットも使えます。FireFox のような一部のものは、アニメーション GIF や SVG 画像ファイルフォーマットすら利用できます。しかしこれらの後者のフォーマットは、通常、異なる解像度や色数の複数の画像を保持できないので、「favion.ico」画像には ICO ファイルフォーマットを使い続けるほうがおそらく無難でしょう。

その他の非 IM 手法

私が手動の画像処理に使っている「XV」プログラムも、「.xvpics」というサブディレクトリにサムネイル画像を生成します。このディレクトリ内の画像のフォーマットは、プログラム独自の特別なサムネイルフォーマット(そのディレクトリ内のファイル名の拡張子は無視されます)です。これらのサムネイルは 80x60 ピクセルに制限されているので、少し「小さめ」のサイズです(より大きなサムネイルを使うよう「xv」をハックしない限り -- 下のリンクを参照)。IM は「xv」のサムネイルフォーマット(「NetPBM」画像フォーマットに基づく)を理解するので、XV を使ってすべてのサムネイルを手早く生成し、その後 JPEG 画像の XV サムネイルを、さらなる処理のために GIF 画像へと magick で変換できます...

   xv -vsmap &               # 「Update」ボタンでサムネイルを生成
   rm .xvpics/*.gif          # 既存の「gif」サムネイルの XV サムネイルを削除
   magick mogrify -format gif .xvpics/*.jpg
   mv .xvpics/*.gif .        # 新しい「gif」サムネイルを元のディレクトリへ移動

特に大きな現代的なディスプレイで、XV サムネイルの小ささにうんざりしているなら、XV のコードをハックできます。私の XV 改造メモを参照してください。これにより XV により大きなサムネイルサイズを使わせることができます。私自身は 120x90 ピクセルのサムネイルを使っています。

さらなる処理 -- 装飾の追加

上記はサムネイルをより面白くするためにできることの始まりにすぎません。基本的なサムネイル画像を超えて、縁や回転を加え、いくらかランダムにスタイルを選んでサムネイルギャラリーをさらに面白くすることもできます。このようなサムネイルへの追加を、私は「装飾(fluff)」、つまり洗濯後に衣類を覆っている余分な糸くずのようなものと呼んでいます。つまり、サムネイルに不必要なおまけを加えるものですが、それによってウェブページやインデックス画像がそれだけ面白くなり得ます。以下の方法と処理の多くは非常に複雑で、ImageMagick のさまざまな画像処理オプションについてのより深い知識を必要とするかもしれないことに注意してください。

画像ラベルの追加

サムネイル作成中に、サムネイルの上、下、あるいはサムネイルの上にラベルを追加することもできます。ただしこの種の画像処理は、画像へのラベル注釈でより詳しく扱っています。これらの例では「[-resize](https://imagemagick.org/command-line-options/#resize)」ではなく「[-thumbnail](https://imagemagick.org/command-line-options/#thumbnail)」や「[-strip](https://imagemagick.org/command-line-options/#strip)」を使うことだけ覚えておいてください。たとえば... |

  magick thumbnail.gif \
          -background Lavender -fill navy -font Candice -pointsize 24 \
          label:Hatching   -gravity South -append \
          labeled.gif

複合フォントを使えば、非常に凝ったラベルを画像自体の上にオーバーレイできます。たとえばここでは、より密度の高いソフトアウトラインフォントの手法を使ってサムネイルに注釈を付け、テキストの周りの領域を暗くして常に読みやすく保つようにしました。 |

  magick -define jpeg:size=400x400  hatching_orig.jpg  -resize '120x200>' \
      \( +clone -sample 1x1\! -alpha transparent -sample 1000x200\! \
         -font SheerBeauty -pointsize 72 -gravity Center \
         -strokewidth 8 -stroke black  -fill black  -annotate 0,0 '%c' \
         -channel RGBA -blur 0x8 \
         -strokewidth 1 -stroke white  -fill white  -annotate 0,0 '%c' \
         -fuzz 1% -trim +repage -resize 115x \
      \) -gravity North -composite           -strip annotated.gif

あらかじめ生成した「thumbnail.gif」画像を使ったり、サムネイルリサイズ演算子を使って画像からプロファイルやコメントをストリップしたりしていない点に注目してください。代わりに「[+clone](https://imagemagick.org/command-line-options/#clone)」「[+sample](https://imagemagick.org/command-line-options/#sample)」「[-alpha](https://imagemagick.org/command-line-options/#alpha)」を使って、より大きな透明の作業用キャンバスを生成しています。これにはオリジナル画像のメタデータのコピーも含まれます。これにより、画像の「コメント」文字列を注釈の「[-annotate](https://imagemagick.org/command-line-options/#annotate)」演算子で使い、画像にオーバーレイするテキストを供給できます。テキストのオーバーレイを構成し終えた最後にだけ、その情報を整理して「[-strip](https://imagemagick.org/command-line-options/#strip)」します。

浮き出しボタン

「[-raise](https://imagemagick.org/command-line-options/#raise)」演算子は、基本的に矩形画像の縁を強調して浮き出しボタンを作るというひとつの目的のために作られました。これはシンプルで高速、効果的なサムネイル変換です。 |

  magick thumbnail.gif  -raise 8   raised_button.gif

同じ演算子には、沈み込んだ強調効果を作るのに使える「プラス」の形もあります。 |

  magick thumbnail.gif  +raise 8   sunken_button.gif

バブルボタン

少しのトリックで、「[-raise](https://imagemagick.org/command-line-options/#raise)」演算子を使って滑らかな「バブルのような」浮き出しボタンを作ることができます。

  magick thumbnail.gif -fill gray50 -colorize 100% \
          -raise 8 -normalize -blur 0x8  bubble_overlay.png
  magick thumbnail.gif bubble_overlay.png \
          -compose hardlight -composite  bubble_button.png

この種の手法についての詳しい情報はライト合成手法を参照してください。このようなさらなる効果については、下のセルフフレーミング(内側)を参照し、それを次のレベルへ進めるには下のライティングエフェクトマスクを参照してください。

縁の追加

地味でシンプルな「[-border](https://imagemagick.org/command-line-options/#border)」演算子を使って、画像の周りにいくらか複雑な枠組みを生成できます。 |

  magick thumbnail.gif \
          -bordercolor black -border 3   -bordercolor white -border 2 \
          \( -background black -fill white -pointsize 24 \
             label:Hatching   -trim +repage \
             -bordercolor black -border 10 \
          \) -gravity South -append \
          -bordercolor black -border 10   -gravity South -chop 0x10 \
          border_framework.gif

シンプルなフレーム

同様に、「[-frame](https://imagemagick.org/command-line-options/#frame)」演算子を使うと画像の周りにフレームを簡単に追加できます。 |

  magick thumbnail.gif   -mattecolor peru  -frame 9x9+3+3  framed.gif

この演算子には、十数種類の異なるスタイルのフレームを作るためのオプションも多くあります。その可能性の例はフレーム、3D 風の縁の追加で見ることができます。

Montage によるフレーミング

montage コマンドは、上記のすべて、そしてさらに多くのことを、はるかに簡単に行う方法を提供します。サムネイル(あるいはサムネイルのページ全体)を生成できるだけでなく、ファイル名、ディスクサイズ、寸法、あるいはユーザー指定の文字列といった情報を含めるようサムネイルにラベルを付けることもできます。 ここでは「magick montage」を使ってフレーム付きサムネイルを生成する簡単な使い方を示します。 |

  magick montage -define jpeg:size=240x200  -label '%c'  hatching_orig.jpg \
          -frame 6  -geometry '120x100>'  montage_simple.gif

ラベルは JPEG 画像ファイルのコメントから来ており、これはずっと前に非 IM コマンド「wrjpgcom」を使って画像に追加されたものです。詳しくは非 IM JPEG 処理を参照してください。
「magick montage」だけでも、サムネイル生成を本当に凝ったものにできます。 |

  magick montage -define jpeg:size=400x180  -label '%c' hatching_orig.jpg \
          -thumbnail '200x90>' -geometry '130x100>'  -mattecolor peru \
          -frame 6  -bordercolor skyblue  -font LokiCola  -pointsize 18 \
          montage_fancy.gif

詳しくは「Montage、画像の配列」を参照してください。特に Montage HTML サムネイルイメージマップの例に興味を持たれるかもしれません。これは、サムネイルをクリックすると同じディレクトリにあるオリジナル画像が表示される、サムネイルの HTML インデックスページを作ります。

柔らかくぼかしたエッジ

Vignette 演算子は、画像の周りにぼやけたエッジを追加する簡単な手段を提供します。 |

  magick thumbnail.gif -alpha set \
          -background none  -vignette 0x4  vignette.png

もちろんこのサムネイルは半透明の色を使うので、PNG フォーマットで保存する必要があります。Morphology Distance メソッドは、画像のエッジの真の透明な「フェザリング」を提供します。 |

  magick thumbnail.gif -alpha set -virtual-pixel transparent -channel A \
          -morphology Distance Euclidean:1,10\! +channel feathered.png

透明領域の最大距離は、特別な「10\!」距離スケーリングフラグで制御されます。これは IM v6.6.1-6 で初めて追加されました。これは変形した画像にも機能するという利点があり、ただし距離の計算でアンチエイリアス処理されたピクセルを正しく保持・保存するには、より複雑な初期化が必要です。詳しくはDistance を使った形状のフェザリングを参照してください。ここでのフェザリングは純粋な線形勾配で、シグモイド非線形コントラスト演算子を使ってさらに調整し、いくつかの異なる方法でより滑らかでテーパー状の見た目を与えることができます。同じ方法、つまりアルファチャンネルだけをぼかす前に透明な仮想ピクセルを追加する方法を使って、ブラーによる画像のフェザリングを行うこともできます。これは画像により柔らかなフェザリングを生み出すとともに、画像の角を目に見えて丸めます。 |

  magick thumbnail.gif -alpha set -virtual-pixel transparent \
          -channel A -blur 0x8  -level 50%,100% +channel  soft_edge.png

余分な「[-level](https://imagemagick.org/command-line-options/#level)」操作(透明度チャンネルだけを調整)は、エッジが半透明にとどまるのではなく完全に透明になることを保証します。しかし、ブラーが生成するシグモイド状の曲線のために、実際のエッジでは急激にゼロへと落ち込みます。また角では加法的な効果があり、角を丸めてしまいます。一方、鋭い凹みを持つ変形した画像では、完全に透明なピクセルが半透明になってしまうことがあります。そのため形状の場合は、結果を(Dst-In 合成を使って)オリジナル画像に対してマスクする必要があるかもしれません。ただし矩形のサムネイルなら結果は満足のいくものです。この種のフェザリングを使った別の例は、レイヤー化されたサムネイルで見ることができます。ぼかしたフェザーに対してレベル調整を行う代わりに、ぼかしたアルファチャンネルを「50%」でしきい値処理すれば、上記のサムネイル画像に擬似的な角丸を追加できます。 |

  magick thumbnail.gif -alpha set -virtual-pixel transparent -channel A \
          -blur 0x8  -threshold 50% +channel rounded_corner_blur.gif

とても単純ではありますが、その結果は画像の角を丸めるあまりよい方法ではありません。第一に、角は実際には円形ではなく「双曲線」状の曲線です。第二に、結果は滑らかなアンチエイリアスの曲線ではなく、しきい値処理操作のエイリアシング効果によって生じる「ジャギー」を示します。ただしこの画像は GIF ファイルフォーマットに保存できます。詳しくはGIF のブール透明性を参照してください。また、より大きな角丸を生成するために大きな引数を扱う場合、「[-blur](https://imagemagick.org/command-line-options/#blur)」操作が非常に遅くなることがあることにも注意してください。そのため、大きなスケールで角を丸めるこの方法はまったくお勧めできません。より変わったぼかしたエッジ効果のためには、アルファチャンネルだけにラジアルブラーを使うことができます。 |

  magick thumbnail.gif -alpha set -virtual-pixel transparent \
          -channel A -radial-blur 0x45 +channel  radial_blur_edge.png

これは完全に正方形の画像でうまく機能します。角度ブラーの量が大きくなると、最終的には円形の Vignette のようなエッジが生成されます。 |

  magick thumbnail.gif -alpha set -virtual-pixel transparent \
          -channel A -radial-blur 0x100 +channel  radial_blur_vignette.png

見られるふたつの段差のようなアーティファクトは、画像の 2 方向の寸法によって生じます。正方形の画像では「段差」は見られません。最後の例に少し普通のブラーを追加すると、段差の問題も改善できます。

角丸と変形した角

柔らかくぼかしたエッジ(上記参照)をしきい値処理すると、GIF のブール透明性に適した角丸が生成されますが、滑らかな「アンチエイリアス」の角は生成されません。角丸、あるいはその他のあらゆる形状の画像を生成する適切な方法は、望む形状のマスクを使って各角を実際に切り抜くことです。次の方法は Leif Åstrand leif@sitelogic.fi 氏によるもので、全体の画像マスクを乗算して適切な結果を生成します。 |

  magick thumbnail.gif \
     \( +clone  -alpha extract \
        -draw 'fill black polygon 0,0 0,15 15,0 fill white circle 15,15 15,0' \
        \( +clone -flip \) -compose Multiply -composite \
        \( +clone -flop \) -compose Multiply -composite \
     \) -alpha off -compose CopyOpacity -composite  rounded_corners.png

基本的に、オリジナル画像から白い透明度マスクを、黒く丸められた角ひとつだけで抽出します。これを flip(上下反転)と flop(左右反転)して、四隅すべてが丸められたマスクを作ります。そして最後にそのマスクをオリジナル画像に適用します。より大きな画像では、処理に必要な総量を減らすために、各角ごとにはるかに小さなマスクを適用するほうがよいかもしれません。つまり、個々の処理ステップは増えますが、全体では実際のピクセルの処理は少なくなります。たとえば、次は同じことを、各角から単純に描いた三角形を切り取って行うものです。これははるかに大きな画像でも機能します。 |

  magick thumbnail.gif -alpha set  -compose DstOut \
      \( -size 20x15 xc:none -draw "polygon 0,0  0,14 19,0" \
         -write mpr:triangle  +delete \) \
      \( mpr:triangle             \) -gravity northwest -composite \
      \( mpr:triangle -flip       \) -gravity southwest -composite \
      \( mpr:triangle -flop       \) -gravity northeast -composite \
      \( mpr:triangle -rotate 180 \) -gravity southeast -composite \
      corner_cutoff.png

透明ではなく別の色がよい場合は、上記を行ってから透明性の除去をすることもできます。これは JPEG 画像にとって重要なことがあります。しかし、(複雑さとメモリ使用量の点で)もっと単純な解決策が IM フォーラムの議論で見つかっています。これは角を透明にする代わりに、色付き(この場合は「Red」)の角をオーバーレイします。 |

  magick thumbnail.gif \
    \( +clone -crop 16x16+0+0  -fill white -colorize 100% \
       -draw 'fill black circle 15,15 15,0' \
       -background Red  -alpha shape \
       \( +clone -flip \) \( +clone -flop \) \( +clone -flip \) \
     \) -flatten  rounded_corners_red.png

残念ながらこの方法は、Flatten 操作の「背景キャンバス」との相互作用のために、単に画像の角を透明に「消す」ためには使えません。将来のレイヤー化演算子がこれを解決するかもしれません。 | 最後の例は、「[-flip](https://imagemagick.org/command-line-options/#flip)」と「[-flop](https://imagemagick.org/command-line-options/#flop)」演算子の両方が仮想キャンバスのオフセットを正しく扱わないため、v6.6.6-5 より前のバージョンの IM では失敗します。
---|---
Polar サイクルのトリックを使えば、あらゆるサイズのサムネイルに対して完璧なアンチエイリアスの円マスクを生成できます。もちろん、最良の結果を得るために、歪ませた画像はオリジナル画像のマスクとしてのみ使います。 |

  magick thumbnail.gif -alpha set \
    \( +clone -distort DePolar 0 \
       -virtual-pixel HorizontalTile -background None -distort Polar 0 \) \
    -compose Dst_In -composite -trim +repage circle_masked.png

このスタイルの画像処理は、下の角丸の縁でさらに進めます。そこでは角を切り抜くだけでなく、適切なフレーミング画像もオーバーレイします。

破れた紙のエッジ

Leif Åstrand leif@sitelogic.fi 氏は、(新聞紙のような)繊維質の紙から破り取ったように見えるエッジを生成する次の IM コードを提供してくれました... |

  magick thumbnail.gif \
          \( +clone -alpha extract -virtual-pixel black \
             -spread 10 -blur 0x3 -threshold 50% -spread 1 -blur 0x.7 \) \
          -alpha off -compose Copy_Opacity -composite torn_paper.png

ひとつの改良として、新聞の角から破り取ったように見せることが考えられます。 |

  magick thumbnail.gif -bordercolor linen -border 8x8 \
          -background Linen  -gravity SouthEast -splice 10x10+0+0 \
          \( +clone -alpha extract -virtual-pixel black \
             -spread 10 -blur 0x3 -threshold 50% -spread 1 -blur 0x.7 \) \
          -alpha off -compose Copy_Opacity -composite \
          -gravity SouthEast -chop 10x10   torn_paper_corner.png

これは、「紙」色の縁と曲線状の形のマスクを追加することで、画像が手で雑に破られたように見えるよう改良できます。(次の)「柔らかな影」を加えると、結果の画像を背景から「浮き上がらせ」、別の一片であるかのように見せることもできます。いつものように、提案や貢献を歓迎します。

影の追加

「[-shadow](https://imagemagick.org/command-line-options/#shadow)」演算子は、あらゆる形状の画像の影の生成を簡単にします。たとえばここでは、サムネイルに半透明の色付きの影を追加します。 |

  magick thumbnail.gif -alpha set \
          \( +clone -background navy -shadow 60x0+4+4 \) +swap \
          -background none -mosaic   shadow_hard.gif

しかし、同じくらい簡単に柔らかくぼやけた影を作ることもできます。 |

  magick -page +4+4 thumbnail.gif -alpha set \
          \( +clone -background navy -shadow 60x4+4+4 \) +swap \
          -background none -mosaic     shadow_soft.png

ここでもサムネイルの出力に PNG フォーマット画像を使ったことに注意してください。それは、影付きの画像が多くの半透明ピクセルを含み、GIF はそれを扱えないからです。(はい、同じことを繰り返していますが、重要なことです)。GIF や JPG フォーマットを使うつもりなら、これらのフォーマットは半透明の色を扱えないので、サムネイルを表示するつもりのウェブページやより大きなキャンバスにふさわしい「[-background](https://imagemagick.org/command-line-options/#background)」色を使う必要があります。注意点ですが、上記は個々のサムネイルには機能するものの、複数のサムネイルを重ね合わせたい場合には一般に失敗します。その理由は、影が通常の画像のようには互いに累積しないからです。複数のレイヤー化された画像からの影を扱う方法については、影のレイヤーを参照してください。

厚みの追加

画像や形状に厚みを追加すると、ハードな影を追加するの(上記参照)に少し似て見えますが、まったく同じではなく、正しく行うには余分な作業が必要です。これは実は非常にトリッキーで、画像の色付きマスクを作り、それを複数回複製して、オフセットを増やしながら(「DstOver」合成を使って)オリジナル画像の下にレイヤー化し、画像に厚みを与えます。 |

  magick thumbnail.gif -alpha set \
          \( +clone -fill DarkSlateGrey -colorize 100% -repage +0+1 \) \
          \( +clone -repage +1+2 \) \
          \( +clone -repage +1+3 \) \
          \( +clone -repage +2+4 \) \
          \( +clone -repage +2+5 \) \
          \( +clone -repage +3+6 \) \
          -background none -compose DstOver -mosaic  thickness.gif

おわかりでしょう。それぞれの「\( +clone ... \)」行が、南南東の方向に画像へ 1 ピクセル分追加します。また半透明ピクセルが(少なくとも矩形画像では)関与しないので、結果に GIF 画像フォーマットを使えます。この手法の大きな問題は、厚みを追加する専用のスクリプトを書かない限り、厚みを可変の引数として、あるいは異なる角度で指定するのが難しいことです。また、厚みの斜めの部分のエッジはアンチエイリアス処理されないので、改善の余地が大いにあります。

ポラロイド風サムネイル

サムネイル画像をポラロイド写真のように見せ、影を与え、さらに少し回転させて、まるでテーブルの上にただ置かれているかのように見せることができます。 |

  magick thumbnail.gif \
          -bordercolor white  -border 6 \
          -bordercolor grey60 -border 1 \
          -background  none   -rotate 6 \
          -background  black  \( +clone -shadow 60x4+4+4 \) +swap \
          -background  none   -flatten \
          poloroid.png

上記のより複雑な版が、IM v6.3.1-6 に「[-polaroid](https://imagemagick.org/command-line-options/#polaroid)」変換演算子として追加されました。たとえば... |

  magick thumbnail.gif -bordercolor snow -background black +polaroid \
          poloroid_operator.png

画像にはポラロイドのフレームが付いているだけでなく、写真に少し「カール」が与えられ、適切な影の調整がなされて、結果の画像により奥行きが与えられていることに注意してください。プラス(+)の形はランダムな角度を使い、通常のマイナス(-)の形は回転角度を指定できます。この手法の背後にあるアイデアについては Timothy Hunter 氏に特別な感謝を。「[-caption](https://imagemagick.org/command-line-options/#caption)」を追加したり、独自の影の色を設定したり、独自の回転(あるいはまったく回転なし)を指定したりすることもできます。 |

  magick -caption '%c' hatching_orig.jpg -thumbnail '120x120>' \
          -font Ravie -gravity center -bordercolor Lavender \
          -background navy  -polaroid -0     poloroid_caption.png

この演算子の使用についての詳しい情報は複雑なポラロイド変換を参照してください。ただしこれらの例では、適切な写真の「重ね方」を示すために縁と影の効果のより細かい制御が必要なので、引き続き自前の作成方法を使います。さて始めましょう... 写真の複数のコピーを作り(あるいは他の画像を使い)、ポラロイドの縁を追加することで、それらをランダムに回転させて積み重ね、見栄えのよい写真の山を作ることができます。 |

  magick thumbnail.gif \
     -bordercolor white  -border 6 \
     -bordercolor grey60 -border 1 \
     -bordercolor none  -background  none \
     \( -clone 0 -rotate `magick null: -format '%[fx:rand()*30-15]' info:` \) \
     \( -clone 0 -rotate `magick null: -format '%[fx:rand()*30-15]' info:` \) \
     \( -clone 0 -rotate `magick null: -format '%[fx:rand()*30-15]' info:` \) \
     \( -clone 0 -rotate `magick null: -format '%[fx:rand()*30-15]' info:` \) \
     -delete 0  -border 100x80  -gravity center \
     -crop 200x160+0+0  +repage  -flatten  -trim +repage \
     -background black \( +clone -shadow 60x4+4+4 \) +swap \
     -background none  -flatten \
     poloroid_stack.png

| 上記の例の「magick ...」埋め込みコマンドは、-15 から +15 までのランダムな浮動小数点数を生成します。IM を数学計算機として使うことについての詳しい情報は FX 式を参照してください。代替として、ランダムな数値をシェル変数に割り当て、上記のコマンドにそれを代入することもできます。
---|---
もちろん、ここでしたように同じ画像を何度も繰り返す代わりに、山を作るときに異なる画像のセットを代用することもできます。あるいは、すべてが適度に異なるか、見ていて心地よいような回転角度のセットを選ぶこともできます。本当に上手なら、回転させた画像をオフセット(位置を少しずらす)させて、すべてが完璧に中央揃えで積み重なっていないようにすることすらできます。とにかく基本的なアイデアはおわかりでしょう。PNG フォーマットを、現在の_一部の_ブラウザでの問題のために避けたいなら、GIF 画像フォーマットを使えます。そのためには、いくらかの色の制限を受け入れることを厭わず、画像が表示される正確な背景色を知っている必要があります。これらのページの場合は「LightSteelBlue」色です。 |

  magick thumbnail.gif \
          -bordercolor white  -border 6 \
          -bordercolor grey60 -border 1 \
          -background  none   -rotate -9 \
          -background  black  \( +clone -shadow 60x4+4+4 \) +swap \
          -background  LightSteelBlue  -flatten    poloroid.gif

この手法(と、さらに多くのこと)についての詳細は単色背景の上の GIF 画像を参照してください。上記の「積み重ねたポラロイド」手法は、Ally's Trip の Ally 氏と Muziekvereniging Sempre Crescendo の Stefan Nagtegaal 氏のご厚意により提供されたもので、両者とも自分たちのウェブサイトでポラロイド風サムネイルを広範に使っています。IM ユーザーフォーラムで、ユーザーの_grazzman_ 氏が、回転するキャンバスの上に画像をオーバーレイして写真の広がりを作るというところまでさらに進めました。 |

  magick -size 150x150 xc:none -background none \
          -fill white -stroke grey60 \
          -draw "rectangle 0,0 130,100" thumbnail.gif \
                -geometry +5+5 -composite -rotate -10 \
          -draw "rectangle 0,0 130,100" thumbnail.gif \
                -geometry +5+5 -composite -rotate -10 \
          -draw "rectangle 0,0 130,100" thumbnail.gif \
                -geometry +5+5 -composite -rotate +10 \
          -trim +repage -background LightSteelBlue -flatten \
          poloroid_spread.gif

もちろん、このような写真の広がりには、ここでしたように同じ画像を何度も繰り返すのではなく、本当に異なる写真のセットを使う必要があります。この手法で考慮したくなるかもしれない注意点がいくつかあります。

• フレーミングは上記にハードコードされており、サムネイル画像のサイズに依存します。実際のアプリケーションでは、フレーミングは上記の写真の広がりではなく、サムネイル生成の段階に移されるかもしれません。
• 「[-rotate](https://imagemagick.org/command-line-options/#rotate)」もキャンバスのサイズを拡大するので、「[-gravity](https://imagemagick.org/command-line-options/#gravity) center」位置からのオフセットを使って画像を配置しない限り、画像が追加される位置は変化します。
• そして最後に、背景フレームを絶えず回転させるのは品質の点でよい考えではありません。すでに回転した画像を回転させると、各画像を重ねる前に別々に 1 回ずつ回転させるよりも、結果により多くのピクセルレベルの歪みが加わります。

写真をより大きな領域にランダムに積み重ねる同様のものが Stas Bekman's Photography のために開発されましたが、異なる縁取り手法を使っています。写真や画像の何らかの秩序立った、あるいはプログラムされたレイアウトを作るより一般化された方法は、画像レイヤーの例、および写真の重なりで示し説明しています。

フレーミング手法

ここでは、望む結果を得るために IM の仕組みについての非常に高度な知識を使う、いくつかの高度なフレーミング手法を見ていきます。

セルフフレーミング(外側)

セルフフレーミングは、画像自体を使ってフレーミングの色やパターンを生成し、画像にフレームを付けるのに使える手法です。つまり、追加されるフレームは固定ではなく、フレーミングされる画像におおよそ合うように変化します。これはふたつの方法で行えます。オリジナル画像を拡張して_外側のフレーム_を作るか、あるいは実際の画像自体の一部を使って_内側のフレーム_を作ります。たとえば、画像を拡大して暗くしてから、その上にオリジナル画像をオーバーレイすると、とても見栄えのよいフレームが得られます。 |

  magick thumbnail.gif \
          \( -clone 0 -resize 130% +level 20%x100% \) \
          \( -clone 0 -bordercolor black -border 1x1 \) \
          -delete 0 -gravity center -composite  self_bordered.gif

| フレーミング画像を明るく(または暗く)するためにレベル調整を使う代わりに、縁をより明るいまたは暗い色にする別の方法は、次のようなものを使ってカラーティントでフレームを色付けすることです。
「-fill white -colorize 30%」
---|---
画像を色付けしてフレームを生成する別の方法として、単に拡大した画像の上に半透明のフレームを IM にオーバーレイさせることもできます。ただしこれには、生成されるフレームに合わせてちょうど適切な量だけ正確にリサイズするために、サムネイルのサイズを知っている必要があります。 |

  magick thumbnail.gif \
          \( -clone 0 -resize 140x110\! \) \
          \( -clone 0 -bordercolor black -border 1x1 \
                      -mattecolor '#8884' -frame 9x9+0+9 \) \
          -delete 0 -composite  self_framed.gif

上記のバリエーションは、特別なビューポート制御と、デフォルトの仮想ピクセル、Edge設定を使い、ぼかした画像のエッジを拡張して外側のフレームを生成します。 |

  magick thumbnail.gif \( +clone \
             -set option:distort:viewport 150x120-15-15 \
             -virtual-pixel Edge    -distort SRT 0  +repage \
             -blur 0x3 +level 20%,100% \) \
          \( -clone 0 -bordercolor white -border 1 \) \
          -delete 0 -gravity center -compose over -composite \
          self_blurred_edge.gif

ひとつ注意です。小さなエッジの欠陥(木や葉など)は、画像のエッジだけを使って生成したフレームに望ましくない結果を生むことがあります。ビューポートは、そのビューポートを適切な量だけ拡大しオフセットするために、オリジナル画像のサイズを知る必要があります。しかし FX エスケープ式を使ってビューポートのサイズを計算できます(下の例を参照)。代替として、上記の例でぼかした仮想ピクセル、Ditherを使うこともできます。これは色をさらに広げ、それほど「エッジっぽく」なくなります。ただし拡張の前後にブラーを追加すると、dither を使って布のような効果を生み出せます。 |

  magick thumbnail.gif \( +clone  -blur 0x3 \
             -set option:distort:viewport '%[fx:w+30]x%[fx:h+30]-15-15' \
             -virtual-pixel Dither  -distort SRT 0  +repage \
             -blur 0x0.8  +level 20%,100% \) \
          \( -clone 0 -bordercolor white -border 1 \) \
          -delete 0 -gravity center -compose over -composite \
          self_blurred_dither.gif

最初のブラーは平均色を調整し、ふたつ目は dither パターンがどれだけ「ピクセル化」されるか滑らかになるかを調整します。次にもうひとつの例で、今度は仮想ピクセル、Mirrorを、(黒く塗った)柔らかいエッジとともに使います。これはこの特定の画像に対してはとてもうまく機能しました。 |

  magick thumbnail.gif  \( +clone \
             -set option:distort:viewport '%[fx:w+30]x%[fx:h+30]-15-15' \
             -virtual-pixel Mirror -distort SRT 0 +repage \
             -alpha set -virtual-pixel transparent \
                 -channel A -blur 0x8 +channel \
             -background Black -flatten \) \
          +swap -gravity center -compose over -composite \
          self_mirror.gif

上記のすべての場合で、フレームは同じ画像から生成され、それが組み合わされて、オリジナル画像から来る色に基づくフレームが作られます。こうしてフレーミングの縁は、フレーミングされる各サムネイル画像に独自に合致します。Fred Weinhaus 氏は、セルフフレーミング画像をより簡単にするためのスクリプト「[imageborder](http://www.fmwconcepts.com/imagemagick/imageborder/)」を作りました。縁はオリジナル画像のぼかした拡大から、あるいは内容を定義する何らかの形の仮想ピクセル設定から生成されます。

セルフフレーミング(内側)

新しい縁を追加するために画像を拡大する代わりに、画像自体の一部を縁へと magick で変換することもできます。すでに、画像自体の内側にフレームを追加する手法をいくつか見てきました。浮き出しボタンとバブルボタンの手法は、「[-raise](https://imagemagick.org/command-line-options/#raise)」演算子を使ってこれを行います。ここではオリジナル画像の明るくぼかした版を生成し、それをやはりオリジナル画像から生成したマスクを使ってオーバーレイします。そして、その明るくぼかした版を中央の変更されていない部分から分離するために、白いエッジを追加します。 |

  magick thumbnail.gif \( +clone -blur 0x3 +level 20%,100% \) \
          \( +clone -gamma 0 -shave 10x10 \
             -bordercolor white -border 10x10 \) \
          -composite \
          \( +clone -gamma 0 -shave 10x10 \
             -bordercolor white -border 1x1 \
             -bordercolor black -border 9x9 \) \
          -compose screen -composite \
          self_blurred_border.gif

フレーム演算子を使って、先に見たボタン効果とは少し違うものを実現することもできます。コツは、適用する前にまずオリジナル画像をShave(削る)ことです。たとえばここでは、オリジナル画像のコピーを作り、それを削って透明なフレームでフレーミングしてから、オリジナル画像の上にオーバーレイします。 |

  magick thumbnail.gif \( +clone -shave 10x10 \
            -alpha set -mattecolor '#AAA6' -frame 10x10+3+4 \
          \) -composite  inside_frame_trans.gif

この問題は、オリジナル画像の周りのフレームの平らな部分を常に「明るく」または「暗く」(コントラストを下げて)してしまうことです。これを避けるために、バブルボタン手法と同じ手法を使えます。完璧なグレーのキャンバスにフレームを生成し、それを修正してライティングエフェクト合成マスクを生成し、オリジナル画像の色を調整します。たとえばここでは、原色をよりよく保つために、フレーミングされたマスク画像との「[VividLight](compose.html#vividlight)」合成を使います。 |

  magick thumbnail.gif \
          \( +clone -shave 10x10 -fill gray50 -colorize 100% \
            -mattecolor gray50 -frame 10x10+3+4 \
          \) -compose VividLight -composite  inside_frame_light.gif

バブルボタンと同様に、適用する前にライティングマスクをぼかすこともできます。ここでは、原色を強調しないより普通の「[HardLight](compose.html#hardlight)」合成を、ぼかしたフレームのライティングマスクとともに使いました。 |

  magick thumbnail.gif \
          \( +clone -shave 10x10 -fill gray50 -colorize 100% \
            -mattecolor gray50 -frame 10x10+3+4 -blur 0x2 \
          \) -compose HardLight -composite  inside_frame_blur.gif

| 一部のライト合成手法では、正しいライティング効果を得るために、合成する前に画像を入れ替える必要があるかもしれません。
---|---
この種の効果をさらに進めて、はるかに複雑な結果を生み出すには、高度なライティングエフェクトマスクを参照してください。

シンプルな縁のオーバーレイ

ひとつのシンプルなフレーミングのタイプは、凝ったフレーム、あるいは変形した画像を作り、その下に画像を配置できるようにすることです。たとえばここでは、凝った形の穴を持つ、画像よりわずかに大きなシンプルなフレームを生成します。この形は「WebDings」フォント(文字「Y」)から抽出しましたが、絵の額装に使える凝った形のソースは他にもたくさんあります。 |

  magick -size 120x140 -gravity center -font WebDings label:Y \
          -negate -channel A -combine +channel -fill LightCoral -colorize 100% \
          -background none -fill none -stroke firebrick -strokewidth 3 label:Y \
          -flatten +gravity -chop 0x10+0+0 -shave 0x10 +repage border_heart.png

既存の変形した画像にエッジを生成する他の方法については、エッジ変換を参照してください。 影効果を使って、フレームに少し奥行きを持たせることもできます。 |

  magick border_heart.png  \( +clone -background black -shadow 60x3+3+3 \) \
          -background none -compose DstOver -flatten   border_overlay.png

シンプルなオーバーレイフレームができたので、「[DstOver](../static/img/compose/dstover)」合成を使って、中央のフレームの下に画像を敷くことができます。 |

  magick border_overlay.png  thumbnail.gif \
          -gravity center -compose DstOver -composite   border_overlaid.jpg

これで、このAutumn Leaves 画像のように、画像とともに使うためのあらかじめ用意したフレームのライブラリを生成できます。

    magick thumbnail.gif  autumn_leaves.png +swap \
            -gravity center -compose DstOver -composite \
            border_leaves.gif

画像の順序を入れ替え、「[DstOver](compose.html#dstover)」を使って 2 番目のメイン画像をフレームの「下」に配置したことに注意してください。そうすることで、画像の最終サイズを決めるのはオリジナル画像ではなくフレームになります。ただしこれを行うと、(同じ理由で)メイン画像が持つメタデータも失われます。サムネイルのメタデータ(ラベルやコメント、たとえば著作権メッセージなど)を本当に保持したい場合は、サムネイルをフレームと同じサイズにパディングし、それからデフォルトの「[Over](compose.html#over)」合成を使ってフレームをオーバーレイするのが最良のアイデアです。そうすればサムネイルが「宛先(destination)」画像となり、その画像のメタデータが保持されます。

バッジオーバーレイの例

ここに、もうひとつのより複雑なあらかじめ用意したオーバーレイの例があります。今回は IM フォーラムの議論 Composite Overlay and Masking から、(extent をクロップ方法として使って)正しいサイズにした画像を使います。

    magick thumbnail.gif  -gravity center -extent 90x90 \
            badge_overlay.png -composite     badge.png

画像自体は歪んでおらず、ただわずかに明るくしたり暗くしたり、円が切り抜かれ影が追加されたりしているだけで、すべてひとつのオーバーレイ画像の中にあることに注意してください。もしこれが本物のバッジや「ガラスのバブル」であれば、画像も少し歪ませる(おそらく樽型歪みを使って)べきですが、そのような歪みを必要とせずともうまく機能します。「バッジ」の例の次のステップについては、マスク&ペイントによるバッジを参照してください。これはバッジの外側の周りに背景の透明性を追加します。

マスク&ペイント手法

多くの場合、単に画像の周りに四角い縁をオーバーレイするだけでなく、画像のエッジを透明に切り抜きたいこともあります。これには通常、少なくとも 2 枚の画像を使います。ひとつは、既存の画像に追加したい色、影、ハイライトを含むマスクされたオーバーレイです。そしてふたつ目は、オリジナル画像から取り除きたい部分を含む画像です。これら 2 枚の画像は、ふたつの異なる方法で適用できます。まず「マスク」して画像から不要な部分を取り除いてからフレームをオーバーレイするか、_あるいは_フレームをオーバーレイしてから、オリジナル画像とオーバーレイした色の両方の不要な部分を透明にマスクするかのどちらかです。どちらの方法を使うかは決定的に重要で、関与する画像は特定の手法のために設計されます。一方の方法用の画像を間違った順序で使うことはできません。さもなければ正しく機能しません。たとえば、より複雑な形の縁を作りましょう。ただし今回は背景の設定は気にしません。 |

  magick -size 120x100 xc:none -fill none -stroke black -strokewidth 3 \
          -draw 'ellipse 60,50 30,45 0,360  ellipse 60,50 55,30 0,360' \
          -strokewidth 3  -draw 'ellipse 60,50 57,47 0,360' \
          -channel RGBA  -blur 2x1    border_ellipse.png

さて、エッジの構成要素をはるかに半透明にするため、この縁をわざとぼかしました。その余分な曖昧さがなくても、縁には多くの半透明のアンチエイリアスピクセルが含まれ、エッジをより滑らかでギザギザの少ない見た目にします。画像処理においては、これらの半透明ピクセルを考慮し、正しく保持・設定することが極めて重要です。 もっと面白くするため、この「ぼやけた」縁にランダムな色付けを与えましょう。 |

  magick border_ellipse.png \
          \( -size 120x100 plasma:Tomato-FireBrick -alpha set -blur 0x1 \) \
          -compose SrcIn -composite     border_ellipse_red.png

さて、縁はできましたが、縁の外側と内側が何を表すべきかを定義する何らかの方法がまだ必要です。基本的に、これらふたつの領域を定義するマスクが必要です。 |

  magick -size 120x100  xc:none -fill black \
          -draw 'ellipse 60,50 30,45 0,360  ellipse 60,50 55,30 0,360' \
          border_ellipse_mask.png

この「マスク」画像の色は重要ではなく、その形だけが重要です。基本的に、どの部分が内側に、どの部分が外側に分類されるかを定義するからです。マスクはグレースケールマスクでもよいし、上で示したような形状マスクでもかまいません。ただし後者のほうが通常はより有用で、消すべき部分の形でも、(上のように)残すべき部分の形でもかまいません。この場合、画像は「マスク&ペイント」手法として設計されており、つまり、まず不要な部分を消してから、追加の縁の色(これにも透明度マスクが関与しています)をオーバーレイすべきです。たとえば...

  magick thumbnail.gif -alpha set  -gravity center -extent 120x100 \
          border_ellipse_mask.png  -compose DstIn -composite \
          border_ellipse_red.png   -compose Over  -composite \
          border_mask_paint.png

Duff-Porter アルファ合成操作が常にふたつ必要です。ひとつは部分を透明にするため、もうひとつは縁やフレームを縁取る追加の色をオーバーレイするためです。2 枚の画像が必要で、そのため別々に保つ必要があります。MIFF や GIF のような一部のフォーマットでは、保存を容易にするために両方の画像を同じファイルに保存できます。もちろん、2 枚の画像を組み合わせてひとつのシンプルなオーバーレイフレーミング画像を作ることもできますが、それは結果の外側部分に固定の不透明色を使いたい場合に限ります。たとえば外側を DodgerBlue 色としてあらかじめ定義します... |

  magick border_ellipse_mask.png -alpha extract -negate \
          -background DodgerBlue -alpha shape \
          border_ellipse_red.png   -compose Over -composite \
          border_ellipse_overlay.png

しかしその場合は、先に生成した二重マスクされた画像の下に、単色や他の何らかの背景画像を単純に敷くだけでもよいでしょう... |

  magick border_double_masked.png \
          \( -size 120x100 plasma:Green-Green -blur 0x1 \) \
          +swap  -compose Over  -composite     border_background.png

要点は、「マスク」と「オーバーレイ」のふたつの画像があれば、画像への縁の追加の仕方にずっと多くの自由が得られるということです。複数の「マスク」画像を定義して、「オーバーレイ」した縁の画像の異なる「窓」を定義することすらできます。また、ハイライトや影を単一のオーバーレイフレーミング画像にハードコードする代わりに、任意で追加することもできます。さてここで重要な注意点です。マスク画像のエッジは、オーバーレイ画像のエッジと一致してはいけません。もし一致すると、一致するエッジに沿った色の正しい処理が得られなかったり、他の奇妙な「ハロー」効果を生んだりします。そのため、マスクのエッジがオーバーレイ画像の完全に不透明な領域のどこかに落ちるようにする必要があります。ふたつのマスク操作には注意と熟慮が必要です。

角丸の縁

上で見たように、マスク&ペイント手法は、画像に追加の色や「装飾」を加えるだけでなく、部分を取り除いて最終画像を形作るのにも使えます。これは、画像に角丸を追加する別の方法を私たちに提示します。IM の「[-draw](https://imagemagick.org/command-line-options/#draw)」演算子には、画像の周りに面白いフレームを提供するのに使える「roundrectangle」メソッドが付属しています。ただし、この描画メソッドの寸法を画像に合わせてサイズ指定する必要があります。IM は画像サイズに基づいて値を抽出したり数学計算したりするメソッドを提供しています。矩形を配置する座標は、矩形を定義するのに使うストローク幅のちょうど「中心」を指します(浮動小数点値でかまいません)。また、これは「ピクセル座標」(ピクセル座標 vs 画像座標を参照)で与えられ、つまり 1,1 という値は上端と左端から 2 番目のピクセルを指しますが、より重要なのは、それがピクセルの「中心」を指すことで、実際には本当の上端と左端から 1.5 単位の位置です。さてここで 3 のストローク幅(SW)を使います。これは画像をすべての側で 3 ピクセル大きくします。すると矩形は左上から「SW/2 - 0.5」すなわち 1.0 ピクセルの位置に、右下では「ImageSize + SW*1.5 - 0.5」すなわち画像サイズ + 4 ピクセルの位置に配置されることになります。ここでは IM 自身を使ってこれらの計算を行い、凝った FX エスケープを使って必要となる正確な draw コマンドを生成します。これは、後のコマンドで draw が直接使える Magick Vector Graphics ファイルとして保存されます。

  magick thumbnail.gif \
          -format 'roundrectangle 1,1 %[fx:w+4],%[fx:h+4] 15,15'\
          info: > rounded_corner.mvg

| 画像サイズを別の方法で(シェルや他の API 言語ラッパーを使って)割り出せるなら、FX 数式を使う代わりに、適切な draw パラメーターを次の例に直接代入できます。基本的に上記は、このプロセス全体をサムネイルの実際のサイズに依存しないものにします。直接ハードコードを含む他のどんな方法でも問題ありません。
---|---
さてこれを使って、オーバーレイとマスク画像を生成できます。その一環として、サイズを正しくするために、(まずストローク幅で拡大した)オリジナル画像を使って透明なキャンバスを作ります。

  magick thumbnail.gif -border 3 -alpha transparent \
          -background none -fill white -stroke none -strokewidth 0 \
          -draw "@rounded_corner.mvg"    rounded_corner_mask.png
  magick thumbnail.gif -border 3 -alpha transparent \
          -background none -fill none -stroke black -strokewidth 3 \
          -draw "@rounded_corner.mvg"    rounded_corner_overlay.png

そしてこれで、二重マスク手法に必要なオーバーレイの縁の画像と、透明度マスク画像が得られました。マスクはオリジナル画像よりストローク幅だけ大きい画像用であり、(白で示された)消去用の形状マスクは拡大された領域全体を覆っておらず、その周り全体に 1 ピクセルの隙間があることに注意してください。それでは二重マスク手法を使ってこれを適用しましょう... |

  magick thumbnail.gif -alpha set -bordercolor none -border 3  \
          rounded_corner_mask.png -compose DstIn -composite \
          rounded_corner_overlay.png -compose Over -composite \
          rounded_border.png

そしてこれで、角丸の縁取りをした画像が得られました。次は、少し余分な凝り方をして上記をすべて単一のコマンドで行う方法です。ただしこの一体型コマンドも、指定されたサイズの画像に必要な生成された draw コマンドを保持する一時ファイルを生成します。 |

  magick thumbnail.gif \
      -format 'roundrectangle 1,1 %[fx:w+4],%[fx:h+4] 15,15' \
      -write info:tmp.mvg \
      -alpha set -bordercolor none -border 3 \
      \( +clone -alpha transparent -background none \
         -fill white -stroke none -strokewidth 0 -draw @tmp.mvg \) \
      -compose DstIn -composite \
      \( +clone -alpha transparent -background none \
         -fill none -stroke black -strokewidth 3 -draw @tmp.mvg \
         -fill none -stroke white -strokewidth 1 -draw @tmp.mvg \) \
      -compose Over -composite               rounded_border_in_one.png
  rm -f tmp.mvg      # 一時ファイルの後始末

角丸を行うより良い方法は、特に非常に大きな画像の場合、別個の角マスク画像の手法を使うことです。これについては下の凝った角のオーバーレイで見ていきます。多くの点でこれは上記の方法の拡張ですが、作業画像のサイズを小さく保つために、画像の各角に別々のマスクを使います。

マスク&ペイントによるバッジ

ここに、上のバッジオーバーレイの例で先に使った画像から開発された、はるかに複雑な「マスク&ペイント」の例があります。ふたつの画像の生成は「でっち上げ」で、IM フォーラム Composite Overlay and Masking で議論されました。理想的には、ふたつの画像は一緒に開発されるべきでした。

  magick thumbnail.gif -alpha set -gravity center -extent 90x90 \
          badge_mask.png -compose DstIn -composite \
          badge_shading.png -compose Over -composite \
          badge_trans_bg.png

上で、透明性のエッジとマスクのエッジを揃えようとするのは避けるべきだと述べたことに注意してください。上の例では私はまさにそれをしており、結果の画像のエッジは完全には正しくありません。しかし、色付けは強いエッジというよりは本当に微妙なシェーディングにすぎないので、この例ではうまく機能しているようです。とはいえ注意は払うべきです。「バッジ」の例の次のステップについては、ペイント&マスクによるバッジを参照してください。これはふたつの合成操作の順序を逆にし、異なる画像のセットを必要とします。

ペイント&マスク手法

「マスクしてからペイント」する代わりに、異なる画像のセットを使い、背景をマスクで取り除く前に、まず追加の色をオーバーレイすることもできます。つまり「ペイントしてからマスク」を実行できます。すなわち、画像を取り、最終的な縁の色をすべて設定するだけでなく、オリジナル画像の外側部分の一部または全部をマスクし色付けする縁をオーバーレイします。それから別個の「外側」または「クリッピング」マスクを使って、結果の画像の不要な部分をすべて取り除きます。また、「オーバーレイ」と「マスク」の両画像が、縁の外側のエッジとは別に内側のエッジを定義することにも注意してください。その結果、一方の画像が単一の画像で縁全体を完全に定義することはなく、これがその使用を少し難しくすることがあります。しかし実装はより単純になり得ます。たとえば...

  magick -size 120x90 xc:none -fill black -stroke black -strokewidth 0 \
          -draw 'ellipse 45,45 55,37 0,360' \
          -channel RGBA -negate -blur 0x3  +channel \
          \( granite: -auto-level -blur 0,0.7 \) \
          -compose ATop -composite border_paint.png

  magick -size 120x90 xc:none -fill black -stroke black -strokewidth 5 \
          -draw 'ellipse 59,45 56,40 0,360' border_mask.png

  magick thumbnail.gif -alpha set \
          border_paint.png -compose Over  -composite \
          border_mask.png  -compose DstIn -composite \
          border_paint_mask.png

オーバーレイした色の一部が取り除かれている点に注目してください。これは_ペイント&マスク_手法の重要な特徴で、より単純なオーバーレイを使い、それをマスクで調整できるようにします。この画像マスク手法は、次のページめくりの角の例のセットで使われ、また下の凝った角の縁で再び使われます。

ページめくりの角

Fred Weinhaus 氏は、(シェルでの)非常に複雑な数学を使って、既存の画像に単純なページめくりを追加する PageCurl という特別なシェルスクリプトを作りました。たとえば... |

  pagecurl thumbnail.gif  pagecurl.png

内部的には実際にはペイント&マスク手法を使っています。つまり、まず少し大きすぎる「カールオーバーレイ」をオーバーレイし、それから残りの画像、すなわち透明な角になる、オーバーレイのわずかな部分を含む画像を消去(マスク)します。しかし、多くの画像にページめくりを適用したい場合、(上記の)完全なスクリプトを使うのはかなり遅い手法です。なにしろ、適切なオーバーレイとマスク画像を実際に計算して生成するために、(IM 自身を浮動小数点計算機として使い)膨大な量の数学的処理を行うのですから。多くの画像にページめくりを適用するには、適切なオーバーレイと透明度マスク画像を一度だけ生成するためにスクリプトを一度使うほうが良いのです。そこで、より小さな 64x64 ピクセルの画像用にこれらふたつの画像を抽出しましょう(この目的のためにスクリプトに追加された特別な「-i "pagecurl"」オプションを使います)。 |

  magick -size 64x64 xc: miff:- | pagecurl -e 0.3 -i "pagecurl" - null:

上記のコマンドは、示された「pagecurl_overlay.png」と「pagecurl_mask.png」のふたつの画像ファイルを作成します。入力画像自体は問題ではなく、私たちが欲しいのはマスク画像だからです。「ページめくり」された結果は、特別な「[null:](files.html#null)」画像ファイルフォーマットを使って単に捨てられます。 |

  magick thumbnail.gif -alpha set -gravity SouthEast \
          -define compose:outside-overlay=false \
          pagecurl_overlay.png -composite \
          pagecurl_mask.png  -compose DstIn -composite \
          pagecurl_thumbnail.png

もちろんこれらの画像は、私たちのサムネイルや、適用したいおそらくどの画像とも同じサイズではありませんが、それは問題ではありません。期待どおりに機能するよう、いくつかの余分なオプションを使えるからです。具体的には、「[-gravity](https://imagemagick.org/command-line-options/#gravity)」設定が、ふたつのオーバーレイ画像が右下の角に配置されることを保証します。そして特別なDefine 設定「compose:outside-overlay=false」が、より小さな画像で覆われていない画像の部分をマスク画像が消去するのを防ぎます。完全な説明はOutside-Overlay 設定を参照してください。これを多くの画像に適用したい場合は、「magick mogrify」を使い、「[-draw](https://imagemagick.org/command-line-options/#draw)」を使って Mogrify アルファ合成を行う特別な手法を使えます。ただしこの合成方法は特別な define 設定を理解しないので、画像、オーバーレイ、マスクがすべて同じサイズの場合にのみ機能します。

  pagecurl -e 0.5 -i /tmp/pagecurl  {_1 枚の画像_} null:
  magick mogrify {_magick mogrify の -format と -path オプション_} -alpha set \
          -draw 'image Over 0,0 0,0 "/tmp/pagecurl_overlay.png"' \
          -draw 'image DstIn 0,0 0,0 "/tmp/pagecurl_mask.png"' \
          {_ページめくりするすべての画像_}...

凝った角のオーバーレイ

ここでは、画像全体に単一の大きなマスクやフレームを適用するのではなく、画像を異なる領域で異なる方法で修正するためにこの「二重マスク」手法を使うことを、もう少し深く見ていきます。この場合は角だけを二重マスクします。(それに合わせた)縁の残りは別途追加します。 私が使う角の画像は、(右に示した)オリジナルのソースから生成されたもので、これは Anthony's Icon Library の DIY Frames Section で見つけました。このセクションには他にもあるので、見てみるとよいかもしれません。ネットで何か見つけたら、私は面白い角や縁取りの手法を集めるのが好きなので、ぜひ知らせてください。 その最初の画像から、角を画像にオーバーレイするためのペイント&マスク手法を使えるよう、色のオーバーレイとマスク画像を生成しました。これらの画像は、実際には半透明ピクセルも、色のシェーディングすら一切使っていないことに注目してください。そのため、この凝った縁は、ウェブページ用のすっきりした見た目の「GIF」サムネイルを作るのに使えます。角マスクを使う際の複雑さは、それらが画像の角だけをマスクすることです。このため、オリジナル画像にはまず適切な余分な縁の色のセットを与える必要があります。その後、ふたつの角マスクを、拡張された画像の各角に合成する必要があります。 |

  magick thumbnail.gif   -alpha set  -compose Copy \
          -bordercolor Black  -border 2 \
          -bordercolor Sienna -border 3 \
          -bordercolor Black  -border 1 \
          -bordercolor None   -border 2 \
          -bordercolor Black  -border 2 \
          -bordercolor Peru   -border 3 \
          -bordercolor Black  -border 1 \
          \
          -compose Over \
          \( fancy_add.gif             \) -gravity NorthWest -composite \
          \( fancy_add.gif -flip       \) -gravity SouthWest -composite \
          \( fancy_add.gif       -flop \) -gravity NorthEast -composite \
          \( fancy_add.gif -flip -flop \) -gravity SouthEast -composite \
          -compose DstOut \
          \( fancy_sub.gif             \) -gravity NorthWest -composite \
          \( fancy_sub.gif -flip       \) -gravity SouthWest -composite \
          \( fancy_sub.gif       -flop \) -gravity NorthEast -composite \
          \( fancy_sub.gif -flip -flop \) -gravity SouthEast -composite \
          fancy_border.gif

| 追加される透明な縁を保持するには、「[-compose](https://imagemagick.org/command-line-options/#compose)」設定をデフォルトの「Over」ではなく「Copy」に設定する必要があることに注意してください。そうしないと、透明性が次に追加される縁の色、この場合は「Black」で埋められてしまいます。詳しくは縁演算子を参照してください。
---|---
角マスクだけを使うことの美点は、追加される角マスクに十分な大きさでありさえすれば、どんなサイズの画像でもこの手法でフレーミングできることです。つまり、手元にあるフレーミング画像のサイズに制限されません。もちろん、4 つの角の画像と縁はそれぞれ、画像の周り全体で同じで、回転しているだけです。つまり、影や厚みの効果はすべて「内向き」です。これを直すには、それぞれの角ごとに異なる角ピースを生成する必要があり、オリジナル画像の周りへの余分なエッジの追加も非対称にする必要があります。基本的に、真の影効果を生み出すには、はるかに複雑になります。より良い解決策は、角ピースから影効果を取り除き、前と同じように適用してから、影効果をグローバルに追加することかもしれません。注意が必要です。

ペイント&マスクによるバッジ

先にバッジオーバーレイとマスク&ペイントによるバッジで見たのと同じバッジの画像処理は、ペイントしてからマスクすることでも実行できます。 ここではまずすべての色とシェードを画像にペイントし、それから画像の最終的な透明性をマスクで取り除きます。

  magick thumbnail.gif -alpha set -gravity center -extent 90x90 \
          badge_paint.png -composite badge_shape.png -compose DstIn -composite \
          badge_paint_mask.png

この特定の画像にこれが厄介に思えるなら、そのとおりで、厄介です。その理由は、オリジナル画像にシェードとハイライトを付ける必要があるだけでなく、影効果を含むことになる領域を黒で埋める必要もあるからです。具体的には、完全に透明になる部分(そして本当に完全に透明なピクセルだけ)を黒でペイントする必要があります。一方、影効果を持つ半透明のピクセルは、部分的なシェード効果と部分的な透明度マスクの両方を持つことになります。言い換えれば、影は、本来単純なペイント&マスク手法を、ペイント効果とマスク効果の分割において厄介にします。これが、影やフレアの星のような半透明の追加を画像に扱う場合に、ペイント&マスク手法が通常使われない理由です。画像に透明性効果が含まれていなければ、ペイントのプロセスはそれほどひどく見えず、多くの場合、終わったらマスクでペイントしたオーバーレイを「切り落とせる」ので、他の手法より単純になり得ます。ページめくりの例はそのようなケースで、マスクを使ってページめくりのオーバーレイを切り詰めてシームレスな全体にしました。また、ペイント画像のハードな黒い領域とシェーディング効果の間の隙間にも注意してください。この隙間は、内側のマスクの結果を、外側のペイント/オーバーレイマスクのエッジと重ねないようにすることについて、私が以前述べた警告を反映しています。この必要な隙間がこれほど明白になるのは、まさにこの特定のケースだけです。「バッジ」の例の次のステップについては、ライティングエフェクトによるバッジを参照してください。これはふたつのマスク画像を単一のマスク/シェーディング画像にマージします。

ライティングマスク手法

ガラスのバブルボタン

サムネイル処理における次のレベルの複雑さは、非常に複雑なライティング効果の適用です。ここでのトリッキーさは、画像へのライティング効果の適用というよりは、適切なシェーディング効果の生成にあります。たとえばAqua 効果を使えば、サムネイルがガラスの「バブル」に包まれているように見せる、非常に複雑なシェーディング効果を与えられます。またこれは、角丸のサムネイルでよりうまく機能します。それではまず、純粋なグレー色を使って、サムネイル画像用の角丸マスクを生成しましょう。 |

  magick thumbnail.gif -alpha off -fill white -colorize 100% \
     -draw 'fill black polygon 0,0 0,15 15,0 fill white circle 15,15 15,0' \
     \( +clone -flip \) -compose Multiply -composite \
     \( +clone -flop \) -compose Multiply -composite \
     -background Gray50 -alpha Shape    thumbnail_mask.png

使いたい純粋なグレーの「形状マスク」ができたので、この形状に対してAqua 効果を適用してライティングオーバーレイを生成できます。 |

  magick thumbnail_mask.png -bordercolor None -border 1x1 \
          -alpha Extract -blur 0x10  -shade 130x30 -alpha On \
          -background gray50 -alpha background -auto-level \
          -function polynomial  3.5,-5.05,2.05,0.3 \
          \( +clone -alpha extract  -blur 0x2 \) \
          -channel RGB -compose multiply -composite \
          +channel +compose -chop 1x1 \
          thumbnail_lighting.png

上記のような最終的なライト/シェードのオーバーレイ画像があれば、ちょうどよいサイズのどんなサムネイル画像にも簡単に適用できます。 |

  magick thumbnail.gif -alpha Set thumbnail_lighting.png \
          \( -clone 0,1 -alpha Opaque -compose Hardlight -composite \) \
          -delete 0 -compose In -composite \
          glass_bubble.png

これは、このサイズのどんなサムネイルにも適切なシェーディング効果を追加するだけでなく、同じライティング画像がサムネイルを適切な形状にマスクします。重要なのは、ライティング効果の適用には色チャンネルだけが使われ、アルファチャンネルはこのプロセスで使われないことに注意することです。同様に、マスクの際にはアルファチャンネルだけが使われ、色チャンネルは使われません。異なる効果のためのこのチャンネルの分離なしには、正しい結果は得られません。画像からライティング効果を抽出することについての議論は、IM ユーザーフォーラムのトピック Extracting light layer from two images を参照してください。
しかしこれは、このライティングマスクに影効果を直接追加することもできるという点で、さらにずっと先まで進められます。ただし追加する色は純粋な黒でなければならず、また、選んだライティング効果の合成が、ライティングマスクが黒なら画像を完全に黒くすることを保証する必要があります。しかしこれは実際には、影効果が通常画像に追加される方法そのものなので、影を「ライティングエフェクトマスク」に直接追加するだけでよく、すべてうまくいきます! 同じことがライティングの「フレア」の追加にも当てはまりますが、フレアのオーバーレイには白いピクセルだけを使います。要するに、「ライティングエフェクト画像」は、ふたつのマスク&ペイント画像を単一の画像に再びマージできるのです。次の例で見ていきます。

ライティングエフェクトによるバッジ

マスク&ペイントによるバッジ手法の画像を使い、それらを純粋なグレーのキャンバス画像に適用して、「マスクされたライティングエフェクト」画像を手早く生成しました。実は、もう一方のスタイルのマスク(ペイント&マスクによるバッジ)を使っても同じくらい簡単でした。それからその単一のマスク画像をサムネイルに適用して、望みの結果を再現します。

  # "マスク&ペイント" 画像をグレー画像とマージして
  # "ライティングマスク" を作る
  magick -size 90x90 xc:gray50 -alpha set \
          badge_mask.png -compose DstIn -composite \
          badge_shading.png -compose Over -composite \
          badge_lighting.png

  # 単一の "ライティングマスク" を適用
  magick thumbnail.gif -alpha set -gravity center -extent 90x90 \
          badge_lighting.png \
          \( -clone 0,1 -alpha Opaque -compose Hardlight -composite \) \
          -delete 0 -compose In -composite \
          badge_final.png

実は私はこの形のマスクがかなり気に入っています。マスク画像自体が、求めている画像とほとんど同じに見え、ただ色が抜けているだけだからです。つまり、それがまさにライティングマスクの作られ方で、効果を完璧なグレー画像に適用するだけで「ライティングマスク」画像が得られます。この特定の手法では、半透明の影が正しく機能するには純粋な黒でなければならないことだけ覚えておいてください。オリジナル画像の一部を少なくとも含まないどのピクセルにも、グレー色を使うことはできません。すべての透明・半透明の領域は、適切なレベルのアルファ透明度を持つ、純粋な白か黒の色でなければなりません。なぜ 1 枚の画像で機能するのか? 以前はふたつの画像が必要でした! その答えは、マスク画像が純粋な黒または白のシェードの色を追加することだけに限定されているからです。そうすることで、シェーディング(ライティング)効果とそのマスクが、本質的に「ライティングエフェクトマスク」の色成分にマージされます。この結果、アルファチャンネルが、最終画像のために以前は別個だった透明度マスクを保持するために自由になります。ただしこれの制限は、画像に白と黒のシェードしか追加できないことです。たとえばマスクされる画像にグレー色を追加することはできません。ただし、ある色空間の原色や二次色のいくつかのティントを限定的に追加することは可能ですが、限られた方法でしかなく、私はそれが使われているのを見たことがありません。要するに、画像に特定の色や凝った縁を追加することはできず、シェードと影、ハイライトとフレア、あるいは単純な黒や白のテキストだけです。ただし、追加した白と黒の効果を混ぜたり重ねたりしようとすべきではありません。ふたつの間の結果のグレーのアンチエイリアスピクセルが、期待されるグレー色ではなく、下にある画像からのシェードされた色を生み出すからです。それがこの手法の欠点です!

歪みによる画像のマスク...

さらに驚くべきことに、シェーディングの色は単なるグレースケール画像なので、ライティング効果を 1 つの色チャンネルとアルファチャンネルのマスクに圧縮できます。これにより、他の画像処理効果のために 2 つの色画像チャンネルを解放できます! つまり、単一の「マスク画像」に他のものを格納できるのです。具体的には、同じマスク画像に歪み効果を追加できます! これについての詳しい情報は、まさにこれを行う統合歪み画像を参照してください。一種の究極のマスク画像です。

エッジ画像を使ったフレーミング

画像に複雑な縁を追加する一般的な方法のひとつは、あらかじめ用意したフレーミング画像を使って、(右に示した)例のようなフレームを作ることです。ただしフレームの生成にも注意が必要です。与えられた例をよく見ると、完全には正しくないことに気づくでしょう。生成されたフレームのシェーディングが実は間違っています。典型的な左上の光源に対して正しくシェーディングされたフレームを作るには、左と下のフレームのエッジを入れ替えるべきです。そのため、始める前にすら、サムネイルや写真をフレーミングする際に各エッジに正しい画像、または正しく修正した画像を使うことの重要性を強調しておきたいと思います。間違えるのは非常に簡単なので、正しくできたと思ったら結果をよく確認してください。

フレームのエッジ画像

画像をフレーミングするのに使える画像にはさまざまなタイプがあります。たとえば、ここに Michael Slate 氏が提供した画像から修正した「金縁飾り付きの細い黒」フレームがあります。

ふたつの異なるライティング効果を提供する 2 枚の画像があり、ひとつは上と左のエッジ用、もうひとつは下と右のエッジ用です。ただし画像の長さ方向に沿った色は変化しません。そのため、必要な長さを作るために、このフレームをタイル状に並べるか、引き伸ばすかのどちらかができます。同様のフレーミングピースのセットが、この「細い装飾的な金」のタイル可能な縁の画像です。

これらの画像には細かいディテールがあるので、望みの長さに単純に画像を引き伸ばすことはできません。また、これらのピースを単純に矩形回転して他方のエッジのピースを作ることもできません。そうすると細かいディテールのシェーディングが間違ってしまうからです。ただし対角転置の歪みなら、他方のエッジに正しいシェーディングを得られるはずです。画像の四辺すべてで、全体のシェーディングと細かいディテールのシェーディングの両方が正しいか確認する際には、特別な注意が勧められます。最後に、フレーミング画像は、この「竹」のタイリングフレーム画像のように、すべてのフレームのエッジを生成するのに使える単一の画像だけで構成されることもあります。

1 枚の画像だけで済む理由は、フレームに特定の「内側」や「外側」がないからです。ただしフレームには全体と細かいディテールの両方のライティング効果があり、他方のエッジのために画像をどう回転/反転/転置するかに再び注意する必要があります。このフレームのより大きな問題は、単純にタイル状に並べると、マクロなディテールが非常に規則的になってしまうことです。そのため、より自然な見た目にするには、タイルのオフセットをランダム化するか、つなぎ合わせるピースの長さすらランダム化する必要があるかもしれません。これについては後で詳しく述べます。ご覧のとおり、フレーミング画像はさまざまなスタイルで提供され、(ライティング画像に関して)欠けている他のエッジ画像を生成する際には、選んだ縁取り画像を正しい方法で扱うよう注意が必要です。

フレーミングピースの延長

さて、これらのフレーミング画像を使う際にはいつも、画像の寸法の長さをカバーするより長いピースを作る必要があります。これを行う基本的な方法は 2 つしかありません。(アスペクト比を保たずに)リサイズを使ってフレーム画像を単純に引き伸ばし、正しい長さを得ることができます。これは内部のディテールがない上記の最初のセットのピースには機能しますが、提示された他のどのフレーミング画像にも適切ではありません。基本的に内部のディテールを歪め、最終画像の見た目の妨げになりかねません。しかしもう一方の延長方法であるタイリングは、繰り返しのパターンやディテールを持つどのフレーミング画像にも使え、これは上で提示したすべての画像に当てはまります。自分でフレーミングピースを作る場合は、タイルが適切に、そしてピクセル境界に揃ってつながり、フレーミング画像で均一な色とディテールの適切な循環が保証されるよう注意してください。そうしないと、タイル間に人工的な見た目のつなぎ目ができ、タイルの繰り返しのために目立ってしまうことがあります。現実世界でも、額装職人はより長いピースを作るためにピースをつなぎ合わせる際に同じ問題を抱えています。基本的に、2 つの異なる色合いの木材や、非常に異なる木目のパターンを得てしまうのは非常に簡単で、それらを「あられ組み」でつなぐと、つなぎ目が非常に目立ってしまいます。ですから、本当にこの問題を抱えているのはあなただけではありません。「竹」のフレーミング画像は、タイル状に並べる必要があります。ただしディテールが画像の小さな領域に限られているので、ピースのランダムな延長と短縮で取り除く必要があるかもしれない、面白いランダムなタイリング効果が得られます。これについては立ち入りませんが、これを試みる方への練習問題として残しておきます。私たちの例では、そしてほぼすべてのフレーミング画像に機能するので、必要なより長いエッジの長さを生成するのに、単純な一定のタイリング方法を使います。

単純すぎる append

上の単純な「竹」フレームを、適切な長さにタイル状に並べてから、画像同士を append(連結) するだけで延長できます。タイリングは、読み込まれる画像をタイル状に並べる特別なタイルキャンバス画像ジェネレーター「[tile:](canvas.html#tile)」によって簡単に行われます。 |

  magick thumbnail.gif \
          \( -size 90x14  tile:bamboo.gif -transpose \) \
          \( -size 90x14  tile:bamboo.gif -transpose \) -swap 0,1 +append \
          \( -size 148x14 tile:bamboo.gif \) \
          \( -size 148x14 tile:bamboo.gif \) -swap 0,1 -append \
          frame_append.gif

上記のふたつの例で使ったサイズは、フレーミング画像の既知の幅(10 ピクセル)と、フレーミングされる画像のサイズ(120x100 ピクセル)に基づいて計算されたことに注意してください。自分の画像に合わせてリサイズの引数を適切に調整する必要があります。(竹のような)フレーミングピースをタイル状に並べることのひとつの問題は、すべてのエッジが互いの正確なコピーのように見えることです! つまり、フレーミングが人工的に見えます。実際には、フレームは現実の木材、この場合は竹のより長いピースから、ほぼランダムなオフセットで切り出されます。これを直すには、画像の各エッジに少し異なるタイルオフセットも与える必要があります。 |

  magick thumbnail.gif \
          \( -size 90x14  -tile-offset +50+0 tile:bamboo.gif -transpose \) \
          \( -size 90x14  -tile-offset +0+0  tile:bamboo.gif -transpose \) \
          -swap 0,1 +append \
          \( -size 148x14 -tile-offset +70+0 tile:bamboo.gif \) \
          \( -size 148x14 -tile-offset +25+0 tile:bamboo.gif \) \
          -swap 0,1 -append       frame_tile_offset.gif

このフレーミングの方法は、この特定のタイプのエッジ画像にはそれほど悪くありませんが、他のタイプのフレームには非常に間抜けに見えることがあります。基本的に角が正しくなく、ほとんどのフレームでは、本物の額縁のように、エッジ画像が 45 度の角度のつなぎ目で合うようにしたいものです。これに対するひとつの解決策は、これをこの画像にオーバーレイして正しくするための適切な角の画像を手作業であらかじめ生成しておくことです。これは(「細い黒」のフレーミング画像のような)単純な引き伸ばし可能なフレーミング画像にはうまく機能しますが、「竹」のようなタイル可能な画像にはかなりひどく失敗します。角の画像がおそらくタイル画像に適切にフィットしないからです。より良い方法は、タイル状に並べたエッジ画像から直接、角のつなぎ目を生成することです。その方法は後で示します。

拡張オーバーレイフレーミング

また、フレームをオリジナル画像の境界を超えて拡張することで、この種のエッジフレーミングをさらに良く見せることもできます。これは「Home-Sweet-Home」タイプの絵によく見られます。これを行うには、まずオリジナル画像を、より長いフレームのピースをオーバーレイするための余分なスペースをたっぷり取って拡大する必要があります。

  magick thumbnail.gif -alpha set -bordercolor none -border 34 \
          \( -size 144x14 -tile-offset +30+0 tile:bamboo.gif -transpose \) \
          -geometry +20+10 -composite \
          \( -size 144x14 -tile-offset +45+0 tile:bamboo.gif -transpose \) \
          -geometry +154+0 -composite \
          \( -size 178x14 -tile-offset +60+0 tile:bamboo.gif \) \
          -geometry +0+20 -composite \
          \( -size 178x14 -tile-offset +0+0  tile:bamboo.gif \) \
          -geometry +10+124 -composite \
          frame_overlaid.gif

この種のフレーミングの測定と位置決めは単純ではなく、上の例で私がハードコードしたようなランダム化を使うとよいかもしれないことに注意してください。また、フレームの長さの端を、適切な追加のシェーディングで丸めることで、見た目をさらに改善できます。この方法で画像をフレーミングするはるかに良い方法は、フレーミング画像を完全なユニットとして生成し、それを固定サイズの画像に単にオーバーレイすることです(シンプルな縁のオーバーレイを参照)。ただしこれを行うと、各フレーミングピースの長さと位置をわずかにランダム化することはもはやできなくなります。

45 度の角の接合

より良い解決策は、フレームの各角に実際に 45 度のつなぎ目を作るような方法で、サムネイルの周りにフレーミング画像を追加することです。これは簡単ではなく、私はフレーム、3D 風の縁という魔法のような演算子を再発見するまで、いくつもの描画とマスクの方法を試しました。 そうして解決策は単純になりました。画像を読み込み、「[-frame](https://imagemagick.org/command-line-options/#frame)」して、フレーミングされる領域のテンプレートを作ります。 |

  magick thumbnail.gif -alpha set -bordercolor none \
          -compose Dst_Out -frame 15x15+15  frame_template.gif

さて、このテンプレートにはいくつか面白い特徴があることに注意してください。第一に、メイン画像が収まる中央が透明です。第二に、フレーミング画像を配置したい各領域を定義する、ちょうど 4 つの異なる色を持ちます。角に、さまざまな色の「アンチエイリアス」ピクセルを生成しません。物事を簡単にするために、これらの領域の幅(15 ピクセル)は、画像に追加するフレーミングピースの幅であることに注意してください。垂直のエッジが水平のエッジと異なる厚みなら、この手法はあまりうまく機能しません。実際、そのような状況ではうまく機能する方法はほとんどありません。この画像がフレーミングのテンプレートで、色塗りプリミティブを使って各フレーミングピースを 4 つの異なる色の領域にタイル状に並べることで、45 度の角のつなぎ目が非常に簡単に得られます。 たとえば... |

  magick frame_template.gif \
          -tile blackthin_top.gif -draw 'color 1,0 floodfill' \
          frame_top_filled.gif

このプロセスを他の 3 つのエッジについても繰り返せます。内部のディテールのハイライトと影が正しいままになるよう、転置を使います。 |

  magick frame_template.gif \
          -tile blackthin_top.gif   -draw 'color 1,0 floodfill' \
          -tile-offset +0+105 -tile blackthin_btm.gif \
                                       -draw 'color 15,105 floodfill' \
          -transpose \
          -tile blackthin_top.gif      -draw 'color 1,0 floodfill' \
          -tile-offset +0+135 -tile blackthin_btm.gif \
                                       -draw 'color 15,135 floodfill' \
          -transpose \
          -gravity center thumbnail.gif -composite frame_filled.gif

IM フォーラムの議論 45 degree frame joints から、下のエッジを事前に回転させるという、より単純な解決策が見つかりました。次は、中間画像を保存するためにインメモリレジスタを使った完全な例です。 |

  magick thumbnail.gif                -write mpr:image    +delete \
          goldthin_top.png             -write mpr:edge_top +delete \
          goldthin_btm.png -rotate 180 -write mpr:edge_btm +delete \
          \
          mpr:image -alpha set -bordercolor none \
          -compose Dst -frame 25x25+25  -compose over \
          \
          -tile mpr:edge_btm \
          -transverse -draw 'color 1,0 floodfill' \
          -transpose  -draw 'color 1,0 floodfill' \
          -tile mpr:edge_top \
          -transverse -draw 'color 1,0 floodfill' \
          -transpose  -draw 'color 1,0 floodfill' \
          \
          mpr:image -gravity center -composite    frame_gold.png

ご覧のとおり、まだ問題があります。タイリングによって生じる対角の鏡像効果のために、左上と右下の角が非常に人工的に見えます。これを直すには、この鏡像効果を取り除くために、ランダム化した「[-tile-offset](https://imagemagick.org/command-line-options/#tile-offset)」を追加する必要があります。 | タイルオフセット設定は、IM バージョン 6.3.9-9 より前は、'X' オフセットが 'X' と 'Y' の両方のオフセット値に使われる(与えられた 'Y' 値は無視される)という点で壊れていました。つまり、古いリリースの IM では、上の例はおそらく下と右のエッジを正しくタイル状に並べません。
---|---
スクリプト版これは最後の例をテンプレートとして書き直す必要がある もちろん上記のすべてを単一のコマンドで行えます。しかしスクリプト化された方法で行いましょう。この版は、いくらかのインラインコードを使い、単純な歪みと、全体の見た目を改善するためのランダム化した画像ロールを使って、提供された基本画像から適切な縁取り画像を生成します。これらは提供された縁取り画像のタイプに応じて調整できます。処理された縁取り画像は、インメモリタイル画像手法を使ってタイル状に並べられ、(生成された)フレームテンプレートが、上でしたようにそれらの画像をマスクするのに使われます。

  image=thumbnail.gif
     image_w=`magick $image -format %w info:`
     image_h=`magick $image -format %h info:`

  top=goldthin_top.png
  btm=goldthin_btm.png

     width=`magick $top -format %h info:`
     length=`magick $top -format %w info:`

  # 新しい画像のサイズ ( BASH の整数演算を使用 )
  new_size=$(($image_w+$width*2))x$(($image_h+$width*2))

  # エッジピース用に「ランダムにロール」した版を読み込む IM オプション
  lft="( $top -roll +$(($RANDOM % $length))+0  -transpose )"
  rht="( $btm -roll +$(($RANDOM % $length))+0  -transpose )"

  # 上下のピースを「ランダムにロール」する IM オプション
  top="( $top -roll +$(($RANDOM % $length))+0 )"
  btm="( $btm -roll +$(($RANDOM % $length))+0 )"

  # 単一の IM コマンドで画像をフレーミング....
  magick -page +$width+$width  $image  +page -alpha set \
    \( +clone -compose Dst -bordercolor none -frame ${width}x$width+$width \
       -fill none -draw "matte 0,0 replace" \
          -flip   -draw "matte 0,0 replace"   -flip \) \
    \( $top $btm -append -background none -splice 0x${image_h}+0+$width \
       -write mpr:horz +delete -size $new_size tile:mpr:horz +size \
       -clone 1  -compose DstOut -composite \) \
    \( $lft $rht +append -background none -splice ${image_w}x0+$width+0 \
       -write mpr:vert +delete -size $new_size tile:mpr:vert +size \
       -clone 1  -compose DstIn -composite \) \
    -delete 1  -compose Over  -mosaic   framed_script.png

そしてこれで、ランダム化したタイリングオフセットを持つ、45 度の角のつなぎ目で完璧にフレーミングされた画像が得られました。はい、複雑な例です。しかしそれは、フレーミング画像を 1 つのコマンドですべて事前処理できるよう、インメモリタイル画像を使えるようにするためです。これはより複雑にしますが、より汎用性も高くします。上記のコードはシェルスクリプトに組み込まれており、(IM Example Scripts ディレクトリから「[frame_edges.tar.gz](../static/img/scripts/frame_edges.tar.gz)」を)ダウンロードできます。この tar ファイルには、スクリプトと、スクリプトが処理して使う方法を理解しているフレーミング画像のセットが含まれています。また、フレームと画像本体の間に「段ボール」の縁も追加します。

将来の例

タイリングするエッジを、対応する角ピースとともに使う。エッジ画像は、あらかじめ用意した角ピースに合致する必要がありますが、画像の固定された長さにわたってきれいにタイル状にも並ぶ必要があります。つまり、エッジのタイルを角ピースに揃えるために、タイル状に並べたエッジ全体にいくらかの引き伸ばしや圧縮が必要になるかもしれません。適切に機能するには、エッジのタイルが画像の最も短いエッジにわたって少なくとも 3 ～ 4 回繰り返される必要があります。この種のタイリングエッジ/角の例は、「葉」や「fleur」効果の縁の実装です。