ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeグラフィック講座 > ベクター画像チュートリアル:窓についた雨粒

ベクター画像チュートリアル:窓についた雨粒

投稿日:2014年2月20日   ソフトウェア:Illustrator

このチュートリアルでは、窓についた雨粒を作成する方法をご紹介します。

Step1:はじめに

「あ、雨だ。やんでくれないかなぁ。出かけたいのに。。。」

雨の日はどうやって過ごしますか?
布団にくるまって好きな本を読みますか?
それとも窓から外の雨をいつまでも眺めていますか?
正直言うと、私は前者を選びますね。

雨の日と言えば、ここからは雨粒や窓のくもりをベクター画像で描く方法を書いていこうと思います。
心配は無用です。
とてもシンプルで簡単にできます。用意はいいですか?
それでははじめましょう。



Step2:青色を8色用意

IllustratorでもPhotoshopでもいいので、新しいファイルを作成しましょう。
大きさは25cm×23cmとします。
カラーモードはCMYKでもRGBでもどちらでも構いません。
下のように、いろんな青色を8色用意しておきます。

青色を8色用意




Step3:グラデーションメッシュ

アートボードと同じ大きさの四角形を準備したら、先ほど作った青色の中から中間の色を選んで塗りつぶします。
次に、「オブジェクト > グラデーションメッシュを作成」を選択し、縦横6つに分けます。
もっとふやしたければ増やしても構いません。

グラデーションメッシュ

メッシュポイントを操作し、形をゆがませます。
すると抽象画のようになります。
各メッシュポイントをクリックし、先ほど作った青色のグループで色を付けていきます。

グラデーションメッシュ


Step4:クリスマスツリーを作成

ペンツールを使って、クリスマスツリーを作成します。
線は好みに合わせて調整します。
そして透明度を設定します。

クリスマスツリーを作成


Step5:背景のあかりをリアルに

次に、背景のあかりがもっとリアルに見えるようにします。

新しいレイヤーを作り、背景レイヤーの上に配置します。
背景レイヤーはロックしておきます。
適当にたくさんの円を描きます。
その円を明るい青色で塗り、不透明度を60〜80%にします。

それから、より明るいエリアには明るい円を、より暗いエリアには透明な円を配置します。
すべての円に対して、ぼかし(ガウス)を半径4pxにして適用します(効果 > ぼかし > ぼかし(ガウス))。
円を選択して、その選択した円に別のぼかしを適用することもできます(ぼかし:6px)。
現在このようになっています。

背景のあかりをリアルに


Step6:雨粒を作成

円を描いたレイヤーをロックし、その上に新しいレイヤーを作ります。
そして円を描き、下のように円形グラデーションで塗りつぶします。
白い部分が円の端にくるようにグラデーションを調整します。

雨粒を作成

今度は細長い楕円を描きます。
カラーグループから一番薄い青色で塗りつぶします。
「効果 > ワープ > 円弧」を選択し、スタイルを円弧にし、水平方向を選択します。
また、カーブを50%にします。
出来上がったら、前のステップで作成した円の上側に配置します。

続いて、「オブジェクト > アピアランスを分割」を選択します。
そして、雨粒にフィットするように大きさを調整します。
一番明るい部分に円形グラデーションを適用し、描画モードを「スクリーン」にします。
下のようになっているか、確認してください。

雨粒を作成

次は、雨粒の影を作りましょう。
元の円を複製して、線形のグラデーションを適用します。
描画モードを乗算にし、不透明度を80%にします。

もとの雨粒と暗い雨粒を複製して、2種類の雨粒を作ることができます。
それぞれの雨粒は好みに応じて調整することができます。

雨粒を作成

もうすぐゴールです!
ここではお好みで雨粒の微調整や補正を行います。
雨粒をランダムに配置し、大きさを適度に変えていきます。

雨粒を作成


Step7:完成

最後に、クリスマスツリー、背景、雨粒、これら全部を一つにまとめます。
あなたの感性にあわせて、アレンジします。

完成

これでおしまいです。
簡単でしたか?
このチュートリアルを気に入っていただけたら嬉しいです。
それぞれのステップはとてもシンプルです。
それそれのステップで示したとおり、好みに応じて設定を自由に変更することができます。

ご覧いただきありがとうございました!
またお目にかかりましょう!


引用:Web Design Library 著者:123rf 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング