Transformation Grid — 変形グリッド —


アーティスト

今日はDSM-Setのデザインに関するTipsを取り上げます。

DirectSmileでは以下の3種類のフォントが使用出来ます。

      • システム・フォント
      • クリップ・フォント
      • ピクチャー・フォント

いずれのフォントを使用した場合でも、

      • テキストフレーム(赤線で表示されるフレーム)、
      • ピクセル変形グリッド(青線で表示されるグリッド)

が適用出来ます。

また、クリップ・フォントを使用した場合のみ、

      • クリップ変形グリッド(黄線で表示されるグリッド)

が使用可能になります。

今回のTipsはこれらのフレーム、グリッドの機能・違いについてです。
それでは実際のDSM-Setを使って説明しましょう。先ずは、DSM-Setを作成します。

  1. 背景画像を読み込む
  2. テキストフレームを描写する(初期設定でシステムフォントが選択されます)

始めにテキストフレームと、ピクセル変形グリッドの機能・役割についてご説明します。

テキストフレーム

テキストフレームの機能はとてもシンプルです。
フレームの大きさと表示されるテキストの大きさは連動しています。フレームを拡張すればそれだけ表示されるテキストのサイズが大きくなり、逆に縮小するとフレームの大きさに応じて表示されるテキストも小さくなります。

ピクセル変形グリッド

次にピクセル変形グリッドについて説明します。
*ピクセル変形グリッドを表示させるには、ウィンドウ左上のフレーム、グリッドボタンをクリックすることで表示出来ます。

ピクセル変形グリッドを使うと、表示するテキストを変形出来ます。フレームの四つ角、交差するポイントをドラッグしながら動かす事で、背景に合わせて画像を変形(歪める)する事が可能になります。
このフレームを使用すると、テキストのベクトルではなく、画像(フレームにて表示される部分)そのものを歪めるといった効果が得られます。

クリップ変形グリッド

最後にクリップフォント変形グリッドについて説明します。

先ほどと同様、背景を読み込み後テキストフレームを描写しました。フォント・タイプを「クリップ・フォント」に変更しました。
今回は用意したギャンブル用のチップコインをクリップとして使用します。


クリップ用変形グリッド(黄線のグリッド)を選択します。

すると、以下の様に初期設定のグリッドが表示されます。
ピクセル変形グリッドと同様に、グリッドの四つ角や交差ポイントをドラッグしながら動かす事で描写フレームを変形し、奥行きを出したり立体的にするなど描写が可能になります。

ここで、ピクセル変形グリッドと、クリップ変形グリッドの最大の違いをご紹介します。

  • ピクセル変形グリッドはフレーム画像自体に対しての歪みを表現します。
    また、レンダリングにより時間が掛かります。
  • クリップ変形グリッドはクリップフォントのベクトル(クリップを表示するためのパス)自体に対しての変形を行います。ですので、表示されるクリップ自体が変形の影響を受けて歪むわけではありません。つまり、クリップ画像自体は基本的に登録状態と同じ画像が配置されるという事になります。
    また、レンダリング時間はより短いです。

この違いは以下のサンプル画像がご理解頂きやすいかと思います。以下の2つのDSM-Setデザインは、それぞれのグリッドを使用して同様の変形を加えています。

では、より拡大して見てみましょう。

クリップフォントを使用したデザインの場合は、基本的なフレームに対する変形はクリップ変形グリッドで行い、奥行きや立体具合を追加したい場合に更にピクセル変形グリッドを使用して効果を追加するという方法が最適です。

これで出来上がりです!

これらの違いをご理解して頂いた上でデザインを行なって頂くと、よりリアルで処理に適したSetを作成して頂けるかと思います。

以上、今回のTipsでした:-)

広告

DSM Kerningについて

今日はダイレクトスマイルのSetのデザインについてご紹介します。
DirectSmileはパーソナライズイメージの作成に、3つの異なるテキスト描写方法を提供しています。

  • システムフォント
  • クリップフォント
  • ピクチャーフォント

フォントを使う場合には、どのソフトでもそうですが、DTPにおいてカーニングが非常に重要なポイントになります。
これはパーソナライズイメージにおいても同じです。特にパーソナライズイメージを作成する場合には、データベースと連動させて画像の自動作成を行うので、それこそ1文字からn文字までに対応する必要があります。

基本的にはダイレクトスマイルではフォント自体の持つカーニング設定を継承して使用します。多くの場合はこれが最適な表示結果をもたらすからです。ただし、フォント自体のカーニングは、文字を回転させたり、垂直の表示位置をランダムに変更させるなど、パーソナライズイメージ独自の背景画像にテキストを馴染ませる為の特別な効果を適用することには対応していません。この様なケースに対してはダイレクトスマイルがカーニングを作成することで実現させています。これがDSMカーニングです。

今回はこのDSMカーニング(Kerning)について詳しく紹介します。

まず初めにフォントそのもののカーニングを適用した場合は以下の様に表示されます。

フォント自体のカーニングを適用した場合

赤線部分が文字と隣り合う文字がどこから配置されるのかを明示しています。

次にDSMカーニングを適用した場合です。

DSM_Kerning

ご覧のとおり、文字間隔が最小限に抑えられているのが分かります。
これは文字と文字が重なり合わない最小限の間隔を適用しているからです。

一見最適な様に見えますが、これは文字の組み合わせによっては思わぬ結果を招くことになります。特にこの現象が起きるのはクリップフォントを使用している場合です。
例えば”_”(アンダースコア)を使っていると、文字の表示は以下の様になります。

この場合、アンダースコアはeともaとも重なり合わないので、文字の真下に表示されることになります。
これをクリップフォントで表示すると、以下のようになります。

これは決して望ましいプレビューではありませんね。
この様な場合は、「文字間の自動調整」オプションを有効にする事でより良い表示結果を得ることが可能になります。

特にこのケースではDSMカーニングを適用しているので、文字間隔の調整のしきい値を変更することでさらに良いプレビューが得られるようになります。

もちろん、単にDSMカーニングをオフにして、フォント自体のカーニングを使用することでも同様の結果を得ることは可能ですが、前述のとおり、文字幅の自動調整や文字の回転などといった機能には対応していないので、そのような効果(エフェクト)を使用している場合には文字間の自動調整オプションを使って対応することをお勧めします。

最後にDSMカーニングを使用する場合の利点を付け加えます。それは、レンダリングスピードです。

これは実際に試していただくのが一番だと思いますが、DSMカーニングを使用しない場合は、より画像処理に時間が必要となります。その理由は、フォント自体のカーニングデータを元にして、そのデータをパーソナライズイメージ様に変換するというバックエンドの処理が必要となるからです。

ちょっと駆け足でしたが、これが以上がDSMカーニングの紹介でした。

ダイレクトスマイルに携わるデザイナーの皆さんのお役に立てば幸いです。

NOG