WEBデザイン

Affinity Photo & Affinity Designerで背景を透明にする方法

動画素材やサムネイルの合成素材として背景を透過させたいんだけど、Affinity DesignerやAffinity Photoを使って背景を透過させる方法を教えて欲しい!

結論から言うと『透過PNG』の設定をする事で背景を透過させる事が出来ます。

それでは、以下で詳しく説明していきます。

 

本記事はこんな方におすすめ

Affinity Designer & Affinity Photoを使って背景を透過させた画像を作りたい人向け

 

当記事を書いている人は?

2015年2月23日にmac版のAffinity Designerと出会ってからAffinityシリーズを使い続けているAffinity愛好家。

 

Affinity Designerで背景を透過させる方法

Affinity Designerで背景を透過させるには2通りの方法があります。

  • 新規で作る場合
  • 作っている物を透過させる場合

それでは、順番に説明します。

 

新規で作る場合

affinity designer

新規で作る場合、Affinity Designerを開くと右下に『新規ドキュメント』と言うボタンが表示されているので、こちらをクリック

 

affinity designer

レイアウトやカラー、マージンの設定が出てくるので、カラーの中の『透明な背景』にチェックを入れます。

 

affinity designer

するとこのようなチェック柄の背景が表示されます。

チェック柄の背景になっている部分が透過されるので、透過させたい部分がチェック柄になっているかどうか確認しておきます。

 

affinity designer

透過PNGとして出力する時にはツールバーの『ファイル→エクスポート

 

affinity designer

エクスポートの設定でPNGタブに切り替えて書き出しで背景が透過されたPNG画像が出力されます。

ここで間違ってJPGにしてしまうと背景が透過されないので要注意です。

 

作ってある物を透過させる場合

もうデザインを作ってしまった後なんだけど、後から背景を透過する事って出来るの?

この場合にはドキュメント設定を変更すればOK!

 

affinity designer

ツールバーのファイルから『ドキュメント設定』をクリック。

 

affinity designer

ドキュメント設定から『カラー→透明な背景にチェック』これでOKボタンを押せば背景の透過設定が完了です。

背景の透過を止めたい、戻したいって時には『カラー→透明な背景にチェックを外す』これで背景の透過が無くなって白背景に変更が出来ます。

 

Affinity Photoで背景を透過させる方法

Affiniti Photoで背景を透過させる方法は2通りあります。

  • 新規で作る場合
  • 作っている物を透過させる場合

それでは、順番に説明します。

 

新規で作る場合

affinity photo

Affinity Photoを起動すると上のような画面が開くので、『新規ドキュメント』をクリック。

 

affinity photo

新規ドキュメント設定画面の右側、『カラー→透明な背景にチェック

 

affinity photo

するとチェック柄の背景が表示されますね。

チェック柄になっている部分が背景として透過されて表示されます。

 

affinity photo

透過PNGとして出力する時には『ツールバーのファイル→エクスポート

 

affinity photo

エクスポートの設定→PNGタブ』これでエクスポートする事によって背景が透過された画像を作る事が出来ます。

JPGで保存してしまうと背景が透過されずに白背景になってしまうので注意が必要です。

 

作ってある物を透過させる場合

affinity photo

すでにデザインとして作ってしまっている場合には『ツールバーのドキュメント→透明な背景にチェック』で後からでも背景を透明にする事が出来ます。

 

写真を切り抜いて背景を透過させたいんだけど、どうすればいいの?

調整の新規レイヤを使う事で切り抜いた画像の背景を透過させる事が出来ます。

 

今回はサンプルとして苺の背景を透過させますね。

 

affinity photo

選択ブラシで残したい部分を選択します。

 

affinity photo

上の方にある『調整ボタン』をクリックすると透過したい背景が赤くなります。

選択範囲の調整の出力を『新規レイヤ』に変更して適用。

 

affinity photo

これで写真の背景を透過させる事が出来ました。

あとはPNGに出力すれば動画素材やサムネイル素材として使う事ができます。

 

ipad版のAffinity DesingerとAffinity Photoの背景を透過させる方法

ipad版のAffinity DesignerとAffinity Photoは背景を透過させる方法が同じなので、今回はAffinity Designerをベースに背景の透過方法を説明します。

 

affinity designer

アプリを開いて左上にある『新規ドキュメント』を選択

 

affinity designer

ドキュメント設定のオプション『透明な背景』を選択してドキュメントを作ると背景が透過されます。

 

デザインを作り始めた後に「やっぱ透明な背景止めたいなぁ」って時には、左上にあるファイルアイコンをクリック、真ん中よりちょっと下あたりにある『キャンバス→透明なキャンバス』を押す事で背景を透明にしたり白背景にしたりと切り替える事が出来ます。

 

Affinity DesingerとAffinity Photoの背景を透過させる方法まとめ

Affinity DesignerとAffinity Photoで背景を透過させるには『ドキュメント設定』で切り替える事が出来ます。

PC版では『ドキュメント設定→透明な背景』、ipad版では『ファイルアイコン→キャンバス→透明なキャンバス

背景を透明化させたい時には、本記事で紹介したやり方を試してみてください。

 

上記の方法でもうまくいかないって時には、PIXTAからダウンロード出来るような背景が透過されてる素材を使ってみるのも一つの手ですよ。

 

UdemyでAffinityシリーズが学べるようになった!?

Affinityシリーズは日本ではあまり有名では無いため、情報を集めるのが難しいと思います。

そんな中、日本語でAffinity PhotoやAffinity Designerの使い方を動画で説明されている方を見つけました。

Affinityの使い方に苦戦してる時には、こちらも参考にしてみてください。

 

初心者向けにバナー作り方を記事としてまとめましたので、バナー作りに困った時に活用してみてください。

初心者デザイナー必見!ネットショップで使えるバナー作成徹底解説まとめ

デザイン
ネットショップ用バナーの作り方!現役ネットショップオーナー直伝!

バナーを作らないといけないけどデザインセンスが無さすぎてバナーが作れない。どこから手を出せばいいの? バナー作成にデザインセンスは不要!作り方さえ知っていれば当てはめるだけで作る事が出来ます。 本記事 ...

続きを見る

  • この記事を書いた人
  • 最新記事

井川 裕輝

ネットショップ総合管理職3年の経験を経て独立、現在は法人代表。小規模低予算少人数でのネットショップ立ち上げ経験が最も多い。

-WEBデザイン
-

© 2021 ネットショップ運営情報ブログ『WellMaga』