アンブログ | WEB制作会社アンのメンバーがお届けする情報メディア

アンブログ/株式会社アンのスタッフブログ

デザイン ノウハウ

手書きした文字やイラストをトレースして素材にする方法

新人デザイナーの杏です。
WEBデザインで、最近手書きデザインが増えてきていることをご存知でしょうか?

手書きの文字やイラストを使うと、他のサイトとはちょっと違った味が出せたり、親近感を持たすことができるようになります。

デジタルな文字があふれたWEBの世界で、手書きという柔らかさは何か親しみやすさを与えるのではないでしょうか。

また、いい素材がないなあと思う時に自分のオリジナルの素材が作れるので使えたらとても便利ですよね。

今回は、意外と簡単な!手書きの文字を、WEBデザインに取り入れるための方法をご紹介します。


◆用意するもの

紙・ペン・撮影するためのスマホやカメラ・illustratorの使える環境(今回はCCでご説明します。)

①紙とペンで書きたい文字を書く。

まずは、書きたい文字を紙に書きます。
もちろんイラストなどの絵でもOKです。好きな文字を書きます。
どんなペンでも構いませんができれば文字がはっきりするマジックなどで書くと
後々の仕上がりがきれいになります。

②カメラ撮ってillustratorで写真を開く。

書いた文字を、カメラで撮影し、illustratorで開きます。

撮影時のポイントは、できるだけ陰などが映らないように注意することです。
映っても後から消せば問題はないのですが少し手間がかかります。

③画像をトレースします。

illustratorに写真を取り込み、画像をクリックすると右のバーに「プロパティ」>「画像トレース」が出てきますのでその「画像トレース」>「デフォルト」をクリックします。
画像がデータとして取り込まれるようになります。

写真の状態などによって、うまく白黒にならない場合や文字がうまく表示されない場合がありますので
「画像トレースパネル」>[詳細] から
しきい値やパス、コーナーやノイズなどを調整して、一番自分が理想とする画像の状態を作ります。

 



ちなみに今回は上記の画像のように調整しています。

④拡張する

拡張とはとエースしたデータをパス化することで、この作業をしないとトレースしても編集ができない状態なので必ず拡張の作業を行います。
先ほどのトレースボタンがあったに「拡張」ボタンがありますので拡張を押します。
これで、編集作業ができるようになります。
拡張をすると、上記のようにパスに置き換わった文字が選択されるようになります。

⑤ダイレクト選択ツールに持ち変える。

ダイレクト選択ツールに持ち変えて、白いところをクリックします。
塗りが「白」線「なし」になっていることを確認します。

⑥ [選択]>[共通]>[塗と線]を選ぶ

⑤の状態のまま、 [選択]>[共通]>[塗と線]を選びます。
すると、塗りが「白」線「なし」のパスがすべて選択される状態になります。
その時点で[Delete]を押します。

黒いパスだけが残ります。

⑦いらない部分を消す

ダイレクト選択ツールでいらない部分を消していきます。
今回の場合は、画像下の黒い影の部分がいらない部分なのでここを消すと完成です。

⑧完成

完成はこちらです。所要時間は5分ほどであっという間にできました!

ぜひ素材を利用して、いろんなWEB制作に活用してください。

まとめ

いかがでしょうか。最初は少しややこしいかもしれませんが、コツさえつかめばこの作業はとても簡単です。
ぜひ、いろんな素材を使ってオリジナルコンテンツを作ってみてください。