この記事の目次
ウェブデザインB 第6回
Sponsored Link
前回はワイヤーフレームに関して、制作する意味や、使うツール、作り方など、より掘り下げた内容を紹介しました。今回はワイヤーフレームを完成に近づけ、そこからPhotoshopによってデザイン起こしを行い、みなさんのそれぞれのウェブサイト制作を進めていこうと思います。
ワイヤーフレームの制作
ワイヤーフレームを完成させる
ワイヤーフレームはできましたか？今日はそれを元にPhotoshopを使ったデザイン起こしを行いますので、今回でワイヤーフレームを完成させなければいけません。
時間をとりますので、再びワイヤーフレームの制作を行いましょう。
もしワイヤーフレームの制作で迷ってしまったら、前回や前々回の記事を参考にしたり、参考サイトを探したりして進めてください。
Photoshopの基本設定
今回もまず設定から行います。Photoshopを起動してください。
課題の提出
先週伝えましたが、今回は出来上がったワイヤーフレームを提出しましょう。
今回もjpg以外は受け付けられないようになっていますので、
必ずjpgに書き出して提出してください。
では提出用にjpgで書き出してみましょう。
手順は以下。
- 上部のメニューバーの「ファイル」→「書き出し」→「Web用に保存」
- Web用に保存のウィンドウが出てきたら、プリセットの右のプルダウンメニューを「JPEG標準」に変更。
- 一番下の「保存」をクリック。
- ファイル名をつける必要があるので自分の学籍番号を記入して保存をクリック。
では下のフォームに、書き出したJPGを添付して送信してください。
なおフォーム内に「質問など」という項目を作りました。質問や相談などがあればここを使ってもらっても構いません。もちろん直接質問・相談してもらってもいいですが、対面で言いづらいことなどもあるかもしれないのでこういった項目を設けていました。
ただし、質問を送る場合は必ず迷惑メールなどのフィルタをかけていないメールアドレスを入力してください。メールアドレスがわからないと、いくら送ってもらっても返信ができません。
Photoshopでのデザイン起こし① 使い方編：レイヤーパネル基本編
今みなさんの手元には自分自身が描いたデザインラフがあると思いますが、みなさんには今後の講義の中でそれを使ってデザインを完成させてもらいます。
今回はPhotoshopでウェブサイトデザインを行う上で、使うであろうツールを紹介し、使い方を学んでもらおうと思っています。
それぞれの使い方に関してはAdobeの公式の解説ページがありますので、そちらを元に説明していきます。
レイヤーパネルの使い方
何度かPhotoshopを開いているのでもうわかっているかと思いますが、左側にある四角形が重なったようなアイコンがレイヤーパネルです。Photoshopを使う上で毎回必ず使う、最も使用頻度が高い、全てのベースです。
また、様々な機能を備えており、Photoshopの初心者なら最初に知っておかなければいけないツールです。
レイヤーの追加・削除・名前の変更
レイヤーの基本的なところの仕組みは単純で、テキストレイヤーや長方形レイヤー、画像などを追加すればその分レイヤーパネルにレイヤーが増え、上から順に重なって表示されていきます。
レイヤーグループ
Photoshopでデザイン作業を進めていくと、レイヤーがどんどん増えてきて、しだいにレイヤーパネルが管理しきれない状態になってきます。そうなってくると後から修正や変更を行ったりするときにレイヤーの場所を探すようになります。
そういった管理を楽にするため、レイヤーをグルーピングできる機能があります。
画像のように、「Shift」を押したまま複数のレイヤーを選択し、左下のフォルダのアイコンをクリックすると、選択したレイヤーをフォルダ内にまとめることができます。
グループは階層化が可能で、フォルダアイコンをクリックすれば何重にでもフォルダを生成することができます。
スマートオブジェクト
スマートオブジェクトは、簡単に言うと「PSDの中に小さなPSDがある状態」です。
同じような機能で「埋め込み」や「リンク」がありますが、これはまた後日の講義で説明します。
写真などを読み込んで、直接書いたり消したりすると画像自体のデータが改変されるため、元の状態に戻せなくなってしまいます。
レイヤーをスマートオブジェクトとして扱えば、レイヤー自体は無傷のまま調整を行うことができます。
また、ロゴなど、ヘッダーに一つ、フッターに一つなど、複数箇所に同じものを扱う場合があると思いますが、スマートオブジェクトにして配置することで、一箇所のデータを修正すれば配置してある同一のスマートオブジェクトが一括で修正されるため、非常に効率アップになります。
レイヤーをリンク
レイヤーを「Shift」を押したまま複数選択し、右下の鎖のアイコンをクリックすると、レイヤーをリンクすることができます。レイヤーをリンクするとどうなるかというと、たとえば画像のテキストレイヤーを移動ツールでちょっと右下に動かしたら、リンクされている長方形レイヤーも同じだけ右下に移動するようになります。
このように、複数のオブジェクトをリンクすることで移動や拡大・縮小などを一度に反映させることができます。
重なりの順番を扱う
レイヤーの重なりを変更するには「左クリック押しっぱなし」でレイヤーをつかんで、他のレイヤーの上や下へ移動するだけです。この重なり順がそのままキャンバス内のレイヤーの重なり順になります。
次回もレイヤーパネルを解説します
今回は以上です。
レイヤーパネルだけでもこれだけの機能がありますが、本当は他にもまだまだ機能があります。
使う頻度が高いものやほとんど使わないものなど、これからのデザイン制作の過程で少しずつ解説していこうと思います。
Photoshop 実践 その4：クイック選択ツール・境界線を調整、焼き込みツールで切り抜き
前回行った「クイック選択ツール」「なげなわツール」と「境界線を調整」を使った切り抜きに加え、今回は「焼き込みツール」を使った切り抜きを行います。
前回よりもさらに細かい切り抜きを行う場合に今回の方法が有効です。
余裕があったらこれもやりたい
今回は切り抜きではなく、写真の背景をぼかす方法、そして文字をクレヨンで描いたっぽく装飾する方法です。文字の方は色々と応用が効く方法だと思いますよ。
できなかったら来週やりましょう。
本日のまとめ
Photoshopはとても多機能なツールですが、多機能であるがゆえにどうやって使えばいいのかがわからなくなってしまいます。でも実際に使うのは本当に必要な機能だけで、ウェブサイト制作においては特別な機能はほとんど使いません。
経験上、「これがしたい」という意欲と調べる手間さえあればすぐに覚えられます。
なおこの講義では、ほとんど使わない機能を説明しても仕方ないので、実際に使う機能のみに絞って解説していきます。来週からもPhotoshopの使い方をどんどん学んでいきましょう。
