Web Design

今流行りのロングシャドウの簡単な作り方


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

スポンサードリンク

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

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

long-outline

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

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

 

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

45°をキープして。

long-45

 

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

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

blend-tool

long-blend

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

long-blend2

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

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

long-blend3

 

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

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

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

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

long-blend4

 

最後に

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

ぜひお試しください〜。

 

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。口下手ですが、webデザインのお仕事を始めてなんとか約5年が経ちました。続けられているのが不思議です。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

  2. Photoshop

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ(有料)

    こんにちは、mayukouです!今日は水彩画に最適なPhotosh…

  3. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  4. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  5. デザイン

    おすすめ!かすれたロゴに最適なスタンプ風なフリーフォント

    みなさんこんにちは、mayukouです。福岡もやっと梅雨が明けまし…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 現像で素人感からプロっぽく!Macの写真アプリが素敵
  2. 売り上げ不振の悩みを解決!「どうすれば売れるのか」を読んで
  3. 購入して半年♪iPad Proで描いたイラストをご紹介。(主…
  4. ブロガーの味方?高級コンデジ、Panasonic LX9を買…
  5. デザインが成功するテンプレがここに。「なるほどデザイン」を読…

facebook更新中!

  1. ブログ

    明けましておめでとうございます。今年の抱負
  2. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ
  3. moleskine

    グッズ

    モレスキン買いました。そして、周辺のステーショナリーを集めてみた。
  4. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する…
  5. Photoshop

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ(有料)
PAGE TOP