Tweet

Pocket

フラットデザインとともに、相性が良いとしてデザインに取り入れられているのが、
ロングシャドウ。右下や左下に長く影を伸ばして、フラットなデザインの中に独特の立体感を表現することができます。
今回は、Illustratorを使用して作ってみたいと思います。

1.文字を入力して、アウトライン化します

背景は、長方形ツールを使って、色の入った（今回は緑色）長方形を作ります。

2.アウトライン化した文字をコピーし、２回全面へペースト(cmd+F)します。

計３つのアウトラインオブジェクトができあがりました。

3.一番上にあるペーストされた文字を選択し、Shiftキーを押しながら、画面外へ移動します。

45°をキープして。

4.ブレンドツールを使います。

ツールパレットのブレンドツールをダブルクリックしブレンドオプションを表示させます。

「ステップ数：300」とします。淵がガタガタに見える場合はステップ数を増やしましょう。
中央のテキストオブジェクトをクリックした後、右下のテキストオブジェクトをクリックします。
そうすると、２つのオブジェクトのブレンドが作成されます。

5.出来上がったシャドウオブジェクトを背面に配置

配置したら、色を影の色に変更しましょう。

6.クリッピングマスクをかける

アートボード（背景）と同じサイズの長方形を長方形ツールを使って描きましょう。

作成した長方形とシャドウオブジェクトを選択してcmd+7でクリッピングマスクをかけます。

これで、画面外にはみ出していたシャドウを表示しなくなりましたね。完成です！

最後に

いかがでしたか？今流行のロングシャドウの作り方を解説してみました。おしゃれな仕上がりになるので、ここぞというときに使いたいですね。

ぜひお試しください〜。

投稿者プロフィール

mayukou

Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

最新の投稿

この著者の記事一覧

• 2019.09.29jQuery画像も文字もスライド可能！Swiper.jsでコンテンツスライダーを簡単に！
• 2019.07.27デザインお店の顔！仕事の幅も広がる私流ロゴデザインマニュアル
• 2018.11.10Photoshop画像からフォントを探してくれる！Photoshopのマッチフォントが素敵。
• 2018.09.02CSSフレームワークサイト制作が早くなる！Bootstrapの特徴