葛飾区ホームページ制作

WordPress無料テンプレート

Movable Type無料テンプレート

HTML5+CSS 無料テンプレート

イラストを切り抜き背景を透明にしたgif(透過gif )でかき出す

フォトショップCC イラストを切り抜き背景を透明にしたgifでかき出す方法を説明します。


フォトショップで加工したイラストを書き出す場合、背景を透明にしたほうが汎用性が増します。


背景を透明にしたgifを「透過gif」といいますが、フォトショップでは簡単に「透過gif」を作成することができます。

フォトショップCC イラストを切り抜き背景を透明にしたgifでかき出す
リボンのイラストがあります。

選択範囲を作成して切り抜きを行いますが、背景が白一色なので、「背景消しゴムツール」で背景色の白を消して切り抜きします。

フォトショ 背景消しゴムツール
ツールパネルのアイコンをクリックして「背景消しゴムツール」に切り替えます。

背景消しゴムツール ブラシサイズ、許容値、隣接
オプションバーで設定を行います。
ブラシサイズ「221」
制限「隣接」
許容値「21%」

背景の確認 塗りつぶしレイヤーの作成
レイヤーを新規に作成して、適当な色で塗りつぶします。

レイヤーを最背面(一番下)に移動します。

背景消しゴムツールでイラストの背景を消していく
「背景消しゴムツール」でイラストの背景を消していきます。

背景消しゴムツール 画像を拡大して背景を消す
細かい箇所は拡大します。

ブラシサイズを変更しながら、消し残しがないように作業を行います。

photoshop背景が消去されました
背景を消去しました。

透過gifの書き出し Web用に保存
最背面の塗りつぶしレイヤーを非表示にします。

メニューバーの「ファイル」→「書き出し」→「Web用に保存」を選択します。

透過gif Web用に保存 透明部分にチェック、マット「なし」
「Web用に保存」ダイアログボックスが表示されます。

「GIF」を選び、「透明部分」にチェックをいれます。

マット「なし」を選択して、「保存」ボタンをクリックします。

「ファイル名」を付けて「保存」をクリックします。

透過gifの書き出し gifファイルが作成されました
背景を透明化したgifファイルが作成されます。

透過gif 背景が透明なので背景色を変えてもなじむ
背景が透明なので、背景色を白以外の色に変えてもなじんでいます。

CopyRight 2010-2017 JUNK-WORD.COM(ジャンクワードドットコム) All rights reserved.