ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeグラフィック講座 > 3Dベクトルレトロバッジの作成方法

3Dベクトルレトロバッジの作成方法

投稿日:2015年10月2日   ソフトウェア:Illustrator

このチュートリアルでは、Illustratorで3Dベクトルレトロバッジの作成方法を紹介します。

Step1:はじめに

フォトショップやイラストレーターでのベクトルバッジ作成は初心者のデザインコミュニティにおいてとても人気があります。ただ、3Dベクトルバッジはまだまだまだ新しい技術で、あまり上手に活用されていません。またベクトルバッジの説明も、文章の分かりやすさは書いているデザイナーに依存しています。私たちは他のデザイナーやブログ読者がベクトルバッジをもっと簡単に素早く作成できるようにしたいのです。

このベクトルバッジはAdobe Illustrator CS6を使い3分で作成しました。あなたは私より早くベクトルバッジを作ることが出来るようになり、余った時間をデザインへ費やすことができます。その結果あなたの仕事にイマジネーションとクリエイティブを追加できるようになります。

旧バージョンでは同じ方法で作ることは難しいでしょう。奥行きのある3D画像はまるでイリュージョンのようですよね。

3Dレトロベクトルバッジの作成方法

完成品:
はじめに



Step2:新規ファイルを開く

はじめは基本通りにファイルメニューから新しいファイルを開き、新しいドキュメントを選択し、ドキュメントの寸法を選択してください。これはイラストレーターでのチュートリアルですが、サイズ変更はアウトプットに影響ありません。今回は Web 最適化のために 600px で作成しています。

新規ファイルを開く





Step3:ジグザグの円を作成

楕円をアートボード上に書くか、ボードをクリックして 290px を選択してください。

ジグザグの円を作成

円柱をレトロスタイルに変更します。「効果」 >「パスの変形」 > 「ジグザグ」で次の値を適用させます。

ジグザグの円を作成

大きさ = 10px
折り返し = 4px
ポイント = 滑らかに

フォトショップではコピー&ペーストまたは複製を行う際、複製とペーストはオブジェクトの全面に行います。間違えた場合に備えて、複製した形は覚えておいてください。複製やペーストは常に前面にあるので、間違えて設置しないためにも、すべての作業が完了してから効果を付けましょう。

ジグザグの円を作成

メモ:ショートカットキーのCtrl+2でオブジェクトを固定することができます。



Step4:輪郭を装飾する

3D効果をレトロバッジに加えるのは簡単です。F5ボタンを押すかウィンドウメニューのブラシパレットを選択します。そしてブラシオプションからその他のライブラリーを選び「ブリストルブラシ」を選択します。

輪郭を装飾する

ストロークを選択した値に従って変更し、ストロークカラーもバックグラウンドのデザインやカラーに適したものに変更してください。今回は「絵筆ブラシ」から「丸筆-シカの爪」を選びました。

輪郭を装飾する

ベースシェイプとバックグラウンドシェイプをデザインに加えると、先ほど作成したデザインに3D描写が現れます。解説のはじめに作ったレトロシェイプのロックを Alt+Ctrl+2 で解除し、Ctrl+F で複製します。図を #231F20 の色で塗りつぶし、アウトラインを#FFFFFFで塗ってください。図をバッジアウトラインの中心にリサイズします。

輪郭を装飾する



Step5:仕上げ

これでデザインはほとんど完成です。もう一度だけ図の塗りつぶしとアウトラインを複製します。今度は#EF3C39で塗りつぶし、およそ15%-20%でリサイズしてください。

仕上げ

ベクトルバッジの縁

仕上げ



Step6:完成

レトロバッジの最終形態

完成

今回の解説からテクニックを学びとっていただけましたか?この他にもデザインコンセプトを少し紹介しておきます。

完成

2012年版 ハローウィーンスペシャルロゴ

完成

この記事を気に入ったなら、ほかのSNSメディアでシェアしてもらえると嬉しいです。またどの解説がよかったか教えていただければ、次回の記事の参考にさせてもらいます。



引用:Web Design Library 著者:animhut 翻訳:山下



スポンサードリンク

コメント

ランダム記事5件

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