ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeグラフィック講座 > 反射するロゴの作り方

反射するロゴの作り方

投稿日:2012年12月7日   レベル:初心者    ソフトウェア:illustrator

このチュートリアルでは反射するロゴの作り方について紹介します。


Step1:はじめに

Web2.0の特徴の一つに、アクアアイコンがあります。これは、アドビ・イラストレーター・テクニック集の初版で、マット・クロスコウスキが作り方を解説しています。Web2.0のもう一つの特徴が、反射するアイコンです。このアイコンの見た目はきれいなので、ついクリックしてしまいます。そのため、ナビゲーションがとても楽しくなります。ここでは、その反射するロゴの作り方を解説していきます。

このチュートリアルでは反射するロゴの作り方について紹介します。

Step2:図形の描画

新しいドキュメントを開きます。今回は、印刷物用ではなくweb用なので、カラーモードはRGBにしておきます。今回は応用がきくように、背景を黒とし、アイコンを白で作成します。まず黒の四角形、または角丸の四角形を描きます。長方形ツールや角丸長方形ツールを使用します。角丸長方形ツールは、ツールバーの長方形ツールアイコンを長押しすると選択できるようになります。シフトキーを押しながらドラッグすると、正方形が描けます。

このチュートリアルでは反射するロゴの作り方について紹介します。

長方形ツールを長押しし、スターツールを選択します。ツールバーの下の方で、塗りの色を白に変更します。境界線はなしとします。黒い四角形の上で白い星を作成します。

このチュートリアルでは反射するロゴの作り方について紹介します。

ツールバーから選択ツールを選択します。オプションキーを押しながら(windowsの場合はALTキー)ドラッグすると、星を複製できます。すぐに別の場所に移動するので、どこに複製しても構いません。選択ツールで、星をかこっているボックスの真ん中上部をクリックし、反転させて元の半分くらいの高さになるまで下へドラッグします。もとの星と複製した星とは、2点をくっつけておきます。

このチュートリアルでは反射するロゴの作り方について紹介します。





Step3:グラデーションの作成

四角形ツールをクリックし、逆向きの星に覆いかぶさるように新しい四角形を描きます。グラデーションパレットを開きます(ウィンドウ > グラデーション)。白と黒のグラデーションを変え、真ん中のスライダーを左に寄せます。ここでは15%くらいにします。角度は270度に変えます。こうすると、黒が底になり、上に行くほど白くなります。

このチュートリアルでは反射するロゴの作り方について紹介します。

このチュートリアルでは反射するロゴの作り方について紹介します。


Step4:完成

今作った長方形と、小さな逆向きの星を選択します。これは、選択ツールを使ってドラッグしてエリアを選択した後に、不要な部分をShift+クリックで選択解除すればできます。透明パレット(ウィンドウ > 透明)を開いた状態で、矢印をクリックするとメニューが現れます。「不透明マスクを作成」をクリックします。これで反射するアイコンの完成です!

このチュートリアルでは反射するロゴの作り方について紹介します。

このチュートリアルでは反射するロゴの作り方について紹介します。

別の形でもやってみましょう。ここに別のアイコンの例も挙げておきます。同じように図形を描いてからグループ化して行うと、一度にたくさんの作成できます。

このチュートリアルでは反射するロゴの作り方について紹介します。


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



スポンサードリンク

コメント

ランダム記事5件

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