ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeグラフィック講座 > Illustratorでインスタントメッセンジャー用の半透明アイコンを作る方法

Illustratorでインスタントメッセンジャー用の半透明アイコンを作る方法

投稿日:2013年2月5日   レベル:初心者    ソフトウェア:illustrator

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。


Step1:頭部を作る

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

Illustratorを開き、円を描きます(シフトキーはおしたままにします)。

好きな色を2色選びます。選んだ色はスウォッチパレットに追加するか、隅にその色の四角形を描いておきます。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

円がまだ選択されている状態で、グラデーションメッシュツールを選択します。そして、円の中央をクリックします。先ほど選んだ2色のうち、明るい方を選択します。スウォッチから選択するか、カラーピッカーで選択します。

Step2:体部分を作る

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

楕円ツールを用いて、大きな楕円を描きます。これは、アイコンの体の部分になります。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

グラデーションメッシュツールを使って、明るい色を追加するという操作を繰り返します。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

もう一度楕円を描きます。今度は腕の部分です。回転させ、左側に置きます。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

グラデーションメッシュツールを使って、同様の操作を繰り返します。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

腕をコピーし、貼り付けた後、反対側の腕として回転し配置します。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

Ctrl+Shift+[ で、新しい腕を体の後ろに移動させます。




Step3:反射光を作る

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

アイコンの頭の部分に光があたって反射して見えるように、小さな白い楕円を追加します。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

これらの楕円を不透明度20%にします。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

次に、アイコンの体の部分に一致するように、もう一つ円を描きます。
ここで、なぜ、体をコピーしないのか疑問に思うかもしれません。
理由は、後でパスファインダを使用するときに、グラデーションメッシュポイントがネックになってくるからです。
円を追加したくない場合は、ダイレクト選択ツールを用いて、
メッシュポイントをすべて手で削除するという方法でも構いません。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

パスファインダを使用するときに使うので、さらにもう一つ円を描きます。
アイコンの体の部分と重なる部分が滑らかなカーブになるように注意して描いてください。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

2つのオブジェクトを選択し、パスファインダから交差を選択し、拡張ボタンを押します。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

Ctrl+[ を押して、レイヤーを後ろに移動させます。腕や頭よりは下にしますが、体よりは上にしておきます。

不透明度を20%にします。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

体にも小さい反射光を2つ描きます。白で塗りつぶして20%の不透明度にします。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

それぞれのパーツについて、同じことを繰り返します。まず、アイコンの腕の部分を行います。

再び、円を追加し、下の図形の高さと違和感がないようにします。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

腕オブジェクトを2つ選択して、パスファインダーから型抜きを選択し、拡張ボタンを押します。

20%の不透明度にします。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

頭と腕と体を選択し、不透明度を95%にして、少し不透明な見た目にします。

Step4:影を作る・完成

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

次に追加する円が最後の円です。これを、あなたの選んだ色から白になるグラデーションで塗りつぶします。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

バウンディングボックスを使って画像を押しつぶします。Ctrl+Shift+[ を使って、オブジェクトの一番下に配置します。背景色が違う場合には、このオブジェクトに乗算を適用します。

このチュートリアルではインスタントメッセンジャー用の半透明アイコンをIllustratorで作る方法について紹介します。

インスタントメッセージアイコンは、一つではそれらしく見えません。
少なくとも一回は複製して、人とつながっていることを表しましょう。
新しいアイコンは、色を変えましょう。「編集 > カラーを編集 > オブジェクトを再配色」を使うか、
ダイレクト選択ツールを使って全てのメッシュポイントを選択し、新しいカラースウォッチを追加します。

引用:Web Design Library  翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

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