ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeグラフィック講座 > Illustratorでキュービズムを用いたロゴデザインを作成する方法

Illustratorでキュービズムを用いたロゴデザインを作成する方法

投稿日:2013年12月20日   ソフトウェア:Illustrator

このチュートリアルでは、Illustratorでキュービズムを用いたロゴデザインを作成する方法をご紹介します。

Step1:はじめに

このロゴデザインの作成方法に従って、たくさんの細かなベクターの面からなるキュービズムのロゴデザインの作り方を見てみましょう。
このチュートリアルではAdobe Illustratorで実際のデザインを作成するのみならず、最初のスケッチからデザイン完成までのロゴデザイン全般についてもお話するつもりです。

はじめに

このチュートリアルで作成するロゴは、たくさんの細かなエレメントがひとつの大きなオブジェクトを形成するトレンディなキュービズムを用いたロゴです。
ここではレイヴンという架空のブランド、会社に関するデザインですが、実際の顧客の場合でも進め方は同じです。
(ただ、チュートリアルではいつまでも続く変更や修正が無いだけです!)
まず最初にグラデーションや効果を適用したフルカラーのロゴを作り、次に色調を落とした平坦なヴァージョンやモノトーンヴァージョンを作って、どんな場面でも使える多用途なデザインも用意しておきます。



Step2:スケッチ

スケッチ

どんなロゴデザインのプロジェクトでも、まずはスケッチから始めるのがいいでしょう。
今回の架空のレイヴンというブランドは単純に鳥類の一種であるレイヴン(ワタリガラス)から取ったものですが、実際のプロジェクトではその会社の価値をどうやってヴィジュアルで表現するかブレインストーミングする必要があるかもしれません。
レイヴンの形をいくつかスケッチしてみて、縮小した時にもレイヴンであることが分かるような特徴的な形を見つけてください。
曲線を使うとカモメやハトに見えてしまうかもしれないので、シャープなラインを使ってレイヴンやカラスが持つ捕食者としての性質を表現します。




Step3:輪郭を描く

輪郭を描く

納得できるシルエットや特徴が描けたら、Adobe Illustrator を開いて、ペンツールを使って単純にクリックを繰り返すことによって輪郭を描いてください。
描けたら、ストックフォトを探して、形に間違いが無いか確認をしてください。



Step4:交差線を描く

交差線を描く

ここで作成するデザインはキュービズムを用いてしゃれた効果で仕上げます。
輪郭の角同士を結ぶ交差線を描いてください。

交差線を描く

デザインに充分な面が出来るまで交差線を加えてください。
でも、やりすぎはいけません。
ロゴの使用頻度の高い縮小サイズでは小さすぎる面は潰れてしまうからです。
全ての交差線を選択してCtrl+8を押して複合パスを作成してください。

交差線を描く

複合パスと輪郭の両方を選択してパスファインダーパレットから分割を選んでください。
右クリックをしてオブジェクトのグループを解除します。



Step5:色を付ける

色を付ける

色分けした四角をいくつか用意して簡単なパレットを作り、これらの色を使って個々のシェイプに色を付けていってください。

色を付ける

全ての部分に色が着いたら、デザインを複製してください。
この平坦な色のヴァージョンは後に他の完成ファイルと一緒にパッケージにします。
作成した色見本をコピーして、それぞれをかすかなグラデーションに変えて行きます。

色を付ける

先ほどの平坦な色の部分を全て同じ色のグラデーションに置き換え、グラデーションツールを使って各シェイプ毎にグラデーションの方向を整えて行きます。

色を付ける

メインとなるロゴのシンボルは完成しました。



Step6:文字を作成

次は文字です。
サンセリフのいくつかの書体をレイアウトして形を比べてみます。
Rという文字の足がまっすぐで、より写実的なものがモダンでスタイリッシュな見た目なので、直線的なロゴシンボルに合うように思います。

文字を作成

これらのフォントの中から選んだのはFuturaという書体です。
シャープな先端がレイヴンを描くのに使った真っ直ぐなラインと良く合っています。



Step7:文字をロゴを合わせる

文字をロゴを合わせる

それでは、文字とロゴを合わせて行きます。
レイヴンの向きを文字と反対側にするとレイヴンと文字の間に奇妙なスペースが出来てしまいますが、その逆にするとレイヴンの頭と胸が最初の文字を自然に包み込みます。

文字をロゴを合わせる

最後に、文字のサイズをシンボル全体のサイズの1/3にしてバランスをとります。
それぞれの文字間の距離を広げて、レイヴンと最初の文字の間の距離と同じになるように、トラッキングを調整します。

文字をロゴを合わせる

フルカラーのロゴがほとんどの場合に使用されるメインとなるデザインですが、平坦ヴァージョンやモノトーンヴァージョンも極小サイズ用やあるいは黒の背景用として常に作成しておくべきです。



Step8:完成

完成

出来あがった全てのデザインはファイル形式を変換して一つのパッケージとしてまとめて顧客に納品します。
最後の画像は、フルカラーのメインとなるロゴ、平坦ヴァージョン、モノトーンヴァージョン、それに、ウェブサイトデザインや名刺、ステイショナリーなどといった追加のアイテムに使用できるキュービズムの模様です。



引用:Web Design Library 著者:Blog.SpoonGraphics… 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

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