【ペンツールで外枠を作る】Photoshopでトライ!デザインのドリル バナートレース #7

デザインのドリル

こんにちは。Halcana(@halcana21)です。

デザインのドリルの演習7の振り返りです。

今回からは新しいセクションに入ります。テーマは「色」なので、色使いに着目して分析を進めていこうと思います。

振り返り

外枠部分が難しく、30分くらい格闘しました。また、指定のフォントがadobe fontsになかったため、似たフォントを探すのにも時間がかかりました。もう少し太めのフォントがいいかなとも思いましたが、なかなか見つからず…

デザイン分析 – 青の効果

今回は「青」がもたらす効果を分析していきたいと思います!

青色は信頼感誠実さ清潔感を与えるので、まさに病院やクリニックのバナーにはぴったりな色だと考えられます。明るめの青はより爽やかな印象に、紺などの暗めの青は誠実さをアピールするのに効果的です。

このバナーではトーンが異なる青を使って同系色でまとめているので、落ち着いた印象も受けます。この点も誠実さを出すのに一役買っているのだと思います。

一方で、青には冷たい印象を与えてしまうという効果もあります。ただ、このバナーはそこまで冷たい印象は受けません。なぜでしょうか。

理由の一つとして、背景にチェック柄が使われていることが考えられます。チェック柄によってカジュアルな雰囲気を出しつつ、直線のモチーフなので誠実な印象も捨てずにちょうどいい親しみやすさを演出しているのだと思います。

「もう肌のことで〜」にゴシック体を採用していることも程よいカジュアルさにつながっているのかもしれません。

外枠の作り方(ペンツールの使い方)

今回は外枠(内側)をペンツールを使って作っていきたいと思います。

まずは外側の太い部分を長方形ツール+楕円形ツールで作ります。ペンツール操作だけ知りたい方は次のセクションまで飛ばして大丈夫です!

もちろん、もっと効率の良い方法はたくさんあると思うので、あくまで一例だと思って読んでいただければと思います。

太い枠の作り方(長方形・楕円形ツール)

まずは長方形ツールで形を取ります。四隅の丸い部分は、上のように楕円形ツールを使って作りました。

楕円形で四隅に円を配置したら、色を変更します。外側の枠はこれで完成なので、バラバラにならないよう左のレイヤーパネルからリンクしておきます。複数のレイヤーを選択した状態ですぐ下の鎖みたいなマーク(∞←こんな感じの)をクリックすればリンクできます。

細い枠の作り方(ペンツール)

続いて細い方の枠を作ります。

ツールバーから「ペンツール」を選択します(①)。

ペンツールでクリックすると、アンカーポイント(写真の白い四角いポイント)ができます。アンカーポイントを複数配置して、最後に始めに作ったアンカーポイントをクリックするとシェイプ(図形)を作ることができます。

微調整は後でできるので、まずはざっくりアンカーポイントを配置しましょう。

ここでアンカーポイントを配置するときのポイントです。

まずは角の部分に先にアンカーポイントを配置し、①と②の間の直線に曲線ペンツールで曲線用のアンカーポイントを作りましょう。

曲線用のアンカーポイントをドラッグすると、両サイドのアンカーポイントから弧を描くように曲線が描けます。

わざわざ持ち替えなくても①→②→④の順でクリックすると④が曲線用のアンカーポイントになる場合もあるようですが、一度曲線ペンツールに持ち替える(③)方が確実かなと思います。

まずはシェイプが完成しました。

続いて、外枠だけが表示されるように設定します。

ツールバーからシェイプツールを選択します(赤い四角で囲むのを忘れました… 写真ではラインツールが表示されているところをクリックしてください)。

オプションバーが上のように表示されるので、塗りを無しにして、線の太さを設定してください。私は2ptにしました。

最後に微調整です。

ツールバーからパス選択ツールを選択してください(①)。このツールでアンカーポイントの移動ができます。アンカーポイントを選択し、ドラッグして微調整をしてください。

これで完成です!

まとめ

今回はデザインのドリル演習7のバナートレースを行いました。

思い通りにシェイプを作るのはなかなか難しいですが、何度もトライして慣れていけばきっと思い通りに作れるようになると信じています!(私もまだ初心者なので苦手ですが^^;)練習あるのみなので一緒に頑張りましょう!

一つ前の演習6はこちらからチェックできます。

次の演習8はこちらから。

コメント

タイトルとURLをコピーしました