【フォトショ→イラレ】 素材の透明部分を保持する方法

スポンサーリンク
スポンサーリンク
スポンサーリンク

こんなことでお困りですか?

  • Photoshopで背景を透明にしたファイルの出力方法が分からない!
  • Photoshopから出力したファイルの透明部分illustrator上で反映されない!
  • JPEGファイル, PNGファイルの透明部分illustrator上で反映されない!

素材の透明部分の扱い方

イラレ初心者が見がちな光景

 こんにちは。独学でデザインを勉強しているランドゥです。

今回の記事のキーワードは「透明」です。Adobe Photoshop や Illustratorの初心者の方は特に、自分が作成した透明部分がある素材の扱いに困っていませんか?

今回の記事では、Photoshopの選択ツールなどで切り抜いた素材の透明部分や、ダウンロードしたJPEGファイル、PNGファイルの透明部分がデザイン時に正しく反映されるためにチェックしておきたいことを紹介します。

皆さんの「うまくいかない!」がこの記事で解決すればと思います。😃

解決方法をフローで紹介

1. Photoshopから出力する時

新アイコン(2020.3.26~)
ランドゥ
ランドゥ

この記事からアイコンを刷新したので、宣伝も兼ねています。

Photoshopで透明部分がある素材は、このような市松模様で示されます。🙃

PSDファイルで保存が望ましい

ランドゥ
ランドゥ

詳細はあとで説明するけど、Photoshop(PSD)形式での保存が望ましいんだ。

「ファイル」「別名で保存」「保存( PSD形式 )」でやってみて。🙃

PNG, JPEG形式へ出力するなら

ランドゥ
ランドゥ

「ファイル」「書き出し」「書き出し形式…」で出力する場合。

PNG, JPEG形式で保存する場合は画像右に示す「透明部分」チェック!😮

2. illustrator上でファイルを開く時

ここから、Photoshopではなくillustratorの画面に変わります😃。

ランドゥ
ランドゥ

それではillustrator上でさっきのPSD形式のファイルを開いてみるよ。

「ファイル」「(PSDファイルを選択)」「配置」を押してみて。🙃

ランドゥ
ランドゥ

見たかった景色だ!😆「プロパティ」から変形して好きなところに置いたよ。

3. illustrator上にファイルがある時

ランドゥ
ランドゥ

次に、PNG, JPEG形式のファイルを「開いた」場合を説明するよ。

そのままだと、背景は白い部分が残ってしまうんだ。😮

ランドゥ
ランドゥ

「ウィンドウ」「透明」で表示して、開いたファイルの画像を選択。

そのまま、「通常」から「乗算」に設定を変えてみて。🙃

ランドゥ
ランドゥ

おお!背景が透明になった!😆

これはたとえば雲のような、下地が白い箇所で使える方法なんだ。

今回のまとめ

 今日紹介した、素材の透明部分を保持する方法を振り返ると下のようになります。

  • Photoshop上の素材は、PSD形式で保存してillustrator上に配置しよう!
  • PNG, JPEG形式で書き出す場合は、「透明部分」を確認しよう!
  • PNG, JPEGファイルには、illustratorの「乗算」設定を適宜用いよう!
ランドゥ
ランドゥ

この記事が皆さんの問題解決に役立ていばうれしいです😆!

(文責・ランドゥ)

コメント