画像の縁だけ透明度を上げる方法

  • Photoshopで画像の縁だけ透明度を上げるには、どうすればよいですか。?
  • Pixiaで画像の縁だけ透明度を上げるには、どうすればよいですか。?
  • GIMPで画像の縁だけ透明度を上げるには、どうすればよいですか。?

 ? Photoshopで画像の縁だけ透明度を上げるには、どうすればよいですか。

1. こんな元画像があったとして。

2. [自動選択ツール] を選んで。

3. 対象の絵全体を選択する。
外部を選択しておいて反転しても良いですし、 内部を少しずつ [SHIFT] + [左クリック] して領域拡大していくのでも良いです。

4. [選択範囲] - [境界をぼかす] をクリックします。 半径は 1pixel と設定します。


5. 画面では何の変化もないように見えますが、 [CTRL] + ドラッグ してみると、 このようにうっすらと半透明のぼかしが入っていることが分かります。 これを確認したら、再度 [CTRL] + ドラッグ して、 元の位置に戻します。 (ウチのCSでは、 この操作をしないとちゃんとぼかしが入らないようです・・。 [CTRL]-[Z]で戻すと意味無しなので気をつけて。)
元の位置に戻したら、 後はそのままPNG-24で保存すれば完成です。

最終更新: 2006.6.30

 ? Pixiaで画像の縁だけ透明度を上げるには、どうすればよいですか。

Pixiaには標準で「境界をぼかす」機能がないっぽい(?)ので、 Q&A筆者は以下のような感じでやってます。 (かなり自己流、かつ面倒な手順だと思いますので、 「このフィルタを使えば一発だ」など、 良いやり方があれば是非ご紹介ください。)

やり方の大雑把な流れを説明すると、

  1. まず、境界部分と、 それ以外の部分(境界を除いた、画像の中身の部分)とに分離して、 それぞれをレイヤ化する。
  2. 境界部分の抽出ができたら、そこに透明度を付加する。
  3. 最後に再び境界とそれ以外の部分を合成して、PNGで保存する。

となります。 (1.〜2.の代わりに、 透明色プレーンに手でひたすら透明度をポチポチ設定していく手もありますが、 これはこれで気合いが必要です)

まず、事前準備として、イラストは透明色背景の上に乗せておいてください。 つまり、全透明な背景と、不透明なイラスト、という見え方になります。 また、あらかじめ透明色プレーンの追加?を行っておいてください。

ここまでの作業を行った状態が下の1.の図となります。

1. こんな元画像があったとして。
(透明表示色は緑色にしています。 また、わざとジャギーつきの画像にしています。 なお透過色プレーンの追加?などの操作説明はここでは省きます。 必要に応じてリンクを参照ください。)


2. [領域]-閉領域、のアイコンをクリックしてから、 絵の外側(緑色の部分)をクリックします。 すると、絵の外側部分(境界抜き)が閉領域として選択されます。
なお、うまく外側だけが選ばれない場合(外側以外も閉領域指定されてしまう場合)は、閉領域選択のオプションの「範囲」の値を調節するとか、[SHIFT]を押しながら閉領域アイコンをクリックして閉領域を追加するとかするなど、 うまく対処してください。



3. [領域] メニューの、[領域を太らせる] を実行します。 度合いは1で。
これで、境界部分が1pixel分だけ、閉領域に追加されます。

4. [領域] メニューの、[領域のレイヤ化] を実行します。
境界1pixel分(とその外部)が、 LAYER1として別レイヤ化されます。

5. [領域] メニューの、[領域の反転] を実行します。
これで、1pixel境界を削った残りの内部が、 閉領域選択されます。

6. 再び、[領域] メニューの [領域のレイヤ化] を実行します。
境界を除いた画像内部が、LAYER2として別レイヤ化されます。
LAYER1とLAYER2を重ねると、 LAYER0の画像になります。

7. ここから、LAYER1(境界部分だけ抽出したレイヤ)に対して透明度を上げる処理を加えていきます。
まず、準備として、LAYER1と2それぞれに対し、透明色プレーンを追加します。?


8. 元のレイヤ(LAYER0)と、LAYER2を引っ込めて、 LAYER1(境界+外側)のみ表示するようにします。


9. その(LAYER1の)透過色プレーンを表示します。



10. 一旦領域解除した後、LAYER1の透過色プレーンを白80で塗り潰します。(最大値が100の場合。最大値255の場合は205。以下略)
これで、境界部分の透明度が上がります。 ただし、縁だけでなく、 縁の外側の透明度をも変えたままですので、 ここから外側の透明度を元に戻します。 また、若干縁を透明色と馴染ませる処理をします。


11. 作業対象をLAYER0の画像に戻し (LAYER1,2を引っ込め、LAYER0を前に出す)、 再度絵の外側を閉領域選択します。
(再度、絵の境界直前までが閉領域選択されます。)


12. LAYER1の画像プレーンを作業対象にします。



13.[領域] メニューの [領域の外側をぼかす] を実行します。 ぼかす度合いは1にして、濃度でぼかす、を選択します。
これで、境界線と透明色とが微妙に混ざって馴染みます。


14. 先ほどの10.で、 境界だけでなく周囲の部分も透明度80になってしまっているので、 周囲だけ透明度100に戻します。
具体的には、ステップ11.で選択した閉領域(境界の外側)指定がまだ残っているはずなので、そのままLAYER2の透明色プレーンを真っ白で塗りつぶすだけです。
ここまでで、境界だけ透明度を上げた絵が完成しました。 後はPNGに保存するだけです。


15. LAYER0は引っ込めたままで、 LAYER1と2を表示します。


16.「編集」ボタンを押して、「レイヤの結合」を実行します。?「非表示レイヤを破棄して新規ウインドウ」と、 「透明色も結合する」を選択してください。
これで、左の図ができあがりました。 最初の図(右)と比較して、境界部分に透明度が付加され、 背景に馴染んだことが分かります。
あとは、背景色を白にして?透明色保存設定でPNG保存すれば?作業完了です。

最終更新: 2006.6.29

 ? GIMPで画像の縁だけ透明度を上げるには、どうすればよいですか。

1. こんな元画像があったとして。

2. [隣接(色)領域の選択] を選んで。

3. 対象の絵全体を選択する。
外部を選択しておいて反転しても良いですし、 内部を少しずつ [SHIFT] + [左クリック] して領域拡大していくのでも良いです。


4. [選択] - [境界をぼかす] をクリックします。 ぼかす量は 5ピクセルとしました。 すると・・


5. 画面では何の変化もないように見えますが、 選択領域をドラッグ してみると、 このようにうっすらと半透明のぼかしが入っていることが分かります。 これを確認したら、再度ドラッグして、 元の位置に戻します。 (この操作をしないとちゃんとぼかしが入らないようです・・ [CTRL]-[Z]で戻すと意味なしなので気をつけて。)
元の位置に戻したら、 後はそのままPNGで保存すれば完成です。 (「透明ピクセルの入りの値を保存」するのをお忘れ無く。)

最終更新: 2006.7.1

DTXMania Q&A - BGAの作り方(透過画像篇)