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デザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

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

関連記事

  1. Illustrator

    webデザインのトレンド!文字によって変形するゴーストボタンをイラレで作る方法

    こんにちは、mayukouです。九州は梅雨入りしました〜。今日は天…

  2. Photoshop

    5ステップ!photoshopで水彩画をスキャンして切り抜く方法

    みなさんこんにちは、mayukouです。先日、仕事で水彩画イラストを…

  3. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  4. デザイン

    楽天ショップのデザインの参考に!おしゃれな楽天ヘッダー7選

    みなさん、こんにちはmayukouです。いかがお過ごしですか?…

  5. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. デザイン

    Adobe CCを導入しました。使ってみて感じたメリットとデメリットとは?
  2. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ
  3. お仕事紹介

    お仕事紹介:保育園のお祭りパンフレットを作りました!
  4. Photoshop

    スキャンで取り込んだイラストの線をPhotoshopで抽出するSeparate …
  5. Mac

    起きてしまった!MacOSのMarvericksの不具合
PAGE TOP