デザインされた矢印制作はカスタムシェイプを活用 鈴木智子のホームページのアクセスアップデザイン講座

デザインされた矢印の制作

矢印や動物や人物のシルエットなど、カスタムシェイプの機能を使うと簡単に作成出来ます。
ブラシやパターンも数多く、様々なサイトで配布されています。
ブラシ、パターン、カスタムシェイプは、ベーシックなものはデザイン制作のスピードが上がるので、全てインストールしておく事をお勧めします。
今回は、カスタムシェイプを使った矢印の制作ではありませんので、カスタムシェイプやブラシ、パターンの説明は省略します。

カスタムシェイプ、アイコン、シンボル集を探す

ブラウザを起動して、GoogleやYahoo!で「カスタムシェイプ 矢印」や「アイコン 矢印」と検索すると多くのサイトが検索結果として表示されます。
今回、私は矢印のシンボルとしてはかなりベーシックなものを以下のURLから入手しました。

http://www.designworkplan.com/signage-symbols/free-vector-arrows.htm

スタンダードな矢印からアイコンチックな矢印まで幅広く、しかも、ベクターデータ(再編集可能な形式)で配布されています。
著作権の面でも、個人、商用利用共に可能なので古くから多くのデザイナーに支持されているものです。

矢印の配置

この素材集はベクターデータなのでIllustratorで開いて使います。
最初に、ダウンロードしたファイルをIllustratorで開き、目的の矢印を選択、コピーします。

次に、Photoshopにペーストします。

矢印の回転

上向きの矢印にしたいので、左に90度回転させます。[編集]→[パスを変形]→[90°回転(反時計回り)]をクリックします。

または、[編集]→[パスを変形]→[回転]をクリックして、ドラッグしながら回転させます。この時Shiftキーを押しながらドラッグすると15度ずつ回転します。

[編集]→[パスを自由変形]をクリックして位置と大きさを調節します。

開けておいたアクセスアップの後ろにぴったりと収まりました。

矢印の装飾

ロゴ(サイトID)をデザインする」での作業と同じように矢印を装飾します。
矢印レイヤーのサムネイルをダブルクリックして、色をアクセスアップと同じ色(#ff6666)にします。

矢印レイヤーを右クリックしてレイヤー効果を選択します。

[グラデーションオーバーレイ]を選択してグラデーションをかけていきます。

ロゴと同じ効果を付けて統一感を出します。
[レイヤー効果]→[境界線]を選択します。外側に白い4pxの線を設定しました。

同様にドロップシャドウも設定します。5pxの黒いシャドウを4pxの距離になるよう設定しました。

最後にもう一度位置や大きさを調整します。

これで「デザインされた矢印の制作」は終了です。

follow me

鈴木智子のホームページのアクセスアップ講座