PhotoshopでWebデザイン

スマートオブジェクト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートオブジェクトの使い方をみていきます。
講師:
07:59

字幕

Photoshop はベクター画像だけではなくピクセル画像もスマートオブジェクトにすることによってサイズの変更をある程度自由にすることができます。ここでは、そのスマートオブジェクトを見ていきたいと思います。「ファイル」>「新規...」でまた適当にサイズを取ります。では、「800×500」としましょうか。このサイズは何でも構いません。自分のモニターの場合このサイズがちょうどいいです。次に「ファイル」>「開く...」でエクササイズファイルからJPEG ファイルを開きましょう。「Chapter 04」の中に入っているred_robot.jpeg を開きます。これは写真です。非常に大きい写真を用意しました。今表示が「33.33%」これ元々のサイズはこんなもんです。これをこの隣のカンパスに移動したいと思います。選択ツールに持ち替えてこのロボットをドラッグアンド名前の所に持っていてカンパスに移動してドロップこんな感じに移動することができます。では、この画像を複製したいと思います。レイヤーを選択してCtrl/Command+J片方は隠しておきます。今見えている方これをスマートオブジェクトに変更したいと思います。 レイヤーの所を右クリックで「スマートオブジェクトに変換」これを選択します。そうするとサムネ ールの右下にスマートオブジェクトを表すアイコンが付きます。今度はこっちを隠しておいて先コピーした普通の方を用意します。これをサイズを変更していきます。ピクセルの方を選択してCtrl/Command+T自由変形をしていきます。ちょっと見難いんですが引くと分かります。こんな感じに自由変形の結わいが入っています。右上をこうキューと引っ張ってサイズを変更してもいいんですが今回は、数字で行きたいと思います。縦をこの比率をキープしたいので真ん中のこの「チェーン」のマークをオンにします。この上で、この H、WWidth と Hight横幅と高さの所をでは、「20%」としましょうか。「20」と入力します。「○」で確認します。では、一旦このレイヤーを隠しておいてスマートオブジェクトの方を選択します。こちらも同様にCtrl/Command+Tサイズの変更を加えます。縦横比を位維持したいのでこのマークをクリックパーセントの所に「20」と同じ倍率を入れてあげます。では、右側に移動してピクセルの方も表示して比べていきたいと思います。 見た目は全く変わらないこともいます。ただ、何か違うかというとこの後、拡大した場合にピクセルの方はもう情報を失っているので拡大できないんですがスマートオブジェクトの方は情報を取ってあるので拡大することができます。どういう意味か見ていきましょう。では、両方を選択してCtrl/Command を押しながら拡大していきます。分かりますでしょうか。ピクセルの方こちらの方はどんどん劣化しています。しかし、スマートオブジェクトの方は全然劣化していません。Enter で一回確定します。これはどういうことなのか。実はこのスマートオブジェクトの方は変形する際に「XXX不明XXX」Ctrl/Command+T今「34.83%」とあります。これは一番最初スマートオブジェクトにした際のサイズから「34.83%」という意味です。要するにスマートオブジェクトにした段階でその状態をキープしています。最初の状態を保存しておいてそこからどれぐらい縮小したかそこからどれぐらい拡大したかという風に扱うことができます。なので、オリジナルの写真のサイズの大きさを超えなければ画像を劣化させることなくサイズの変更が可能です。しかし、一方ピクセルの方はCtrl/Command+T をすると今のサイズからどれぐらい拡大/縮小しますかになってしまいます。 一度小さくして確定して更に拡大しようとすると拡大/縮小することに情報を失っていくのでどんどん画質が劣化していきます。削除しましょう。では、このスマートオブジェクトだけを見ていきます。縮小します。更に、スマートオブジェクトは元々の画像を一つのPhotoshopドキュメントの中に内蔵しています。ちょっと分かり難いですが元々の画像が別の場所に置いてあると思ってください。なので、このアイコンをクリックするとこんな感じに、「別の場所で変更できますよ」というウインドウが出ます。OK を押すと別パレットとして元々の画像は開きます。ファイル名に .psb というテンポラリーのファイルとして開きます。ここで、例えばクライアントから少し画像を治してほしいという要請があったとします。少し汚れが付いている例えば、この傷とかこの傷を治してほしいだとします。軽くこういうブラシで修正するとします。他はこことかですかね。修正した上でこれを Photoshop のドキュメント内で更新したいと思います。そういう場合は、この状態でCtrl/Command+S で保存します。保存をして閉じます。閉じて、元々のこのスマートオブジェクトを配置した方のドキュメントを見るとこんな感じに、傷が治っています。 この様にスマートオブジェクトにすることによってPhotoshop ではレイヤーの情報を変換した時点の状態としてドキュメント内に埋め込むことができます。スマートオブジェクトを効果的に使うことによって画像の劣化を防ぐことができたりワークフローを柔軟にすることができます。しかし、実際に読み込んでいるので欲張って大きすぎるファイルを埋め込むとその分ファイルサイズも大きくなってしまいます。スマートオブジェクトを効果的に使っていきましょう。

PhotoshopでWebデザイン

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

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

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

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

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