それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

「操作説明」のために画像の選択範囲を強調する

よく、スクリーンショットを撮るのですが、操作説明のために、赤枠で囲むことも多いです。今回は、関係無い部分をグレイアウトして、強調表示を作るのも以外に分かりやすいです。Appleはこの手法をよく使います。Macのシステム環境設定などでよく見かけます。これを自分でも使うことにしました

操作説明用に、強調する

操作に関係ある部分を明るく、それ以外の部分を暗くする。

(例:強調サンプル)

このように、無関係な箇所を暗くすることで赤枠より説明が分かりやすくなる。こういうのをパパっと作れるとカッコイイですね。

作り方:Imagemagick

今回もMagickのconvert コマンドの力を借りることにします。

元ファイル

(元ファイル)

元ファイルの該当部分の選択範囲を作ります。(これについてはそのうち書く)

まず、強調したい部分を切り取って置いておきます。

convert -crop 419x38+12+219 1.PNG 2.png


(2:操作で協調したい部分)

つぎに、暗くした背景の画像を作ります。

convert -modulate 50,20 1.png 3.png

(3:暗くしたい背景)

最後に、背景に元の明るさの切り取り画像を重ねる。

composite -compose Over -geometry 419x38+12+219  2.png 3.png 4.png

(4:出来上がり)


簡単ですね。

選択範囲の座標を調べるのがちょっと面倒。だけど座標はMacプレビューで簡単に見ることができるし、HTML+Javascriptでも簡単です。

広告を非表示にする