マニュアル キャンセル

透明ピクセルとマットの使用

  1. Photoshop Elements ユーザーガイド
  2. Photoshop Elements の概要
    1. Photoshop Elements の新機能
    2. 必要システム構成 | Photoshop Elements
    3. ワークスペースの基本
    4. ガイドモード
    5. フォトプロジェクトの作成
  3. ワークスペースと環境
    1. ホーム画面の説明
    2. ワークスペースの基本
    3. ツール
    4. パネルとエリア
    5. ファイルを開く
    6. 定規、グリッド、ガイド
    7. 機能強化されたクイックモード
    8. ファイル情報
    9. プリセットとライブラリ
    10. マルチタッチサポート
    11. スクラッチディスク、プラグインおよびアプリケーションの更新
    12. 操作の取り消し、やり直しおよびキャンセル
    13. 画像の表示
    14. Windows 7 機能の使用
  4. 写真の補正および画質調整
    1. 画像のサイズ変更
    2. 切り抜き
    3. Camera Raw 画像ファイルの処理
    4. ぼかしの追加、色の置き換え、画像領域のコピー
    5. シャドウとライトの補正
    6. 写真のレタッチと修正
    7. 写真をシャープにする
    8. 変形
    9. 自動スマートトーン補正
    10. 再構成
    11. アクションを使用した写真の処理
    12. Photomerge Compose
    13. パノラマの作成
  5. シェイプおよびテキストの追加
    1. テキストの追加
    2. テキストの編集
    3. シェイプの作成
    4. シェイプの編集
    5. ペイントの概要
    6. ペイントツール
    7. ブラシの設定
    8. パターン
    9. 塗りつぶしおよびストローク
    10. グラデーション
    11. 日本語テキストの操作
  6. ガイド付き編集、効果、フィルター
    1. ガイドモード
    2. フィルター
    3. ガイドモード Photomerge 編集
    4. ガイドモード - 基本編集
    5. 色調補正フィルター
    6. 効果
    7. ガイドモード - 楽しい編集
    8. ガイドモード - 特殊編集
    9. アーティスティックフィルター
    10. ガイドモード カラーの編集
    11. ガイドモード - 白黒の編集
    12. ぼかしフィルター
    13. ブラシストロークフィルター
    14. 変形フィルター
    15. その他のフィルター
    16. ノイズフィルター
    17. 描画フィルター
    18. スケッチフィルター
    19. 表現手法フィルター
    20. テクスチャフィルター
  7. カラーの使用
    1. カラーについて
    2. カラーマネジメントの設定
    3. カラーおよび色調補正の基本
    4. カラーの選択
    5. カラー、彩度、色相の補正
    6. カラーバランスの補正
    7. 画像モードとカラーテーブルの使用
    8. カラーと Camera Raw
  8. 選択範囲の使用
    1. Photoshop Elements での選択範囲の指定
    2. 選択範囲の保存
    3. 選択範囲の修正
    4. 選択範囲の移動とコピー
    5. 選択範囲の編集と調整
    6. アンチエイリアスおよびぼかしにより選択範囲のエッジを滑らかにする
  9. レイヤーの使用
    1. レイヤーの作成
    2. レイヤーの編集
    3. レイヤーのコピーとアレンジ
    4. 調整レイヤーと塗りつぶしレイヤー
    5. クリッピングマスク
    6. レイヤーマスク
    7. レイヤースタイル
    8. 不透明度と描画モード
  10. フォトプロジェクトの作成
    1. プロジェクトの基本
    2. フォトプロジェクトの作成
    3. フォトプロジェクトの編集
  11. 写真の保存、プリント、共有
    1. 画像の保存
    2. 写真のプリント
    3. オンラインでの写真の配信
    4. 画像の最適化
    5. JPEG 形式として最適化
    6. Web 画像のディザ
    7. ガイド付き編集 - 配信パネル
    8. Web 画像のプレビュー
    9. 透明ピクセルとマットの使用
    10. GIF や PNG-8 形式として最適化
    11. PNG‑24 として最適化
  12. ショートカットキー
    1. ツールの選択時に使用するキー
    2. オブジェクトの選択時と移動時に使用するキー
    3. レイヤーパネルのショートカットキー
    4. パネルの表示/非表示を切り替えるときに使用するキー(エキスパートモード)
    5. ペイントおよびブラシ使用時のキー
    6. テキスト使用時のキー
    7. ゆがみフィルター使用時のキー
    8. 選択範囲を変形する時のキー
    9. スウォッチパネルのショートカットキー
    10. Camera Raw ダイアログボックス使用時のキー
    11. フィルターギャラリーのショートカットキー
    12. 描画モード使用時のキー
    13. 画像の表示時に使用するキー(エキスパートモード)

Web 画像の透明ピクセルとマット処理

透明ピクセルを使用すると、Web 用に長方形以外の画像を作成できます。GIF および PNG 形式でサポートされる透明な背景を使用すると、画像の透明ピクセルが保持され、画像の透明部分から Web ページの背景が透けて見えるようになります(JPEG 形式は透明部分をサポートしませんが、マットカラーを指定して、元の画像の透明部分の色をシミュレートすることができます)。

透明部分なしの Web ボタン(左)と透明部分ありの Web ボタン(右)

GIF、PNG、JPEG 形式でサポートされる背景マット処理では、Web ページの背景と一致するマットカラーで透明ピクセルを塗りつぶしたりブレンドすることで、透明部分の色をシミュレートします。背景マット処理は、Web ページの背景が単色で、その背景色がわかっているときに効果的です。

最適化した画像で透明な背景や背景マット処理を作成するには、まず透明部分を含む画像を用意する必要があります。透明部分は、新しいレイヤーを作成するときや、背景消しゴムやマジック消しゴムを使用するときに作成できます。

GIF または PNG‑8 ファイルの作業では、透明部分にくっきりとした輪郭(ハードエッジ)を作成することができます。元の画像で透明度が 50 %を超えるすべてのピクセルは最適化した画像では完全な透明ピクセルになり、元の画像で不透明度が 50 %を超えるすべてのピクセルは最適化した画像では完全な不透明ピクセルになります。Web ページの背景色がわからない場合、または Web ページの背景にテクスチャやパターンが含まれている場合は、透明部分にハードエッジを適用します。ただし、ハードエッジを適用すると、画像の縁がギザギザに表示されることがあります。

透明部分にハードエッジを適用していない GIF(左)と適用した GIF(右)

GIF または PNG 画像での透明な背景の保持

GIF および PNG‑8 形式は、1 段階のみの透明ピクセル(完全に透明なピクセルまたは完全に不透明なピクセル)をサポートしますが、半透明なピクセルはサポートしません(これに対して、PNG‑24 形式は複数の段階を持つ透明ピクセルをサポートします。つまり、不透明から完全な透明まで、最大 256 段階の透明ピクセルを画像内で使用できます)。

  1. 透明部分を含む画像を開くか作成し、ファイル/Web 用に保存を選択します。
  2. Web 用に保存ダイアログボックスで、最適化ファイル形式として「GIF」、「PNG‑8」または「PNG‑24」を選択します。
  3. 「透明部分」を選択します。
  4. GIF 形式および PNG‑8 形式の場合は、元の画像の半透明なピクセルの処理方法を指定します。これらのピクセルをマットカラーとブレンドするか、透明部分の輪郭をハードエッジにすることができます。

マット処理した GIF 画像や PNG 画像の作成

画像を表示する Web ページの背景色がわかっているときは、マット機能を使用して、透明ピクセルを Web ページの背景と一致するマットカラーで塗りつぶしたり、ブレンドすることができます。

  1. 透明部分を含む画像を開くか作成し、ファイル/Web 用に保存を選択します。
  2. Web 用に保存ダイアログボックスで、最適化ファイル形式として「GIF」、「PNG‑8」または「PNG‑24」を選択します。
  3. GIF および PNG‑8 形式の場合は、次のいずれかの操作を行います。
    • 完全に透明なピクセルを透明のまま保持し、半透明なピクセルをマットカラーとブレンドするには、「透明部分」を選択します。このオプションは、画像の背景とは異なる Web ページの背景にアンチエイリアスを適用した画像を配置したときに発生するハロー効果を防ぎます。また、透明部分のハードエッジがギザギザになるのを防ぐこともできます。

    • 透明ピクセルをマットカラーで塗りつぶし、半透明なピクセルをマットカラーとブレンドするには、「透明部分」の選択を解除します。

  4. マットメニューからカラーを選択します。
    • スポイトツールカラー(スポイトツールサンプルボックスのカラーを使用する場合)

    • ホワイト、ブラック、その他(カラーピッカーを使用してカラーを選択する場合)

GIF 形式や PNG-8 形式のファイルでのハードエッジ透明部分の作成

Web ページの背景色がわからない場合、または Web ページの背景にテクスチャやパターンが含まれている場合は、透明部分にハードエッジを適用します。ただし、ハードエッジを適用すると、画像の縁がギザギザに表示されることがあります。

  1. 透明部分を含む画像を開くか作成し、ファイル/Web 用に保存を選択します。
  2. Web 用に保存ダイアログボックスで、最適化ファイル形式として「GIF」または「PNG‑8」を選択します。
  3. 「透明部分」を選択します。
  4. マットメニューから「なし」を選択します。

マット処理した JPEG 画像の作成

JPEG 形式は透明部分をサポートしませんが、マットカラーを指定して、元の画像の透明部分の色をシミュレートすることができます。完全に透明なピクセルはマットカラーで塗りつぶされ、半透明なピクセルはマットカラーとブレンドされます。JPEG をマットカラーと一致する背景の Web ページに配置すると、画像が背景とブレンドされたように表示されます。

  1. 透明部分を含む画像を開くか作成し、ファイル/Web 用に保存を選択します。
  2. Web 用に保存ダイアログボックスで、最適化ファイル形式として「JPEG」を選択します。
  3. マットメニューからカラーを選択します。「なし」、「スポイトツールカラー」(スポイトツールサンプルボックスのカラーを使用する場合)または「ホワイト」、「ブラック」、「その他」(カラーピッカーを使用してカラーを選択する場合)から選択できます。

「なし」を選択すると、白がマットカラーとして使用されます。

アドビのロゴ

アカウントにログイン