演習07 デザイントレース「美容クリニックのバナー」

基本情報&ポイント

トレースの基本情報

まずはトレースの基本情報の確認です。

基本情報

• バナー 336px x 280px
• 構成要素・・・クリニック名/キャッチコピー/クリック誘導

サイズはWebのため可変ですが、横1,440px x 縦3,570pxです。

使用データ

• 背景パターン・・・07_illust_1(.psd)

使用フォント(Googleフォントからダウンロード)

• 日本語・・・Noto Sans Japanese(もう肌のことで悩まない!/詳しくはコチラ)
• 日本語・・・Kaisei HarunoUmi(BEAUTYスキンクリニック)

Adobe Fontsが使用できないため、Googleフォントの中から私の方で近いものを選びました。
あらかじめダウンロード・インストールしておきすぐに使えるようにしておきましょう。
早速上記のリンクを開いてダウンロード・インストールを行ってください。

使用カラー

• ネイビー(フォントなど)・・・R:50/G:90/B:175(#325aaf)
• ライトブルー(背景パターン)・・・R:235/G:244/B:255(#ebf5ff)
• ブルー(背景・枠線)・・・R:100/G:146/B:205(#6492cd)
• ホワイト(背景など)・・・R:255/G:255/B:255(#ffffff)

Photoshopのスクリプト「Corner Editor」をダウンロード・インストール

今回のデザインでは角丸(内側)の背景と枠線がありますね。
Illustratorであれば角丸(内側)はライブシェイプの◎を調整してから「Alt + クリック」で簡単に作れますが、
Photoshopではパスファインダーを使った結合・分割など複数の工程があり簡単ではありません。

そこで今回はPhotoshopのスクリプト「Corner Editor」を使って角丸(内側)を作りましょう。
以下のページのグリーンの「Download」ボタンをクリックしてダウンロード・展開し、
以下の「移動先フォルダ」に「Corner Editor 2015 > Corner Editor > Corner Editor.jsx」のファイルのみを移動しましょう。

移動先フォルダ:
Windows:C:￥Program Files/Adobe/Adobe Photoshop [バージョン]/Presets/Scripts/
macOS:/Applications/Adobe Photoshop [バージョン]/Presets/Scripts/

参考:【Photoshop】シェイプの角を凹ませたい|eika

トレースのポイント

では今回習得すべきトレースのポイントを確認しましょう。
テキスト「トレース&模写で学ぶ デザインのドリル」P.040を開いてください。
今回のポイントは「色が与える印象」です。

色はそれぞれ“印象”を持っています。デザインを見た人に「どんなイメージを与えたいか」によって、色を選びましょう。

CHECK

• 与えたい印象と色が合致しているか確認
• 他の色の印象を知る(P.054コラム)
• 身の回りのデザインの色をチェックしてみる

トレース開始

新規ドキュメントを作成

今回はPhotoshopを起動して「_07_design__main(.jpg)」をPhotoshopのウィンドウにD&Dすることで新規ドキュメントを作成しましょう。
また作成後の初回保存時に「LESSON2 > 07」フォルダの中に移動しましょう。

1. Photoshopを起動。
2. 「07」フォルダから「_07_design__main(.jpg)」をPhotoshopのウィンドウにD&D。
3. レイヤーパネルで「背景」として画像が表示されているが、「下絵」に変更してもいいしそのままでもいい。
   「新規グループを作成」で新規グループを作成し、グループ名を「トレース」にする。
4. 上部「イメージ>カンバスサイズ」の順にクリックして「カンバスサイズ」ダイアログを表示。
   「幅:700」「基準位置:右」にして「OK」をクリックする。これによりサイズが「W:700px x H:584px」になる。
5. 上部「ファイル > 保存」をクリックし保存先を「LESSON2 > 07」フォルダを指定、
   ファイル名を「学籍番号_trace07.psd」に、ファイルの種類を「Photoshop(*.PSD;*.PDD;*PSDT)」にして保存する。

トレース作業開始

ではトレース作業に入ります。
今回は動画なしで挑戦してみましょう。

手順は以下です。

トレースの順番

1. 定規を表示させて、以下の数値の座標で上下左右にガイドを引く。
   上から0px・24px・34px、左から0px・24px・34px、右から0px・24px・34px、下から0px・24px・34px。
   ※参考:3-3. 定規・ガイド・ガイドレイアウト・グリッド・ものさしを使いこなす | 
2. 文字(もう肌のことで)を作って調整する。
3. ②の下の線を長方形ツールで作る。
4. 文字(悩まない!)を作って調整する。
5. ③の線を複製して④の下の線の位置に移動してサイズを調整する。
6. 文字(BEAUTYスキンクリニック)を作って調整する。
7. 文字(詳しくはコチラ) + 三角3つ(多角形ツール) + ボタン背景(長方形ツール)を作って調整する。
8. 内側の枠線を長方形ツールで作り「Corner Editor」で角丸(内側)の枠線を作る。
9. 枠線の一つ外側の角丸(内側)の長方形を長方形ツールで作り「Corner Editor」で角丸(内側)を作る。
   すぐ上のレイヤーに07_illust_1(.psd)を読み込みマスクを生成。
10. トレースグループの一番下に「塗りつぶしまたは調整レイヤーを新規作成」でべた塗りレイヤーの背景を作ったら完成。