グラデーション付き透過画像の作り方

  • グラデーション付き透過画像をPhotoshopで作るには、どうすればよいですか。?
  • グラデーション付き透過画像をPhotoshop Elementsで作るには、どうすればよいですか。?
  • グラデーション付き透過画像をPixiaで作るには、どうすればよいですか。?
  • グラデーション付き透過画像をGIMPで作るには、どうすればよいですか。?

 ? グラデーション付き透過画像をPhotoshopで作るには、 どうすればよいですか。

Photoshop CSでは下記の手順でOKです。 しかし、 Elementsだとマスク機能が貧弱なんでこのやり方はできません。 Elementsレベルでも可能な良いやり方があれば教えてください。 Elementsの場合は別の方法で同じようなことができます。?

なお、フリーソフトのGIMPでもほとんど同じ手順で?同じことができます。

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

2. レイヤーパレットで元画像のレイヤーを選んでおいて、をクリックします。 すると・・

3. レイヤーマスクが追加されます。 ここで、レイヤーマスクサムネールを [Alt] + 左クリックすると・・・

4. 元画像の表示が、レイヤーマスク編集画面に変わります。
レイヤーマスク編集画面とは、 レイヤー上の不要な部分を覆い隠す(マスクする/見えなくする)ために使用するもので、 白が全く隠さない、黒が完全に隠す、 灰色が微妙に隠す(笑)となります。

5. そこで、ツールパレットからグラデーションツールを選んで・・ (注: 横のメニュー表示のためには長押しが必要)

6. 中央付近から下の方にドラッグして離すと・・

7. このように、マスクにグラデーションがかかります。 つまり、「徐々に下に行くほどマスクがかかる(隠される)」 ことになります。

8. ここで、もう一度レイヤーマスクサムネールを [Alt] + 左クリックして、 通常のモードに戻すと・・

9. このように、マスクが透明度に換算されます。 つまり、見えなくする部分=透明な部分、になります。
これで完成です。

最終更新: 2006.6.20

 ? グラデーション付き透過画像をPhotoshop Elementsで作るには、 どうすればよいですか。

「ElementsでもOK!だんだん透明になるフォトショ画像の作り方」を参考にして、下記のように手順をまとめることができました。(Q&A担当者手持ちの Photoshop Elements 3.0 での手順となりますが、それ以外のバージョンのものでもほとんど同じ手順となるかと思います。)有用な記事を掲載いただいたことについて、この場を借りて御礼申し上げます。

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

2. まず、レイヤーパレットでをクリックして、透明のレイヤーを追加します。

3. 次に、グラデーションツールを選び、[編集]をクリックしてグラデーションの種類を選択します。

4. 「描画色から透明に」のグラデーションを選択します。

5. 「描画色から透明に」のグラデーションを選択したら、一番上の透明レイヤー上で、下から上にグラデーションを描きます。

6. 透明レイヤー上にグラデーションが描かれているのを確認して、レイヤーパレットにてその透明レイヤーを[CTRL]を押しながら左クリックします。すると、グラデーション塗りの部分の選択範囲が作成されます。

7. このとき、描画領域ではこのように色の濃い部分が選択されているはずです。(この図では、描画領域の下部1/3くらいが選択されています。見にくいですけれど・・。)

8. ここまでの確認ができたら、レイヤーパレットで元画像のレイヤーを選択して、[Delete]を押します。すると、元画像から「グラデーションを加味した」削除が為されます。

9. このとき、描画領域ではこんな感じです。7.の図と違って、透明度が入っていますね。

10. 最後に、最初のグラデーションの作成に使ったレイヤーを不可視にします。(削除してもOKです)

11. これで完成です。(この図では6.での選択領域がまだ残っていますが、もちろんこの選択はもう解除すればよいです。)

最終更新: 2009.9.24

 ? グラデーション付き透過画像をPixiaで作るには、 どうすればよいですか。

以下のような感じでしょうか?

1. こんな元画像があったとして。
(透明表示色は緑色にしています。 なお透過色プレーンの追加などの操作説明はここでは省きます。 必要ならこちらをどうぞ。?)

2. 透過色のプレーンを選択します。 これで、画像表示が透過色プレーンのそれになります。

3. そのときの画像表示は、こんな感じです。

4. 次に、この透過色プレーンに、グラデーションを描画します。 (このグラデーションが、そのまま透明度になります。)
PパネルのGをクリックしてください。 グラデーションの 白黒格子のアイコンをクリックして、 長方形グラデーションを選択します。 4隅の内、上2つを黒に、下2つを白にします。

5. そして、「塗りつぶし」のアイコンをクリックすると、 透過色プレーンにグラデーションが描画されます。

6. 透過色プレーンをグラデーションで塗りつぶした時の表示は、 こんな感じです。

7. プレーンの表示を「画像」に戻すと、こんな感じです。
後は、透明表示色を白に戻して、レイヤ統合を行って、PNG保存?すればOKです。

最終更新: 2006.6.25

 ? グラデーション付き透過画像をGIMPで作るには、 どうすればよいですか。

以下のような感じで作るのが一番楽だと思います。

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

2. レイヤーパレットで元画像のレイヤーを選んでおいて、 右クリックメニューから「レイヤーマスクを追加」を選択します。すると・・

3. Photoshopとは違い、 レイヤーマスクの設定画面が出てきます。 特に何も変更せずにOKでかまいません。

4. レイヤーマスクが追加されます。 ここで、レイヤーマスクサムネールを [Alt] + 左クリックすると・・・

5. 元画像の表示が、レイヤーマスク編集画面に変わります。
レイヤーマスク編集画面とは、 レイヤー上の不要な部分を覆い隠す(マスクする)ために使用するもので、 白が全く隠さない、黒が完全に隠す、 灰色が微妙に隠す(笑)となります。

6. そこで、ツールパレットからグラデーションツールを選んで・・

7. 中央付近から下の方にドラッグして離すと・・

8. このように、マスクにグラデーションがかかります。 つまり、「徐々に下に行くほどマスクがかかる(隠される)」 ことになります。

9. ここで、もう一度レイヤーマスクサムネールを [Alt] + 左クリックして、 通常のモードに戻すと・・

10. このように、マスクが透明度に換算されます。 つまり、見えなくする部分=透明な部分、になります。
これで完成です。

最終更新: 2006.6.20

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