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. デザイン

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

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

  3. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法

    みなさんこんにちは、mayukouです。今回は、Photoshop…

  4. Illustrator

    画像のベクター化が簡単に!Adobe Capture CCがおすすめ♩その使い方をご紹介。ダウンロー…

    みなさんこんにちは、mayukouです。画像をベクター化してイラスト…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました
  2. デザイン

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

    発見!スキャンで取り込んだイラストをIllustratorで使えるベクターにする…
  4. Web Design

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

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法
PAGE TOP