メインコンテンツにスキップ

既存のデザインに透明な背景を適用する(Webアプリ)

C
対応者:Craig Wright
今週アップデートされました

この記事では、既存のデザインの背景を透明な背景に置き換える方法を説明します。この手順はPhotoroomのウェブアプリ版を対象としています。

side by side images. Image 1 shows a product photo of a shoe with an ai background. Image 2 shows the shoe with no background.

ゼロから新しいデザインを作成し、透明な背景が必要な場合は、透明な背景でデザインを作成するの説明を参照してください。

注:iOSまたはAndroidバージョンのPhotoroomを使用している場合は、以下の手順に従ってください:


ウェブアプリの場合

Webアプリでは、デザインの背景を透明な背景に置き換えるには2つの方法があります。このセクションでは、その両方について説明します。

  1. app.photoroom.comのウェブアプリにログインします。

  2. 作業したいスペースを選択します。

  3. 編集したいデザインを選択します。

  4. サイドバーにレイヤーを表示するには、背景領域のオフキャンバスの任意の場所をクリックします。

    Screenshot of a design in the editor on the Web App. Cursor highlights show the areas you can select to display the Layers on the Web App.


    デザイン内の可視背景が背景レイヤーにあり、前景オブジェクトが別のレイヤーにあることを確認します。

    見える背景とオブジェクトが同じレイヤーにある場合、背景の変更が見えなくなります。この問題を解決する方法は、この記事の最後にあるトラブルシューティングのセクションで説明しています。

  5. どちらか:

    • 背景レイヤーを選択して設定を表示し、消去を選択します。背景レイヤーを消去すると、背景を透明にするのと同じ効果があります。

    • テンプレート」を選択し、矢印ボタンで「クラシック」カテゴリのテンプレートをスクロールします。透明テンプレートを選択します。


  6. オプション]前景画像が思い通りにならない場合は、[切り抜き編集]機能を使って編集します。

    使い方については、「切り抜き編集で画像の一部を追加・削除する」を参照してください。

  7. [オプション] 画像内の前景オブジェクトを選択し、希望の位置に移動します。オブジェクトを選択すると、そのレイヤー設定が表示されます。

  8. [オプション] エディタを使用して、テキスト、影、グラフィックの追加など、さらに変更を加えます。

    エディタの設定については、これらのコレクションの記事を参照してください:

  9. [オプション]ダウンロードを選択します。ダウンロードフォルダの名前を入力し、ファイルの種類を選択します(または、Photoroom に適切な種類を選択させるために自動に設定します)。ダウンロードを選択して完了します。

  10. ホーム]を選択してデザインを保存し、エディタを終了します。

    home button is represented by a house icon.


透過背景のトラブルシューティング (ウェブアプリ)

あなたのデザインで透過が機能しない場合、それはあなたのイメージ全体が背景レイヤーを覆うレイヤーで構成されていることが原因である可能性があります。そのため、背景レイヤーを編集しても、変更を確認することができません。

各レイヤーの内容を確認するには?

  1. エディタでデザインを開きます。

  2. オフキャンバスのグレー部分をクリックし、サイドパネルからレイヤーを選択します。

画像全体が1つのレイヤーにある場合はどうしますか?修正方法はありますか?

あります!以下の手順に従ってください:

  1. 画像全体が1つのレイヤーにあるデザインを表示します。

  2. デザインを画像ファイルとしてエクスポートします。

  3. 画像ファイルをインポートします。Photoroomはインポート処理中に背景を削除します。

  4. テンプレートを選択します。

  5. クラシックカテゴリから透明テンプレートを選択します。

これで、1つのレイヤーに前景オブジェクトがあり、別のレイヤーに透明な背景があります。

注:ステップ 3 と 4 の詳細な手順については、透明な背景でデザインを作成するを参照してください。

こちらの回答で解決しましたか?