消しゴムハンコ風のアイコンでデザインに温かみと可愛らしさをプラスする方法

消しゴムハンコ風のアイコンでデザインに温かみと可愛らしさをプラスする方法

姐さん

姐さん

WEBのデザインに限らず、手書き風、アナログ風のデザインは根強く人気ですよね!
今回はそんなアナログのテイストをWEBデザインに取り入れるべく、消しゴムハンコをPhotoshopで作ってみたいと思います。

1: 紙に描いたラフをスキャン

01

下書きからPhotoshopやsaiなんかで描いちゃってもいいと思います。
ヘタでもいい!ちょっと線がよれてるぐらいのほうが味が出るってもんです。

2: 自動選択ツールを使って白抜き部分を削除

02

自動選択ツールを使って色のつかない部分を削除していきます。
03
「隣接」にチェックが入っていないと白い部分が全部選択されてしまうので注意!

3: 黒く塗りつぶしてシルエットを確認

「透明ピクセルをロック」にチェックをいれて、塗りつぶし、シルエットを確認します。
04

線が薄かったり消し足りない部分はブラシツールと消しゴムで調整してください。

05

4: 好きな色に着色

パーツごとに選択して、「編集」→「カット(Ctrl+X)」→「特殊ペースト」→「同じ位置にペースト(Ctrl+Shift+V)」でパーツをレイヤーごとに分けておくと後々使いやすいと思います。
そんでもってまた「透明ピクセルをロック」して好きな色に塗りつぶします。
06
だいぶハンコっぽくなったかな??

5: よりハンコらしくしてみよう

絵の具ブラシなどを使って、ハンコのかすれ感を加えてみたり・・・
下に紙のテクスチャをひいてみたり、「フィルタ」→「スケッチ」→「ぎざぎざのエッジ」でより境界をギザギザにしてみたり・・・
「フィルタ」→「ノイズ」でザラザラ感をだしてみたり・・・
お好みでカスタマイズしてみてください!

とりあえずこんな感じで・・・いかがでしょうか?

07

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

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

この記事のシェア数

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

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