【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

WEBデザイン

【Photoshop】レイヤーを上手く使い回そう Vo.1スマートオブジェクト編

どうも僕です、テイクフォー谷口です。
季節もいよいよ秋到来ですね。ただこの時期はまだ昼と夜の寒暖差があるので、体調管理には注意したいものですね。

さて、今回はPhotoshopで作業効率アップのためのレイヤーの上手な使い回し術についてご紹介します。
方法は用途に応じて「スマートオブジェクト」「リンクオブジェクト」の2種類ありますが、これらを2回に分けてお伝えします。
初回はスマートオブジェクトについて書きます。
スマートオブジェクトは、例えば外部から配置した画像が元の画質が崩れることなく拡大・縮小等の変形出来る機能ですが、これが使い回しに利用出来ます。

スマートオブジェクトに変換

このページデザインデータを用いて説明します

ここでは、ページの記事内の見出しの装飾パーツをスマートオブジェクトにします。

見出し装飾パーツのグループレイヤーを選択し、右クリックから「スマートオブジェクトに変換」をクリックします。

するとこのグループレイヤーはスマートオブジェクトとしての一つのレイヤーとなります。
(その際レイヤーのサムネールがスマートオブジェクトサムネールになります。)

スマートオブジェクトの編集

スマートオブジェクト化した装飾パーツを含めた見出しグループレイヤーを複製します。
(後ほどスマートオブジェクトの利便性がわかるように複製させています。)

見出し装飾パーツレイヤーを編集するために、レイヤーのサムネール部分をダブルクリックします。
するとクリックしたスマートオブジェクトの新規ウィンドウが開きますので、ここで編集することが可能になります。

ここでは見出しのテキストの左側にあった青い四角の色を変えたり、グラデーションを加えてみます。

編集が完了したら保存して終了し、ウィンドウを閉じます。
すると先程の編集によって同一のスマートオブジェクトは全て反映されます。

このようにスマートオブジェクト化させることによって編集を加えた際、同じレイヤーは一括で変更されます。
ですので同じパーツが複数存在しても、まとめて編集することが可能です。
いかがでしたでしょうか、次回は「リンクオブジェクト」について説明します。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. WEBデザイン

    【illustrator】簡単トレース方法

    こんにちは!ゆかちんです(^^)/あっという間に寒くなってきましたね。コーヒーが美味しい季節です。グランフロントの中にあるDOWNSTAIRS…

  2. WEBデザイン

    Photoshopで付箋風のデザインを作る方法!!

    おはようございます、ふきちゃんです。私は未経験での入社でして、前職ではイラストレーターを使っていたのですが、Photoshopに未だに慣れず、…

  3. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    どうも、テイクフォー谷口です。先日の3連休は地元の地車祭を観に行ったり、心斎橋一帯のライブハウスを巡るイベントに行ってきました^^さて…

  4. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使い方!

    おはようございます、最近のお気に入りはYogi TeaのSkin DeToxです。ハーブティーですが、効果のほどは不明なので気休めに飲んでます。…

  5. WEBデザイン

    【Photoshop】ボタントレース方法

    こんにちは。ゆかちんです!すっかり寒くなってきましたね。ローソンのMACHIcafeで買ったココアがカップかわいくってほっこりします。入社…

  6. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    どうも僕です、テイクフォー谷口です。先週末は佳境を迎えたプロ野球日本シリーズやサッカーJリーグとスポーツネタで盛り上がってました^^(大阪…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法
  2. WEBデザイン

    【Photoshop】ボタントレース方法
  3. WEBデザイン

    WordPressのバックアップを取ろう!BackWPUpの使い方
  4. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランク…
  5. WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.2リンクオブジェクト編
PAGE TOP