【Photoshop入門】Webデザインをはじめよう！第4回 ロゴを配置して、背景パーツを作成しよう
PhotoshopでWebデザインをはじめよう！
文字を配置したあとは、オブジェクトを作成したり配置したりして、デザインの作り込みをしていきます。本記事では、Photoshopで扱えるオブジェクトの特徴、シェイプを使ったデザインパーツの作り方、ロゴデータ（Illustratorファイル）の読み込み方法について解説します。
Photoshopで扱える画像（オブジェクト）の種類と名称
「第3回 Webデザインに文字を配置しよう」でデザインベースに文字を配置しました。今回は、ロゴ画像を配置したり、シェイプで見出しの背景パーツを作成するなど、Webデザインの作り込みをしていきます。
作業の前に、Photoshopで扱える画像の種類について説明しておきましょう。Photoshopでは、画像のことを「オブジェクト」と呼びます。オブジェクトの種類やそれぞれの特徴を理解しておけば、修正に強くて綺麗なデータを作ることができますし、他の人が作ったPhotoshopデータを修正するのも怖くありません。
次の図は、Photoshopで扱える画像（オブジェクト）の種類と、Photoshopでの名称をまとめたものです。
シェイプとピクセル
画像は、大きく2つの形式に分けることができます。
- ベクター形式 点と線の数値から描画した画像
- ラスター形式 ピクセルの集合で構成された画像
第2回「シェイプを駆使してデザインのベースを作ろう」で、デザインベースを作成するのに使用したシェイプはベクター形式に相当します。
一般的な写真やイラストなど、jpg、gif、pngなどの拡張子が付いた画像は、Photoshopで普通に開くとピクセルとして表示されます。
スマートオブジェクト
シェイプとピクセルは、「スマートオブジェクト」というオブジェクトに変換できます。スマートオブジェクトに変換すると、拡大縮小を繰り返しても、データが劣化しないというメリットがあります。このスマートオブジェクトは、変更修正や更新が多いWebデザインでは積極的に活用していきたい機能です。まずは、この図の関係を覚えておいてください。
ベクトルスマートオブジェクト
図には、もう1つ「ベクトルスマートオブジェクト」というオブジェクトがあります。ベクトルスマートオブジェクトとは、配置、あるいはコピペで持ってきたIllustratorデータのことで、スマートオブジェクトの一種です。
ベクター形式は本来、Illustratorが得意とする領域です。複雑なベクターデータはIllustratorで作成し、ベクトルスマートオブジェクトとしてPhotoshop内に配置するといいでしょう。ベクトルスマートオブジェクトであれば、Illustratorとの連携が簡単になります。修正が発生しても、PhotoshopからIllustratorを起動でき、Illustratorで修正すると、その修正内容がPhotoshop上のデータに反映されます。
一方で「簡単な図形を描くのに、いちいちIllustratorを使うのは面倒」という声ももっともです。簡単な図形はPhotoshopのシェイプで作成し、少し複雑なものはベクトルスマートオブジェクトを活用して、Illustratorの力を借りていきましょう。
※Illustratorがインストールされていない場合は、Creative Cloudのコントロールパネルからダウンロードしてください。
それでは、シェイプで見出しの背景パーツを作成したり、ロゴ画像を配置したりしてみましょう。サンプルファイルのphotoshop-web-design-04before.psdを開いてください。これは、第3回「Webデザインに文字を配置しよう」で作成した、デザインベースに文字を配置した状態のものです。
シェイプで見出しの背景パーツを作成する
サンプルの右カラムにある見出し（「診療時間」や「電話相談」）の背景パーツを作りましょう。背景パーツは、上側のみ角丸にした、タブのようなデザインにします。
見出しの背景エリア（幅250px）の両端にガイドを引き、いったん［レイヤー］パネルで文字を非表示にしておきます。
［ツール］パネルで［角丸長方形ツール］を選択し、ツールオプションバーで色や線種を選び、［角丸の半径］に数値を入力し、クリック＆ドラッグで長方形を描きます。角が丸い長方形を描けました。
Photoshop CCからは、［属性］パネルに［ライブジェイプの属性］機能が加わり、シェイプのサイズのほか、角丸長方形の四角のアールを自由に調整できるようになりました。ここでは［角丸の半径値のリンク］のチェックを外して、上側2つの角を10px、下側2つの角を0pxとすることでタブのようなデザインを作ります。数値を入力し、return（enter）キーを押すと反映されます。
再度調整したい時は、［パスコンポーネント選択ツール］や［パス選択ツール］で該当するシェイプを選び、［属性］パネルで調整します。
右カラムの見出しの背景パーツができました。［レイヤー］パネルで文字を表示させて、第3回で入力した右カラムの文字（営業時間や電話番号など）の見た目について、見出しの背景パーツとのバランスを見ながら調整します。
シェイプの作成に使えるツールは、次の図のように［ペンツール］［長方形ツール］［パスコンポーネントツール］など色々あります。簡単な図形であれば、シェイプで作成するといいでしょう。
ロゴやアイコンを配置し、編集する
ヘッダーにロゴを配置する
続いて、ヘッダーに企業ロゴを配置します。企業ロゴは、Web以外にも印刷物など、様々な用途に様々なサイズで使用されることが多いので、一般的にIllustratorファイルとして作られています。
サンプルでは「クリニックロゴ.ai」というファイル名で、ロゴデータを用意しています。これをヘッダーに配置してみましょう。［ファイル］メニュー→［埋め込みを配置］を選択し、ファイルの一覧から「クリニックロゴ.ai」を選択し［配置］をクリックします。
※Photoshop CC 14.1以前のメニューでは［配置］となっています。
［スマートオブジェクトとして開く］ダイアログボックスが開くので、設定はそのままに［OK］をクリックします。
ベクトルスマートオブジェクトとして、ロゴが配置されました。Shiftキーを押しながらドラッグして、縦横比を保持しつつ、ヘッダーに収まるようにサイズを調整します。ロゴはベクターデータなので、拡大縮小しても輪郭がぼやけません。
位置とサイズが決まったら、return（enter）キーを押します。キーを押さずに、別のツールを選ぶなどの操作をすると、確認のダイアログボックスが表示されるので［配置］をクリックします。
ベクトルスマートオブジェクトを配置すると、レイヤーがスマートオブジェクトのアイコンになります。
見出しの前にアイコンを配置し、編集する
サンプルの左カラムの見出し（「クリニックからのお知らせ」と「当クリニックについて」）の前に、イルカのアイコンを配置します。サンプルでは「クリニックアイコン.ai」というファイル名で、アイコンデータを用意しています。
ロゴと同様に配置し、位置とサイズを調整します。アイコンは2箇所に配置するので、［レイヤー］パネルでレイヤーをコピーして、アイコンを複製します。このように複製したオブジェクトを「インスタンス」と呼びます。
アイコンをこのまま使うのではなく、白抜きに修正したいと思います。ベクトルスマートオブジェクトのレイヤーをダブルクリックすると、Illustratorが起動し、色や形などを編集できます。
また、スマートオブジェクトには、どれか1つのインスタンスを編集すると、その編集内容がコピーしたすべてのインスタンスに対して自動的に適用されるという特徴があり、複数のアイコンを一括で変更することができます。
1つのアイコンのレイヤーを選び、ダブルクリックすると、Illustratorが起動します。起動の初回時は、次の図のようなダイアログボックスが表示されます。また、Illustrator側では、［変更を破棄してIllustrator編集機能を保持する］を選択して［OK］をクリックします。
イルカの色を削除し、線を水色に変更します。Illustratorで［保存］して、Photoshopに戻ります。
複製した2つのアイコンの形状が、Illustratorで変更した内容に変わっています。
完成したものが、サンプルファイルのphotoshop-web-design-04.psdです。
［埋め込みを配置］と［リンクを配置］の違い
Photoshop CC 14.1までは、メニューにあるのは［配置］だけでした。2014年2月にリリースされたアップデート（14.2）からは、［埋め込みを配置］と［リンクを配置］の2つとなりました。
［埋め込みを配置］を選択すると、編集元のファイルには影響なく、新たにファイルが生成される形で編集を行えます。
［リンクを配置］を選択すると、Photoshop上でオブジェクトを編集した際、編集元のオブジェクトファイル（今回であれば、ロゴやアイコンのaiファイル）も一緒に編集されます。
色々な所で使うロゴデータなどは［埋め込み］の方がいいでしょうし、Web用に作ったデータであれば［リンク］の方がいいでしょう。
レイヤースタイルを活用しよう
今回は使用していませんが、オブジェクトをデザインする上で役立つ機能として、「レイヤースタイル」があります。レイヤースタイルとは、レイヤーに適用できるドロップシャドウやエンボスなどの様々な効果のことです。オブジェクトそのものには影響がないので、何度でも調整が可能です。
シェイプや文字に効果を適用することで、要素を目立たせることができますが、過度に使うのは品を損ねますので、ケースバイケースで活用しましょう。
レイヤースタイルの使い方は、［レイヤー］パネルの右部分をダブルクリックすると［レイヤースタイル］ダイアログボックスが開くので、左側でスタイルを選び、各種設定を行います。
スタイルを選択する際、チェックボックスにチェックするだけでは、設定項目は切り替わりません。スタイルの文字列をクリックしてください。
また、レイヤースタイルが適用されているレイヤーには［fx］マークが付きます。
次の図は、レイヤースタイルを使って、グローバルメニューにグラデーションオーバーレイやドロップシャドウの効果を付けた例です。
レイヤースタイルを適用すると、レイヤーに適用している効果が追加されます。この右部分を右クリックすると、レイヤースタイルの設定を編集できます。
ロゴやアイコンなどを配置することができました。第5回「写真をレタッチして、配置しよう」では、写真の補正などを通して、基本的なツールについて説明します。また、今回説明したピクセルとスマートオブジェクトの関係をもう少し見てみましょう。