2011年10月3日月曜日

手描風の説明画像の作り方

スポンサーリンク

このブログでたまに使っている、説明画像の作り方のポイントを記事にしてみます。特に大した事はしていないのですが、ポイントとして意識している事はありますので。


前提


いきなりですが、この作り方をするにはベクタデータ(いわゆるパス)をつかえるほうが楽に作れます。

私はFireworksCS4を使っていますが、もちろんillustratorでも問題ありません。また、マウス操作に慣れていたりペンタブレットがある場合はPhotoshopでも楽につくれるかもしれません。

作り方のポイント


作り方のポイントはたった2つ簡単。

手描き風の線とフォントを使うことです。

私の場合、どちらかと言えばフォントよりも線を重視しています。フォントは堅いゴシック体でも、線が手描きであれば手描きの印象が強くなります。逆に線が機械的でフォントが手描き風だと、手描きの印象は薄ると感じています。

作例


それでは、作例を挙げて説明をしてみます。

手描き風のフォント

手描き風のフォントを使う

このブログでは、手描き風のフォントとしてあんずもじを使っています。女性的なフォントですが、きつい可愛らしさなどが無くすっきりとしているので好んで使っています。
あんずもじ以外の手描き風のフォントを使っても、もちろん効果はあります。



ゴシック体を使うと堅い印象になります。加えて、WEBサイトではゴシック体が通常のフォントとして使われる事が多いため、違和感が無さ過ぎて印象が弱くなります。

手描き風の線

手描き風の線

線を描いて図と文字を関係づける際、線の表情が重要になります。慣れや求める表現の問題もありますが、個人的にはベクターデータを使います。ベクターであれば適度にマウスで描いた線を補正してくれますし、後の修正も楽だからです。

時として意図しない方向に補正されますが、それも味として活かせます。

ベクトルパスツ−ルの精度

Fireworksでは、ベクトルパスツールに「精度」の項目があります。どの程度描いた線を再現するかという意味合いです。精度が高ければ描いた線のままベクターデータになりますし、低ければ簡略化したポイントで線画引かれます。

個人的には、精度は1の方が見た感じがよく修正もしやすいのでおすすめです。

手描き風の囲み円

手描き風のか囲み円の作り方

指定する部位を囲む円は、綺麗すぎたり適当すぎたりすると見栄えが悪くなります。手描き風の円を描く場合は、曲線だけではなく線の端を重視するとよいでしょう。

なお、画像で示したのは一例です。基本的には自分で紙に書いた円を参考にした方が、より個性的な手描き感がでます。本人が描いたものをまねるのですから当然ですね。

比較


以上の事柄を比較するために一枚の画像にしました。



下段の左右を見比べて見てください。
片方は文字が手描き風で、片方は線が手描き風。結果としてどちらが手描きのイメージが強いでしょうか?私は線だと感じています。ですので、フォントがどうであれ手描き感を出す場合には線を重視しています。

結び


簡単な記事なのですが、思ったよりも大掛かりな感じになってしまいました...。
とはいえ、記事のテーマともかぶりますがちょっとした印象を残したり強化するためには、ある程度手間をかける必要があります。本来の意味とは少々違うかもしれませんが、

神は細部に宿る

ともいえるでしょう。捕われすぎてもダメですが。細部は全体を構成するためにあり、全体は細部無しには構成され得ないのですから。一方のみに集中する事はバランスを欠きます。

なお、今回の記事はあくまで個人的な間隔による記事です。もちろん「そんな感じ」だけではなく上記以上に詳しく説明はできますが、手描きに見えないのであれば説明は無意味です。上記のサンプルが、私の意図した手描き風に見えるならば幸いです。


スポンサーリンク

2 件のコメント :

  1. はじめまして

    Fireworksでベクトルパスが使えることを初めて知り、とても参考になりました。

    返信削除
  2. はじめまして!コメントありがとうございます。

    私がFireworksを好んで使う理由でもありますが、WEBで使うことに限れば、ベクターを含めて大概の事ができます。
    画面下部に各種設定が弄れる場所もあり、操作性もよいと思います。

    反面、Fireworksのベクトルパスを使ったデータをillustratorに貼付けるとビットマップとして扱われたりと、互換性と言う意味では難があるようです。
    逆方向なら問題ないのですが。
    (FWcs4とAics5間の事なのでバージョンの問題かもしれませんが)

    とはいえ、便利で好きなソフトに違いありません。

    記事をお読みいただきありがとうございます。

    返信削除