この記事の目次
ウェブデザインB 第6回
Sponsored Link
Photoshopでのデザイン起こし① 使い方編：レイヤーパネル基本編
今みなさんの手元には自分自身が描いたデザインラフがあると思いますが、みなさんには今後の講義の中でそれを使ってデザインを完成させてもらいます。
今回はPhotoshopでウェブサイトデザインを行う上で、使うであろうツールを紹介し、使い方を学んでもらおうと思っています。
それぞれの使い方に関してはAdobeの公式の解説ページがありますので、そちらを元に説明していきます。
レイヤーパネルの使い方
何度かPhotoshopを開いているのでもうわかっているかと思いますが、左側にある四角形が重なったようなアイコンがレイヤーパネルです。Photoshopを使う上で毎回必ず使う、最も使用頻度が高い、全てのベースです。
また、様々な機能を備えており、Photoshopの初心者なら最初に知っておかなければいけないツールです。
レイヤーの追加・削除・名前の変更
レイヤーの基本的なところの仕組みは単純で、テキストレイヤーや長方形レイヤー、画像などを追加すればその分レイヤーパネルにレイヤーが増え、上から順に重なって表示されていきます。
レイヤーグループ
Photoshopでデザイン作業を進めていくと、レイヤーがどんどん増えてきて、しだいにレイヤーパネルが管理しきれない状態になってきます。そうなってくると後から修正や変更を行ったりするときにレイヤーの場所を探すようになります。
そういった管理を楽にするため、レイヤーをグルーピングできる機能があります。
画像のように、「Shift」を押したまま複数のレイヤーを選択し、左下のフォルダのアイコンをクリックすると、選択したレイヤーをフォルダ内にまとめることができます。
グループは階層化が可能で、フォルダアイコンをクリックすれば何重にでもフォルダを生成することができます。
スマートオブジェクト
スマートオブジェクトは、簡単に言うと「PSDの中に小さなPSDがある状態」です。
同じような機能で「埋め込み」や「リンク」がありますが、これはまた後日の講義で説明します。
写真などを読み込んで、直接書いたり消したりすると画像自体のデータが改変されるため、元の状態に戻せなくなってしまいます。
レイヤーをスマートオブジェクトとして扱えば、レイヤー自体は無傷のまま調整を行うことができます。
また、ロゴなど、ヘッダーに一つ、フッターに一つなど、複数箇所に同じものを扱う場合があると思いますが、スマートオブジェクトにして配置することで、一箇所のデータを修正すれば配置してある同一のスマートオブジェクトが一括で修正されるため、非常に効率アップになります。
レイヤーをリンク
レイヤーを「Shift」を押したまま複数選択し、右下の鎖のアイコンをクリックすると、レイヤーをリンクすることができます。レイヤーをリンクするとどうなるかというと、たとえば画像のテキストレイヤーを移動ツールでちょっと右下に動かしたら、リンクされている長方形レイヤーも同じだけ右下に移動するようになります。
このように、複数のオブジェクトをリンクすることで移動や拡大・縮小などを一度に反映させることができます。
重なりの順番を扱う
レイヤーの重なりを変更するには「左クリック押しっぱなし」でレイヤーをつかんで、他のレイヤーの上や下へ移動するだけです。この重なり順がそのままキャンバス内のレイヤーの重なり順になります。
次回もレイヤーパネルを解説します
今回は以上です。
レイヤーパネルだけでもこれだけの機能がありますが、本当は他にもまだまだ機能があります。
使う頻度が高いものやほとんど使わないものなど、これからのデザイン制作の過程で少しずつ解説していこうと思います。
本日のまとめ
Photoshopはとても多機能なツールですが、多機能であるがゆえにどうやって使えばいいのかがわからなくなってしまいます。でも実際に使うのは本当に必要な機能だけで、ウェブサイト制作においては特別な機能はほとんど使いません。
経験上、「これがしたい」という意欲と調べる手間さえあればすぐに覚えられます。
なおこの講義では、ほとんど使わない機能を説明しても仕方ないので、実際に使う機能のみに絞って解説していきます。来週からもPhotoshopの使い方をどんどん学んでいきましょう。
