ファーストビュー下 から 1つめのCTAまで のデザインをトレースしてください。
今回の実習の範囲
※ファイル確認用。縮小していますので、トレースには使用しないでください。
トレース用の画像は、mihon02とmihon03の2つに分かれています。
当レッスンページの素材、下記のボタンからダウンロードしてご利用ください。
training03.zipをダウンロード
制作のポイント
mihon2とmihon3の範囲は、ボリュームが多いですが、難しい操作はありません。
- 図形ツール
- 文字ツール
- 画像挿入
- クリッピングマスク
この４つで、ほぼ全て作ることができます。
下記では、吹き出しなど三角形を使う部分を中心に、制作のポイントを解説していきます。
1.吹き出しの作り方
こんな課題は～の部分で使われているピンクの吹き出し。
こちらは、角丸長方形と三角形で作っています。
角丸は前回と同じ方法で作成できますので、今回は三角形を見ていきましょう。
三角形の作り方は複数あります。
解説では以下２つの方法を紹介します。どちらの方法でも正解ですので、使いやすい方をご利用ください。
- 吹き出し - 長方形の角を削除する
- 大きな三角形 - 多角形ツールを使う
では、長方形ツールで長方形を書きましょう。
長方形が出来たら、白い矢印アイコンをクリック。ダイレクト選択ツールに持ち替えます。
長方形の角を一箇所だけクリックしてください。クリックした角のみが選択されている状態になります。
そのまま、キーボードのDeleteキーを押します。選択した角が無くなり、三角形になります。
この時点では、パスが切断された状態です（オープンパス）。
塗りつぶし状態だとわかりにくいのですが、塗りと線を反転させると、パスがオープンになっている＝閉じられていないことが良くわかります。
パスを閉じて、線でも塗りでも三角形になるようにしておきましょう。
下のアニメーションではショートカットで閉じています。
- windows：
Ctrl+J - mac：
⌘(command )+J
上手く行かない方は、選択状態で 右クリックして、 連結を選択しても出来ます。
パスが閉じられたかわからない時は、塗りと線を反転してみてください。
三角形が出来たら、角丸長方形と重ねます。
拡大縮小・回転させて、ちょうどいい具合のツノを作ってみてください。
2.大きな三角形の作り方
次に、背景として使っている大きな黄色い三角形です。
こちらは多角形ツールで作ると楽です。
長方形ツールを右クリックして、多角形ツールを選択してください。
アートボードをクリックして設定ウィンドウを出し、辺の数を「3」にしてOKを押します。
三角形が挿入されます。
キーボードのshiftを押しながら回転させ、下向きの三角形にしてください。
変形パネルを使って、幅を1440pxに、高さを120pxくらいに変更。
水平方向中央に整列で位置を揃えて、上の長方形とピッタリ繋げれば完成です。
3.写真に重ねた数字
写真を欠けさせ、そこに数字を入れ込んだデザイン部分です。
こちらは写真と、白の正円にまとめてクリッピングマスクをかけています。
- 写真に角丸の長方形を重ね、クリッピングマスクを作成
- 白の正円を作る
- 円の中央が、写真左上と交差する位置まで移動
- レイヤーパネルで、円をクリップグループ内に入れる
四分の一になった円の上に、数字と文字を入れれば完成です。