DesignTips > テクスチャ デザインパーツ > コルクボードのイラストデザイン(イラストレーター)

コルクボードのイラストデザイン(イラストレーター)

コルクボード風のイラストデザイン(イラストレーター)

イラストレーターでコルクボード風のイラストデザインをご紹介します。

コルクボード風のデザインを作ってみたい!そんな方におすすめのチュートリアルです。コルクボードはwebデザインやチラシ、バナーなど色々なデザインに活用できそうですね。

コルクボードは写真で読み込んで作る方法もあるのですが、今回はイラストレーターの[効果]で一からコルクボードを作ります。チュートリアルをしっかり読んでコルクボードのデザインの作り方をしっかりマスターしてください。

Step01 コルクボードの原型を作る

コルクボードの原型を作る

コルクボードの原型を作ります。

図のように[長方形ツール]でアートボードと同じ大きさの四角形を描きます。例では800×600px、カラー#A67C52で作成しています。

Step02 効果→アーティスティック→粒状フィルム

効果→アーティスティック→粒状フィルム

長方形を選択したまま、[効果→アーティスティック→粒状フィルム]を選択。

Step03 粒状フィルムで設定

粒状フィルムで設定

[粒状フィルム]で上図のように設定します。

Step04 粒状フィルムが適用された

粒状フィルムが適用

四角形に粒状フィルムが適用されました。

これでも十分コルクボード風のデザインに見えますが、もう一工夫します。

Step05 レイヤーをロック

レイヤーをロック

粒状フィルムのかかったデザインのレイヤーをロックします。

レイヤーをロックする理由は、のちの作業で誤移動を防ぐためです。

Step06 もう一枚同じ大きさの長方形を重ねる

もう一枚同じ大きさの長方形を重ねる

同じ大きさの長方形を重ねます。

レイヤーをロックした長方形の上に、Step01と同じ大きさ、同じ色の長方形を[長方形ツール]で作成します。

Step07 効果→テクスチャ→テクスチャライザー

効果→テクスチャ→テクスチャライザー

長方形に効果をつけます。

長方形を選択し、効果→テクスチャ→テクスチャライザーを選択。

Step08 テクスチャライザーが適用された

テクスチャライザーが適用

長方形にテクスチャライザーが適用されました。

しかし、これではコルクボードには見えないですね。修正します。

Step09 透明度を20%に変更

コルクボードにするため透明度を20%に変更

長方形を選択し、透明パネル(ファイル→透明)で透明度を20%に変更します。長方形に透明度が適用され、テクスチャライザーの効果がなめらかになりました。

Step10 コルクボードの完成

コルクボード風のイラストデザイン完成

これでコルクボードのデザインが完成しました!

今回はコルクボードの質感をよりリアルにするため、効果の異なるレイヤーを重ねる手法をとりました。面倒くさい方はStep04の粒状フィルムの段階で終えても良いかと思います。Step04でも十分コルクボードに見えますよね。

また、今後の作業のためにレイヤーにロックをかけておいてください。

Step11 コルクボードの上にメモ用紙のイラストを描く

コルクボードの上にメモ用紙のイラストを描く

コルクボードのデザインの上にメモ用紙のイラストを描いていきます。

メモ用紙は二枚の紙が少しずれるようにペンツールで描きます。長方形ツールで描いても良いのですが、ちょっといびつな長方形を描くため例ではペンツールで描いています。

Step12 複数のメモ帳を描く

複数のメモ帳を描く

Step11を参考に複数のメモ帳のイラストを描きます。

メモ帳の色を変えるとカラフルなデザインになります。

Step13 メモ帳にドロップシャドウを適用

コルクボードのメモ帳にドロップシャドウを適用

リアルな感じを出すためにメモ帳のイラストに影をつけます。

一番上のメモ帳を選択し、[効果→スタイライズ→ドロップシャドウ]をクリックします。

関連記事:イラストレーターで文字に影をつける方法

Step14 ドロップシャドウの設定

ドロップシャドウの設定

[ドロップシャドウ]ダイアログボックスで上記のように設定します。

関連記事:イラストレーターで文字に影をつける方法

Step15 ドロップシャドウが適用された

ドロップシャドウが適用

ピンクのメモ帳にドロップシャドウが適用されました。デザインに奥行きが出ましたね。

Step16 全てのメモ帳にドロップシャドウを適用させる

コルクボードの全てのメモ帳にドロップシャドウを適用させる

同様にすべてのメモ帳のイラストにドロップシャドウを適用させます。

Step17 コルクボードにさすピンを作成する

コルクボードにさすピンを作成

続いてコルクボードのデザインにピンを作成します。

楕円形ツールで上図のように正円を描きます。

Step18 ピンをリアルにする

ピンをリアルにする

ピンをリアルにします。

まず、正円を選択し上図のようにグラデーションを適用させます。[円形]を忘れずに。続いて、影をつけます。

円を選択し、[効果→スタイライズ→ドロップシャドウ]を選択。[ドロップシャドウ]ダイアログで上図のように設定します。

ピンがリアルになりました!

Step19 他のメモ帳にもピンを配置

コルクボード上の他のメモ帳にもピンを配置

作成したピンを他のメモ帳にも配置します。

あとはコルクボードに文字と花を配置してデザインの完成です。

コルクボード出来上がり!

イラストレーターで作るコルクボード風デザイン

コルクボードのデザインに文字と花を配置しました。

花の作り方については花のイラストの描き方(イラストレーター)を参考にして下さい。

なかなかいい感じのデザインですね。コルクボードもほどよくリアルにできてgoodだと思います。

関連記事:黒板のイラストの作り方(Photoshop)

この投稿文は次の言語で読めます: 簡体中国語, 英語, ドイツ語

付箋のイラストの作り方(イラストレーター)
罫線入りポストカードの作り方
イラストレーターで文字に影をつける方法
クラフト紙の背景テクスチャとヴィンテージ風デザイン
メダルバッジを作る方法(イラストレーター)
図形ツールで作るレースの作り方(イラストレーター)
いちごのイラストの描き方
ノートと破けたノートのイラストの作り方(イラストレーター)
3Dの球体にパターンとロゴを入れる方法(イラストレーター)