Illustratorでオリジナルの消しゴムハンコ風デザインを作成しよう


Illustratorでオリジナルの消しゴムハンコ風デザインを作成しよう

こんにちは。デザイナーの白浜です。
デザイナーの皆さまは、季節的にハロウィンやらクリスマスやらで可愛らしいデザインをする機会が増えるころではないでしょうか?

今回はそんな可愛らしいデザインと相性バツグンの消しゴムハンコ風のデザインをIllustratorで作る方法をご紹介したいと思います。

モチーフを選ぶ

01

消しゴムハンコの定番! ハロウィンモチーフを使用したいと思います。
この先ハンコっぽくなるように加工していくので、あまり線は細くないほうがいいです。

ツルっとしたラインを手彫っぽく加工する

このままだとハンコとしてはツルっとしすぎなので、デザインカッターを使い、削りだしたような加工をしていきます。

02

「効果」→「パスの変形」→「ラフ」で線をガタガタにします。

 
03

プレビューで確認しながら調整してみてください。ポイントを「ギザギザ」にしたほうが、より削りだす感じをだせるかと思います。

 
04

こんな感じです。手掘り感、でたでしょうか?

かすれの加工をする

スタンプ独特の風合いをだすために、インクがかすれたような加工をします。

05

素材からスプレーを吹き付けたようなオブジェクトを用意しました。

こちらを使って2通りのやり方でかすれを表現してみたいと思います。

パスファインダーを使う場合

06

スプレーが上になるようにオブジェクトをかさね、「パスファインダー」→「前面オブジェクトで型抜き」をします。

 
07

スプレーのオブジェクトで背面のオブジェクトが貫かれた複合シェイプができあがりました!

不透明マスクを使う場合

08

「ウィンドウ」メニューから透明パネルをだして、右上のメニューから「不透明マスクを作成」を選択します。

 
09

そのままだと全部透明になってしまうので、「クリップ」のチェックをはずします。

 
10

すると、こんな感じになりました。

比べてみると・・・

11

同じサイズのオブジェクトを使っているのですが、結果が随分違います。不透明マスクのほうが穴ぼこになってる範囲が広いですね。

わたしはパスファインダーで完全に抜いてしまったもののほうが、よりハンコっぽくて好きなのですが、不透明マスクだとやり直しや調整が効くので便利だったりもします。

このあたりはお好みでいろいろ試してみてください。

色を変えたりしてみると・・・

12

こんな感じになりました。

Photoshopでさらに質感をだす

ここからは応用編で、Photoshopに移して更に質感をだしてみたいと思います。

まずはIllustratorのオブジェクトをコピーしてPhotoshopにペーストします。スマートオブジェクトにしておけば、後からサイズを変えたいときに劣化しないで済みますね!

13

レイヤースタイルのカラーオーバーレイを使えば、後で色を変更するときも簡単です。

 
14

上にレイヤーを1枚追加して、水彩風のブラシで塗っていきます。

 
15

レイヤーモードを「スクリーン」、不透明度を64%にして、下のレイヤーでクリッピングマスクしました。

ここで1つ・・・。クリッピングマスクをかけたとき、かけたい方のレイヤーにカラーオーバーレイとかグラデーションオーバーレイがかかっている場合、上のレイヤー消えちゃう!? ってことありませんか?

 
16

わたしは長いことこの対処法がわからず、クリッピングマスク用に上にオブジェクトを増やしたりなど面倒くさいことをやっていたのですが、ここで設定ができました。

 
17

レイヤースタイルの高度な設定の中の「内部効果をまとめて描画」にチェックをいれ、逆に「クリップされたレイヤーをまとめて描画」のチェックを外します。

 
18

これで、カラーオーバーレイの上にクリッピングマスクをかけても、上のレイヤーが消えなくなります。

わたしはこっちをデフォルトにしておいてほしいのですが・・・。大元から設定できるんですかね? 今度調べてみます。

後は、ドロップシャドウの描画色をオブジェクトと同じ色にして、ノイズで周りをギザギザにしてみたり。

 
19

設定はこんな感じで・・・

 
20

こんな感じになりました。

いかがでしょうか?だいぶ雰囲気でたでしょうか?

おまけ

もろもろ自分で作業するのかったるいっっ!!って方は・・・ハンコデザイン専門の素材サイトをご紹介します。

  • ハンコでアソブ

以前にも紹介させていただいたのですが、こちらの素材はすべて透過pngになっていてとても使い勝手がいいです!数も多くてかわいい!やったね!

それではまた、よいハンコライフを~!

この記事を書いた人

姐さん
姐さん デザイナー 2010年入社
デザイナーの白浜です。ウェブデザイナーとして日々修行中。マンガと音楽とお米が好きです。よろしくお願いします。

こちらもおすすめ

10倍ラクするIllustrator仕事術 【増強改訂版】 CS5/CS6/CC/CC2014対応 ~ベテランほど知らずに損してる効率化の新常識

10倍ラクするIllustrator仕事術 【増強改訂版】 CS5/CS6/CC/CC2014対応 ~ベテランほど知らずに損してる効率化の新常識

  • 著者鷹野 雅弘,茄子川 導彦,鈴木 ともひろ
  • 価格¥ 2,570(2015/12/17 11:54時点)
  • 出版日2014/10/18
  • 商品ランキング2,075位
  • 単行本(ソフトカバー)256ページ
  • ISBN-104774167967
  • ISBN-139784774167961
  • 出版社技術評論社