グラデーション枠のついた文字
Skypeのヘルプを見ると文字の枠がグラデーションになっているロゴを見ることができます。
これをFireWorksで作成してみたいと思います。
新規ドキュメントを作成します。ここでは 700px , 700px で作成します。 次に少々大きめに枠の柄となるグラデーション矩形(#006699から#00FFFFまで)を設置します。
次に肝心の文字を設置します。フォントは太めのモノのほうが見栄えは良いでしょう。
小塚ゴシックProBを使用してフォントサイズを80に、文字色を白とします。
更にこの文字レイヤをコピーします。
レイヤの部分でテキストレイヤを「新規ビットマップイメージ」にドラックするとコピーが可能です。
画面で先ほど作成した矩形の中にフォントが入っていることを確認してください。
このような状態になっているかと思います。
コピーしたテキストレイヤ2つが重なっていることが前提になります。
下のテキストレイヤを選択して、テキストの外郭線の幅を設定します。
下図のパネルを出すには外郭線の色をクリックして「ストロークオプション」をクリックします。出てきたパネルのセレクタで「なし」から他を選択したものです。
ここでは「ブラシのサイズ」に15、チップのスライダを調節してエッジのシャギーが消えるように設定してください。
色は白のままです。
次に、先ほど外郭線を設定したテキストレイヤと一番下の矩形レイヤだけを選択し(CTRLキーを押したままレイヤを選択することで複数のレイヤを選択することができます。)
メニューバーの「修正」から「マスク」>「マスクとしてグループ化」を行い先ほどの2つのレイヤをマスクグループとします。
これで完成です。
文字色は一番上の文字レイヤで実現しています。ですから現在は白になっていますが、変えたい場合は一番上の文字レイヤの塗り色を変えてあげれば自由に変更が可能です。
下の例では一番上の文字色を黄色に変更したものです。結構簡単に変更がきくことがFireWorksの利点でもあります。
テキストに直接外郭線の設定も可能ですが、外郭線ブラシの設定だけでは上記のような上から下へのグラデーションのようなイメージにはなりません。一手間かけるだけで表現の幅が大きく広がります。
新規ドキュメントを作成します。ここでは 700px , 700px で作成します。 次に少々大きめに枠の柄となるグラデーション矩形(#006699から#00FFFFまで)を設置します。
次に肝心の文字を設置します。フォントは太めのモノのほうが見栄えは良いでしょう。
小塚ゴシックProBを使用してフォントサイズを80に、文字色を白とします。
更にこの文字レイヤをコピーします。レイヤの部分でテキストレイヤを「新規ビットマップイメージ」にドラックするとコピーが可能です。
画面で先ほど作成した矩形の中にフォントが入っていることを確認してください。
このような状態になっているかと思います。
コピーしたテキストレイヤ2つが重なっていることが前提になります。
下のテキストレイヤを選択して、テキストの外郭線の幅を設定します。
下図のパネルを出すには外郭線の色をクリックして「ストロークオプション」をクリックします。出てきたパネルのセレクタで「なし」から他を選択したものです。
ここでは「ブラシのサイズ」に15、チップのスライダを調節してエッジのシャギーが消えるように設定してください。
色は白のままです。
次に、先ほど外郭線を設定したテキストレイヤと一番下の矩形レイヤだけを選択し(CTRLキーを押したままレイヤを選択することで複数のレイヤを選択することができます。)
メニューバーの「修正」から「マスク」>「マスクとしてグループ化」を行い先ほどの2つのレイヤをマスクグループとします。
これで完成です。
文字色は一番上の文字レイヤで実現しています。ですから現在は白になっていますが、変えたい場合は一番上の文字レイヤの塗り色を変えてあげれば自由に変更が可能です。下の例では一番上の文字色を黄色に変更したものです。結構簡単に変更がきくことがFireWorksの利点でもあります。
テキストに直接外郭線の設定も可能ですが、外郭線ブラシの設定だけでは上記のような上から下へのグラデーションのようなイメージにはなりません。一手間かけるだけで表現の幅が大きく広がります。
2008年 11月 3日ドキュメント作成
2008年 11月 4日ドキュメント更新