WordPressアイキャッチ画像作成
オリジナルで絵をデザインして掻くのも大変な時に、文字だけで画像作成すると簡単です。暇を見つけて立体化してみました。
Photoshop ccとかのほうが一般的でしょうけど、PhotoshopはFireworksではできないと分かったものを加工してもらうことはあっても、ほとんど触らないソフトなので、その方法もすぐ忘れてしまいます。というわけでFireworks CS6で加工します。FIreworksはMacromediaがAdobeに買収され、開発終了されているのでFireworks ccでもやり方は同じだと思います。
文字を傾かせる
「塗り」を黒、外枠の「描画部分」を深緑にしました。
文字にカーソルを合わせ右クリックして「数値入力変形」を選択します。
デフォルトだと「拡大・縮小」となっていますから、プルダウンメニューになっているので図のように「回転」を選択します。図では数値がすでに「-25」と入力されていますが、デフォルトでは「0」になっています。数値を入力すると右側が下がり、マイナスの数値入力で右側が上がります。
「属性の拡大・縮小」はその変形する画像が複数の属性を持つ要素を持つものも一緒に変形させるときに使うようですが、ここではチェックしてもしなくても変わりはありません。無視しても問題ありません。「塗り」「ストローク」共にどちらでも同じく変形されます。
テキストを画像に変換する
斜めにした文字を得るならここまでの手順で終わりですが、さらに立体的に加工するには文字を画像として扱えるように変換する必要があります。
画像の上で右クリックした表示されたメニューから「パスに変換」をクリックします。これで画像として扱えるようになります。Fireworksの場合、線が細くなってしまいます。文字の時の太さを太くしたい場合は、最上部の「編集」メニューから「テキスト変更の取り消し」を選択してテキストに戻して、字体を太い物に変更する必要があります。
遠近法の手前を大きくする
より立体化させるために手前を遠近法で見られるように大きくして立体感を出してみます。加工するパスに変換されたテキストを選択して最上部「変更」メニューから「変形」→「ゆがみ」をクリックします。
黒い枠が現れるのでそれを広げてやると画像も広がってきます。左上、左下を広げてみました。逆に右上、右下を標準より小さくして立体的になりました。
三次元的に見えるように厚みを作る
マウスをツールの白い矢印の「ダイレクト選択ツール」合わせてクリックします。
Shiftキーを押しながら「S」「S」「L」の文字を選択します。全ての文字の中に青白い線が挿入されます。下にあるプロパティインスペクタの「フィルター」をクリックして「Photoshopライブ効果」を選択します。
「Photoshopライブ効果ウィンドウ」がポップアップ表示されます。
ここでさらにイフェクトが、かけられます。
すでに深緑の縁がついていますがそのさらに外側に赤いラインをつけます。
「線」を選択し、カラーに「赤」、サイズ、位置、不透明度など適宜設定して「OK」ボタンをクリックします。
塗りの黒が強い感じで軽めに黄色に変更しました。
ツールボックスの「ダイレクト選択ツール」を選択し、S、S、Lとシフトキー押しながら全て選択して、プロパティインスペクタの「フィルター」をクリックして「シャドウと光彩」→「シャドウ（ペタ塗り）」を選択します。
赤い部分の伸びている立体的が画像が得られます。赤い部分の「角度」とその長さを表す「距離」を調節します。
バックに色をつけてできました。
