はてブとかBuzzurlなどの手書き風アイコンを10分で作ったチュートリアル

スポンサーリンク

hand-write-icons00
記事最下部にあるSBM(ソーシャルブックマーク)のアイコンを手書き風にしました。
Twitterでありがたい事に少し良評判頂いたのでチュートリアルを書いてみることにします。
評判いただいたのは物凄く意外でしたが。。

用意するもの

プリンター
スキャナー
ボールペン
コピー用紙
画像加工ソフト
(PCとかFTPとかは割愛)

(1分)元となる画像を印刷

hand-write-icons01
元となるSBMのアイコン画像を紙に印刷します。やや大きく取った方があとで加工しやすいです。

(3分)トレース

hand-write-icons02
別の紙に写し書き(トレース)します。ここでは「適当」を念頭に置きました。
Web上で手書き風に見せる為、というよりも性格です。Twitterは鳥の素材
だったのですが、面倒だったので適当に作成しました。
分かればいいじゃん、的な。

(1分)スキャン

hand-write-icons03
トレースしたSBMアイコンをスキャンします。私の場合はコピーと
スキャナー機能が一体になっているコピー機を使用したので楽でした。
ご参考までに、EPSONのPM-A820(2万くらい)です。
PNGでスキャンしました。

(3分)少し加工

hand-write-icons04
紙の部分は薄暗くスキャンされちゃったので白く加工し、大きさを変更しました。
ここも適当です。

(2分)アップロード&微調整

hand-write-icons05
アップロードして確認、必要があれば微調整します。ここまでで10分です。
環境によって時間差は間違いなく出ますけどそんなにかからないはずです。

気をつけたいこと

一応、印刷する時にアイコンを大きめにして印刷しました。その方が加工を加えた時に
適当さが嫌な目立ち方をしないと思ったからです。あとはとんとん拍子という感じです。
クオリティに拘らない方が「手書きアイコン」としてのクオリティは高くなる気がします。

加工法も様々あると思います。実際に色付けをするのもいいかもしれません。

他の方の事例

Twitterでフォロワー同士のFLA-FLIさんも手書き風アイコンを作成されています!
個人的に私よりもクオリティは高いと思いますのでコチラも参考にされてみてください。

参考:ブックマークアイコン作ってみた

無料ダウンロード

hand-write-icons06
縮小、加工前のはこんなどうしようもない画像です。こんなでよければアイコン素材を
無料配布します。ラインセンスはCCで。
ですが、使用するだけならリンクも何も必要ないです。

やっぱMITにしときます。。

再配布の時もリンクはいりませんが、クレジットは気が向いたら残してください。
では以下よりどうぞ。拡張子はzip、梱包ファイルはPNG1枚です。
加工はご自身でお願いします。

ダウンロード

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services