PhotoshopでWebデザイン

透明部分を含んだ画像の取り扱い

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
半透明な部分を含んだ画像の書き出し方をみていきます。
講師:
03:19

字幕

では、透明な部分を含んだ画像の書き出しについて、見ていきたいと思います。このバナー右下にドロップシャドウがあります。このドロップシャドウを生かしながら書き出したいと思います。背景と別れてます。このドロップシャドウ込みでこの背景なしで書き出してあげればどんな背景のウェブサイトにも載せることもできますよね。いま、この状態で書き出すとこのバックグラウンドは白が残ったままこの背景は白で書き出されてしまいます。それはよろしくないのでバックグラウンドを削除します。次にですねこの上と左側余白があるので「切り抜きツール」で切っても全然構わないんですがきれいに切れる自信がありません。もっと簡単な方法があります。「イメージ」>「トリミング...」これをクリックします。そうすると、「透明ピクセル」というオプションがあります。これで OK を押してあげると完全に透明なピクセルを全部こう切り抜いてくれます。きれいにこのドロップシャドウの半透明部分は残してくれます。では書き出します。「ファイル」>「Web 用に保存...」いまは多分JPEG になっているかと思います。これを PNG-24 に切り替えます。これが透明が扱えるファイルフォーマットですね。 その下「透明部分」にチェックを入れます。チェックが入っている場合はもう大丈夫です。これにチェック入れないとこんな感じに白くなってしまいます。背景ですね。チェック入れてあげると半透明が扱えます。「sRGB に変換」にアンチェックチェックが入ってない事を確認します。「プレビュー:モニターカラー」このまま「保存...」を押します。どこでもいいんですがでは、今回は「書類」に保存しましょうか。「保存」と。こうしておいてあげればこの背景がきれいに扱うことができます。例えば、新規作成で適当にドキュメントを作ります。なんかよくわかんないんだけどこんな感じのドキュメントがあるとします。この上に先ほど書き出したロボットを載せたいと思います。Command/Ctrl+O で「開く」「書類」からtransparent_bot.pngを開いてあげます。これをいまの無題の背景にのっけてあげます。そうするとこんな感じに、きれいにドロップシャドウが付いてきてますよね、半透明で。この背景色をどんな色に変えたとしてもきれいにドロップシャドウが扱えています。こんな感じですね。きれいに半透明なイメージをキープしたまま保存することができました。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。