Illustratorでハンコ風デザインの作り方。かわいい消しゴムスタンプを作ろう!

Illustratorでハンコ風デザインの作り方。かわいい消しゴムスタンプを作ろう!

姐さん

姐さん

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

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

「ググってわからないこと」が一瞬で解決するかも?

Webデザインを効率的に学びたい転職・就職を目指している誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します!

▼少しでも気になる方は、ぜひ公式サイトをご覧ください!
デジタルハリウッドSTUDIO by LIG

モチーフを選ぶ

ハンコ風デザインのモチーフ画像

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

フリーのイラスト素材サイト

自分でモチーフを作れない方は、無料でダウンロードできるフリー素材サイトから選ぶのが手っ取り早いかもしれません。

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

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

 
Illustrator「効果」→「パスの変形」→「ラフ」

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

 
Illustratorラフ設定画面

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

 
Illustratorラフでギザギザに設定したイラスト

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

かすれの加工をする

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

インクがかすれたようなイメージ素材

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

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

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

「パスファインダー」→「前面オブジェクトで型抜き」

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

 
スプレーのオブジェクトで背面のオブジェクトが貫かれた複合シェイプ

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

不透明マスクを使う場合

Illustrator「不透明マスクを作成」

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

 
「クリップ」のチェックをはずした画像

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

 
不透明マスクを使ったおばけ画像

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

比べてみると・・・

11

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

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

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

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

12

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

Photoshopでさらに質感をだす

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

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

 
13

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

 
14

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

 
15

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

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

 
16

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

 
17

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

 
18

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

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

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

19

設定はこんな感じで……

20

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

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

おまけ

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

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

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

 
働きながら♪ 授業の合間に♪ Webデザインを勉強するなら……デジタルハリウッドSTUDIO by LIG

よくある質問

Illustratorでハンコ風スタンプを作成する手順は?

モチーフを作成(フリー素材でも可)し、「パスの変形」機能で手彫り感のあるラインにします。その後「パスファインダー」または「不透明マスク」機能を使い、インクのかすれを表現します。最後に好みの色にして完成です!

ハンコ風スタンプにするコツは?

なめらから線をガタガタにすること、塗りをかすれ加工にすることでスタンプっぽく加工することができます。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

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

このメンバーの記事をもっと読む
Illustratorの使い方 | 25 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL