ELEMENT, INC.

ランディングページ中の画像作成やコラージュ作成の時に、PNG画像の不要な部分を透過させる必要があります。画像の不要な部分を透過させたい時にPhotoshopで簡単に行うことができます。

今回は人物の画像、イラストやアイコンで不要な部分を透過させる方法をご紹介をします。透過する作業をマスターできれば、他の作業でも応用ができるので、是非覚えておきましょう。

人物の背景を透過させる方法

人物を透過させる方法をご紹介します。まずは、背景を透過させたい人物の画像を選択しましょう。画像を開いたら、画像が背景の状態になっていることがあるので、背景からレイヤーに変更しておきましょう。

クイック選択ツールで人物を囲む

選択ツールを選択し、クイック選択ツールを選択しましょう。クイック選択ツールはドラッグして簡単に対象のものを囲むことができます。クイック選択ツールで人物を囲む時に、Shiftボタンを押しながらドラッグすると、複数選択も可能です。

選択ツールで不要な部分を囲んでしまった場合はAlt(Macはoption)を押しながらドラッグすると囲んだ部分を消去することができます。

囲んだ部分の微調整をする

人物をある程度囲むことができたら、人物の囲みを微調整していきます。囲み忘れの確認や髪の毛の囲みの微調整が主になります。

髪の毛の毛先を上手く調整したい時は「境界線の調整」を選択します。「境界線の調整」を選択　をしたら表示モードを白黒にしましょう。

エッジの検出の中のスマート半径にチェックを入れて調整をします。その後、髪の毛の毛先の部分をドラッグして選択します。髪の毛の選択ができたら、「境界線の調整」を閉じます。

選択の反転

人物の囲みができたら、背景を消去したいので、人物以外の背景を選択された状態にします。メニューの選択範囲から「選択範囲」の反転を選択します。選択の反転ができたら、背景を消去しましょう。

人物の背景消去画像の完成

クイック選択ツールを使うことで人物の画像の背景を透過させることができます。

イラストやアイコンなどの背景を透過する方法

次はイラストやアイコンの背景画像を透過させていきましょう。人物に比べて、複雑ではないので比較的簡単です。

マジック消しゴムツールを選択

マジック消しゴムツールは消しゴムツールにあります。消しゴムツールを選択したら、このツールの設定をします。

隣接を選択する

マジック消しゴムツールを使う時は隣接を選択しましょう。隣接を選択していないと、透過させる部分が違ってきます。隣接にチェックを入れていない場合、アイコン内の白い部分まで透過させてしまいます。

イラストの背景を透過させる

アイコンと同様にイラストのキャラクターの背景を透過させることもできます。キャラクターはランディングページ中のデザインでよく使うので、覚えておくとても便利です。

先ほどのクイック選択ツールや消しゴムツールとは少し違った方法で透過をしたいと思います。

画像の選択し、イラストを囲む

まず、背景を透過させたいイラストの画像を選択しましょう。次に選択したいイラストを自動選択ツールかクイック選択ツールで囲みます。

囲んだ部分をコピーし貼り付けをする

イラストを囲むことができたら、コピーをしましょう。上のメニューの編集からコピーを選択するか、ショートカットキーを使いましょう。ショートカットキーはCtrl+C(Macはcommand+C)で簡単にコピーをすることができます。

コピーができたら、貼り付けを行います。上のメニューの編集から貼り付けを選択するか、ショートカットキーのCtrl+C(Macはcommand+C)で貼り付けをすることができます。

簡単にイラスト単体だけの画像が完成

このように元の画像からコピーをすることで作成することもできます。元の画像をそのまま残しておきたい場合はこの方法を使ってみましょう。

まとめ

人物やアイコン、イラストの背景を透過させる方法をマスターすれば、デザインの作成の幅がとても広がります。特にWebデザイン初心者は覚えておきたいスキルの一つです。

実際にPhotoshopで操作をしながら、透過させる方法をマスターしていきましょう。